/**
 * Admin-uploaded banner rotator — content-sized panels (no vh viewport fill).
 * Hero context (Batch 1 S01): slot geometry only — no floating poster in oversized box.
 */

.fi-admin-banner-rotator {
    position: relative;
    width: 100%;
    min-height: clamp(220px, 28vw, 400px);
    max-height: clamp(280px, 32vw, 480px);
    margin-inline: auto;
}

.fi-admin-banner-rotator__stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
}

.fi-admin-banner-rotator__link,
.fi-admin-banner-rotator__img[data-hero-visual-item] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    transition: opacity 650ms ease;
    pointer-events: none;
}

.fi-admin-banner-rotator__link {
    text-decoration: none;
}

.fi-admin-banner-rotator__img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: clamp(280px, 32vw, 480px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 12px 28px rgba(40, 30, 10, 0.08));
}

.fi-admin-banner-rotator__link.is-active,
.fi-admin-banner-rotator__img.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.fi-hero-visual--admin-banner {
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--fd-slot-banner-ratio, 4 / 3);
    min-height: 0;
}

.fi-hero__visual-wrap .fi-admin-banner-rotator,
.fi-hero__visual-wrap .fi-hero-visual--admin-banner {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--fd-slot-banner-ratio, 4 / 3);
}

.fi-hero__visual-wrap .fi-admin-banner-rotator__stage {
    position: absolute;
    inset: 0;
    min-height: 0;
    max-height: none;
    height: auto;
}

.fi-hero__visual-wrap .fi-admin-banner-rotator__link,
.fi-hero__visual-wrap .fi-admin-banner-rotator__img[data-hero-visual-item] {
    place-items: end center;
}

.fi-hero__visual-wrap .fi-admin-banner-rotator__img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.fi-home-dd__poster {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.fi-home-dd__poster .fi-admin-banner-rotator {
    min-height: clamp(220px, 28vw, 340px);
    max-height: clamp(280px, 32vw, 400px);
}

.fi-home-dd__poster .fi-admin-banner-rotator__img {
    max-height: clamp(280px, 32vw, 400px);
}

@media (max-width: 1023px) {
    .fi-admin-banner-rotator {
        min-height: clamp(200px, 36vw, 320px);
        max-height: clamp(240px, 40vw, 360px);
    }

    .fi-hero__visual-wrap .fi-admin-banner-rotator {
        min-height: 0;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-admin-banner-rotator__link,
    .fi-admin-banner-rotator__img {
        transition: none;
    }
}


/* ════════════════════════════════
 * S01 hero context — the banner must FILL the feathered box.
 *
 * Bug found 8 September 2026. The hero feather is a mask on .fi-hero-visual,
 * so it fades the outer 10%/16% of the BOX. In the hero the banner box was
 * 4:3 while the artwork is 3:2, and the image was `object-fit: contain`
 * pinned to `center bottom` — so the top ~16% of the box was empty, the
 * feather was spent entirely on that emptiness, and the artwork's own top
 * edge began below the fade with no feather on it at all. That is the hard
 * line: a mask fading nothing while the picture starts underneath it.
 *
 * Fix: same 3:2 ratio the rest of S01 uses, and `cover` so the image reaches
 * all four edges of the box. The feather then bites into real pixels.
 * The drop-shadow goes too — a blur drawn around an opaque rectangle is a
 * second visible edge, which the feather cannot remove.
 * ════════════════════════════════ */
.fi-hero__visual-wrap .fi-admin-banner-rotator,
.fi-hero__visual-wrap .fi-hero-visual--admin-banner {
    aspect-ratio: var(--fd-slot-hero-ratio, 3 / 2);
}

.fi-hero__visual-wrap .fi-admin-banner-rotator__link,
.fi-hero__visual-wrap .fi-admin-banner-rotator__img[data-hero-visual-item] {
    place-items: stretch;
}

.fi-hero__visual-wrap .fi-admin-banner-rotator__img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    filter: none;
}