/* Grid, fields, rhythm, bleed and frames (REDESIGN-PLAN.md §4.4–4.5).
   Pages compose with these classes; they never set their own spacing values. */

@layer layout {
  /* ---- Page grid --------------------------------------------------------------
     12 columns from 761px, 4 below. Named lines let any child bleed to the window:
       full-start | margin | content-start | columns … | content-end | margin | full-end
     The outer tracks absorb the gutter, so the visible margin equals --margin. */
  .l-grid {
    --col: calc((min(100vw, var(--content-max)) - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
    display: grid;
    grid-template-columns:
      [full-start] minmax(calc(var(--margin) - var(--gutter)), 1fr)
      [content-start] repeat(var(--cols), minmax(0, var(--col)))
      [content-end] minmax(calc(var(--margin) - var(--gutter)), 1fr) [full-end];
    column-gap: var(--gutter);
  }
  .l-grid > * { grid-column: content; min-inline-size: 0; }
  .l-grid > .l-bleed { grid-column: full; }

  /* Placement. In an .l-grid a span starts at the first content column unless an
     l-start-* class moves it; items never auto-place into the margin tracks.
     For rows that should flow on their own (cards, figures), nest an .l-cols grid:
     it has the same columns and gutters but no margins, so spans auto-place there.
     Below 761px only the m- classes apply, and any span wider than 4 is full width. */
  .l-cols {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .l-cols > * { min-inline-size: 0; }

  .l-span-1 { grid-column-end: span 1; }  .l-span-2 { grid-column-end: span 2; }
  .l-span-3 { grid-column-end: span 3; }  .l-span-4 { grid-column-end: span 4; }
  .l-span-5, .l-span-6, .l-span-7, .l-span-8, .l-span-9, .l-span-10, .l-span-11, .l-span-12 { grid-column-end: span 4; }
  .l-grid > :where(.l-span-1, .l-span-2, .l-span-3, .l-span-4, .l-span-5, .l-span-6, .l-span-7, .l-span-8,
    .l-span-9, .l-span-10, .l-span-11, .l-span-12, .l-mspan-1, .l-mspan-2, .l-mspan-3, .l-mspan-4) { grid-column-start: content-start; }

  @media (width < 761px) {
    .l-mspan-1 { grid-column-end: span 1; }  .l-mspan-2 { grid-column-end: span 2; }
    .l-mspan-3 { grid-column-end: span 3; }  .l-mspan-4 { grid-column-end: span 4; }
    .l-cols > .l-mstart-1 { grid-column-start: 1; }
    .l-grid > .l-mstart-1 { grid-column-start: 2; }
    .l-grid > .l-mstart-2 { grid-column-start: 3; }  .l-cols > .l-mstart-2 { grid-column-start: 2; }
    .l-grid > .l-mstart-3 { grid-column-start: 4; }  .l-cols > .l-mstart-3 { grid-column-start: 3; }
    .l-grid > .l-mstart-4 { grid-column-start: 5; }  .l-cols > .l-mstart-4 { grid-column-start: 4; }
  }

  @media (width >= 761px) {
    .l-span-5 { grid-column-end: span 5; }  .l-span-6 { grid-column-end: span 6; }
    .l-span-7 { grid-column-end: span 7; }  .l-span-8 { grid-column-end: span 8; }
    .l-span-9 { grid-column-end: span 9; }  .l-span-10 { grid-column-end: span 10; }
    .l-span-11 { grid-column-end: span 11; } .l-span-12 { grid-column-end: span 12; }
    /* Starts count content columns 1–12; in .l-grid, line 2 is content-start. */
    .l-grid > .l-start-1 { grid-column-start: 2; }   .l-grid > .l-start-2 { grid-column-start: 3; }
    .l-grid > .l-start-3 { grid-column-start: 4; }   .l-grid > .l-start-4 { grid-column-start: 5; }
    .l-grid > .l-start-5 { grid-column-start: 6; }   .l-grid > .l-start-6 { grid-column-start: 7; }
    .l-grid > .l-start-7 { grid-column-start: 8; }   .l-grid > .l-start-8 { grid-column-start: 9; }
    .l-grid > .l-start-9 { grid-column-start: 10; }  .l-grid > .l-start-10 { grid-column-start: 11; }
    .l-grid > .l-start-11 { grid-column-start: 12; } .l-grid > .l-start-12 { grid-column-start: 13; }
    .l-cols > .l-start-1 { grid-column-start: 1; }   .l-cols > .l-start-2 { grid-column-start: 2; }
    .l-cols > .l-start-3 { grid-column-start: 3; }   .l-cols > .l-start-4 { grid-column-start: 4; }
    .l-cols > .l-start-5 { grid-column-start: 5; }   .l-cols > .l-start-6 { grid-column-start: 6; }
    .l-cols > .l-start-7 { grid-column-start: 7; }   .l-cols > .l-start-8 { grid-column-start: 8; }
    .l-cols > .l-start-9 { grid-column-start: 9; }   .l-cols > .l-start-10 { grid-column-start: 10; }
    .l-cols > .l-start-11 { grid-column-start: 11; } .l-cols > .l-start-12 { grid-column-start: 12; }
    .l-grid > .l-to-edge { grid-column-end: full-end; }
    .l-grid > .l-from-edge { grid-column-start: full-start; }
  }
  .l-row-1 { grid-row: 1; }   /* lets text and media share a row */
  .l-align-end { align-self: end; }
  .l-align-center { align-self: center; }

  /* A bleeding child outside .l-grid: break out of a centred container to the window */
  .l-breakout { margin-inline: calc(50% - 50vw); }

  /* ---- Fields (§4.1) ------------------------------------------------------------
     The f-* class (tokens.css) sets the colours; .l-field gives the band its rhythm.
     Arched fields meet the field above with an elliptical top, 220px tall on desktop,
     64px on mobile, and pad their content clear of it. */
  .l-field {
    position: relative;
    isolation: isolate;          /* shapes inside stay behind this field's text (§15 #1) */
    padding-block: var(--space-section);
  }
  .l-field--arch {
    padding-block-start: var(--field-pad-top);
    border-start-start-radius: 50% var(--arch-h);
    border-start-end-radius: 50% var(--arch-h);
  }
  /* An arched field rises into the field above by its arch height. The field above
     keeps its full section space clear of the arch. */
  .l-field + .l-field--arch { margin-block-start: calc(-1 * var(--arch-h)); }
  .l-field:has(+ .l-field--arch) { padding-block-end: calc(var(--space-section) + var(--arch-h)); }
  .l-field--flush-top { padding-block-start: 0; }
  .l-field--flush-bottom { padding-block-end: 0; }

  /* ---- Rhythm (§4.4) ------------------------------------------------------------
     Vertical space comes only from the rhythm tokens. Space above a heading is at
     least twice the space below it. */
  .l-section { padding-block: var(--space-section); }
  .l-section + .l-section { padding-block-start: 0; }
  .l-component + .l-component { margin-block-start: var(--space-component); }
  .l-stack > * + * { margin-block-start: var(--space-stack); }

  .l-flow > * + * { margin-block-start: var(--space-stack); }
  .l-flow > h2, .l-flow > .l-h2 { margin-block-start: var(--space-before-h2); }
  .l-flow > h3, .l-flow > .l-h3 { margin-block-start: var(--space-before-h3); }
  .l-flow > :is(h1, h2, h3, .l-h1, .l-h2, .l-h3) + * { margin-block-start: var(--space-after-heading); }
  .l-flow > :first-child { margin-block-start: 0; }

  .l-prose { max-inline-size: var(--measure); }
  .l-prose > * + * { margin-block-start: var(--space-stack); }

  /* ---- Frames (§4.5) --------------------------------------------------------------
     Media always has width and height in the HTML; the frame shows a placeholder colour
     while it loads. No drop shadows. */
  .l-frame {
    position: relative;
    overflow: hidden;
    background-color: var(--placeholder);
  }
  .l-frame > img, .l-frame > picture > img, .l-frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* A semicircular top needs a vertical radius of half the width. Percentages of the
     height do that once the ratio is known, so each ratio class sets --arch-v. */
  .l-frame--arch {
    border-radius: 50% 50% var(--r-arch-foot) var(--r-arch-foot) / var(--arch-v, 40%) var(--arch-v, 40%) var(--r-arch-foot) var(--r-arch-foot);
  }
  .l-frame--round { border-radius: 50%; aspect-ratio: 1; }
  .l-frame--pill { border-radius: var(--r-pill); }
  .l-frame--soft { border-radius: var(--r-soft); }
  /* UI screenshots are never cropped to hide content: contain, top-aligned (§4.5) */
  .l-frame--screen > img { object-fit: contain; object-position: 50% 0; }
  /* In an arch, a portrait phone screen (about 9:19.5) starts below the curve, so its
     status bar corners stay visible: the rise of a semicircle at 15% in from the edge is
     about 14% of the frame width. */
  .l-frame--arch.l-frame--screen > img { padding-block-start: 14%; }

  /* Ratios used by the frames */
  .l-ratio-1x1 { aspect-ratio: 1; --arch-v: 50%; }
  .l-ratio-4x5 { aspect-ratio: 4 / 5; --arch-v: 40%; }
  .l-ratio-3x4 { aspect-ratio: 3 / 4; --arch-v: 37.5%; }
  .l-ratio-2x3 { aspect-ratio: 2 / 3; --arch-v: 33.333%; }
  .l-ratio-3x2 { aspect-ratio: 3 / 2; --arch-v: 75%; }
  .l-ratio-16x9 { aspect-ratio: 16 / 9; --arch-v: 80%; }  /* a true semicircle would leave no room for the foot radius */

  /* Focal points, per image, as classes (never inline style) */
  .l-focus-top > img { object-position: 50% 0; }
  .l-focus-face > img { object-position: 50% 22%; }
  .l-focus-bottom > img { object-position: 50% 100%; }
  .l-focus-left > img { object-position: 0 50%; }
  .l-focus-right > img { object-position: 100% 50%; }

  .l-frame--placeholder-soft { background-color: var(--c-cobalt-soft); }
  .l-frame--placeholder-surface { background-color: var(--surface); }
}