/**
 * @file
 * Columns: a row of image-heading-body columns whose rows line up.
 *
 * Every value here is measured off the three-column section this replaces, so
 * a page swapped over to the component does not move: at 1440 the content is
 * 1410 wide, three 450px columns with 30px between them; the images clear the
 * headings by 72px; the headings are 24px/500 at a 1.3 line box with 8px under
 * them; the body is 18px/300 at 1.5.
 *
 * The 72px is --ln-block-gap at its maximum, which is what separated the Media
 * block from the Text block before. It is written out rather than referenced
 * because here it is the gap between two rows of one component, not the rhythm
 * between two blocks — the two happening to match today is not a reason to tie
 * them together.
 */

.ln-columns {
  /**
   * 31.5 rather than 32 is not a typo for the gutter: the comp's three 459px
   * columns in 1440 leave exactly 63px to share, and the alpha channel puts
   * the two gaps at 63 device pixels each.
   *
   * The gap under the image is a separate 32. The first comp read 31.5 there
   * too, but the subhead comp puts every ink row within 0.28px at 32 against
   * 0.78px at 31.5 — and 32 is also the copy's inset, so the half-pixel was
   * most likely mine rather than the designer's.
   */
  --ln-columns-gap: 31.5px;
  --ln-columns-media-gap: 32px;

  /* The copy is inset from the column; the image is not, and runs the full
     width of it. */
  --ln-columns-text-inset: 32px;

  /**
   * Two gaps under the heading, because what follows it depends on the content.
   * With a subhead the comp puts the two cap heights 31px apart, which at a
   * 29px line box leaves 2px between the boxes; the subhead then clears the
   * body by 18px. With no subhead anywhere in the row the heading falls back to
   * its original 16px.
   */
  --ln-columns-heading-gap: 16px;
  --ln-columns-heading-gap-subhead: 2px;
  --ln-columns-subhead-gap: 18px;

  /**
   * Line heights are the comp's own, in px. Measured from the pitch between
   * ink rows, which is the line box exactly: 29px between the two heading
   * lines, 23px between body lines. Unitless 1.2 and 1.28 land within a
   * quarter-pixel of both, but the comp states pixels and this will be
   * measured against it.
   */
  --ln-columns-heading-size: 24px;
  --ln-columns-heading-weight: 500;
  --ln-columns-heading-leading: 29px;

  /* The heading's size at the body's weight. Measured off the comp by stem
     width: 1.99px against the heading's 2.91px and the body's 1.56px, which at
     18px is 2.08px once scaled to 24px — so it is the body weight, not 400. */
  --ln-columns-subhead-size: 24px;
  --ln-columns-subhead-weight: 300;
  --ln-columns-subhead-leading: 29px;

  --ln-columns-body-size: 18px;
  --ln-columns-body-weight: 300;
  --ln-columns-body-leading: 23px;

  --ln-columns-section-heading-size: clamp(2rem, 3.5vw, 48px);
  --ln-columns-section-heading-gap: 48px;

  box-sizing: border-box;
  color: var(--ln-color-ink, #1c1c1c);
  font-family: var(--ln-font-sans, Outfit, sans-serif);
}

.ln-columns *,
.ln-columns *::before,
.ln-columns *::after {
  box-sizing: inherit;
}

/* Gutter and max-width on the same box, so the 1440 is the outer edge and the
   columns settle at 1410 — the same place the section's blocks sat. */
.ln-columns__inner {
  max-inline-size: var(--ln-container-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--ln-container-gutter, 15px);
}

.ln-columns__heading {
  margin: 0 0 var(--ln-columns-section-heading-gap);
  /* Required: Cohesion styles bare h2, and an element rule beats an inherited
     value however specific the ancestor. */
  color: inherit;
  font-size: var(--ln-columns-section-heading-size);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

/**
 * One column per paragraph, however many there are, all equal.
 *
 * The three rows are declared here and nowhere else: each column adopts them
 * below, so the media row is as tall as the tallest image and the heading row
 * as tall as the longest heading, in every column at once.
 */
.ln-columns__row {
  display: grid;
  grid-auto-flow: column;
  /* minmax(0, 1fr) so a long unbreakable word cannot widen one column and
     throw the equal split. */
  grid-auto-columns: minmax(0, 1fr);
  /* Media, heading, subhead, body. A column that omits any of them leaves its
     track empty rather than sliding the rest up, which is what keeps the row
     aligned when only some columns carry a subhead. */
  grid-template-rows: auto auto auto auto;
  column-gap: var(--ln-columns-gap);
}

.ln-columns__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  min-inline-size: 0;
}

/**
 * Centred in the shared media track, so a column whose image is a different
 * shape still meets its neighbours at the heading. The track is as tall as the
 * tallest image plus this margin, which leaves the tallest flush at the top
 * with the margin below it and centres every shorter one in what remains.
 */
.ln-columns__col-media {
  grid-row: 1;
  align-self: center;
  margin-block-end: var(--ln-columns-media-gap);
}

.ln-columns__col-media :is(img, video, iframe) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/**
 * Explicit rows on each part, so a column that omits its image does not slide
 * its heading up into the media track and out of line with the others.
 */
/* Inset, unlike the image above them, which bleeds to the column's edges. */
.ln-columns__col-title,
.ln-columns__col-subhead,
.ln-columns__col-body {
  padding-inline: var(--ln-columns-text-inset);
}

.ln-columns__col-title {
  grid-row: 2;
  margin: 0 0 var(--ln-columns-heading-gap);
  color: inherit;
  font-size: var(--ln-columns-heading-size);
  font-weight: var(--ln-columns-heading-weight);
  line-height: var(--ln-columns-heading-leading);
  text-wrap: balance;
}

/**
 * The subhead tightens the gap under the heading, and :has() is what carries
 * that to every column rather than only the ones that have a subhead. The row
 * shares its tracks, so if any column has one the subhead track exists for all
 * of them — the heading's gap has to move in step or the columns disagree.
 */
.ln-columns__row:has(.ln-columns__col-subhead) .ln-columns__col-title {
  margin-block-end: var(--ln-columns-heading-gap-subhead);
}

.ln-columns__col-subhead {
  grid-row: 3;
  align-self: start;
  margin: 0 0 var(--ln-columns-subhead-gap);
  font-size: var(--ln-columns-subhead-size);
  font-weight: var(--ln-columns-subhead-weight);
  line-height: var(--ln-columns-subhead-leading);
  text-wrap: pretty;
}

.ln-columns__col-body {
  grid-row: 4;
  /* Top of its track, not stretched: a short body should not grow a box the
     section's padding is then measured from. */
  align-self: start;
  font-size: var(--ln-columns-body-size);
  font-weight: var(--ln-columns-body-weight);
  line-height: var(--ln-columns-body-leading);
  text-wrap: pretty;
}

/* The outer margins are zeroed by ln-ntmfc / ln-nbmlc on the element itself —
   they match at any depth, which a child selector here would not, because the
   text formatter wraps the value in a div of its own. */

/**
 * Phone and tablet: the columns stack, so there is nothing to line up across
 * and each one should be only as tall as its own content. Back to block flow,
 * which drops the subgrid, the explicit grid-row on each part and the media's
 * centring together — all of them inert outside grid.
 */
@media (max-width: 47.99rem) {
  .ln-columns {
    --ln-columns-media-gap: 32px;
    --ln-columns-section-heading-gap: 32px;

    /**
     * The leading moves with it. It is stated in px above to match the comp to
     * the pixel, which also means it does not scale — left alone, 23px against
     * 16px copy is a 1.44 line box where the desktop reads 1.28. Unitless here,
     * so it is the same proportion rather than the same measurement.
     */
    --ln-columns-body-size: 16px;
    --ln-columns-body-leading: 1.28;
  }

  .ln-columns__row {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: var(--ln-block-gap, 48px);
  }

  .ln-columns__col {
    display: block;
    grid-row: auto;
  }
}