/* ============================================================
   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;
}

@media (max-width: 991.98px) {
  .sec-4-home-15__cards {
    height: 80vh;
  }
  .sec-4-home-15__card {
    --sec4-gap: 100px;
    width: min(100%, calc((80vh - var(--sec4-gap)) * 1428 / 1011));
  }
}

@media (max-width: 575.98px) {
  .sec-4-home-15__cards {
    height: 70vh;
  }
  .sec-4-home-15__card {
    --sec4-gap: 80px;
    width: min(100%, calc((70vh - var(--sec4-gap)) * 4 / 5));
    aspect-ratio: 4 / 5;
  }
}