/**
 * Section: Icon cards (icon-cards)
 *
 * Ported from `accreditations.html` `.ac-duty`, which is the fullest of the
 * three mock-up forms: it carries the 4px gold left rule on top of the icon
 * tile, heading and body that `about.html` `.ab-cred` and
 * `directors-message.html` `.dm-linkcard` share. The arrow and its translateX
 * on hover come from `.dm-linkcard .go`.
 *
 * WHAT THIS FILE DOES NOT OWN. The grid is `.grid-2` / `.grid-3` from
 * components.css, which is what the mock-ups use and where the breakpoints
 * already live, so `display` is all this file declares and `gap` is left where
 * it belongs. The icon tile is `.pasia-icon-tile`, also components.css, whose
 * default 46px/24px is exactly this section's size, so there is nothing here to
 * override at all.
 *
 * RECORDED DELTAS. `accreditations.html` `.ac-duty` is the canonical form and
 * the other two instances are reproduced through it, so each place they differ
 * is a delta. The inventory entry records one, about.html's credential cards
 * gaining the gold left rule. These four are equally real and were not:
 *
 *   1. `directors-message.html`'s five `.dm-linkcard`s gain the gold left rule
 *      as well. Same cause as the recorded one.
 *   2. `.dm-linkcard` is `padding: var(--s-5)`; the canonical `.ac-duty` is
 *      `var(--s-4)`, which is what this file uses. Those five cards lose about
 *      a third of their padding. (`.dm-linkcard` already drops to `--s-4`
 *      itself below 560px, so the delta stops there.)
 *   3. `.ac-duty:hover` changes shadow and transform only. `.ab-cred:hover`
 *      and `.dm-linkcard:hover` both also take the border to gold, and two of
 *      three wins here, so `accreditations.html`'s four obligation cards gain
 *      a gold hover border they do not have in the mock-up.
 *   4. `.dm-linkcard` is a COLUMN: numeral, title, body, arrow, with no icon
 *      tile. This section renders every card as a row with the tile beside the
 *      text. Those five cards therefore change composition, not just spacing.
 *      It is the price of one component covering all three instances, which is
 *      the call the inventory made, but it is the largest of the four.
 *
 * NO STAGGER CLASSES. `.reveal` is on each card and `.reveal-d1` to
 * `.reveal-d4` are not. base.css builds `.reveal` from a `transition` and
 * expresses the stagger as a single-value `transition-delay`, which applies to
 * every property in the list, so a card with its own hover transition can have
 * the entrance stagger or a hover that answers immediately and not both,
 * unless base.css's four delay literals are copied into this file. That would
 * be two owners for one rule and four hardcoded values (AGENTS.md §1.1).
 * The signed-off design settles it: no stagger class and no transition-delay
 * appears anywhere in the 27 mock-ups, and `.ac-duty`, `.ab-cred` and
 * `.dm-linkcard` are all plain `.reveal`. The transition below therefore
 * carries `opacity` explicitly, because a shorthand on this element REPLACES
 * `.reveal`'s property list and without it the card would snap from 0 to 1
 * rather than fade.
 *
 * Contrast measured, not assumed. The section band is tint-2 (--surface-2
 * #efeadd) and every card sits on --paper, so the two grounds are:
 *
 *   on --surface-2 #efeadd
 *     --ink       #14231f   13.55:1   the section heading
 *     --ink-soft  #45524d    6.81:1   the section intro
 *     --gold-deep #7e622e    4.76:1   the eyebrow, from tokens.css
 *
 *   on --paper #ffffff
 *     --ink       #14231f   16.28:1   the card title
 *     --ink-soft  #45524d    8.18:1   the card text and the small note
 *     --ink-faint #5f6b66    5.55:1   the numeral
 *     --pine      #16564b    8.51:1   the card link row
 *     --forest    #0e4038   11.61:1   the same row on hover
 *     --forest on the icon tile (--forest-tint-10 over --paper)   9.72:1
 *
 * All clear WCAG AA for normal text; the eyebrow is the tightest at 4.76:1 and
 * it is a tokens.css rule, not one of this file's. Re-measure if any of them
 * moves. --gold on the left rule is 2.56:1 against the card: it is an accent
 * edge, not text and not a control's only affordance.
 *
 * Tokens for every colour, size, radius, shadow and duration. The bare pixel
 * values are component dimensions with no token behind them (the arrow and the
 * left rule), which is the practice components.css already follows for
 * `.hcard` and `.callout`.
 */

/* `display` only. `.grid-2` and `.grid-3` in components.css already set both
   `display` and `gap`, and this file loads after them at equal specificity, so
   re-declaring `gap` here would silently take ownership of it for every
   instance rather than only for the single-card case this rule exists to
   cover. Two owners for one rule is how the button system broke in Phase 0. */
.icon-cards-grid {
  display: grid;
}

/* ---------------------------------------------------------------------------
 * The card. `.card` in components.css supplies the paper ground, the hairline,
 * the radius and the resting shadow; this adds the weight.
 * ------------------------------------------------------------------------ */
.icon-card {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-left: 4px solid var(--gold);
  color: var(--ink);
  text-decoration: none;
  /* `opacity` first, and it is not decoration. This element carries `.reveal`,
     whose own `transition` is `opacity, transform`; a `transition` shorthand
     here REPLACES that list rather than adding to it, so leaving opacity out
     is what made the card jump from invisible to visible in one frame.
     --dur-slow matches base.css's reveal. `transform` is shared between the
     reveal's translateY(22px) and the hover's translateY(-3px) and one
     duration has to win: --dur-normal, which is the mock-up's own value and
     what it already resolved to. */
  transition: opacity var(--dur-slow) var(--ease-out-soft),
              transform var(--dur-normal) var(--ease-out-soft),
              border-color var(--dur-normal) ease,
              box-shadow var(--dur-normal) ease;
}

/* The hover lift is on every card, linked or not, because the mock-up puts it
   on every card, linked or not: `.ac-duty` and `.ab-cred` are an <article> and
   a <div> there and both lift. `path-cards` restricts its lift to `a.path-card`
   for the opposite reason, that its unlinked card is a degraded state rather
   than a design state. The two are consistent about the principle, that the
   mock-up decides, and only look like they disagree. */
.icon-card:hover,
.icon-card:focus-visible {
  border-color: var(--gold);
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
  color: var(--ink);
}

/* Stretches so the link row can sit on the base line of the card even when the
   cards beside it carry more text.
 *
 * `overflow-wrap` is what actually holds the 320px baseline, and `min-width`
 * here never did: the grid track is 1fr, which is minmax(auto, 1fr), and that
 * `auto` minimum is the min-content size of the GRID ITEM, which is
 * `.icon-card`. A min-width on an inner flex child cannot cap it, so a 50
 * character URL in a card body took the document to scrollWidth 501 inside a
 * 320px viewport. `anywhere` rather than `break-word` because only `anywhere`
 * also affects intrinsic sizing, which is the half that matters. Inherited, so
 * the title, text, note and link row are all covered. AGENTS.md §7 makes
 * zero horizontal overflow at 320px a signed-off baseline.
 *
 * WHAT 320px ACTUALLY COSTS, since it is a number worth having in front of
 * whoever decides rather than a feeling: at 320px the text column is 165px,
 * about 24 characters, roughly four words a line. Of the 280px card, 114px is
 * chrome: 48 padding, 46 tile, 16 gap, 4 rule. Typographic guidance treats
 * anything under about 35 characters as degraded. On `accreditations` the text
 * this lands on is the Cap. 57A commission-cap paragraph. A breakpoint that
 * drops the tile below the text would buy back 62px. It has NOT been added:
 * the port is faithful and adding one is a design decision, not a fix. */
.icon-card-body {
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
}

.icon-card-number {
  margin-bottom: var(--s-1);
  font-family: var(--display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-faint);
}

.icon-card-title {
  margin-bottom: .35em;
  font-size: var(--text-lg);
}

.icon-card-text {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.icon-card-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The badge the renderer expands from the `[client-to-supply: …]` token. It is
   never hand-typed markup: the body allow-list carries no `class` attribute at
   all, so `.ph-badge` cannot arrive here any other way. */
.icon-card-text .ph-badge {
  margin-block: .35em;
}

.icon-card-note {
  margin-top: var(--s-1);
}

.icon-card-go {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pine);
}

.icon-card-go svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}

.icon-card.is-linked:hover .icon-card-go,
.icon-card.is-linked:focus-visible .icon-card-go {
  color: var(--forest);
}

.icon-card.is-linked:hover .icon-card-go svg,
.icon-card.is-linked:focus-visible .icon-card-go svg {
  transform: translateX(4px);
}

.icon-cards-foot {
  margin-top: var(--s-5);
}