/* assets/css/components/split-row.css
 * @layer components — Split Row component (text + image, alternating)
 *
 * Asymmetric 58/42 grid favouring text — image is the supporting beat,
 * not the headline. 4:3 photographic aspect lock on the image means real
 * photos slot in without clipping or distortion across viewports.
 *
 * BEM:
 *   .split-row                  — the <section> wrapper (inherits .section)
 *   .split-row__inner           — 2-column grid
 *   .split-row__media           — image (or placeholder) column
 *   .split-row__image           — the <img> element itself
 *   .split-row__placeholder     — empty-state when no image_id set
 *   .split-row__text            — text column (eyebrow + heading + rule + body)
 *   .split-row__eyebrow         — small all-caps overline
 *   .split-row__heading         — section heading
 *   .split-row__body            — body prose wrapper
 *
 * Modifiers:
 *   .split-row--reversed         — image LEFT, text RIGHT (default: text LEFT)
 *   .split-row--align-center     — text vertical-centers against image
 *                                  (use when text is shorter than image)
 *   .split-row--align-top        — default; both columns align top
 *   [data-theme="tinted"]        — surface-tinted (cool mint, teal hue)
 *   [data-theme="warm"]          — secondary-ultra-light (soft peach)
 *
 * Theme tokens come from layout.css's .section[data-theme="…"] rules.
 * Pair "warm" with the alternating-row pattern on About Us sub-pages —
 * see Our Credo / What We Do orchestrations.
 *
 * All values come from tokens.css.
 */

@layer components {

  /* Subtle hairline divider between adjacent split-rows. Uses
     :has(+ .split-row) on the previous row so only intermediate rows
     get the divider — the row that sits next to the page banner (above)
     and the row that sits next to wwd-impact / cta (below) stay clean. */
  .split-row + .split-row {
    border-block-start: 1px solid var(--border-subtle);
  }

  .split-row__inner {
    display: grid;
    /* 58/42 split favouring text. Default DOM order is text-first then
       image, so text auto-places into column 1 (58fr, wider). Reversed
       modifier swaps grid-column assignments without changing fr values
       so the image stays in the narrower 42fr column on both orientations. */
    grid-template-columns: 58fr 42fr;
    gap: calc(var(--container-gap) * 2);
    align-items: start;
  }

  .split-row__text  { grid-column: 1; grid-row: 1; }
  .split-row__media { grid-column: 2; grid-row: 1; }

  .split-row--align-center .split-row__inner {
    align-items: center;
  }

  /* Reversed modifier — flip the COLUMN ASSIGNMENT not the COLUMN WIDTHS.
     Image still occupies the 42fr column, text still occupies the 58fr.
     Visually image moves to the left, text moves to the right. DOM reading
     order is preserved (text is the meaningful content; image supports). */
  .split-row--reversed {
    /* Swap which fr value sits in column 1 vs column 2. */
  }
  .split-row--reversed .split-row__inner {
    grid-template-columns: 42fr 58fr;
  }
  .split-row--reversed .split-row__text  { grid-column: 2; }
  .split-row--reversed .split-row__media { grid-column: 1; }

  /* MEDIA — 4:3 aspect lock so the image never distorts. Browser handles
     letterboxing inside if the uploaded image's intrinsic ratio differs.
     Background stays white so the image slot reads as a clean card lifted
     off any section bg (white, warm peach, mint, etc.) without colour
     clashing. The placeholder fallback below overrides this on empty slots. */
  .split-row__media {
    aspect-ratio: var(--ratio-card);
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--white);
  }

  .split-row__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Placeholder — when no image is uploaded yet. Neutral sunken surface
     reads correctly against both white and warm-peach section backgrounds
     (the alternating .split-row themes) without clashing. Editors see a
     clear empty slot indicating where to drop the image. */
  .split-row__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    inline-size: 100%;
    block-size: 100%;
    background: var(--surface-sunken);
    color: var(--text-muted);
  }

  .split-row__placeholder-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* TEXT — flex column so vertical gaps respect tokens. */
  .split-row__text {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
  }

  .split-row__eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: var(--leading-tight);
  }

  .split-row__heading {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: var(--heading-section);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  .split-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
  }

  .split-row__body p {
    margin: 0;
    font-weight: var(--weight-regular);
  }

  /* WYSIWYG content occasionally arrives with <strong> wrapping the entire
     paragraph (legacy content from the previous bold-heavy design). Reset
     it to regular weight so split-row body reads as editorial body copy.
     Authors can still bold individual phrases by adding inline <b> via the
     visual editor — those nest inside a paragraph, not around it. */
  .split-row__body > p > strong:only-child,
  .split-row__body > strong {
    font-weight: var(--weight-regular);
  }

  /* Stack to single column below the desktop breakpoint. Image goes
     ABOVE the text always when stacked — even on reversed rows — because
     image-first feels more "page-as-a-list" on phones. */
  @media (max-width: 64em) {
    .split-row__inner {
      grid-template-columns: 1fr;
      gap: var(--container-gap);
    }

    .split-row .split-row__media { grid-column: 1; grid-row: 1; }
    .split-row .split-row__text  { grid-column: 1; grid-row: 2; }

    .split-row--reversed .split-row__inner {
      grid-template-columns: 1fr;
    }

    /* On mobile, .section--l padding (~72px each side) stacks to ~144px
       between rows — feels disproportionately large once rows stack
       vertically. Use a tighter section-space token for inter-split-row
       breathing room. The page's first and last split-rows keep their
       top/bottom padding (boundary with banner / stats), only the
       intermediate top edges shrink. */
    .split-row + .split-row {
      padding-block-start: var(--section-space-s);
    }
    .split-row:has(+ .split-row) {
      padding-block-end: var(--section-space-s);
    }
  }
}