/*
 * app/web/css/philosophy.css — the public philosophy page (design/pages/philosophy/default.html at
 * 1440 and phone.html at 390, their <style> blocks made fluid and token-only). Loads after
 * landing.css, the shared marketing shell, which owns the masthead and phone menu, the .g12 grid,
 * bands and section type, the register, plate captions, the footage box (.hero-footage, App Bible
 * §19.7), the call-to-action band and the footer; everything here is this page's own layout.
 * Phone rules key on [data-layout='mobile'] (device-boot.js), never on a width query.
 */

/* ---------- hero: the statement on navy | the footage, seam at column 7 ---------- */

/* 768: the text column (kicker, H1, lede, contents, the action) needs 718 + 48 above and 40 below */
.hero { grid-template-rows: minmax(768px, auto); background: var(--color-field-navy); }
.hero__text {
  grid-column: c-start 1 / c-end 6;
  grid-row: 1;
  padding: 48px var(--grid-gap) 40px 0;   /* the design pads the text column 64 each side: 608 of content, the kicker rule ending at 672 */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero__kicker { margin-bottom: 20px; }
/* display-xl's sanctioned range is 56–88 (SYSTEM §5): 88 at the 1440 frame, 56 where the column is narrowest */
.hero__h1 {
  font: var(--text-display-xl);
  font-size: clamp(56px, 6.11vw, 88px);
  letter-spacing: var(--tracking-display-xl);
  color: var(--color-ink-on-navy);
  max-width: 608px;
}
.hero__lede { margin-top: 20px; font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink-on-navy); max-width: 608px; }
/* the hero's one action at button size: a 36px secondary on navy (slate edge, cream label); the masthead's teal sign-in stays the only primary */
.hero__action { margin-top: 28px; display: flex; }

/* the photograph side: the footage box fills columns 7–12 and the right margin; 39% keeps the design's framing of the still */
.hero__photo { grid-column: c-start 7 / full-end; grid-row: 1; position: relative; min-height: 0; }
.hero__footage { position: absolute; inset: 0; --footage-focus: 39% top; }
.hero__caption { position: absolute; right: 0; bottom: 0; max-width: 420px; }

/* the page's contents: a ruled list of the four section names with their titles; the whole row is the link.
   Hover underlines the title; focus is the kit's 2px ring, 2px outside the row (teal on navy). */
.toc { margin-top: 28px; display: flex; flex-direction: column; max-width: 608px; }
.toc__rows { display: flex; flex-direction: column; margin-top: 6px; }
.toc__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
}
.toc__num { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
/* one line at the 1440 frame; where the column is narrower the title drops under the gloss and the row grows */
.toc__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; }
.toc__title { font: var(--text-ui); color: var(--color-ink); white-space: nowrap; }
.toc__sub { font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.toc__arrow { display: flex; color: var(--color-ink); }   /* cream at rest: the resting cue that the row jumps */
.toc__row:hover .toc__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.toc__row:focus-visible { outline: none; border-radius: var(--radius-control); box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
/* a jump from the contents lands under the sticky masthead, not behind it */
#why, #matters, #teaching, #line { scroll-margin-top: var(--size-masthead); }

/* ---------- section furniture ---------- */

/* every section opens on its inventory name as a ruled kicker */
.sec-kicker { margin-bottom: 40px; }
/* a subtitle beside the title rather than under it: the column's full 640, so a one-sentence subtitle sits on one line */
.section-sub--beside { margin-top: 0; padding-top: 12px; max-width: 640px; }

/* ---------- why we build this: the creed on the reading field, the passage and the arithmetic beside it ---------- */

.creed { padding-top: 80px; padding-bottom: 88px; }
.creed__passage { font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink); max-width: 640px; }
.creed__figure {
  margin-top: 36px;
  padding: 20px 0 22px;
  border-top: var(--rule-strong);
  border-bottom: var(--rule-hair);
  display: flex;
  align-items: baseline;
  gap: 20px;
  max-width: 640px;
}
.creed__figtext { font: var(--text-body); color: var(--color-ink-2); max-width: 480px; }

/* ---------- what we believe: three ruled columns under one strong rule; the dividers sit in the gutters ---------- */

.values-band { padding-top: 88px; padding-bottom: 96px; }
.values {
  margin-top: 48px;
  padding-top: 28px;
  border-top: var(--rule-strong);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--grid-gap) minmax(0, 1fr) var(--grid-gap) minmax(0, 1fr);
  align-items: stretch;
}
.value { display: flex; flex-direction: column; min-width: 0; }
.values__gutter { display: flex; justify-content: center; }
.values__rule { width: 1px; background: var(--color-rule); }
/* each belief keeps its glyph beside the title; two title lines, so the three bodies start on one line */
.value__head { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; }
.value__icon { flex: none; display: flex; margin-top: 6px; color: var(--color-ink); }
.value__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); color: var(--color-ink); max-width: 280px; }
.value__text { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2); max-width: 400px; }

/* ---------- using TutorTalks in your teaching: the head and the plate at the left, the numbered register at the right ---------- */

.teaching { padding-top: 88px; padding-bottom: 96px; }
.teaching__sub { margin-top: 20px; max-width: 400px; }
/* the product, once, where the page promises the transcript: the real session still as a flat plate with a navy caption */
.teaching__plate { margin-top: 44px; display: flex; flex-direction: column; border: 1px solid var(--color-edge-strong); background: var(--color-field-navy); }
/* a baked 16:10 crop (App Bible §19.7a); `height: auto` is load-bearing against the width/height hints */
.teaching__plate img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.teaching__plate .plate-caption { align-items: flex-start; }
/* the shell's register, with a numeral where the home has a "who": the 80px column puts the text on column 6 */
.teaching .register__row { grid-template-columns: 80px minmax(0, 1fr); padding: 26px 0 30px; }
.register__num { font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); color: var(--color-ink); }
.teaching .register__text { max-width: 540px; }   /* 540: every row ends on a full line (at 600 row 1 ended on "you.") */

/* ---------- where the line is: the head, then the comparison as two peers on one white field ----------
   columns 1–6 and 7–12, a 1px navy rule in the gutter between them, twin section heads, and every row locked
   to the two-line height so the hairlines run straight across the seam */

.line-head { padding-top: 80px; padding-bottom: 48px; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
.line__seam { width: 1px; background: var(--color-edge-strong); }
/* on a screen wider than the frame the outer edges keep the content on the 1440 grid */
.line__side {
  padding: 56px 16px 80px max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter)));
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.line__side--not { padding-left: 15px; padding-right: max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter))); }
.line__list { margin-top: 24px; display: flex; flex-direction: column; border-top: 1px solid var(--color-rule); }
.line__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 16px;
  padding: 18px 0 20px;
  min-height: 91px;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.line__glyph { display: flex; margin-top: 5px; color: var(--color-ink); }
/* the left column's wider measure: row 1 on one line, row 2 two full lines; the right column keeps 480 */
.line__text { font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink); max-width: 540px; }
.line__side--not .line__text { max-width: 480px; }
.line__lead { font: var(--text-body-lg-strong); letter-spacing: var(--tracking-body-lg-strong); color: var(--color-ink); }

/* ---------- bottom call to action: the shell's band with two buttons ---------- */

.cta__title { max-width: 600px; }
.cta__action { gap: 12px; }

/* ---------- phone ---------- */

/* hero: text, then the footage with its caption plate */
[data-layout='mobile'] .hero { padding: 0; }
[data-layout='mobile'] .hero__text { padding: 24px var(--layout-gutter) 32px; }
[data-layout='mobile'] .hero__kicker { margin-bottom: 18px; }
[data-layout='mobile'] .hero__h1 { font: var(--text-display-md); letter-spacing: var(--tracking-display-md); max-width: none; }
[data-layout='mobile'] .hero__lede { margin-top: 16px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); max-width: none; }
[data-layout='mobile'] .toc { margin-top: 24px; max-width: none; }
[data-layout='mobile'] .toc__rows { margin-top: 4px; }
[data-layout='mobile'] .toc__row { grid-template-columns: 32px minmax(0, 1fr) 20px; padding: 8px 0; }
[data-layout='mobile'] .toc__text { flex-direction: column; align-items: stretch; gap: 1px; }
[data-layout='mobile'] .toc__title,
[data-layout='mobile'] .toc__sub { white-space: normal; }
[data-layout='mobile'] .toc__arrow svg { width: 20px; height: 20px; }
[data-layout='mobile'] .hero__action { margin-top: 24px; flex-direction: column; }
[data-layout='mobile'] .hero__action .tt-btn { width: 100%; }
[data-layout='mobile'] .hero__photo { height: 300px; }
[data-layout='mobile'] .hero__caption { right: auto; left: 0; max-width: 300px; }

/* sections */
[data-layout='mobile'] .creed,
[data-layout='mobile'] .values-band,
[data-layout='mobile'] .teaching { padding-top: 44px; padding-bottom: 52px; }
[data-layout='mobile'] .sec-kicker { margin-bottom: 24px; }
[data-layout='mobile'] .section-sub--beside { margin-top: 14px; padding-top: 0; max-width: none; }

/* the creed: statement, passage, the figure stacked */
[data-layout='mobile'] .creed__passage { margin-top: 20px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); max-width: none; }
[data-layout='mobile'] .creed__figure { margin-top: 28px; padding: 18px 0 20px; flex-direction: column; gap: 8px; max-width: none; }
[data-layout='mobile'] .creed__figtext { max-width: none; }

/* beliefs: ruled rows, each with its glyph beside the title */
[data-layout='mobile'] .values { margin-top: 28px; padding-top: 0; display: flex; flex-direction: column; }
[data-layout='mobile'] .values__gutter { display: none; }
[data-layout='mobile'] .value { padding: 22px 0 24px; border-bottom: var(--rule-hair); }
[data-layout='mobile'] .value__head { gap: 10px; min-height: 0; }
[data-layout='mobile'] .value__icon { margin-top: 4px; }
[data-layout='mobile'] .value__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); max-width: none; }
[data-layout='mobile'] .value__text { margin-top: 10px; font: var(--text-body); letter-spacing: var(--tracking-body); max-width: none; }

/* teaching: the head, then the numbered register, then the plate (the numeral above the title, so the titles hold one line) */
[data-layout='mobile'] .teaching__head { display: contents; }
[data-layout='mobile'] .teaching__sub { max-width: none; }
[data-layout='mobile'] .teaching__register { order: 1; margin-top: 28px; }
[data-layout='mobile'] .teaching__plate { order: 2; margin-top: 32px; }
[data-layout='mobile'] .teaching .register__row { padding: 20px 0 22px; }
[data-layout='mobile'] .teaching .register__title { margin-top: 10px; }
[data-layout='mobile'] .teaching .register__text { max-width: none; }

/* where the line is: the two columns stack as peers, each opening on its own strong rule, the same row construction in both */
[data-layout='mobile'] .line-head { padding-top: 44px; padding-bottom: 0; }
[data-layout='mobile'] .line { display: flex; flex-direction: column; gap: 40px; padding: 32px var(--layout-gutter) 52px; }
[data-layout='mobile'] .line__seam { display: none; }
[data-layout='mobile'] .line__side,
[data-layout='mobile'] .line__side--not { padding: 0; }
[data-layout='mobile'] .line .tt-section-head { flex-direction: column; gap: 2px; }
[data-layout='mobile'] .line__list { margin-top: 20px; }
[data-layout='mobile'] .line__row { column-gap: 12px; padding: 14px 0 16px; min-height: 0; }
[data-layout='mobile'] .line__text,
[data-layout='mobile'] .line__side--not .line__text { max-width: 320px; }   /* 320 of the 330 available: the last row ends on a full line (measured on the design) */

/* call to action: the two buttons stacked full width, primary first (the shell centres the band's grid row vertically; as a column that would centre the children) */
[data-layout='mobile'] .cta { align-items: stretch; }
[data-layout='mobile'] .cta__title { max-width: none; }
[data-layout='mobile'] .cta__text { max-width: 330px; }   /* 330: the last line is "useful in your class.", not "your class." */
[data-layout='mobile'] .cta__action { flex-direction: column; align-items: stretch; gap: 8px; }
[data-layout='mobile'] .cta__action .tt-btn--primary { order: -1; }