/* JE Banners — frontend CSS skeleton (ADR-001 empty-by-default).
 *
 * Default placeholder: zero footprint. After hydration: aspect-ratio set
 * inline by JS, layout reserved only when a variant actually loads.
 *
 * fe agent will extend this file in Phase 2.x; devops ships only the
 * structural minimum needed to keep CLS = 0 and DGOJ disclaimer compliant.
 */

/* ---------- Slot wrapper ---------- */
.je-banner-slot {
    display: block;
    width: 100%;
    min-height: 0;
    height: 0;
    overflow: hidden;
}

.je-banner-slot:not([hidden]) {
    height: auto;
    overflow: visible;
    margin: var(--je-section-gap, 1.5rem) 0;
    border-radius: var(--je-radius, 8px);
}

/* ---------- Banner card ---------- */
.je-banner {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

.je-banner__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.je-banner__link:focus-visible {
    outline: 2px solid var(--je-accent, #ffb547);
    outline-offset: 2px;
}

.je-banner picture,
.je-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--je-radius, 8px);
}

/* ---------- DGOJ disclaimer (Resolución 2025) ---------- */
.je-banner__dgoj,
.je-dgoj-disclaimer {
    display: block;
    visibility: visible !important;
    min-height: 15%;
    padding: 4px 8px;
    border-top: 1px solid #eee;
    background: rgba(255, 255, 255, 0.92);
    color: #4a4a4a;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: left;
}

.je-dgoj-disclaimer__label {
    display: inline-block;
    margin-right: 6px;
    font-weight: 600;
    color: #1a1a1a;
}

.je-dgoj-disclaimer__msg {
    display: inline;
}

.je-dgoj-disclaimer__link {
    color: var(--je-accent, #ffb547);
    text-decoration: underline;
    margin-left: 4px;
}

/* ---------- Sticky bottom mobile ---------- */
/* R-041 (Phase 2.11) — was z-index 90; bumped to sit just below theme
 * .je-mobile-nav (z-index:9999) and above any third-party fixed widgets.
 *
 * R-057 (Phase 3.x) — iOS Safari: when URL bar collapses on scroll, the
 * `bottom: 0` viewport edge shifts up by the URL bar height (~50px) on
 * older iOS, leaving a visible gap below the sticky strip on the new
 * (taller) viewport. Fix:
 *   1. `padding-bottom: env(safe-area-inset-bottom, 0)` — respects the
 *      home-indicator inset on notched iPhones; harmless on Android.
 *   2. `transform: translateZ(0)` — promotes to a GPU compositing layer
 *      so iOS Safari recomputes the fixed position when the visual
 *      viewport changes (URL bar show/hide). Without it, the layer can
 *      stay attached to the *layout* viewport which doesn't update.
 *   3. Inner banner gets a black background so the safe-area-inset
 *      padding strip blends with the banner instead of showing the
 *      page background through it. */
.je-banner-slot[data-slot="sticky_bottom_mobile"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    margin: 0;
    border-radius: 0;
    /* R-057 Phase 2 — Pattern D: reserve home-indicator zone on notched iPhones. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Respect landscape safe-areas on iPhone X+ (sensor strip side). */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    background: #000;
    /* R-057 Phase 2 — promote to GPU compositing layer (avoids iOS 26 paint-offset bug
       and gives JS pinStickyBanner() a stable transform target). */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* Smooth motion when JS adjusts on URL-bar collapse / on-screen keyboard. */
    transition: transform 120ms ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.je-banner-slot[data-slot="sticky_bottom_mobile"]:not([hidden]) {
    /* On mobile sticky we don't want a top margin — stick to the viewport edge. */
    margin: 0;
}

.je-banner--sticky-mobile,
.je-banner-slot[data-slot="sticky_bottom_mobile"] .je-banner {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.18);
}

@media (min-width: 1024px) {
    /* R-057 Phase 2 — hide sticky-mobile only on real desktops/tablets-landscape.
       Previously 768px breakpoint hid the slot on phone-landscape (e.g. 844x390),
       leaving zero monetization in that orientation. */
    .je-banner-slot[data-slot="sticky_bottom_mobile"] {
        display: none !important;
    }
}

/* ---------- Dismiss button (sticky) ---------- */
.je-banner__dismiss {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.je-banner__dismiss:focus-visible {
    outline: 2px solid var(--je-accent, #ffb547);
}