/* The home page supply index.
 *
 * Tokens with fallbacks throughout, as every component built for the 2026
 * direction is — see spec-panel.css for why one component has to serve both
 * design states.
 */

.ww-supply {
  padding: var(--ww-section-tight) 0;
}

.ww-supply__title {
  font-family: var(--ww-font-sans, 'Montserrat', sans-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ww-ink, #0C1E13);
  margin: 0 0 12px;
}

.ww-supply__lede {
  font-family: var(--ww-font-sans, 'Montserrat', sans-serif);
  font-size: var(--ww-text-base, 1rem);
  line-height: 1.55;
  color: var(--ww-ink-2, #4F4F4F);
  max-width: 62ch;
  margin: 0 0 var(--ww-space-5);
}

/* The supply-terms band.
 *
 * Facts, set as facts: the label in the small uppercase mono the site uses for
 * field names, the value in ink. It sits between the calls to action and the
 * catalogue, which is where a buyer who is about to enquire reads it.
 *
 * `auto-fit` with a small floor rather than a fixed column count, because the
 * band renders between three and six items depending on what has been filled —
 * a fixed grid would leave a hole whenever it is not exactly full. */
.ww-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--ww-space-4, 1rem) var(--ww-space-6, 2rem);
  margin: 0 0 var(--ww-section-tight, 2rem);
  padding: var(--ww-space-4, 1rem) 0;
  border-top: 1px solid var(--ww-c-rule, var(--ww-rule, #E6E6E6));
  border-bottom: 1px solid var(--ww-c-rule, var(--ww-rule, #E6E6E6));
}

.ww-terms__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ww-terms__label {
  font-family: var(--ww-font-mono, 'Montserrat', sans-serif);
  font-size: var(--ww-text-xs, 0.75rem);
  letter-spacing: var(--ww-tracking-label, 0.12em);
  text-transform: uppercase;
  /* ink-2, not ink-3: this is 12px, and ink-3 is documented as large-text only
     — it measures 4.39:1 on paper, under the 4.5 AA floor. */
  color: var(--ww-c-text, var(--ww-ink-2, #4F4F4F));
}

.ww-terms__value {
  margin: 0;
  font-size: var(--ww-text-base, 1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ww-c-ink, var(--ww-ink, #0C1E13));
}

/* Wider tracks than the text-only version needed.
 *
 * It was `minmax(230px, 1fr)`, which at the 1280px content width gave five
 * narrow columns — right for a list of words, wrong for a photograph. At
 * 320px the same expression resolves to THREE columns (3x320 + 2x32 = 1024,
 * where four would need 1376), so the six families land as an even 2x3 rather
 * than a ragged 5-and-1. It still collapses to two and then one on its own.
 *
 * `min(100%, 320px)` rather than a bare 320px: without it a viewport narrower
 * than the track forces a horizontal scrollbar on the whole page. */
.ww-supply__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--ww-space-6);
  border-top: 1px solid var(--ww-ink, #0C1E13);
  padding-top: var(--ww-space-4);
}

/* The photograph.
 *
 * A fixed ratio because the six source images are not one shape — measured
 * 2026-08-30 they run 400x400, 660x660 and 1280x853 — so `cover` on a stated
 * ratio is what makes a row of them read as a set instead of as six uploads.
 *
 * `rules, not shadows` is the house form language (design direction 6.3), so
 * the tile is bounded by a hairline and nothing floats. The border firms up on
 * hover and takes the accent, which is the only state change; there is no
 * scale or lift, both because the material should not move and because a
 * transform here would need its own reduced-motion handling. */
.ww-supply__shot {
  display: block;
  margin-bottom: var(--ww-space-3, 0.75rem);
  border: 1px solid var(--ww-c-rule, var(--ww-rule, #E6E6E6));
  border-radius: var(--ww-radius, 16px);
  overflow: hidden;
  background: var(--ww-c-surface-2, #D4D4D4);
  /* transform and box-shadow are here, not only in cust.css's hover-lift
     block: this sheet is enqueued AFTER cust.css, so a bare
     `transition: border-color` at the same specificity wins the tie and the
     lift would land instantly instead of easing. Measured 2026-08-31 —
     computed transition-property was `border-color` alone. */
  transition: border-color var(--ww-dur-base, 200ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--ww-motion, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--ww-motion, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-supply__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Hover on the CARD, not just the picture, so the photograph and the name
   respond as one object — the pointer is usually on one or the other. */
.ww-supply__family:hover .ww-supply__shot {
  border-color: var(--ww-c-accent-line, var(--ww-oxide, #0F6037));
}

.ww-supply__family-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ww-font-sans, 'Montserrat', sans-serif);
  font-size: var(--ww-text-base, 1rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ww-rule, #E6E6E6);
  color: var(--ww-ink, #0C1E13);
}

/* The family name is a block-level heading link, so WCAG 2.5.8's "inline"
 * exception does not cover it — and at the text's own line height the target
 * measured 22px against a 24px minimum. Padding rather than a height, so the
 * target grows with the type scale instead of being pinned to today's. */
/* The resting border was `transparent`, so a heading that is a link looked
 * exactly like one that is not — and every family name here IS a link. It
 * carries a soft rule at rest now and the brand colour on hover; the border is
 * already the mechanism, so this changes a colour rather than adding a device.
 * See the link-affordance policy in style.css. */
.ww-supply__family-name a {
  display: inline-block;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ww-c-ink-line, rgba(12, 30, 19, 0.35));
}

.ww-supply__family-name a:hover {
  color: var(--ww-oxide, #0F6037);
  border-bottom-color: var(--ww-oxide, #0F6037);
}

/* The count is data, so it is set as data. */
.ww-supply__count {
  margin-left: auto;
  font-family: var(--ww-font-mono, 'Montserrat', sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: var(--ww-text-xs, 0.75rem);
  font-weight: 400;
  color: var(--ww-c-label, #4F4F4F);
}

.ww-supply__species {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 18px;
}

.ww-supply__species li {
  break-inside: avoid;
  margin-bottom: 3px;
}

/* Sixty species names in body grey with no underline: on the page they read as
 * a printed list of what is stocked, and nothing said that every one of them
 * opens a category. Underlined at rest at 45% — full strength under sixty short
 * words turns the block into ledger paper — and at full strength on hover and
 * focus. */
.ww-supply__species a {
  font-size: var(--ww-text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--ww-ink-2, #4F4F4F);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(79, 79, 79, 0.45);
}

.ww-supply__species a:hover,
.ww-supply__species a:focus-visible {
  color: var(--ww-oxide, #0F6037);
  text-decoration-color: currentColor;
}

.ww-supply__family-name a:focus-visible,
.ww-supply__species a:focus-visible {
  outline: 2px solid var(--ww-oxide, #0F6037);
  outline-offset: 2px;
}

/* THE PHONE CARD IS A DENSITY PROBLEM, and both halves of it were measured
 * before either was changed. At 386px the home page is 6366px tall and this
 * one section is 3625px of it — 57% of the page — for six cards.
 *
 * Half of that is the species index, and the shape it was in is the reason:
 * `columns: 1` gives every species its own full-width row, so the widest
 * family spent 336px (14 rows at 21px + 3px) displaying 780px of ink into a
 * 339px column. Three lines' worth of words, set as fourteen. The note that
 * used to be here — "two columns of four-letter words with a long one wrapping
 * is worse than a single list" — was right about `columns: 2` and wrong to
 * conclude that one column was the alternative: a WRAPPED row packs the same
 * fourteen names into four lines with no column to overflow, because each name
 * takes the width it needs instead of a track's.
 *
 * Measured on the same page after: 336px -> 120px for that family.
 *
 * Three things are load-bearing:
 *
 * - `columns: initial` is written out. A flex container ignores a multi-column
 *   declaration, so the base `columns: 2` would be inert here anyway — but
 *   inert-by-side-effect is the kind of thing a later refactor reinstates
 *   without noticing, and this says which layout is in charge.
 *
 * - `display: inline-block` on the anchor is NOT tidying. `general-styles.css`
 *   carries a bare `a { display: inherit }`, so every link on this site takes
 *   its parent's display — and the parent here is an `<li>`, which computes
 *   `list-item`. Measured: the anchor's box was 339px wide around 46px of text
 *   ("Acacia"). Left alone, every chip would be a full-width block and the
 *   wrap would do nothing at all. The component rule is (0,1,1) against that
 *   rule's (0,0,1), so it wins on specificity rather than on load order.
 *
 * - The 3px block padding is the touch target, not spacing. A 14px/21px line
 *   is under the 24px WCAG 2.5.8 asks of a pointer target; 21 + 3 + 3 = 27px
 *   clears it. Padding rather than a height, so the target grows with the type
 *   scale — the same reasoning `.ww-supply__family-name a` above carries.
 *
 * THE UNDERLINE STAYS. A bordered chip was the first shape tried and was
 * rejected: `style.css`'s link-affordance policy files the species index under
 * `index` — soft underline at rest, firming up on hover — and
 * `tests/spacing.test.php` asserts it. That assertion passes on the base rule
 * whatever a media query does to it, so dropping the underline here would have
 * defeated the check rather than failed it. Density is not a reason to change
 * what a link looks like. */
@media screen and (max-width: 520px) {
  .ww-supply__species {
    columns: initial;
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 2px;
  }

  .ww-supply__species li {
    margin-bottom: 0;
  }

  .ww-supply__species a {
    display: inline-block;
    padding: 3px 0;
  }

  /* The photograph is a band on a phone, not a panel.
   *
   * 4/3 is right for a ROW of six — it is what makes images of three different
   * source shapes (400x400, 660x660, 1280x853) read as a set. A phone does not
   * get a row; it gets a stack, one card per screen, where the ratio's only
   * job is deciding how much of the screen a decorative image takes before the
   * next family's name. At 386px that was 255px apiece, 1530px over six.
   *
   * 16/9 is 191px and still full-bleed, so the material is still the first
   * thing under the calls to action — the 2026-08-30 change that put wood on
   * this page stays true. Square sources crop hard, which is why this is a
   * ratio change and not a height: `object-fit: cover` keeps the centre, and
   * the centre of a photograph of grain is grain. */
  .ww-supply__img {
    aspect-ratio: 16 / 9;
  }
}

/* The ask.
 *
 * Design direction §10.C wants the home page to establish what is supplied, in
 * what species, and HOW TO ASK. The first two were here; this is the third, and
 * it is what the 686px hero carousel above was occupying the screen instead of
 * doing.
 *
 * Two actions, weighted: a solid primary that opens the enquiry dialog, and a
 * quiet secondary into the catalogue. Flat panels and 2px corners per §6.3 —
 * no shadow, because nothing here floats.
 */
.ww-supply__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 var(--ww-section-tight);
}

.ww-supply__cta {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid var(--ww-oxide, #0F6037);
  border-radius: var(--ww-radius-control, 8px);
  background: var(--ww-c-accent-fill, var(--ww-oxide, #0F6037));
  color: var(--ww-paper, #FFFFFF);
  font-family: var(--ww-font-sans, inherit);
  font-size: var(--ww-text-base, 1rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* THE TEXT COLOUR HAS TO BE DECLARED FOR EVERY INTERACTIVE STATE, and that is
 * not belt-and-braces — it is the whole fix.
 *
 * `style.css` carries a global `a:hover, a:focus, a:active { color:
 * var(--Accent) }`. That selector is (0,1,1); `.ww-supply__cta` is (0,1,0), so
 * the global rule wins on specificity no matter which file loads later. The
 * value it forces is #0F6037 — which is this button's own background. Green
 * text on a green fill: the label disappears entirely.
 *
 * The block below used to cover `:hover` and `:focus-visible` only, at (0,2,0),
 * which is why the bug looked intermittent and survived review:
 *
 *   :hover           covered      -> label stays white
 *   :focus-visible   covered      -> keyboard focus fine
 *   :active          NOT covered  -> label vanishes while the button is held
 *   :focus (mouse)   NOT covered  -> label stays vanished after the click,
 *                                    because a mouse click sets :focus but not
 *                                    :focus-visible, and the focus persists
 *                                    until something else is clicked
 *
 * Which is exactly how it was reported: "turns green and becomes invisible
 * when pressed and then pressed somewhere else on the page."
 *
 * `a.btn` in cust.css escapes the same trap only by accident — it happens to be
 * (0,1,1) too, tying with the global rule, and cust.css is enqueued after
 * style.css so the tie breaks its way. That is load order doing the work of
 * specificity, and it is one reordered enqueue away from breaking. The global
 * rule is the real defect and is worth deleting: it sets links to the colour
 * `a { color: var(--Accent) }` already gives them, so for ordinary links it is
 * a no-op, and its only actual effect is to repaint components that set their
 * own colour. Left in place here because removing it is a site-wide change
 * that needs its own verification pass.
 *
 * Split in two on purpose: the colour applies to every state so nothing can
 * invert it, while the darkened fill stays the hover/press affordance and is
 * NOT applied on a plain mouse :focus. */
.ww-supply__cta:hover,
.ww-supply__cta:focus,
.ww-supply__cta:focus-visible,
.ww-supply__cta:active {
  color: var(--ww-paper, #FFFFFF);
}

.ww-supply__cta:hover,
.ww-supply__cta:focus-visible,
.ww-supply__cta:active {
  background: var(--ww-c-accent-fill-dk, var(--ww-oxide-dk, #0C5331));
  border-color: var(--ww-oxide-dk, #0C5331);
}

/* The secondary reads as a choice, not as decoration: same shape, no fill.
 * Its border is the oxide, which measures well past the 3:1 that WCAG 1.4.11
 * asks of a control boundary. */
.ww-supply__cta--quiet {
  background: transparent;
  color: var(--ww-oxide, #0F6037);
}

/* Same exposure, quieter symptom. With design_tokens OFF the forced --Accent
 * happens to equal this button's own --ww-oxide fallback, so nothing looks
 * wrong; with the toggle ON and a terracotta oxide (#8F3720, until
 * 2026-09-24; the accent is green since) a mouse :focus would repaint the
 * label brand-green against an unfilled panel. Pinned to the resting
 * colour so the global rule cannot reach it either way. The filled states
 * below are declared after, at equal specificity, so they still win. */
.ww-supply__cta--quiet:focus,
.ww-supply__cta--quiet:active {
  color: var(--ww-oxide, #0F6037);
}

.ww-supply__cta--quiet:hover,
.ww-supply__cta--quiet:focus-visible,
.ww-supply__cta--quiet:active {
  background: var(--ww-c-accent-fill, var(--ww-oxide, #0F6037));
  color: var(--ww-paper, #FFFFFF);
}

.ww-supply__cta:focus-visible {
  outline: 2px solid var(--ww-ink, #0C1E13);
  outline-offset: 3px;
}

@media screen and (max-width: 520px) {
  .ww-supply__actions {
    display: grid;
  }
}