/* ============================================================
   Sticky cards — page-scoped overrides for the GSAP/ScrollTrigger
   stacked-cards effect used on home-15 / sec-4.
   Loaded ONLY on index-15.html (after main.css) so the
   selectors override the default flex layout for .sec-4-home-15__cards.
   ============================================================ */

/* Title-bar and repo strip must always paint above the absolutely-
   positioned cards so the cards never visually crawl over them
   during scroll-into-view / pin transitions. */
.sec-4-home-15__title-bar {
    position: relative;
    z-index: 10;
    background-color: var(--at-neutral-0);
}

.sec-4-home-15__repos {
    position: relative;
    z-index: 10;
    background-color: var(--at-neutral-0);
}

.sec-4-home-15__cards {
    position: relative;
    display: block;
    gap: 0;
    height: 100vh;
    margin: 0 auto;
    perspective: 1000px;
}

/* Card width is capped so the height derived from the aspect ratio
   never exceeds the parent's content area. This keeps a guaranteed
   gap above (and below) the card — even on short viewports — so the
   centered card never reaches up into the title-bar's vertical band. */
.sec-4-home-15__card {
    --sec4-gap: 140px; /* vertical breathing room (split top + bottom) */
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, calc((100vh - var(--sec4-gap)) * 1428 / 1011));
    max-width: 100%;
    aspect-ratio: 1428 / 1011;
    height: auto;
    transform-origin: center bottom;
    will-change: transform;
}

.sec-4-home-15__card:nth-child(1) { z-index: 5; }
.sec-4-home-15__card:nth-child(2) { z-index: 4; }
.sec-4-home-15__card:nth-child(3) { z-index: 3; }
.sec-4-home-15__card:nth-child(4) { z-index: 2; }
.sec-4-home-15__card:nth-child(5) { z-index: 1; }

/* Mobile / tablet: normal vertical stack — no scroll-pin or fixed vh stage */
@media (max-width: 991.98px) {
    .sec-4-home-15__cards {
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: auto;
        min-height: 0;
        margin: 0;
        perspective: none;
    }

    .sec-4-home-15__card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 5;
        height: auto;
        transform: none !important;
        will-change: auto;
    }

    .sec-4-home-15__card:nth-child(1),
    .sec-4-home-15__card:nth-child(2),
    .sec-4-home-15__card:nth-child(3),
    .sec-4-home-15__card:nth-child(4),
    .sec-4-home-15__card:nth-child(5) {
        z-index: auto;
    }

    .sec-4-home-15__title-bar {
        margin-bottom: 32px;
    }

    .sec-4-home-15.pt-65 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .sec-1-portfolio-1.pt-150 {
        padding-top: 110px;
        padding-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    .sec-4-home-15__cards {
        gap: 28px;
    }

    .sec-4-home-15__title-bar {
        padding: 16px;
        margin-bottom: 24px;
    }

    .sec-4-home-15.pt-65 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .sec-1-portfolio-1.pt-150 {
        padding-top: 100px;
        padding-bottom: 28px;
    }

    .sec-4-home-15__repos {
        margin-top: 32px;
    }

    .sec-4-home-15.pb-120 {
        padding-top: 48px;
        padding-bottom: 64px;
    }
}