/* css/promo-strip.css — full-width ad strip (home_promo_strip() in
   games_data.php, js/home-promo.js). Homepage (3 strips) and game page
   (above the title, below "Play next"). */

/* =========================================================
   AD STRIP
   Full width, exactly one game card tall (js/home-promo.js
   copies a card's height into --hpromo-h; the clamp() is the
   no-JS / first-paint value). data-state:
     own → your images (default, and whenever no ad fills)
     ad  → Google's ad, your images removed
========================================================= */
.hpromo {
    --hpromo-h: clamp(98px, 8.2vw, 157px);
    position: relative;
    display: grid;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* AdSense collapses an unfilled slot's ancestors with an inline
       "height: 0px" — the strip keeps its size (it shows your images /
       the newest game then). */
    height: auto !important;
    margin: var(--section-gap, 12px) 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: var(--h-surface, #fff);
    box-shadow: var(--h-shadow, 0 1px 2px rgba(17,24,39,.04), 0 4px 14px rgba(17,24,39,.06));
}
/* The ad is in normal flow and is never cropped: AdSense sizes it itself
   (inline height:auto), horizontal banners are 90–100px, so it fits the
   card-tall strip; a taller creative just makes the strip taller. */
/* AdSense writes "height:auto; min-height:0 !important" onto the ad's
   ancestors, so the card height lives on a pseudo-element it can't touch;
   the ad shares the same grid cell (cell = the taller of the two). */
.hpromo::before {
    content: "";
    grid-area: 1 / 1;
    height: var(--hpromo-h);
}
.hpromo__ad {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hpromo__ad ins.adsbygoogle {
    width: 100%;
    min-height: 0 !important;
    margin: 0;
}
.hpromo[data-state="ad"] {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}
.hpromo[data-state="ad"]::before {
    display: none !important;
    height: 0 !important;
}
.hpromo[data-state="ad"] .hpromo__ad {
    height: auto !important;
    min-height: 0 !important;
}
.hpromo[data-state="ad"] .hpromo__ad ins.adsbygoogle {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.hpromo__label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 1px 7px;
    border-bottom-right-radius: 6px;
    font: 600 9.5px/1.5 system-ui, sans-serif;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6b7280;
    background: rgba(255, 255, 255, .85);
    pointer-events: none;
    display: none;
}
.hpromo[data-state="ad"] .hpromo__label { display: block; }

/* Your images sit on top while no ad has filled; once the ad fills they
   are removed — never drawn over a served ad. */
.hpromo__own {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--h-surface, #fff);
}
.hpromo[data-state="ad"] .hpromo__own { display: none; }

.hpromo__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.hpromo__slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease;
}
/* The newest-game card is also a slide: keep its own row layout. */
.hpromo__slide.house-ad { display: flex; }

/* Your own banner images only (direct children) — the newest-game card
   (.house-ad) lays out its own pictures. */
.hpromo__slide > picture,
.hpromo__slide > picture img {
    display: block;
    width: 100%;
    height: 100%;
}
.hpromo__slide > picture img { object-fit: cover; object-position: center; }

/* No images in images/promo/ yet → a simple brand panel. */
.hpromo__slide--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    flex-wrap: wrap;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(255, 255, 255, .18), transparent 55%),
        linear-gradient(110deg, #ff4f64 0%, #a855f7 55%, #3b82f6 100%);
}
.hpromo__brand-title { font: 800 clamp(16px, 2vw, 26px)/1.1 var(--h-display, var(--ff-display, 'Poppins', system-ui, sans-serif)); letter-spacing: -.3px; }
.hpromo__brand-text  { font: 500 clamp(12px, 1.1vw, 15px)/1.3 system-ui, sans-serif; opacity: .92; }
.hpromo__brand-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    font: 700 13px/1 system-ui, sans-serif;
    color: #111827; background: #fff;
    transition: transform .2s ease;
}
.hpromo__slide--brand:hover .hpromo__brand-cta { transform: translateX(3px); }
@media (max-width: 640px) {
    .hpromo { margin: var(--section-gap, 12px) 0 !important; border-radius: 10px; }
    .hpromo__slide--brand { gap: 4px 12px; padding: 8px 12px; }
    .hpromo__brand-text { display: none; }
    .hpromo__brand-cta { padding: 7px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hpromo__slide, .hpromo__slide.is-on { transition: none; }
}