/* ==========================================================================
   experiences: stacking cards (from template "FeaturedCards"); experience-card
   ========================================================================== */

.experiences {
  position: relative;
  padding-block: var(--section-pad);
  background-color: var(--bg-soft);
}

.experiences__inner {
  display: grid;
  gap: var(--space-xl);
}

.experiences__head {
  display: grid;
  gap: var(--space-md);
  align-content: center;
  justify-items: start;
}

.experiences__title {
  max-width: 11ch;
}

/* Mobile/tablet: native sticky stack, JS only scales the cards below */
.experiences__stack {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 2rem;
}

.experiences__card {
  position: sticky;
  top: calc(var(--header-h) + 1rem + var(--i, 0) * 0.6rem);
  transform-origin: 50% 0;
}

.experiences__card:nth-child(1) { --i: 0; }
.experiences__card:nth-child(2) { --i: 1; }
.experiences__card:nth-child(3) { --i: 2; }
.experiences__card:nth-child(4) { --i: 3; }
.experiences__card:nth-child(5) { --i: 4; }
.experiences__card:nth-child(6) { --i: 5; }

@media (min-width: 600px) and (max-width: 999px) {
  .experiences__stack {
    width: min(100%, 30rem);
    margin-inline: auto;
  }
}

/* Desktop: pinned section. Text on the left, photos fill the whole right
   half of the screen edge to edge (like the Sea Breeze reference);
   each next photo slides up over the previous one (JS) */
@media (min-width: 1000px) {
  .experiences {
    height: 100svh;
    padding-block: 0;
    overflow: hidden;
  }

  .experiences__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    height: 100%;
  }

  .experiences__head {
    padding-right: var(--space-lg);
  }

  .experiences__stack {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 50%;
    padding: 0;
    overflow: hidden;
  }

  .experiences__card {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    will-change: transform;
  }

  .experiences__card:first-child {
    transform: none;
  }

  /* same element as .experience-card (BEM mix), so both classes are used here */
  .experiences__card.experience-card {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  /* text sits at the top: the next photo comes from below and covers it last */
  .experiences__card.experience-card {
    align-items: flex-start;
  }

  .experiences__card.experience-card::before {
    background: linear-gradient(180deg, rgba(0, 28, 30, 0.85) 0%, rgba(0, 28, 30, 0.25) 45%, rgba(0, 28, 30, 0) 75%);
  }

  .experiences__card .experience-card__content {
    justify-items: start;
    padding: 3.5rem 3rem;
    text-align: left;
  }

  .experiences__card .experience-card__text {
    margin-inline: 0;
  }
}

/* experience-card */
/* positioning comes from the parent element (.experiences__card: sticky/absolute) */
.experience-card {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-teal);
  color: var(--color-ivory);
  isolation: isolate;
}

.experience-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 28, 30, 0.9) 0%, rgba(0, 28, 30, 0.2) 55%, rgba(0, 28, 30, 0) 100%);
}

/* dims the card when the next one covers it */
.experience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: var(--color-teal-deep);
  opacity: var(--overlay-opacity, 0);
  pointer-events: none;
}

.experience-card__content {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
}

.experience-card__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  color: var(--color-copper);
  filter: brightness(1.25);
}

.experience-card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.experience-card__text {
  max-width: 22rem;
  margin: 0.25rem auto 0;
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

@media (min-width: 1000px) {
  .experience-card__content {
    padding: 2.5rem;
  }
}

.reduced-motion .experiences {
  height: auto;
  padding-block: var(--section-pad);
}

.reduced-motion .experiences__card {
  position: relative;
  top: auto;
  transform: none;
  margin-bottom: 1rem;
}

@media (min-width: 1000px) {
  .reduced-motion .experiences__stack {
    position: static;
    width: auto;
  }

  .reduced-motion .experiences__card.experience-card {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}