/**
 * Section: Services grid (service-cards)
 *
 * Ported from _mockups/index.html `.c-svc-head` / `.c-services` / `.c-svc`,
 * which the inventory names as this section's source of truth.
 * _mockups/services.html `.sv-va article` is the same card with two
 * differences, and neither is reproduced:
 *
 *   - a gold border on hover, where `.c-svc:hover` only lifts and deepens the
 *     shadow. Drift from a hand-pasted copy, and index.html wins per decision
 *     2.1.
 *   - a fixed three-column grid, where `.c-services` is
 *     `auto-fit minmax(280px, 1fr)`. The auto-fit form covers both, and it is
 *     what lets six cards on the home page and three on the Services page use
 *     one rule.
 *
 * WHAT IS NOT HERE, because it is shared and lives in a globally loaded file:
 *
 *   .card             components.css. The paper ground, the hairline, the
 *                     radius and the resting shadow. This file adds the
 *                     padding and the lift and nothing else.
 *   .pasia-icon-tile  components.css. The rounded tile with the forest glyph.
 *                     Three sections had private copies of it before it was
 *                     named; this one sets the two size custom properties and
 *                     re-declares no part of the treatment.
 *   .head, .head h2 em, .eyebrow, .section.tint
 *                     base.css and tokens.css. `.head h2 em` is the gold
 *                     italic that this section's heading instruction promises,
 *                     and this section emits `.head`, so the promise is kept.
 *
 * BAND: `.section.tint`, which is --paper. Forced, and the inventory §0 argues
 * it: paper on index.html, mist on services.html, one delta either way, and
 * paper keeps how-it-works, this section and rate-cards from running together
 * as three unseparated mist bands on the home page.
 *
 * CONTRAST, measured on the PASIA palette rather than assumed. The band is
 * --paper and every card is --paper as well, separated by the --line hairline
 * and --shadow-s exactly as index.html has them, so there is one ground:
 *
 *   section heading   --ink       #14231f  on --paper #ffffff   16.28:1
 *   eyebrow           --gold-deep #7e622e  on --paper #ffffff    5.72:1
 *   section intro     --ink-soft  #45524d  on --paper #ffffff    8.18:1
 *   card title        --ink       #14231f  on --paper #ffffff   16.28:1
 *   card text         --ink-soft  #45524d  on --paper #ffffff    8.18:1
 *   the icon glyph    --forest    #0e4038  on --forest-tint-10
 *                                          over --paper          9.73:1
 *
 * All clear WCAG AA for normal text, the eyebrow tightest at 5.72:1 and that
 * one is a tokens.css rule rather than this file's. Re-measure if any of them
 * moves. --line on the card border is 1.32:1: it is a decorative edge, not
 * text, and not a control's only affordance. Nothing in this section is
 * interactive, so there is no state colour to measure.
 *
 * Tokens for every colour, size, radius, shadow and duration. The bare pixel
 * values that remain are component dimensions with no token behind them (the
 * icon tile, its glyph and the grid's minimum track), which is the practice
 * components.css already follows for `.hcard`'s avatar.
 *
 * JavaScript: none.
 */

/* ---------------------------------------------------------------------------
 * The head, in its two forms.
 *
 * DERIVED FROM THE CONTENT, not from a field. A photograph puts the heading and
 * the picture side by side, which is index.html; no photograph centres the head
 * over the grid, which is services.html. The renderer chooses; there is no
 * layout switch in the picker (AGENTS.md §1.2).
 *
 * The gap is --gap-split. It used to be the mock-up's literal, written out here
 * and again in sections/bluf.css, with a comment calling the duplication a
 * feature because the two have to agree where the BLUF sits directly above this
 * section on services.html. They do have to agree, which is the argument FOR a
 * token rather than against one (AGENTS.md §1.1), so the token was added to
 * tokens.css and this file reads it. bluf.css still carries the literal and is
 * another agent's file this phase; it is reported rather than edited here.
 * ------------------------------------------------------------------------ */
.service-cards-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-split);
  align-items: center;
  margin-bottom: var(--s-6);
}

/* A PHOTOGRAPH WITH NO HEAD TEXT. The two-column form has nothing to sit
   beside, and before this rule existed the renderer had no branch for the case
   at all: the image field was accepted and then silently dropped. It now runs
   full width above the grid, at the same 16 / 9 the two-column form already
   takes below 860px, because the 4 / 3 would be 900px tall at container width.
   One class, no new values, and the field's own instruction says so. */
.service-cards-head.photo-only {
  grid-template-columns: minmax(0, 1fr);
}

.service-cards-head.photo-only .service-cards-photo {
  aspect-ratio: 16 / 9;
}

/* The head carries its own bottom margin for the centred form; inside the
   two-column form the wrapper owns the spacing instead. */
.service-cards-head .head {
  margin-bottom: 0;
}

.service-cards-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}

/* ---------------------------------------------------------------------------
 * The grid.
 *
 * `auto-fill` rather than a column count, so six cards on the home page and
 * three on the Services page need no field and no derived class: the track
 * count follows the width and the number of services.
 *
 * FILL, NOT FIT, and the difference is a defect rather than a preference.
 * `auto-fit` COLLAPSES the tracks it did not fill, and the survivors then share
 * the whole row: measured in a 1072px container, one card resolved
 * `grid-template-columns` to "1072px 0px 0px" and the card itself to 1072px, a
 * full-width band reading as broken layout. That is reachable by design, not a
 * corner case: this section ships a `limit` field, and "value-added only" with
 * one such service does it too. `auto-fill` keeps the empty tracks, so a lone
 * card is one track wide. Verified equivalent everywhere else: at 3 and at 6
 * cards in the same container both forms compute 3 tracks at the same width.
 *
 * `min(280px, 100%)` rather than a bare 280px. At 320px the container's inner
 * width is exactly 280px, so the bare form only just fits and any future
 * gutter change would push a card past the viewport. The min() guard makes the
 * track collapse to the available width instead of overflowing.
 * ------------------------------------------------------------------------ */
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--s-4);
}

/* ---------------------------------------------------------------------------
 * The card. `.card` supplies the surface; this is the delta.
 * ------------------------------------------------------------------------ */
.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  /* The footer's Services column deep-links to #visa-docs and friends, so a
     card is a scroll target and must clear the sticky header. --header-h is
     the reference for that, never a hardcoded 72px (AGENTS.md §6). */
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
  transition: transform var(--dur-normal) var(--ease-out-soft),
              box-shadow var(--dur-normal) ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

/* Only the size, on the shared tile's own custom properties. The treatment,
   the ground and the glyph colour stay in components.css. */
.service-card-ico {
  --pasia-tile: 50px;
  --pasia-tile-glyph: 26px;
  margin-bottom: var(--s-3);
}

.service-card-title {
  margin-bottom: var(--s-2);
  font-size: var(--text-xl);
}

.service-card-body {
  color: var(--ink-soft);
  font-size: var(--text-base);
}

/* Two of the value-added descriptions carry an inline link to the page that
   explains that service in full. Underlined, because colour alone is not a
   distinction. */
.service-card-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .service-cards-head {
    grid-template-columns: 1fr;
  }

  .service-cards-photo {
    aspect-ratio: 16 / 9;
  }
}