/* MaiCoach.io — About page
   Layered on top of main.css: tokens, header, footer and .rule all come from there.
   This file only adds the scrolling-deck patterns the About page needs. */

/* ------------------------------------------------------------------ slide */

/* A deck slide. Taller rhythm than .section so each one owns the viewport. */
.slide {
  position: relative;
  padding: calc(var(--rhythm) * 1.15) var(--gutter);
}

/* ------------------------------------------------------------------- hero */

.about-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.about-hero-copy { max-width: 660px; }

/* The title slide's h1 is the page's loudest thing; a touch tighter than home. */
.about-hero h1 {
  font: 800 clamp(38px, 5vw, 66px)/1.03 var(--font-heading);
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0 0 26px;
}
.about-hero .lead { margin-bottom: 0; }

/* ----------------------------------------------------- slide 2 · what we do */

/* Statement type. Scale matches .problem on the home page so the two pages
   feel like one site. */
.statement {
  font: 600 clamp(25px, 2.7vw, 37px)/1.34 var(--font-heading);
  letter-spacing: -0.022em;
  text-wrap: pretty;
  margin: 0;
  max-width: 940px;
}
/* The second sentence names the stack; it sits back so the first sentence leads. */
.statement-sub {
  font: 400 clamp(17px, 1.35vw, 19px)/1.62 var(--font-body);
  color: var(--text-3);
  letter-spacing: 0;
  max-width: 760px;
  margin: 26px 0 0;
}

/* --------------------------------------------------- slide 3 · how we do it */

/* Four steps, no graphic — the typography is the diagram. Numbered hairline
   rows, verb carried in the accent, description in body colour. */
.chain { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.chain li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 26px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.chain .num {
  font: 500 13px/1.5 var(--font-mono);
  color: var(--cyan);
  letter-spacing: .06em;
}
.chain p {
  margin: 0;
  font: 400 clamp(18px, 1.7vw, 23px)/1.5 var(--font-body);
  color: var(--text-3);
  text-wrap: pretty;
}
.chain .verb {
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.012em;
}
.chain-out {
  margin: 30px 0 0;
  font: 400 italic clamp(15px, 1.2vw, 17px)/1.6 var(--font-body);
  color: var(--muted);
}

/* ------------------------------------------- slide 4 · why you can trust it */

/* The kicker under the header is the one line that says this generalises
   past sport. It gets a rule and room. */
.premise {
  font: 400 italic clamp(16px, 1.4vw, 19px)/1.62 var(--font-body);
  color: var(--text-2);
  max-width: 780px;
  margin: 0 0 52px;
  padding-left: 20px;
  border-left: 2px solid rgba(14,212,249,0.45);
}

/* One column, always. The cards are no longer four equal tiles to scan: two of
   them carry evidence inside, so they have unequal weight and a grid would fight
   that. Stacked, each claim gets read in turn and its evidence lands with it. */
.claims {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.claim {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.claim h3 {
  margin: 0;
  font: 700 clamp(19px, 1.5vw, 22px)/1.28 var(--font-heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.claim p { margin: 0; font: 400 15px/1.66 var(--font-body); color: var(--text-3); }
/* The sentence worth protecting — see docs/MaiCoach_About_MVP_v4.md */
.claim em.key { color: var(--text); font-style: normal; font-weight: 600; }

/* Claims 01 and 03 carry their evidence inside them. It sits in a well cut into
   the card - --canvas is darker than --surface, so the media reads as a specimen
   the claim is holding up rather than as a second card sitting beside it. */
.claim-evidence {
  /* Hug the media and sit centred in the card. The assets are deliberately
     sized (306 px panels, a 620 px A/B frame), so a full-width well would just
     frame a band of empty ground beside them; `margin: 6px auto 0` then centres
     what is left. The prose above stays flush left - only the figure is centred. */
  width: fit-content;
  max-width: 100%;
  margin: 6px auto 0;
  padding: 20px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.claim-evidence > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ media blocks */

/* Full-width evidence band. Used for the A/B pair, which is the best asset
   on the page and needs the width. */
.band { margin-top: 44px; }
.band-label {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.band-label .tagline {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.band-label .note { font: 400 13px/1.4 var(--font-mono); color: var(--muted); }

figure.band-fig { margin: 0; }
figure.band-fig figcaption {
  margin-top: 14px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--text-3);
  max-width: 760px;
}
figure.band-fig figcaption strong { color: var(--text); font-weight: 600; }

/* Two panels side by side — the 2D-overlay / 3D-reconstruction pair, and the
   pass/fail chart pair on slide 5. */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* A detail pair, not a hero. Half the column width so the reconstruction sits as
   evidence beside the claims instead of dominating the slide. The assets stay
   600x800 and render at ~305 px, i.e. a crisp 2x on a retina screen -- shrink the
   frame, never the source. */
.two-up.compact { grid-template-columns: repeat(2, minmax(0, 306px)); justify-content: start; }
.two-up > figure.band-fig figcaption { margin-top: 10px; font-size: 14px; }

/* Aspect overrides for the shared .media-slot placeholder from main.css */
.media-slot.wide  { aspect-ratio: 16 / 9; }
.media-slot.ab    { aspect-ratio: 3 / 2; }    /* two portrait crops hstacked, 1200x800 */

/* The claim-03 comparison at half width. Like the claim-01 pair it is evidence
   beside an argument, not a hero, and the 1200x800 asset then renders at ~2x. */
.band-fig.half { max-width: 620px; }

/* A slot holding a real asset drops the placeholder's dashed-hatch fill and
   padding so the media reaches the frame edges. */
.media-slot.is-live { background: var(--canvas); padding: 0; }
.media-slot.chart { aspect-ratio: 4 / 3; }
.media-slot.chart-wide { aspect-ratio: 2 / 1; }   /* a time series wants width */
.media-slot.tall  { aspect-ratio: 3 / 4; }    /* a standing figure fills a portrait frame */
.media-slot p { max-width: 380px; }

/* A real asset drops in here and inherits the placeholder's frame.
   object-fit is CONTAIN, not cover, and that is deliberate. These assets are
   whole figures: an athlete with head, hands and feet. `cover` fills the box by
   cropping whatever will not fit, so ANY mismatch between the asset's aspect and
   the slot's silently amputates the subject - which is exactly what happened when
   a 3:4 pair landed in a 4:3 slot and lost the ball and both feet. `contain`
   letterboxes instead, so a mismatch shows as empty space rather than as a figure
   with no head. Where the aspects do match, the two are identical. */
.media-slot video, .media-slot img, .media-slot svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* ------------------------------------------------ slide 5 · one skill */

.skill-head {
  font: 700 clamp(26px, 2.5vw, 36px)/1.15 var(--font-heading);
  letter-spacing: -0.028em;
  margin: 0 0 22px;
}
.skill-body {
  font: 400 clamp(17px, 1.35vw, 19px)/1.65 var(--font-body);
  color: var(--text-3);
  max-width: 820px;
  margin: 0 0 20px;
}
.skill-body:last-of-type { margin-bottom: 0; }
.skill-body strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------- slide 6 · disclaimer */

.disclaimer p {
  font: 400 clamp(16px, 1.3vw, 18px)/1.7 var(--font-body);
  color: var(--text-3);
  max-width: 720px;
  margin: 0 0 18px;
}
.disclaimer p.first { color: var(--text); font-weight: 500; }
.disclaimer .contact {
  display: inline-block;
  margin-top: 14px;
  font: 600 clamp(18px, 1.6vw, 22px)/1 var(--font-mono);
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .about-hero { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .slide { padding-top: calc(var(--rhythm) * 1.05); }
  .two-up { grid-template-columns: 1fr; }
  .claim { padding: 22px; }
  .claim-evidence { padding: 14px; }
  .two-up.compact { grid-template-columns: minmax(0, 306px); }
  .chain li { grid-template-columns: 42px minmax(0, 1fr); gap: 0 16px; padding: 22px 0; }
  .premise { margin-bottom: 38px; padding-left: 16px; }
  /* 3:2 already reads at phone width — each panel is a portrait crop. */
}