/* JE Banners — frontend wrapper styles (R-020).
 *
 * Pairs with `je-banners.css` (slot placeholder skeleton). This stylesheet
 * defines the rendered banner wrapper that arrives via the /render endpoint
 * (RenderRoute::_render_variant emits `<div class="je-banner-wrapper">…`).
 *
 * Owns:
 *   - `.je-banner-wrapper` — max-width + centred, aspect-ratio honoured.
 *   - `.je-after-header-wrap` — outer wrapper for the after_header slot,
 *     glues the banner under the fixed header without disturbing
 *     `.je-container` reuse.
 *   - mobile media query — switches aspect-ratio to per-slot mobile dims
 *     via the inline `--je-banner-ar-mobile` CSS variable when present.
 *
 * Empty-by-default contract (ADR-001): no rules emit any visual chrome until
 * a variant has actually been hydrated; the inline aspect-ratio set by the
 * renderer is the single source of size truth.
 */

/* ---------- after_header outer wrapper (theme adapter) ---------- */
.je-after-header-wrap {
    /* Sits between fixed header and #je-content; relative + low z-index
     * so the mobile sticky nav (z-index:9999) always paints above it. */
    position: relative;
    z-index: 1;
    width: 100%;

    /* R-038 (Phase 2.11): symmetric vertical padding via CSS vars.
     * --je-header-h compensates for the theme's fixed header
     * (.je-header is position:fixed top:0 height:64px desktop / 56px mobile).
     * --je-banner-gap is the SAME value applied above and below the banner
     * so the banner is optically centred between header bar and next content
     * (was 80px top / 0 bottom which left it crammed against next sibling).
     *
     * The next sibling (.je-breadcrumbs / #je-content / .article-card) usually
     * carries its own padding-top — we neutralise that below so the gap is
     * single-source from --je-banner-gap, not summed across two boxes. */
    --je-header-h: 64px;
    --je-banner-gap: 24px;
    padding-top: calc(var(--je-header-h) + var(--je-banner-gap));
    padding-bottom: var(--je-banner-gap);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .je-after-header-wrap {
        /* R-045 (Phase 2.12) — реальная .je-header.height = 57px на mobile
         * (измерено через getBoundingClientRect). Было 56 → top gap съедал
         * 1px в asymmetry с 20px bottom. */
        --je-header-h: 57px;
        --je-banner-gap: 20px;
    }

    /* R-056 (Phase 2.13) — mobile белая полоска между banner и breadcrumbs.
     * Light theme body-bg `#f0f2f5` (gray) проступает в bottom-padding 20px
     * `.je-after-header-wrap` (transparent), создавая visible "white strip"
     * под banner-card (border-radius 12px на img + 16px горизонтальные
     * gutters → banner выглядит карточкой, под ней gap кажется glitch'ем).
     *
     * Fix: на mobile bottom-gap=8px (tight visual coupling банер↔breadcrumbs),
     * top-gap остаётся 20px (header clearance). Asymmetric ОК для mobile —
     * desktop R-038 symmetric не затронут. */
    .je-after-header-wrap {
        padding-bottom: 8px;
    }
}

.je-after-header-wrap .je-banner-slot[hidden] {
    /* When the slot is still hidden (pre-hydration or empty resolution)
     * collapse the outer margins so we don't reserve dead space. */
    margin: 0;
}

/* When the wrap sits immediately before `#je-content`, eat the theme's
 * 64px (56px mobile) header-clearance padding on content — this wrap has
 * already cleared the header above the banner, so leaving the content
 * padding stacked would create a 64px+ dead zone between banner and
 * article. CSS `+` adjacent-sibling selector works because the theme
 * outputs the wrap directly above #je-content (header.php line 149-151). */
.je-after-header-wrap + #je-content {
    padding-top: 0;
}

/* R-038 — neutralise next sibling's own padding-top so the visible gap
 * below the banner equals --je-banner-gap (no double-padding).
 * R-045 (Phase 2.12) — на category/single страницах #je-content обёрнут
 * в .je-page > .je-container > .je-breadcrumbs (3 уровня вложенности).
 * Direct-child селектор `> .je-breadcrumbs:first-child` промахивался —
 * descendant-селектор работает на любой глубине. */
.je-after-header-wrap + .je-breadcrumbs,
.je-after-header-wrap + #je-content .je-breadcrumbs:first-child,
.je-after-header-wrap + #je-content .je-page > .je-container > .je-breadcrumbs:first-child,
.je-after-header-wrap + #je-content .je-section:first-child {
    padding-top: 0 !important;
}

.je-after-header-wrap .je-banner-slot:not([hidden]) {
    /* The js-banners.js hydrator sets `aspect-ratio` inline on the slot to
     * reserve CLS space (ADR-001). Inside `.je-after-header-wrap` the inner
     * `.je-banner-wrapper` already carries the slot's aspect-ratio + max-width
     * cap — letting the slot keep its full-width aspect-ratio creates a
     * vertical overshoot (the slot becomes taller than its centred child).
     *
     * Strip the outer aspect-ratio reservation and the default section-gap
     * margins; the wrapper element owns both. */
    aspect-ratio: auto !important;
    margin: 0 !important;
}

/* R-043/R-044/R-046 (Phase 2.12) — slot НЕ должен иметь aspect-ratio.
 * JS-хайдратор (je-banners.js:51) ставит desktop aspect-ratio inline на
 * slot для CLS-резерва, но вложенный .je-banner-wrapper уже владеет
 * aspect-ratio с mobile swap через --je-banner-ar-mobile. Дублирование на
 * slot'е ломает мобайл: slot высотой по desktop ratio, wrapper по mobile
 * ratio → wrapper overflow'ит slot.bottom вниз на 100+px и наезжает на
 * следующий контент. CLS-резерв обеспечивает wrapper (server-side inline).
 *
 * Расширяет уже работающий приём из .je-after-header-wrap .je-banner-slot
 * на 3 hybrid-слота (game_main_above_h1, game_main_below_intro,
 * home_hero_under). sticky_bottom_mobile не страдает (его mobile=desktop).
 */
.je-banner-slot[data-slot="home_hero_under"]:not([hidden]),
.je-banner-slot[data-slot="game_main_above_h1"]:not([hidden]),
.je-banner-slot[data-slot="game_main_below_intro"]:not([hidden]) {
    aspect-ratio: auto !important;
}

/* ---------- Banner wrapper (rendered HTML) ---------- */
.je-banner-wrapper {
    /* Inline style sets max-width per slot; keep a sane default for
     * filters/extensions that emit a wrapper without the inline cap. */
    max-width: var(--je-banner-max-w, 970px);
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* When the banner sits inside the theme's `.je-container` (max-width 1240px,
 * 28px gutters → effective 1184px content width) we want the banner edges to
 * align with the article-card / breadcrumbs / section-header below. The
 * renderer's inline `max-width:{desktop_w}px` (e.g. 1200px for 1200×310
 * after_header creatives) leaves a small inset on viewports between
 * 1184px–1240px — banner narrower than the content card, "ни туда ни сюда".
 *
 * Override: full-width inside any `.je-container` parent. The `!important` is
 * required to defeat the inline `max-width:{w}px` set by RenderRoute (cannot
 * be removed there without losing the SSR aspect-ratio reservation that lives
 * on the same `style=""` attribute). The banner image keeps its renderer-set
 * aspect-ratio, so it scales proportionally with the wider box; object-fit:
 * cover preserves the visual on the rare slot creatives narrower than the
 * container. R-023.
 *
 * R-028 (Phase 2.10): even after A-spec bumped after_header desktop to
 * 1200×310, the rule is intentionally kept — it is defensive (zero-cost when
 * inline max-width matches container content width) and self-heals layout
 * if a future creative ships at a smaller native size or the container width
 * grows. Explicit beats implicit.
 */
.je-container > .je-banner-wrapper,
.je-container .je-banner-wrapper {
    max-width: 100% !important;
}

/* R-030 / R-033 — banners injected into `the_content` (game_main_above_h1,
 * game_main_below_intro) live inside `.je-article__body`, NOT inside
 * `.je-container`, so the override above does not match. Explicit selector
 * for the article-body context: full-width relative to the article card +
 * a generous vertical rhythm so the banner does not collide with the H1
 * above or the next paragraph below on either desktop or mobile.
 *
 * The default `.je-banner-wrapper` rule centres via `margin: 0 auto`; we
 * override with explicit top/bottom margins for these in-content slots and
 * preserve auto-centring via `margin-left/right: auto` on the inline style
 * emitted by RenderRoute (style_parts in RenderRoute.php:466-467).
 */
/* R-040 (Phase 2.11) — supersedes R-030 margin-based approach.
 * Using padding on the SLOT (outer DOM box) instead of margin on the wrapper:
 * margins collapse with the inner wrapper's margin and with neighbouring
 * paragraphs, capping the visible gap at 24px / 20px. Padding doesn't
 * collapse — it's "always real space inside the box".
 *
 * Net visible breathing: 32px desktop / 24px mobile around the banner inside
 * the article body — comfortable separation from .je-lead / next paragraph. */

.je-article__body .je-banner-wrapper {
    /* Wrapper margin is now neutral; rhythm comes from the parent slot below. */
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Override the base .je-banner-slot rule (margin: var(--je-section-gap) 0)
 * with padding for in-content slots. */
.je-article__body .je-banner-slot[data-slot="game_main_above_h1"]:not([hidden]),
.je-article__body .je-banner-slot[data-slot="game_main_below_intro"]:not([hidden]) {
    margin-block: 0 !important;
    padding-block: 2rem !important;
}

/* R-046 (Phase 2.12) — home_hero_under rhythm: padding-on-slot вместо
 * margin-on-slot (margin collapse'ится с .je-section margin-top, дающее
 * неконсистентные gaps). Аналогия с .je-article__body слотами. */
.je-banner-slot[data-slot="home_hero_under"]:not([hidden]) {
    margin-block: 0 !important;
    padding-block: 2rem !important;   /* desktop 32px */
}

.je-banner-wrapper a,
.je-banner-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.je-banner-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` keeps the creative filling the box at the renderer-driven
     * aspect-ratio; combined with the `max-width:{w}px` cap on the wrapper
     * this prevents the original-stretched bug. */
    object-fit: cover;
    object-position: center;
    border-radius: var(--je-radius, 8px);
}

/* ---------- Mobile (≤768px) — apply per-slot mobile aspect-ratio ---------- */
@media (max-width: 768px) {
    .je-banner-wrapper {
        /* R-027 (Phase 2.10): ignore the desktop max-width cap on phones and
         * let the wrapper fill its parent row. Horizontal padding is
         * intentionally `0` — the parent block (`.je-container` mobile uses
         * `--je-container-px:16px`, theme/juegos/style.css:2479; or
         * `.je-article__body` whose parent `.je-article` already pads with
         * `1rem`) owns the gutter. The previous fixed `12px` padding caused
         * a visible mismatch with the article-card edges on mobile (12px vs
         * 16px), making the banner narrower than the content card.
         *
         * For in-content slots inside `.je-article__body` the rule above
         * (`.je-article__body .je-banner-wrapper { max-width: 100% !important }`)
         * makes the banner match the article-card width; this mobile rule
         * stays compatible because `padding: 0` adds no inset of its own. */
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* Override aspect-ratio to the mobile spec when the renderer set the
     * `--je-banner-ar-mobile` CSS variable on the wrapper. CSS aspect-ratio
     * accepts a `<ratio>` value, which is exactly what the variable holds
     * (e.g. `320/200`). */
    .je-banner-wrapper[style*="--je-banner-ar-mobile"] {
        aspect-ratio: var(--je-banner-ar-mobile) !important;
    }

    /* R-040 mobile — padding-on-slot, tighter to avoid eating fold. */
    .je-article__body .je-banner-slot[data-slot="game_main_above_h1"]:not([hidden]),
    .je-article__body .je-banner-slot[data-slot="game_main_below_intro"]:not([hidden]) {
        padding-block: 1.5rem !important;
    }

    /* R-046 mobile — home_hero_under, parity with game_main_* slots. */
    .je-banner-slot[data-slot="home_hero_under"]:not([hidden]) {
        padding-block: 1.5rem !important;   /* mobile 24px */
    }
}

/* ---------- Slot-specific tweaks ---------- */
/* after_header — outer .je-after-header-wrap owns the vertical rhythm
 * (margins + stack context). No overrides needed at the wrapper level —
 * stacking double margins here would shove the banner away from the
 * header by 32px instead of the intended 16px. */

/* R-042 (Phase 2.12) — sticky_bottom_mobile визуально это full-width strip,
 * border-radius неуместен (выглядит inline-card'ом, а не sticky bar'ом).
 * Override img + wrapper + picture (defensive — на случай будущих правил). */
.je-banner-wrapper--sticky_bottom_mobile,
.je-banner-wrapper--sticky_bottom_mobile img,
.je-banner-wrapper--sticky_bottom_mobile picture {
    border-radius: 0 !important;
}

/* R-032 — Suppress theme's external-link arrow on banner anchors.
 * The theme rule `.je-article__body a[target="_blank"]::after { content: '\2009\2197' }`
 * (theme/juegos/assets/css/je-content.css:150) catches every `target="_blank"`
 * link inside article body, including banner anchors injected via `the_content`
 * (game_main_above_h1, game_main_below_intro). The decorative arrow looks like
 * a layout glitch on full-width banners.
 *
 * Plugin owns the override via `!important` to win over the theme rule without
 * touching theme files (IRON RULE: theme is operator-owned). Mirror :before for
 * any future theme decoration that might use it. */
.je-banner-wrapper a::after,
.je-banner-wrapper a::before,
.je-banner-wrapper a[target="_blank"]::after,
.je-banner-wrapper a[target="_blank"]::before {
    content: none !important;
    display: none !important;
    background: none !important;
}