/* ============================================================
   Section 4 · Amenities — "Six Worlds. One Address."
   Not a grid of icon cards, not a carousel: a vertical category
   rail drives one large image stage that crossfades — the six
   worlds are navigated, not scrolled past. Amenity names surface
   as a typographic list under the active category, not as
   individual icon tiles.
   ============================================================ */

.s4 {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  padding: clamp(5rem, 13vh, 9.5rem) 0;
  isolation: isolate;
}

/* ambient depth echoing section-3's arcs, mirrored to the top-right
   and in terracotta rather than ember — a family resemblance, not a repeat */
.s4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at 92% 8%,
      transparent 13.6rem,
      color-mix(in srgb, var(--terracotta) 20%, transparent) 13.9rem,
      transparent 14.3rem,
      transparent 19.1rem,
      color-mix(in srgb, var(--terracotta) 12%, transparent) 19.4rem,
      transparent 19.8rem
    ),
    radial-gradient(
      28rem 28rem at 92% 8%,
      color-mix(in srgb, var(--terracotta) 8%, transparent),
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      var(--ground-deep) 0%,
      var(--ground) 18%,
      var(--ground) 82%,
      var(--ground-deep) 100%
    );
}

.s4-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-x);
}

/* ---------- editorial intro ---------- */
.s4-intro {
  max-width: 40rem;
}

.s4-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 0.6rem;
}

.s4-heading em {
  display: block;
  margin-top: 0.1em;
  font-style: italic;
  color: var(--ember);
}

.s4-sub {
  margin-top: 1rem;
  max-width: 42ch;
  font-size: clamp(1rem, 0.8vw + 0.7rem, 1.14rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- stage: rail + crossfading frame ---------- */
.s4-stage {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: stretch;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

/* ---------- rail ---------- */
.s4-rail {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.s4-cat {
  border-bottom: 1px solid var(--hairline);
}

.s4-cat-toggle {
  position: relative;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0 1.05rem 1rem;
  text-align: left;
}

.s4-cat-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: var(--terracotta);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.s4-cat.is-active .s4-cat-toggle::before {
  transform: scaleY(1);
}

.s4-cat-num {
  flex: none;
  padding-top: 0.15rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  transition: color 0.4s ease;
}

.s4-cat.is-active .s4-cat-num {
  color: var(--ember);
}

.s4-cat-head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.s4-cat-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  transition: color 0.4s ease;
}

.s4-cat.is-active .s4-cat-name {
  color: var(--ink);
}

.s4-cat-tag {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-faint);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}

.s4-cat.is-active .s4-cat-tag {
  opacity: 1;
  max-height: 2.4rem;
}

/* the amenity names — a typographic list, not icon tiles */
.s4-cat-list {
  padding: 0 0 0 calc(0.7rem + 1rem);
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 0.35rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition:
    max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease,
    padding-bottom 0.55s ease;
}

.s4-cat.is-active .s4-cat-list {
  max-height: 10rem;
  opacity: 1;
  padding-bottom: 1.1rem;
}

.s4-cat-list span::after {
  content: "\00B7";
  display: inline-block;
  margin: 0 0.55rem;
  color: var(--hairline-ember);
}

.s4-cat-list span:last-child::after {
  content: "";
  margin: 0;
}

.s4-active-list {
  display: none;
}

/* ---------- frame: the large crossfading image ---------- */
.s4-frame {
  position: relative;
  overflow: hidden;
  height: clamp(26rem, 62vh, 40rem);
  border-radius: 4px;
  margin-right: calc(var(--page-x) * -1);
  background: var(--ground-deep);
}

.s4-imgs {
  position: absolute;
  inset: 0;
}

.s4-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.s4-img.is-active {
  opacity: 1;
  transform: scale(1);
}

.s4-frame-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--midnight) 0%,
    color-mix(in srgb, var(--midnight) 46%, transparent) 32%,
    transparent 60%
  );
}

.s4-frame-caption {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
}

.s4-frame-index {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ember);
}

.s4-frame-index i {
  margin-left: 0.15em;
  font-style: normal;
  color: var(--ink-faint);
}

.s4-frame-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--ink);
  transition: opacity 0.35s ease;
}

/* ---------- scroll reveal ---------- */
.s4-intro > *,
.s4-rail,
.s4-frame {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.s4.is-in .s4-intro > *,
.s4.is-in .s4-rail,
.s4.is-in .s4-frame {
  opacity: 1;
  transform: none;
}

.s4.is-in .s4-heading { transition-delay: 0.05s; }
.s4.is-in .s4-sub { transition-delay: 0.1s; }
.s4.is-in .s4-rail { transition-delay: 0.18s; }
.s4.is-in .s4-frame { transition-delay: 0.26s; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .s4-stage {
    display: flex;
    flex-direction: column;
  }

  /* rail becomes a horizontal scroll strip of compact tabs */
  .s4-rail {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }
  .s4-rail::-webkit-scrollbar {
    display: none;
  }

  .s4-cat {
    flex: none;
    border-bottom: none;
  }

  .s4-cat-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.4rem 1.1rem 0.9rem 1.1rem;
    white-space: nowrap;
  }

  .s4-cat-toggle::before {
    left: 0.2rem;
    right: 0.2rem;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
  }

  .s4-cat.is-active .s4-cat-toggle::before {
    transform: scaleX(1);
  }

  .s4-cat-tag,
  .s4-cat-list {
    display: none;
  }

  /* the active category's amenity names surface below the frame instead */
  .s4-active-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    margin-top: 1.1rem;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .s4-active-list span::after {
    content: "\00B7";
    display: inline-block;
    margin: 0 0.55rem;
    color: var(--hairline-ember);
  }

  .s4-active-list span:last-child::after {
    content: "";
    margin: 0;
  }

  .s4-frame {
    margin-right: calc(var(--page-x) * -1);
    height: clamp(18rem, 62vw, 26rem);
    order: -1;
  }
}

@media (max-width: 560px) {
  .s4-heading {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }
  .s4-frame {
    border-radius: 0 0 4px 4px;
  }
  .s4-cat-toggle {
    padding: 0.4rem 0.85rem 0.9rem 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s4-intro > *,
  .s4-rail,
  .s4-frame,
  .s4-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .s4-cat-toggle::before,
  .s4-cat-tag,
  .s4-cat-list {
    transition: none !important;
  }
}