/* Layout B ("Index"): section names in columns 1–3, content from column 4,
   12 visible column lines, every block on whole grid fields, parts on the 24px baseline.
   Load after site.css. grid-fields.js adds html.grid-fields and the f-* / p-* classes. */

/* ---------- tokens ---------- */
:root {
  --grid-line: color-mix(in srgb, var(--ink) 4%, transparent);
  --grid-line-band: color-mix(in srgb, var(--ink) 10%, transparent);
  --lbl-size: var(--fs-label);   /* 15px */
  --lbl-track: .06em;
  --fs-h1: clamp(40px, 4.6vw, 64px);
}
[data-theme="dark"] { --grid-line-band: var(--grid-line); }

/* ---------- column lines: 1px on each column edge, the gutter left empty ---------- */
.grid-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grid-lines > .g { height: 100%; }
.grid-lines span { border-inline: var(--line) solid var(--grid-line); }
/* dark sections paint over the page lines, so they carry their own set */
.grid-lines.is-band { position: absolute; inset: 0; z-index: 0; }
.grid-lines.is-band span { border-color: var(--grid-line-band); }
.yt-section[data-theme="dark"] { position: relative; }
/* content sits above the lines */
main .g, main .yt-section > .g, .yt-footer { position: relative; z-index: 1; }
@media (max-width: 767px) { .grid-lines span:nth-child(n+5) { display: none; } }

/* ---------- labels: the short tags only, 15px uppercase ---------- */
:is(.yt-summary .small.muted, .yt-result-row .s-text > .small.muted, .yt-card-meta,
    .yt-case-hero > p.small.muted, .yt-table th, .yt-step-num) {
  font-size: var(--lbl-size); line-height: 1.3; letter-spacing: var(--lbl-track); text-transform: uppercase;
}

/* ---------- dark sections keep their line ---------- */
.yt-section[data-theme="dark"] .g > .rule { display: block; }
.yt-section[data-theme="dark"] .g > .yt-head { margin-top: var(--space-m); }

/* ---------- B placement (900px and up) ---------- */
@media (min-width: 900px) {
  /* section name: a sticky label in columns 1–3 */
  :is(.yt-section, .yt-contact) .yt-head,
  .yt-contact > .yt-head {
    grid-column: 1 / 4; grid-row: auto / span 40; align-self: start;
    position: sticky; top: calc(var(--header-height) + var(--space-m));
    margin-top: var(--space-m);
    font-size: var(--lbl-size); line-height: 1.3; letter-spacing: var(--lbl-track);
    text-transform: uppercase; text-wrap: pretty;
  }
  :is(.yt-section, .yt-contact) :is(.yt-body, .yt-results-lede) { margin-top: var(--space-m); }

  /* direct children of a section grid */
  .g > :is(.s-heading, .s-wide, .yt-cards, .yt-result-rows):not(.yt-head) { grid-column: 4 / 13; }
  .g > .sg { grid-column: 4 / 13; }
  .g > .s-lede { grid-column: 4 / 10; }
  .g > .s-text { grid-column: 4 / 9; }
  .g > .s-media { grid-column: 9 / 13; }
  .g > .s-side { grid-column: 10 / 13; }
  .yt-contact > .s-full:not(.yt-head) { grid-column: 4 / 13; }

  /* inside a 9-column subgrid, numbers count from column 4 */
  .sg > :is(.s-heading, .s-wide, .yt-steps) { grid-column: 1 / 10; }
  .sg > .s-lede { grid-column: 1 / 7; }
  .sg > .s-text { grid-column: 1 / 6; }
  .sg > .s-media { grid-column: 6 / 10; }
  .yt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* hero: the title runs wide, everything after it starts at column 4 */
  .yt-hero > .s-lede, .yt-case-hero > :is(.s-lede, p.s-full) { grid-column: 4 / 10; }
  .yt-summary > :nth-child(2) { grid-column: 4 / 8; }
  .yt-summary > :nth-child(3) { grid-column: 8 / 11; }
  .yt-summary > :nth-child(4) { grid-column: 11 / 13; }
  .yt-note > .s-lede { grid-column: 4 / 10; }
  .yt-next-back { grid-column: 1 / 4; }
  .yt-stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- the same section line above Results and Learnings (no .rule in their markup) ---------- */
main .yt-section > .g:not(:has(> .rule))::before {
  content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 0;
  border-top: var(--line) solid var(--rule); pointer-events: none;
}
html.grid-fields main .yt-section > .g:not(:has(> .rule))::before { top: calc(var(--f-gap, 24px) / -2); }
@media (max-width: 767px) {
  main .yt-section > .g:not(:has(> .rule))::before { left: var(--m-mobile); right: var(--m-mobile); }
}

/* ---------- every block fills its cell ---------- */
main :is(.g, .sg) { align-items: stretch; }
main :is(.g, .sg) > * { max-width: none; justify-self: stretch; }
main :is(.measure, .measure-learnings, .yt-two-text, .yt-two-side, .yt-steps > li > div) { max-width: none; }
main .yt-result-row :is(.h4, .small) { max-width: none; }

/* ---------- fields (grid-fields.js): every block fills whole fields ---------- */
/* while measuring, blocks take their natural height */
html.grid-measure main :is(.g, .sg) > * { align-self: start !important; }
/* the row grid counts from the top of the page: the first section must not drag it */
html.grid-fields main { display: flow-root; }
/* stacked blocks lose their own margins and row gaps; the script rounds each to whole rows */
html.grid-fields main :is(.g, .sg, .yt-cards, .yt-stats, .yt-stepper, .yt-result-rows, .f-sub) { row-gap: 0 !important; }
html.grid-fields main :is(.g, .sg, .yt-cards, .yt-stats, .yt-stepper, .yt-result-rows, .f-sub) > * { margin-top: 0 !important; }
html.grid-fields main .f-sub { grid-template-columns: subgrid !important; }
html.grid-fields main :where(.f-col) { grid-column: var(--f-col) !important; }
html.grid-fields main .f-mt.f-mt.f-mt { margin-top: var(--f-mt) !important; }
/* groups are grids of fields: rows one field tall, the gutter between them */
html.grid-fields main .f-grid { grid-auto-rows: var(--f-row) !important; grid-template-rows: none !important; row-gap: var(--f-gap) !important; align-items: stretch; }
html.grid-fields main .f-span.f-span.f-span { grid-row-end: span var(--f-span) !important; }
html.grid-fields main .f-grid > .f-span { align-self: stretch !important; }
/* a section line sits in the gutter above its group's first row and takes no row itself */
html.grid-fields main .f-grid > .f-rule { position: absolute !important; grid-column: 1 / -1 !important; grid-row: 1 !important; top: calc(var(--f-gap, 24px) / -2) !important; left: 0; right: 0; margin: 0 !important; }
html.grid-fields main .yt-steps > li { display: block; }
html.grid-fields main .yt-steps > li::before { display: block; }
/* images: whole rows tall, cropped from the top (click opens the full image) */
html.grid-fields main .yt-shot { height: var(--e-h, auto); aspect-ratio: auto; object-fit: cover; object-position: top center; }
/* case screenshots: the whole screenshot centered in its rows, nothing cut, with the frame's grey around it (card teasers stay cropped) */
html.grid-fields main :not(.yt-card-media) > .yt-shot { object-fit: contain; object-position: center; background: var(--box); }
html.grid-fields main .sk { height: var(--e-h, auto); aspect-ratio: auto; }
html.grid-fields main .ba { height: var(--e-h, auto) !important; }
/* before/after: the frame is whole rows; the screenshot keeps its own height, centered in the frame, nothing cut, with the frame's grey around it */
html.grid-fields .ba-stage { left: 0; top: 50%; bottom: auto; transform: translateY(-50%); width: 100%; max-width: none; aspect-ratio: var(--ba-ratio, 16 / 9); }
html.grid-fields .ba-open { display: inline-block; }
/* result rows: the dividing line moves into the gutter between rows */
html.grid-fields main .yt-result-row { padding-block: 0 !important; border: 0 !important; box-shadow: none !important; position: relative; }
html.grid-fields main .yt-result-row::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--f-gap, 24px) / -2); border-top: var(--line) solid var(--rule); }
html.grid-fields main .yt-result-rows > .yt-result-row:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--f-gap, 24px) / -2); border-top: var(--line) solid var(--rule); }
/* motion: fades only, no travel, so blocks are measured where they will stay */
html.grid-fields .yt-load-rise { animation: none; }
html.grid-fields.yt-motion .yt-reveal:not(.is-in, .rule) { transform: none; }

/* ---------- parts (grid-fields.js): parts inside a group sit on the 24px baseline ---------- */
main .p-grid { display: grid !important; padding-top: var(--p-off, 0px) !important; grid-auto-rows: var(--p-unit, 24px); grid-template-rows: none !important; row-gap: 0 !important; align-content: start; align-items: start; }
main .p-grid.p-sub { grid-template-columns: subgrid !important; }
main .p-grid:not(.p-sub) { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
main .p-grid > .p-part { margin: 0 !important; grid-column: 1 / -1; grid-row-start: var(--p-start); grid-row-end: span var(--p-span); align-self: start; }

/* ---------- text measure: no line of text runs past --measure (tokens.css); the blocks still fill their columns ---------- */
main :is(p, h1, h2, h3, h4, figcaption, .yt-list > li, .yt-summary-value, .yt-stat-label, .yt-step-text, .yt-findings :is(th, td)) { max-width: var(--measure) !important; }
/* a real table ignores widths on its cells' text, so its text column is sized to the measure and the number column takes the rest */
main .yt-table:not(.yt-findings) :is(th, td):first-child { width: var(--measure); }
main .yt-table:not(.yt-findings) .num { width: auto; }