/* ============================================================
   Ad slot wrapper
   ============================================================ */

.ad-slot {
	text-align: center;
	margin: var(--space-4) 0;
}

/* Placeholder frame — legacy empty state (native / newsletter-sponsor units
   that have no house-ad treatment). Display slots now render a house ad. */
.ad-slot:not(.has-ad):not(.has-house-ad) {
	background: var(--bg-soft);
	border: 1px dashed var(--line);
	padding: var(--space-4) var(--space-5);
}

.ad-slot .ad-label {
	font-family: var(--font-ui);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.ad-slot .ad-placeholder {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: #aaa;
	font-style: italic;
}

/* Leaderboard 728×90 — deliberately fluid (100% of its parent), NOT capped
   with its own max-width. Unlike medium-rectangle/half-page (which are
   always sidebar/inline units, so a fixed 300px is correct everywhere),
   the leaderboard is dropped into a different container on every template
   — full-width .container on the homepage, the 720px reading column on
   article pages — and is meant to fill whatever width that container gives
   it. The homepage's wider rendering is correct, by design; the article
   page's edge-to-edge rendering was a template bug (no reading-column
   wrapper around the two leaderboard placements) — fixed in
   single-article.php, not here. Do not re-add a hardcoded max-width. */
.ad-leaderboard { min-height: 110px; }
.ad-leaderboard.has-ad { min-height: 0; }

/* Billboard 970×250 — the premium above-the-fold unit. Fluid for the same
   reason as the leaderboard (it fills whatever container it is dropped into,
   currently the homepage .container), so no hardcoded max-width here. The
   min-height reserves the 250px creative + label so the hero below it does
   not shift when a tag loads late; it steps down on small screens where a
   970-wide creative cannot render at full size anyway. */
.ad-billboard { min-height: 290px; }
.ad-billboard.has-ad { min-height: 0; }

@media (max-width: 900px) {
	.ad-billboard { min-height: 240px; }
}
@media (max-width: 600px) {
	.ad-billboard { min-height: 200px; }
}

/* Medium rectangle 300×250 */
.ad-medium-rectangle { min-height: 270px; max-width: 300px; margin-left: auto; margin-right: auto; }
.ad-medium-rectangle.has-ad { min-height: 0; }

/* Half page 300×600 */
.ad-half-page { min-height: 620px; max-width: 300px; margin-left: auto; margin-right: auto; }
.ad-half-page.has-ad { min-height: 0; }

/* Native sponsored unit */
.ad-native { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.ad-native:not(.has-ad) { background: var(--bg-soft); padding: var(--space-4) var(--space-5); }

/* Newsletter sponsor unit */
.ad-newsletter-sponsor { border: 1px solid var(--line); padding: var(--space-3) var(--space-4); }
.ad-newsletter-sponsor:not(.has-ad) { background: var(--bg-soft); }

/* ============================================================
   Booked creative — an advertiser's own image.
   Deliberately gets none of the house-ad chrome: no card, no
   border, no brand wash. Their creative is the design; ours
   sitting behind it would read as an endorsement.
   ============================================================ */

.ad-creative {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Creative arrives off-spec more often than not — 1920×1080 and 1080×1080
   are what clients have on hand, and they are not banner shapes. Capping
   the height per slot means any creative scales down to fit the box it was
   sold as, keeping its own aspect ratio (never stretched, never cropped),
   centered in whatever width is left over. A correctly-sized creative is
   unaffected; a 2× retina upload lands on its intended CSS size instead of
   rendering at double width. */
.ad-billboard .ad-creative        { max-height: 250px; }
.ad-leaderboard .ad-creative      { max-height: 90px; }
.ad-medium-rectangle .ad-creative { max-height: 250px; }
.ad-half-page .ad-creative        { max-height: 600px; }

.ad-creative-link {
	display: block;
	text-decoration: none;
}

/* ============================================================
   House ad — premium first-party "advertise with us" creative
   shown in place of an unsold slot. CSS-only (zero image weight),
   recolors per pub via --brand, and reads like a designed ad unit:
   brand lockup + display headline + audience pitch + CTA button.
   Links to the pub's /advertise/ page.
   ============================================================ */

.ad-slot.has-house-ad {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bg-soft);
	/* Subtle brand wash for depth; degrades to flat --bg-soft on old browsers. */
	background-image: linear-gradient( 155deg, color-mix( in srgb, var(--brand) 8%, transparent ), transparent 60% );
	border: 1px solid var(--line);
	border-color: color-mix( in srgb, var(--brand) 24%, var(--line) );
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .05 ), 0 18px 40px -30px color-mix( in srgb, var(--brand) 70%, transparent );
	padding: var(--space-5);
	overflow: hidden;
}

/* Label is an absolutely-positioned corner tag, out of flow, so it never
   eats vertical space from .ad-house — the creative stays centered on the
   card's true Y-axis instead of drifting toward the bottom under the label. */
.ad-slot.has-house-ad .ad-label {
	position: absolute;
	top: var(--space-4);
	left: var(--space-5);
	margin-bottom: 0;
	color: var(--muted-soft);
}

.ad-house {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	transition: transform var(--ease-quick);
}

.ad-house-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

/* Brand lockup — reads as an advertiser identity, recolored per pub. */
.ad-house-brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
}
.ad-house-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--brand) 20%, transparent );
}

.ad-house-head {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-4xl);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ink);
	max-width: 16ch;
}

.ad-house-sub {
	font-family: var(--font-ui);
	font-size: var(--text-md);
	line-height: 1.5;
	color: var(--muted);
	max-width: 34ch;
}

.ad-house-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-1);
	padding: 11px 22px;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--brand);
	border-radius: 8px;
	box-shadow: 0 8px 18px -10px color-mix( in srgb, var(--brand) 85%, transparent );
	transition: background var(--ease-quick), box-shadow var(--ease-quick);
}

.ad-house-arrow { transition: transform var(--ease-quick); }

.ad-house:hover { transform: translateY(-1px); }
.ad-house:hover .ad-house-cta {
	background: var(--brand-dark);
	box-shadow: 0 12px 24px -10px color-mix( in srgb, var(--brand) 90%, transparent );
}
.ad-house:hover .ad-house-arrow { transform: translateX(3px); }
.ad-house:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Leaderboard 728×90 — short & wide: copy on the left, CTA on the right,
   both vertically centered against the full card (label sits out of flow
   as a corner tag, so it no longer pulls this row toward the bottom). */
.ad-leaderboard.has-house-ad { text-align: left; padding: var(--space-4) var(--space-5); }
.ad-leaderboard.has-house-ad .ad-house {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	text-align: left;
}
.ad-leaderboard.has-house-ad .ad-house-copy { align-items: flex-start; gap: 4px; }
.ad-leaderboard.has-house-ad .ad-house-head { font-size: var(--text-2xl); max-width: none; }
.ad-leaderboard.has-house-ad .ad-house-sub { display: none; }
.ad-leaderboard.has-house-ad .ad-house-cta { margin-top: 0; flex: 0 0 auto; }

/* Billboard 970×250 — wide AND tall, so unlike the leaderboard it has room
   for the full creative: centered lockup, display headline and the audience
   line all stay visible. */
.ad-billboard.has-house-ad { padding: var(--space-5) var(--space-6); }
.ad-billboard.has-house-ad .ad-house { gap: var(--space-4); }
.ad-billboard.has-house-ad .ad-house-head { font-size: var(--text-5xl); max-width: 22ch; }
.ad-billboard.has-house-ad .ad-house-sub { max-width: 52ch; }

@media (max-width: 600px) {
	.ad-billboard.has-house-ad { padding: var(--space-4) var(--space-5); }
	.ad-billboard.has-house-ad .ad-house-head { font-size: var(--text-3xl); }
	.ad-billboard.has-house-ad .ad-house-sub { display: none; }
}

/* Medium rectangle 300×250 — compact vertical. */
.ad-medium-rectangle.has-house-ad .ad-house { gap: var(--space-3); }
.ad-medium-rectangle.has-house-ad .ad-house-head { font-size: var(--text-3xl); }

/* Half page 300×600 — tall & narrow: generous display headline + breathing room. */
.ad-half-page.has-house-ad .ad-house { gap: var(--space-5); }
.ad-half-page.has-house-ad .ad-house-head { font-size: var(--text-5xl); }