/* ============================================================
   FSPL Home Hero Display Cards — final override
   Adapts the 21st.dev/Codehagen stacked display-card idea
   to FSPL's 4 hero images per slide: main + 3 supporting images.
   ============================================================ */

.home-editorial-hero__visual-panel {
    min-height: 520px !important;
    perspective: 1800px !important;
}

.home-editorial-visual-stack.home-hero-display-stack {
    position: relative !important;
    min-height: 520px !important;
    width: 100% !important;
}

.home-editorial-visual-slide.home-hero-display-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(36px, 0, 0) scale(.97) rotateY(-6deg) !important;
    filter: blur(10px) !important;
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(.22, 1, .36, 1),
        filter 560ms ease !important;
}

.home-editorial-visual-slide.home-hero-display-slide.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg) !important;
    filter: blur(0) !important;
}

.home-editorial-visual-slide.home-hero-display-slide::before,
.home-editorial-visual-slide.home-hero-display-slide::after {
    display: none !important;
    content: none !important;
}

.home-hero-display-cards {
    position: absolute !important;
    inset: 4px !important;
    display: grid !important;
    place-items: center !important;
    grid-template-areas: "stack" !important;
    isolation: isolate !important;
    transform-style: preserve-3d !important;
    outline: none !important;
}

.home-hero-display-cards::before {
    content: "";
    position: absolute;
    inset: 26px 20px 24px 20px;
    z-index: 0;
    border-radius: 30px;
    background:
        linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.055)),
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--clr-accent) 22%, transparent), transparent 34%),
        color-mix(in srgb, var(--clr-primary-dark) 32%, transparent);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 32px 90px color-mix(in srgb, var(--clr-primary-dark) 38%, transparent),
        inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}

.home-hero-display-card {
    grid-area: stack !important;
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.1) !important;
    box-shadow:
        0 22px 52px color-mix(in srgb, var(--clr-primary-dark) 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
    filter: grayscale(1) saturate(.78) brightness(.86) !important;
    transform-style: preserve-3d !important;
    transition:
        transform 680ms cubic-bezier(.22, 1, .36, 1),
        filter 520ms ease,
        opacity 520ms ease,
        box-shadow 520ms ease !important;
    will-change: transform, filter;
}

.home-hero-display-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%),
        linear-gradient(0deg, color-mix(in srgb, var(--clr-primary-dark) 38%, transparent), transparent 54%);
    opacity: .95;
    transition: opacity 520ms ease;
    pointer-events: none;
}

.home-hero-display-card::after {
    content: attr(data-card-label);
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: .9;
    transform: translateY(0);
    transition: opacity 420ms ease, transform 420ms ease, background-color 420ms ease;
}

.home-hero-display-card img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    transform: scale(1.03) !important;
    transition: transform 900ms cubic-bezier(.22, 1, .36, 1) !important;
}

.home-hero-display-card--main {
    z-index: 4 !important;
    width: min(345px, 58vw) !important;
    height: 430px !important;
    transform: translate3d(-92px, 0, 40px) rotate(-1.5deg) !important;
    filter: grayscale(.22) saturate(.98) brightness(.9) !important;
}

.home-hero-display-card--top {
    z-index: 3 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate3d(170px, -142px, 18px) rotate(3deg) scale(.96) !important;
}

.home-hero-display-card--middle {
    z-index: 2 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate3d(198px, 8px, 8px) rotate(-2deg) scale(.95) !important;
}

.home-hero-display-card--bottom {
    z-index: 1 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate3d(170px, 156px, 0) rotate(2.5deg) scale(.94) !important;
}

.home-hero-display-cards:hover .home-hero-display-card,
.home-hero-display-cards:focus-visible .home-hero-display-card,
.home-hero-display-cards.is-display-hovered .home-hero-display-card {
    filter: grayscale(0) saturate(1.08) brightness(1) !important;
    box-shadow:
        0 30px 76px color-mix(in srgb, var(--clr-primary-dark) 42%, transparent),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.home-hero-display-cards:hover .home-hero-display-card::before,
.home-hero-display-cards:focus-visible .home-hero-display-card::before,
.home-hero-display-cards.is-display-hovered .home-hero-display-card::before {
    opacity: .18 !important;
}

.home-hero-display-cards:hover .home-hero-display-card::after,
.home-hero-display-cards:focus-visible .home-hero-display-card::after,
.home-hero-display-cards.is-display-hovered .home-hero-display-card::after {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--clr-accent) 84%, rgba(255,255,255,.16)) !important;
    transform: translateY(-2px) !important;
}

.home-hero-display-cards:hover .home-hero-display-card img,
.home-hero-display-cards:focus-visible .home-hero-display-card img,
.home-hero-display-cards.is-display-hovered .home-hero-display-card img {
    transform: scale(1.075) !important;
}

.home-hero-display-cards:hover .home-hero-display-card--main,
.home-hero-display-cards:focus-visible .home-hero-display-card--main,
.home-hero-display-cards.is-display-hovered .home-hero-display-card--main {
    transform: translate3d(-126px, -8px, 78px) rotate(-5deg) scale(1.03) !important;
}

.home-hero-display-cards:hover .home-hero-display-card--top,
.home-hero-display-cards:focus-visible .home-hero-display-card--top,
.home-hero-display-cards.is-display-hovered .home-hero-display-card--top {
    transform: translate3d(122px, -178px, 62px) rotate(7deg) scale(1.04) !important;
}

.home-hero-display-cards:hover .home-hero-display-card--middle,
.home-hero-display-cards:focus-visible .home-hero-display-card--middle,
.home-hero-display-cards.is-display-hovered .home-hero-display-card--middle {
    transform: translate3d(210px, -4px, 58px) rotate(-5deg) scale(1.045) !important;
}

.home-hero-display-cards:hover .home-hero-display-card--bottom,
.home-hero-display-cards:focus-visible .home-hero-display-card--bottom,
.home-hero-display-cards.is-display-hovered .home-hero-display-card--bottom {
    transform: translate3d(124px, 178px, 52px) rotate(6deg) scale(1.04) !important;
}

@media (max-width: 1199.98px) {
    .home-editorial-hero__visual-panel,
    .home-editorial-visual-stack.home-hero-display-stack {
        min-height: 470px !important;
    }

    .home-hero-display-card--main {
        width: 310px !important;
        height: 388px !important;
        transform: translate3d(-70px, 0, 38px) rotate(-1.5deg) !important;
    }

    .home-hero-display-card--top,
    .home-hero-display-card--middle,
    .home-hero-display-card--bottom {
        width: 230px !important;
        height: 132px !important;
    }

    .home-hero-display-card--top { transform: translate3d(142px, -126px, 16px) rotate(3deg) scale(.96) !important; }
    .home-hero-display-card--middle { transform: translate3d(166px, 6px, 8px) rotate(-2deg) scale(.95) !important; }
    .home-hero-display-card--bottom { transform: translate3d(142px, 136px, 0) rotate(2.5deg) scale(.94) !important; }
}

@media (max-width: 991.98px) {
    .home-editorial-hero__visual-panel,
    .home-editorial-visual-stack.home-hero-display-stack {
        min-height: 430px !important;
    }

    .home-hero-display-cards {
        inset: 0 !important;
        transform: scale(.95) !important;
    }
}

@media (max-width: 767.98px) {
    .home-editorial-hero__visual-panel,
    .home-editorial-visual-stack.home-hero-display-stack {
        min-height: 510px !important;
    }

    .home-hero-display-cards {
        inset: 0 !important;
        align-content: center !important;
        transform: none !important;
    }

    .home-hero-display-cards::before {
        inset: 10px !important;
        border-radius: 24px !important;
    }

    .home-hero-display-card--main {
        width: min(74vw, 310px) !important;
        height: 360px !important;
        transform: translate3d(-28px, -12px, 40px) rotate(-4deg) !important;
    }

    .home-hero-display-card--top,
    .home-hero-display-card--middle,
    .home-hero-display-card--bottom {
        width: min(52vw, 210px) !important;
        height: 120px !important;
    }

    .home-hero-display-card--top { transform: translate3d(74px, -138px, 26px) rotate(7deg) scale(.92) !important; }
    .home-hero-display-card--middle { transform: translate3d(88px, 0, 18px) rotate(-5deg) scale(.91) !important; }
    .home-hero-display-card--bottom { transform: translate3d(70px, 134px, 10px) rotate(6deg) scale(.9) !important; }

    .home-hero-display-cards:hover .home-hero-display-card--main,
    .home-hero-display-cards:focus-visible .home-hero-display-card--main,
    .home-hero-display-cards.is-display-hovered .home-hero-display-card--main {
        transform: translate3d(-52px, -18px, 52px) rotate(-7deg) scale(1.01) !important;
    }

    .home-hero-display-cards:hover .home-hero-display-card--top,
    .home-hero-display-cards:focus-visible .home-hero-display-card--top,
    .home-hero-display-cards.is-display-hovered .home-hero-display-card--top {
        transform: translate3d(48px, -162px, 44px) rotate(9deg) scale(.98) !important;
    }

    .home-hero-display-cards:hover .home-hero-display-card--middle,
    .home-hero-display-cards:focus-visible .home-hero-display-card--middle,
    .home-hero-display-cards.is-display-hovered .home-hero-display-card--middle {
        transform: translate3d(102px, 0, 42px) rotate(-7deg) scale(.98) !important;
    }

    .home-hero-display-cards:hover .home-hero-display-card--bottom,
    .home-hero-display-cards:focus-visible .home-hero-display-card--bottom,
    .home-hero-display-cards.is-display-hovered .home-hero-display-card--bottom {
        transform: translate3d(48px, 162px, 38px) rotate(8deg) scale(.98) !important;
    }
}

@media (max-width: 480px) {
    .home-editorial-hero__visual-panel,
    .home-editorial-visual-stack.home-hero-display-stack {
        min-height: 455px !important;
    }

    .home-hero-display-card--main {
        width: min(78vw, 270px) !important;
        height: 322px !important;
    }

    .home-hero-display-card--top,
    .home-hero-display-card--middle,
    .home-hero-display-card--bottom {
        width: min(54vw, 178px) !important;
        height: 104px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-editorial-visual-slide.home-hero-display-slide,
    .home-hero-display-card,
    .home-hero-display-card img {
        transition: none !important;
    }
}


/* ============================================================
   Backward-compatible fallback
   If Index.cshtml still has the previous main-photo + postcard markup,
   this forces that old markup into the same stacked display-card look.
   ============================================================ */

.home-editorial-visual-slide:not(.home-hero-display-slide)::before,
.home-editorial-visual-slide:not(.home-hero-display-slide)::after {
    display: none !important;
    content: none !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-main-photo,
.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.1) !important;
    box-shadow:
        0 22px 52px color-mix(in srgb, var(--clr-primary-dark) 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
    filter: grayscale(1) saturate(.78) brightness(.86) !important;
    opacity: 1 !important;
    transition:
        transform 680ms cubic-bezier(.22, 1, .36, 1),
        filter 520ms ease,
        box-shadow 520ms ease !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-main-photo img,
.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.03) !important;
    transition: transform 900ms cubic-bezier(.22, 1, .36, 1) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-main-photo {
    z-index: 4 !important;
    width: min(345px, 58vw) !important;
    height: 430px !important;
    transform: translate(-76%, -50%) translate3d(0, 0, 40px) rotate(-1.5deg) !important;
    filter: grayscale(.22) saturate(.98) brightness(.9) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--top {
    z-index: 3 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate(-5%, -144%) translate3d(0, 0, 18px) rotate(3deg) scale(.96) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--middle {
    z-index: 2 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate(4%, -50%) translate3d(0, 0, 8px) rotate(-2deg) scale(.95) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--bottom {
    z-index: 1 !important;
    width: 270px !important;
    height: 154px !important;
    transform: translate(-5%, 44%) translate3d(0, 0, 0) rotate(2.5deg) scale(.94) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-main-photo,
.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-postcard {
    filter: grayscale(0) saturate(1.08) brightness(1) !important;
    box-shadow:
        0 30px 76px color-mix(in srgb, var(--clr-primary-dark) 42%, transparent),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-main-photo img,
.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-postcard img {
    transform: scale(1.075) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-main-photo {
    transform: translate(-86%, -52%) translate3d(0, 0, 78px) rotate(-5deg) scale(1.03) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-postcard--top {
    transform: translate(-20%, -162%) translate3d(0, 0, 62px) rotate(7deg) scale(1.04) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-postcard--middle {
    transform: translate(8%, -52%) translate3d(0, 0, 58px) rotate(-5deg) scale(1.045) !important;
}

.home-editorial-visual-slide:not(.home-hero-display-slide):hover .home-editorial-postcard--bottom {
    transform: translate(-20%, 62%) translate3d(0, 0, 52px) rotate(6deg) scale(1.04) !important;
}

@media (max-width: 767.98px) {
    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-main-photo {
        width: min(74vw, 310px) !important;
        height: 360px !important;
        transform: translate(-62%, -52%) rotate(-4deg) !important;
    }

    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--top,
    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--middle,
    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--bottom {
        display: block !important;
        width: min(52vw, 210px) !important;
        height: 120px !important;
    }

    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--top { transform: translate(-18%, -168%) rotate(7deg) scale(.92) !important; }
    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--middle { transform: translate(-3%, -50%) rotate(-5deg) scale(.91) !important; }
    .home-editorial-visual-slide:not(.home-hero-display-slide) .home-editorial-postcard--bottom { transform: translate(-18%, 68%) rotate(6deg) scale(.9) !important; }
}