/* ─────────────────────────────────────────────────────────────
   Ad slots — labelled, responsive, layout-shift-aware containers.

   Empty/paid states render NO markup at all (the partials gate the whole
   unit). Static image banners size to their image (no forced height, so no
   dead whitespace); script-driven units (AdSense <ins>) get a reserved
   min-height to limit layout shift while they fill.
   ───────────────────────────────────────────────────────────── */

.ad-slot {
    @apply my-8 mx-auto w-full max-w-full text-center;
}

.ad-slot__label {
    /* ink-mute (not ink-faint): at 10px on light paper ink-faint is ~4.49:1,
       just under the WCAG AA 4.5:1 floor for this informative label. */
    @apply block font-sans text-[10px] font-semibold tracking-[0.14em] uppercase text-ink-mute mb-2;
}

/* Ghost wraps an uploaded banner in <figure class="kg-image-card"> (and a
   PhotoSwipe wrapper) carrying its own ~32px block margins. Strip those inside
   ad slots so the banner doesn't float in dead space, and center the creative. */
.ad-slot__inner :is(figure, .kg-card) {
    margin: 0 auto;
    max-width: 100%;
}

/* Hug the banner so the click target is the image, not the whole row. */
.ad-slot__inner a {
    display: inline-block;
}

/* Static images: respect the image's own width (Ghost sets width/height attrs
   from the upload), cap to the container, keep ratio, and center. */
.ad-slot__inner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Network units (AdSense/iframes): cap width and center; AdSense controls its
   own dimensions via inline styles. */
.ad-slot__inner :is(iframe, ins) {
    max-width: 100%;
    margin-inline: auto;
}

/* Reserve height ONLY for script-driven units, to limit layout shift as they
   fill. Static banners size to their image, so they reserve nothing. */
.ad-slot__inner:has(.adsbygoogle) {
    min-height: 250px;
}
.ad-slot--leaderboard .ad-slot__inner:has(.adsbygoogle) {
    min-height: 90px;
}

/* Site-wide leaderboard: capped to the 970px super-leaderboard standard with NO
   horizontal padding, so a 970-wide unit renders at its true size. Ad networks
   penalise serving a unit into a slot narrower than the unit, so the slot must
   offer the full width. Narrower viewports scale a static image down and leave
   room for mobile units. */
.ad-slot--leaderboard {
    @apply my-6;
    max-width: 970px;
}

/* ── Top leaderboard strip ───────────────────────────────────────
   A full-width strip directly below the sticky breaking ticker. NOT sticky: it
   renders in normal flow, shows on load, and scrolls up behind the pinned ticker
   as the reader scrolls. The :has() guard collapses it when no ad renders. */
.ad-topbar:not(:has(.ad-slot, .bonteh-top-house-ad)) {
    @apply hidden;
}
.ad-topbar:has(.ad-slot, .bonteh-top-house-ad) {
    @apply bg-paper border-b border-rule;
}
.ad-topbar:has(.ad-slot--leaderboard) {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ad-topbar:has(.bonteh-top-house-ad) {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ad-topbar .ad-slot--leaderboard {
    @apply my-0 py-2;
}

.bonteh-top-house-ad {
    @apply my-0 py-2 px-4 bg-paper text-center;
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 16px;
    margin: 0 auto;
}

.bonteh-top-house-ad a {
    display: inline-block;
    max-width: 100%;
    margin-inline: auto;
}

.bonteh-top-house-ad img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.bonteh-home-side-ad {
    @apply w-full bg-paper text-center;
}

.bonteh-home-side-ad a {
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

.bonteh-home-side-ad img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-inline: auto;
}

.ad-slot--home-side {
    max-width: 300px;
    margin: 0 auto;
}

.ad-slot--home-side .ad-slot__inner img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* In-feed (homepage sections + archive grid): capped to the 970px billboard
   standard and centered, so the ad renders at true size with even gutters. */
.ad-slot--in-feed {
    max-width: 970px;
}

/* Home-top billboard: below the hero, above Editor's Picks. Capped to the 970px
   billboard standard; reserves 250px only for script-driven units. */
.ad-slot--billboard {
    max-width: 970px;
}
.ad-slot--billboard .ad-slot__inner:has(.adsbygoogle) {
    min-height: 250px;
}

/* In-article + post-footer: match the 680px reading measure and flow with prose. */
.ad-slot--in-article,
.ad-slot--post-footer {
    max-width: 680px;
}

/* ── Responsive static banners ──────────────────────────────────
   Place a DESKTOP image card first and a MOBILE image card second in the ad
   page. Above the breakpoint we show the first (desktop) and hide the second;
   below it we show the second (mobile) and hide the first. The :has() guard
   means a single-image banner is left alone — shown (scaled) at every width.
   AdSense/<picture> creatives have no second <figure>, so they're unaffected. */
@media (min-width: 768px) {
    .ad-slot__inner figure:nth-of-type(2) {
        display: none;
    }
}
@media (max-width: 767.98px) {
    .ad-slot__inner:has(figure:nth-of-type(2)) figure:first-of-type {
        display: none;
    }
}

/* ── Mobile anchor (sticky footer) ad ────────────────────────────
   A dismissible bar pinned to the bottom of the viewport on phones only.
   ads.js publishes its live height to --anchor-height; we pad the body bottom
   on mobile so the footer/last content can scroll clear of the fixed bar.
   Sits below the mobile drawer (z-100/110) and reading-progress (z-60). */
.ad-anchor {
    @apply md:hidden fixed bottom-0 inset-x-0 z-30 flex justify-center items-center bg-paper border-t border-rule;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateZ(0);
    contain: layout;
}
/* Cap the creative height here (not on .ad-anchor) so the close button — which
   sits as a tab above the bar (-top-3) — isn't clipped by the bar's overflow. */
.ad-anchor .ad-slot {
    @apply my-0;
    max-height: 100px;
    overflow: hidden;
}
/* Hide the visible "Advertisement" label inside the height-constrained bar;
   keep it for screen readers. */
.ad-anchor .ad-slot__label {
    @apply sr-only;
}
.ad-anchor .ad-slot--anchor .ad-slot__inner:has(.adsbygoogle) {
    min-height: 50px;
}
.ad-anchor__close {
    @apply absolute -top-3 left-2 w-7 h-7 flex items-center justify-center rounded-full bg-paper border border-rule text-ink-faint hover:text-ink leading-none text-lg cursor-pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
@media (max-width: 767.98px) {
    body {
        padding-bottom: var(--anchor-height, 0);
    }
}