/* ============================================================
   sections/session.css
   "What a session looks like" — screen 2. Three founder cards
   (photo + name + role + this-week question) in a centered row.
   Reveal animations are gated by `.cards.revealed`, added by
   IntersectionObserver in scripts/app.js.
   ============================================================ */

.screen--2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  border-top: 1px solid rgba(243, 237, 230, 0.09);
}

/* ---------- Section heading (centered, narrower than .sec-head) ---------- */
.s2-head {
  text-align: center;
  margin-bottom: 4.2vh;
}

.s2-title {
  margin: 0;
  font-family: "Gordita", sans-serif;
  font-weight: 300;
  font-size: 2.7vw;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--ink);
}

.s2-sub {
  margin: 1.4vh 0 0;
  font-family: "Neue Montreal", sans-serif;
  font-size: 1.16vw;
  color: var(--muted);
}

/* ---------- Cards row ---------- */
/* .cards-rail wraps .cards + the arrow buttons so the arrows can be
   absolutely positioned over the rail's left/right edges. On desktop
   the cards fit in a single row, so the rail just acts as a positioning
   context — no visual effect of its own. */
.cards-rail {
  position: relative;
  width: 100%;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3vw;
}

/* Carousel arrows — visible only when the .cards row is in scrollable
   carousel mode AND the device has a mouse (hover: hover). Touch
   carousels rely on the peek+swipe affordance instead. See
   styles/responsive.css for the visibility gate. */
.cards-arrow {
  display: none;  /* gated on per media query */
  position: absolute;
  top: 32%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(34, 23, 18, 0.85);
  border: 1px solid rgba(156, 170, 134, 0.55);
  color: var(--accent);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  place-items: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.cards-arrow:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Hide rather than disable: a visible-but-greyed-out button at the
   edge of the carousel is more noise than signal — when there's
   nowhere to go in that direction, the arrow disappears entirely. */
.cards-arrow:disabled { display: none; }

.cards-arrow--prev { left: 2vw; }
.cards-arrow--next { right: 2vw; }

.card {
  flex: 0 0 auto;
  width: 23vh;
  margin: 0;
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  /* Per-card snap alignment — only relevant when .cards is in
     carousel mode (mobile), no-op on desktop. center is the default
     for middle cards; first/last cards override below so they reach
     the visible edges cleanly with the scroll-padding gutter intact.
     With every card snapping the same way, card 3's snap target
     would have exceeded max scrollLeft and broken the "go right"
     navigation past card 2. */
  scroll-snap-align: center;
}
.cards .card:first-child { scroll-snap-align: start; }
.cards .card:last-child { scroll-snap-align: end; }

.cards.revealed .card { opacity: 1; transform: none; }
.cards.revealed .card:nth-child(2) { transition-delay: 0.13s; }
.cards.revealed .card:nth-child(3) { transition-delay: 0.26s; }

.card__photo {
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #2c211b;
}

.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card__text {
  margin-top: 1.6vh;
  text-align: center;
}

.card__name {
  display: block;
  font-family: "Gordita", sans-serif;
  font-size: 1.05vw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.55em;
}

.card__role {
  display: block;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.92vw;
  line-height: 1.4;
  color: var(--muted);
}

.card__week {
  display: block;
  margin-top: 1.5vh;
}

.card__week-label {
  display: block;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.72vw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5em;
}

.card__q {
  display: block;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.98vw;
  line-height: 1.4;
  color: var(--ink);
}

.s2-close {
  margin: 4.2vh 0 0;
  max-width: 44em;
  text-align: center;
  font-family: "Neue Montreal", sans-serif;
  font-size: 1.16vw;
  line-height: 1.5;
  color: var(--muted);
}