/* ============================================================
   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; }

/* 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); }

/* ============================================================
   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; }

/* 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); }