/* ==========================================================================
   feature-carousel — iteration block
   --------------------------------------------------------------------------
   Light editorial section. Header is a 1fr / 1fr Swiss grid:
     LEFT  → mono-caps subheading (eyebrow) + big sans heading
     RIGHT → lede paragraph
   Below it, a sticky-pinned 100vh stage holds a horizontal rail of 8
   cards alternating MEDIA / TEXT. Vertical scroll drives the rail's
   translateX (scroll-jacked): as the user scrolls through the section,
   the cards march left; when the last card hits the right edge, vertical
   scroll naturally resumes into whatever follows. A Milano-Red progress
   hairline below the rail tracks horizontal position.

   PLAYGROUND MODE: raw values, no token snap.
   ========================================================================== */

.fc {
  /* Dark palette — paper inverted to ink. Cards drop to dark grey
     surfaces (one step elevated from the section bg) so they read as
     distinct frames against the black. */
  --fc-bg:         #000000;
  --fc-surface:    #15171c;
  --fc-surface-2:  #1c1f26;
  --fc-ink:        #f4f5f7;
  --fc-dim:        rgba(255, 255, 255, 0.62);
  --fc-faint:      rgba(255, 255, 255, 0.42);
  --fc-rule:       rgba(255, 255, 255, 0.10);
  --fc-accent:     #C42800;

  --fc-card-w:     400px;
  --fc-card-h:     460px;
  --fc-gap:        14px;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--fc-bg);
  color: var(--fc-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Tall outer track so vertical scroll has somewhere to flow while the
     sticky stage pins. JS overrides this with an exact pixel height
     equal to (viewport + rail.scrollWidth − rail.clientWidth) so the
     section is exactly as tall as the horizontal travel — no dead zone
     at the end. */
  min-height: 500vh;
}

.fc__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--fc-bg);
}

/* ---------- Header (subheading + heading | lede) ----------
   Sits at the top of the pinned stage. Heading hierarchy: small mono-caps
   subheading, big sans heading, then a lede paragraph in the right column. */

.fc__head {
  flex-shrink: 0;
  /* Site-wide page grid — css/layout.css (border-box is global, base.css). */
  width: 100%;
  max-width: var(--teako-page-max);
  margin: 0 auto;
  padding: 80px var(--teako-page-gutter) 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}

.fc__head-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fc__subheading {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fc-dim);
}

.fc__heading {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 300; /* D1 */
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--fc-ink);
  max-width: 14ch;
}

.fc__lede {
  margin: 0 0 6px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--fc-dim);
  max-width: 56ch;
}

/* ---------- Rail (scroll-jacked horizontal translate) ----------
   No native overflow scroll — JS writes transform: translateX on .fc__rail
   based on overall vertical scroll progress through .fc. The wrap clips
   what's outside the viewport; .fc__rail extends beyond it. */

.fc__rail-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fc__rail {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--fc-gap);
  /* Card 1's left edge must land exactly on the header text's left edge.
     The header is constrained to max-width 1400 px and centred, so its
     content edge sits at max(56px, (100vw − 1400px)/2 + 56px). The rail
     is full-bleed, so we have to recompute the same value here instead
     of relying on a flat 56-px padding — otherwise on viewports wider
     than 1512 px the card slides to the left of the heading. */
  padding-left: max(56px, calc(50vw - 700px + 56px));
  padding-right: max(56px, calc(50vw - 700px + 56px));
  will-change: transform;
  transform: translateX(var(--fc-rail-x, 0));
}

.fc__card {
  flex-shrink: 0;
  /* border-box so a text card's padding sits INSIDE its fixed 400×460 size.
     There is no global box-sizing reset in this theme, so the default
     content-box was adding the .fc__card--text padding (30/30/24) on top of
     the fixed size — inflating text cards to ~460×514 while media cards stayed
     400×460. That mismatch misaligned the card bottoms and pushed the
     "Learn more" CTA past the stage's clip in every browser (surfaced in
     Safari). border-box keeps every card exactly --fc-card-w × --fc-card-h. */
  box-sizing: border-box;
  width: var(--fc-card-w);
  /* Fit the rail's available height (stage height − header) rather than a hard
     460px. The header grows on wide viewports (bigger display type) and on
     short windows the stage itself shrinks — either way the rail can end up
     shorter than 460px, and a fixed height then clips the card top (pill) and
     bottom (CTA). height:100% fills the rail, capped at --fc-card-h so it never
     exceeds the design size on tall viewports. */
  height: 100%;
  max-height: var(--fc-card-h);
  min-height: 0;
  /* Hard corners — the section sits inside an editorial layout where
     rounded cards would feel out of register with the Swiss grid. */
  border-radius: 0;
  overflow: hidden;
  background: var(--fc-surface);
  /* Border removed — the slight surface contrast with the section bg
     gives the cards enough definition on the dark background. */
  border: 0;
  box-shadow: none;
  position: relative;
}

/* ---------- Media card (image / video, full-bleed) ---------- */

.fc__media {
  position: absolute;
  inset: 0;
  background: var(--fc-surface-2);
}
.fc__media img,
.fc__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Text card ---------- */

.fc__card--text {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 24px;
  background: var(--fc-surface);
}

.fc__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 12px 7px 11px;
  /* D2: sharp corners are the house rule — the only pills on the site are
     the portfolio filters. */
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fc-ink);
  margin-bottom: 26px;
}
.fc__pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-accent);
  box-shadow: 0 0 8px rgba(196, 40, 0, 0.45);
  flex-shrink: 0;
}

.fc__card-heading {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif; /* D1 */
  font-size: 24px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fc-ink);
  max-width: 22ch;
}

.fc__body {
  margin: 14px 0 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fc-dim);
  max-width: 36ch;
}

.fc__cta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--fc-rule);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fc-ink);
  text-decoration: none;
  transition: color 200ms ease, gap 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
.fc__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fc-faint);
  transition: color 200ms ease, transform 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
.fc__cta:hover {
  color: #fff;
  gap: 16px;
}
.fc__cta:hover svg {
  color: var(--fc-accent);
  transform: translate(2px, -2px);
}

/* ---------- Progress bar (bottom of stage) ---------- */

.fc__progress {
  flex-shrink: 0;
  position: relative;
  margin: 24px 56px 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
  border-radius: 0;
}
.fc__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--fc-accent);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(196, 40, 0, 0.30);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .fc {
    --fc-card-w: 340px;
    --fc-card-h: 420px;
  }
  .fc__head {
    padding: 56px 28px 28px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* At narrow viewports the header is no longer max-width constrained, so
     a flat 28-px padding on the rail matches the header again. */
  .fc__rail {
    padding-left: 28px;
    padding-right: 28px;
  }
  .fc__progress { margin: 16px 28px 24px; }
}

/* Phones: clear the fixed nav (it overlays the pinned stage's first ~72px),
   tighter gutters, slightly smaller cards. */
@media (max-width: 760px) {
  /* Cards 15px taller on phones (client, 28 Aug 2026) — media and text cards
     share this one variable, so they stay matched. */
  .fc { --fc-card-w: 300px; --fc-card-h: 415px; }
  /* Heading sits a little lower on phones (client, 28 Aug 2026): 96 → 120. */
  .fc__head { padding: 120px 20px 20px; gap: 16px; }
  .fc__heading { max-width: none; }
  .fc__lede { max-width: none; }
  .fc__rail { padding-left: 20px; padding-right: 20px; }
  .fc__progress { margin: 12px 20px 20px; }
}

/* Short viewports — the pinned stage must fit the header AND a full card
   within 100vh. The header's default 80/36 padding + large heading eats the
   height the responsive cards need for their text (heading + body + CTA), so
   on short windows we trim the header footprint and tighten the in-card pill
   gap. Keeps everything visible when the window is dragged short, instead of
   clipping the card top (pill) or bottom (CTA). */
@media (max-height: 800px) {
  .fc__head { padding-top: 40px; padding-bottom: 24px; gap: 40px; }
  .fc__heading { font-size: clamp(28px, 3vw, 42px); }
  .fc__pill { margin-bottom: 16px; }
}
@media (max-height: 660px) {
  .fc__head { padding-top: 28px; padding-bottom: 18px; }
  .fc__heading { font-size: clamp(26px, 2.6vw, 36px); }
}

/* Phones in portrait ALSO match the short-viewport rules above (an iPhone's
   Safari viewport is ~660-750px tall), which pinned the heading at 40px and
   left the cards squeezed by the stage height. Client, 28 Aug 2026: heading
   a little lower (40 → 64) and cards ~15px taller — paid for by tightening
   the head's internal gap/padding and the progress margins, so the sticky
   stage still fits. Must sit AFTER the max-height blocks to win. */
@media (max-width: 760px) and (max-height: 800px) {
  .fc__head { padding-top: 64px; padding-bottom: 12px; gap: 24px; }
  .fc__progress { margin: 8px 20px 12px; }
}