/* Musicians' Journal Advertising — front-end slot styling.
   Neutral class names (no "ad"/"banner") so ad-blockers don't hide legit
   first-party sponsor placements. Space is reserved before the creative loads
   to avoid layout shift. */

.mj-slot {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	/* Reserve height using the reference creative ratio while loading. */
	aspect-ratio: var(--mjslot-w, 970) / var(--mjslot-h, 120);
	max-width: calc(var(--mjslot-w, 970) * 1px);
}

/* Once a real creative is in, let the image dictate height. */
.mj-slot.is-loaded {
	aspect-ratio: auto;
	height: auto;
}

/* Subtle border + shadow on the creative itself to blend with the site's cards. */
.mj-slot.is-loaded .mj-slot__link {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

/* No live ad → take up no space at all. */
.mj-slot.is-empty {
	aspect-ratio: auto;
	height: 0;
	margin: 0;
	overflow: hidden;
}

.mj-slot__link {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}

.mj-slot__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Vertical sidebar unit: constrain width on desktop, and on mobile reserve the
   horizontal creative's ratio so the mobile swap doesn't jump. */
.mj-slot--home_sidebar {
	max-width: calc(var(--mjslot-w, 300) * 1px);
}

@media (max-width: 767px) {
	.mj-slot--home_sidebar {
		aspect-ratio: var(--mjslot-mw, 320) / var(--mjslot-mh, 100);
		max-width: 100%;
	}
	.mj-slot--home_sidebar.is-loaded {
		aspect-ratio: auto;
	}
}

/* ---- Homepage sidebar layout -------------------------------------------
   When a live sidebar ad is rendered inside the post grid, reflow the grid
   from 4 post columns to 3 + a tall sidebar column on the right. Scoped to
   #post-grid only, so the theme's other rows are untouched. Uses :has(), so
   it applies only when the sidebar column is actually present. */
@media screen and (min-width: 1025px) {
	#post-grid:has(.mj-slot--home_sidebar) {
		display: grid;
		grid-template-columns: repeat(3, 1fr) minmax(260px, 320px);
		align-items: start;
	}
	/* Neutralise the theme's percentage widths for grid children. */
	#post-grid:has(.mj-slot--home_sidebar) > .col {
		width: auto !important;
	}
	/* Sidebar occupies the 4th column, spanning all post rows. */
	#post-grid:has(.mj-slot--home_sidebar) > .mj-sidebar-col {
		grid-column: 4;
		grid-row: 1 / span 50;
	}
}

/* On smaller screens the grid returns to normal flow and the sidebar ad shows
   as a full-width horizontal unit (its mobile creative). */
@media screen and (max-width: 1024px) {
	.mj-sidebar-col {
		width: 100%;
	}
}

/* ---- Homepage header ad ---------------------------------------------------
   Sits inside .header-inner, between the tagline (left) and the fixed Menu
   button (right), top-aligned. Only rendered on the front page when a live
   home_top ad exists. */
.mj-header-slot {
	align-self: flex-start;
	margin-left: auto;      /* push to the right, after the tagline */
	margin-right: 130px;    /* clear the position:fixed Menu button */
	flex: 0 1 600px;
	max-width: 600px;
	width: 100%;
}
.mj-header-slot .mj-slot {
	margin: 0;
}
/* On smaller screens the header is tight; hide the header ad there. */
@media screen and (max-width: 1024px) {
	.mj-header-slot {
		display: none;
	}
}