/**
 * Section: Text and photo row
 *
 * Ported from about.html `.ab-who` / `.ab-who-copy` / `.ab-checklist` /
 * `.ab-photo`, which the inventory names canonical, with aftersales.html
 * `.as-row.flip` supplying the alternation.
 *
 * MOST OF THIS SECTION'S DESIGN IS NOT IN THIS FILE, and that is the point.
 * The two-column grid, the offset gold keyline frame, the photograph's crop and
 * the figcaption row are `.pasia-media-row` and `.pasia-media-figure` in
 * components.css, shared with archive-vacancy.php, which renders no section
 * stack and so can never load this file. The ticked list is `.pasia-ticklist`,
 * shared with three more sections. Nothing here re-declares any of them: two
 * owners for one rule is how the button system broke in Phase 0.
 *
 * THAT CLAIM USED TO BE FALSE FOR TWO RULES AND IS NOW TRUE AGAIN. This file
 * carried `.feature-row-body :is(ul, ol) { padding-inline-start: 1.4em }` and
 * `.feature-row-body li + li { margin-top: .35em }`. The first was dead, at
 * (0,1,1) against the shared rich-text rule's (0,2,0), and it hardcoded a
 * literal where the shared layer uses a token. The second was worse than dead:
 * it STACKED on the shared `li { margin-bottom: var(--s-1) }`, so one list was
 * spaced differently here from the same list in `prose`, `bluf`,
 * `directors-letter`, `highlight-panel` or a legal page. Both are deleted and
 * the render adds `pasia-rte` to the body wrapper, which is the canonical hook.
 * `feature-row-body` survives for this file's own rhythm only.
 *
 * THE FIGCAPTION MAY NOW CARRY A `.ph-badge` beside the caption text, which is
 * about.html:358's own shape and is why components.css builds that figcaption
 * as a wrapping flex row with a gap. Nothing here needs to lay it out, and the
 * badge is not re-coloured from here: it pins its own ground.
 *
 * What is left is the copy column's own rhythm, the no-photograph case, and the
 * alternation.
 *
 * CONTRAST, measured numerically and as composited, on this section's one fixed
 * band, --mist #f7f4ee:
 *
 *   --ink       #14231f  heading                      14.83:1
 *   --ink-soft  #45524d  body copy, ticked points      7.45:1
 *   --ink-faint #5f6b66  figcaption (components.css)    5.06:1
 *   --gold-deep #7e622e  eyebrow, tick mark, h2 em      5.21:1
 *
 * All clear WCAG AA for normal text. The `note` renders as `.ph-badge`, which
 * pins its own ground and measures 5.17:1 wherever it lands, so it is not
 * measured against this band: a figure taken against a bare token is not a
 * measurement of that component. Do not re-colour it from here.
 *
 * The frame's gold keyline is --gold on --mist at 2.33:1. It is decoration
 * around a photograph that carries its own meaning, not a graphical object
 * required to understand the content, so WCAG 1.4.11 does not bind it. It is
 * also components.css's rule, not this file's.
 *
 * Tokens only. No literal colours, no literal font sizes.
 */

/* ---------------------------------------------------------------------------
 * The copy column.
 * ------------------------------------------------------------------------ */

/* about.html:110 tightens the shared section head inside this column, because
   the head is introducing the paragraph directly under it rather than a whole
   band below. base.css sets --s-6. */
.feature-row .feature-row-head {
  margin-bottom: var(--s-4);
}

/* A heading-only row: the head is the whole copy column, so the step under it
   is separating it from nothing. `heading` is the section's one required field
   and everything else is optional, so this is a reachable state and not a
   hypothetical. */
.feature-row .feature-row-head:last-child {
  margin-bottom: 0;
}

/* THE GRID'S ZERO MINIMUM HAS MOVED AND IS NO LONGER HERE.
 *
 * This file used to carry `.feature-row .pasia-media-copy,
 * .feature-row .pasia-media-figure { min-width: 0 }` with a note saying the
 * floor belongs to the `.pasia-media-row` grid itself and that the copy must
 * not be deleted before the shared rule landed, or the fix would leave with it.
 * The shared rule has landed: components.css now declares it on
 * `.pasia-media-row > .pasia-media-copy` and `> .pasia-media-figure`, so it
 * reaches home.php's lead story, which renders that row and never loads this
 * stylesheet. The scoped copy was redundant against it and is gone. The
 * argument, and the 880/1100 measurements, are in components.css beside the
 * rule.
 *
 * WHAT STAYS LOCAL, FOR GOOD. The `overflow-wrap` list below is this section's
 * own class names, and what a consumer lets break inside its own column is the
 * consumer's decision rather than the grid's. `anywhere` and not `break-word`,
 * because only `anywhere` changes the min-content size the track is measured
 * from, which is the half of the fix that `min-width` alone cannot do. */
.feature-row .feature-row-head h2,
.feature-row .feature-row-body,
.feature-row .feature-row-points li,
.feature-row .feature-row-caption {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * The body copy. about.html leaves it at the body colour under a section head;
 * the paragraph rhythm is the same one bluf.css and prose.css set, because a
 * wysiwyg field arrives with every margin already zeroed by the reset in
 * tokens.css.
 * ------------------------------------------------------------------------ */
.feature-row-body {
  color: var(--ink-soft);
}

.feature-row-body > * + * {
  margin-top: var(--s-3);
}

/* No list rules here. components.css owns them for every rich-text wrapper on
   the site, and the render carries `pasia-rte` so this one is reached by the
   canonical selector rather than by the shim. See the head of this file. */

.feature-row-body h3,
.feature-row-body h4 {
  font-size: var(--text-lg);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
 * The gap marker and the button.
 *
 * aftersales.html sets both of its rows' outstanding facts on their own line
 * under the copy, at the same step the ticked list uses above it.
 * ------------------------------------------------------------------------ */
.feature-row-note {
  margin-top: var(--s-4);
}

.feature-row-cta {
  margin-top: var(--s-5);
}

/* ---------------------------------------------------------------------------
 * No photograph yet.
 *
 * The `image` field is optional and no client imagery has arrived, so this is
 * today's real state on every instance. Dropping the second column rather than
 * leaving it empty: `.pasia-media-row` would keep its .85fr track and set the
 * copy against a hole. A measure rather than the full container width, because
 * a paragraph running the whole of a 1200px container is unreadable.
 * ------------------------------------------------------------------------ */
.feature-row-solo {
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
 * WHICH SIDE THE PHOTOGRAPH SITS ON.
 *
 * Derived from position, never a field. aftersales.html flips its second row;
 * about.html has one row and does not.
 *
 * In CSS rather than in the renderer, and that is not a shortcut.
 * pasia_render_section() hands a render closure its values and its uid and
 * nothing else: no index, no neighbours. bluf.css and path-cards.css reached
 * the same wall and answered it the same way, and bluf.css documents it.
 *
 * `:nth-child(even of .feature-row.has-photo)` rather than a chain of sibling
 * combinators, because the two rows on aftersales.html are NOT adjacent: the
 * welfare check-in block sits between them. `of S` counts only the matching
 * siblings, so it is exact for any number of rows at any spacing, and a row
 * that renders nothing at all emits no element and is correctly not counted.
 *
 * `.has-photo` is in the count for the same reason. The renderer sets it on the
 * rows that actually have a photograph, so a row without one does not consume
 * an alternation step and leave the two rows either side of it with the picture
 * on the same side. It is derived state, not a style switch: nothing in the
 * admin exposes it, and a client changes it only by adding a photograph.
 *
 * It sets `order` rather than adding `.flip`, because a stylesheet cannot hand
 * an element a class. The two declarations are components.css's flipped-row
 * contract, applied to the rows this section decides should flip.
 * ------------------------------------------------------------------------ */
.feature-row:nth-child(even of .feature-row.has-photo) .pasia-media-row > .pasia-media-copy {
  order: 2;
}

.feature-row:nth-child(even of .feature-row.has-photo) .pasia-media-row > .pasia-media-figure {
  order: 1;
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 *
 * 860 is where components.css collapses the row to one column. Stacked, the
 * copy always leads: a photograph above its own heading reads as a caption for
 * the section above it. components.css already says this for `.flip`; the same
 * has to be said for the rows this file flips.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .feature-row:nth-child(even of .feature-row.has-photo) .pasia-media-row > .pasia-media-copy {
    order: 1;
  }

  .feature-row:nth-child(even of .feature-row.has-photo) .pasia-media-row > .pasia-media-figure {
    order: 2;
  }

  .feature-row-solo {
    max-width: none;
  }
}