/* ==========================================================================
   WHEN PEOPLE BRING ME IN — pinned horizontal sequence
   The band pins when it reaches the top of the viewport. Vertical scrolling
   then moves a track of four large horizontal cards sideways, forwards and
   backwards, and settles on the nearest card when scrolling stops. After the
   last card the pin releases and the page carries on.
   Fallbacks: native swipe carousel on small or short screens, a plain vertical
   stack under reduced motion.
   ========================================================================== */

.problems { position: relative; background: var(--brand-green-deep); color: var(--ink-on-dark); }

/* ---- Head (shared) ---- */
.how-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl) var(--space-4xl); }
.how-head .section-head { margin-bottom: 0; }
.how-head .eyebrow { color: var(--brand-gold); }
.how-head h2 { color: var(--ink-on-dark); }
.how-head p { color: var(--ink-on-dark-secondary); }

.how-progress { display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-2xs); color: var(--ink-on-dark-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.how-progress b { color: var(--ink-on-dark); font-weight: 600; }
.how-bar { position: relative; width: 160px; height: 2px; border-radius: 2px; background: var(--rule-on-dark-strong); overflow: hidden; }
.how-bar i { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--brand-gold); border-radius: 2px; }
.how-hint { color: var(--ink-on-dark-muted); font-weight: 500; letter-spacing: var(--tracking-normal); text-transform: none; }

/* ---- Track and cards (shared) ---- */
.how-viewport { position: relative; }
.how-track {
  --edge: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  position: relative;
  display: flex; gap: var(--space-2xl);
  width: max-content;
  padding-inline: var(--edge);
  list-style: none;
  will-change: transform;
}

.how-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 72vw, 1060px);
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-4xl);
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  background: var(--wash-on-dark);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius-xl);
  transition: background-color var(--motion-enter) var(--ease), border-color var(--motion-enter) var(--ease), opacity var(--motion-enter) var(--ease);
}
.how-card.is-active { background: var(--wash-on-dark-hover); border-color: var(--rule-on-dark-strong); }

.how-card-aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); min-height: 100%; }
.how-num { font-family: var(--font-serif); font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 0.9; letter-spacing: var(--tracking-display); color: var(--brand-gold); }
.how-figure { display: block; width: 100%; max-width: 240px; color: var(--brand-gold); opacity: 0.9; }
.how-figure svg { width: 100%; height: auto; overflow: visible; }
.how-figure path, .how-figure circle, .how-figure rect, .how-figure line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.how-figure .fill { fill: currentColor; stroke: none; opacity: 0.35; }

.how-card-main { display: flex; flex-direction: column; min-width: 0; }
.how-situation { font-family: var(--font-serif); font-size: var(--type-section); line-height: var(--leading-heading); letter-spacing: var(--tracking-title); color: var(--brand-ivory); text-wrap: balance; margin-bottom: var(--space-xl); }
.how-name { display: block; margin-bottom: var(--space-md); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-gold); }
.how-points { list-style: none; display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
.how-points li { position: relative; padding-left: var(--space-xl); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--ink-on-dark-secondary); }
.how-points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 1px; background: var(--brand-gold); }
.how-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-base); font-weight: 600; color: var(--ink-on-dark); border-bottom: 1px solid var(--rule-on-dark-strong); padding-bottom: 2px; transition: gap var(--motion-move) var(--ease), color var(--motion-state) var(--ease), border-color var(--motion-state) var(--ease); }
.how-go svg { width: 18px; height: 18px; }
.how-go:hover, .how-go:focus-visible { gap: var(--space-sm); color: var(--brand-gold); border-color: var(--brand-gold); }

/* ---- Pinned mode (wide and tall enough screens, motion allowed) ---- */
.problems.is-pinned .how-pin { position: relative; }
.problems.is-pinned .how-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: safe center; gap: clamp(1.25rem, 4vh, 3.25rem);
  padding-top: calc(var(--nav-height) + clamp(0.5rem, 2vh, 1.5rem));
  padding-bottom: clamp(1rem, 3vh, 2rem);
  overflow: clip;
}
.problems.is-pinned .how-head h2 { margin-bottom: var(--space-sm); }
.problems.is-pinned .how-viewport { overflow: clip; }
/* Cards in the track stretch to the tallest one, so the spacing inside decides the height of all four.
   Everything here grows with the window height instead of switching at a breakpoint: a hard step made
   the cards jump from comfortable to oversized the moment the window passed it. */
.problems.is-pinned .how-card {
  min-height: clamp(350px, 48vh, 480px);
  padding: clamp(1.75rem, 1rem + 2vh, 3.5rem);
}
.problems.is-pinned .how-situation { font-size: clamp(1.5rem, 1rem + 1.9vh, 2.125rem); margin-bottom: clamp(0.875rem, 0.4rem + 1.3vh, 1.5rem); }
.problems.is-pinned .how-name { margin-bottom: clamp(0.5rem, 0.2rem + 1vh, 1rem); }
.problems.is-pinned .how-points { gap: clamp(0.5rem, 0.25rem + 0.8vh, 0.75rem); margin-bottom: clamp(1rem, 0.5rem + 1.8vh, 2rem); }
.problems.is-pinned .how-points li { font-size: clamp(0.9375rem, 0.65rem + 0.75vh, 1.125rem); line-height: var(--leading-body); }
.problems.is-pinned .how-num { font-size: clamp(3rem, 2rem + 5vh, 6.5rem); }
.problems.is-pinned .how-figure { max-width: clamp(140px, 60px + 18vh, 240px); }
.problems.is-pinned .how-card-aside { gap: clamp(1rem, 0.4rem + 2.2vh, 2rem); }
@media (max-height: 780px) {
  .problems.is-pinned .how-head .section-head p { display: none; }
}
.problems.is-pinned .how-card:not(.is-active) .how-card-main,
.problems.is-pinned .how-card:not(.is-active) .how-card-aside { opacity: 0.5; transition: opacity var(--motion-enter) var(--ease); }
.problems.is-pinned .how-card.is-active .how-card-main,
.problems.is-pinned .how-card.is-active .how-card-aside { opacity: 1; transition: opacity var(--motion-enter) var(--ease); }

/* ---- Swipe mode (small or short screens) ---- */
.problems:not(.is-pinned) { padding: var(--space-section) 0; }
.problems:not(.is-pinned) .how-sticky { display: flex; flex-direction: column; gap: var(--space-3xl); }
.problems:not(.is-pinned) .how-hint-scroll { display: none; }
.problems:not(.is-pinned) .how-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.problems:not(.is-pinned) .how-viewport::-webkit-scrollbar { display: none; }
.problems:not(.is-pinned) .how-track { --edge: var(--gutter); gap: var(--space-md); }
.problems:not(.is-pinned) .how-card { width: min(86vw, 640px); scroll-snap-align: start; }
@media (max-width: 899.98px) {
  .how-card { grid-template-columns: 1fr; gap: var(--space-md); padding: clamp(1.25rem, 4.5vw, 1.75rem); }
  .how-card-aside { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 0; }
  .how-figure { max-width: 96px; }
  .how-num { font-size: 2.75rem; }
  .how-situation { font-size: var(--type-subsection); margin-bottom: var(--space-md); }
  .how-name { margin-bottom: var(--space-xs); }
  .how-points { gap: var(--space-xs); margin-bottom: var(--space-lg); }
  .how-points li { font-size: var(--text-base); padding-left: var(--space-lg); }
}

/* ---- Reduced motion: no pin, no sideways travel, a plain stack ---- */
@media (prefers-reduced-motion: reduce) {
  .problems .how-viewport, .problems:not(.is-pinned) .how-viewport { overflow: visible; scroll-snap-type: none; }
  .problems .how-track { flex-direction: column; width: auto; padding-inline: var(--gutter); max-width: var(--container-max); margin-inline: auto; }
  .problems .how-card { width: 100%; }
  .how-progress { display: none; }
}