/* Modern Health, Everlab direction: static chip grid.
   Client ask (verbatim intent, first written here 16 Sept): consultations
   and therapies in smaller cards, displayed on one page without the
   scrolling belt effect, something similar to Everlab's homepage grid but
   not moving, all static and all displayed, with a hover state that
   slightly enlarges the card to reveal more information as the pointer
   moves over it. This was Ryan's own review note both times, not
   something asked for on the 8 Sept call itself.

   Everlab reference pattern rebuilt in this site's tokens: a compact
   horizontal row, rounded rectangle on the --bg-card surface, a small
   square rounded thumbnail on the left, the label in a medium sans
   weight to the right.

   Round-tripped twice now:
   - REVERSED 2026-09-16 -> 2026-09-30 (round 1B, first pass). Ryan: the
     client (Tristan) asked for moving carousels three times on the 8
     Sept call (minutes 18, 26, 47), "two or three moving carousels
     where it's just more organised," and again on services.html
     specifically, "carousel of consults, carousel of therapies, we
     won't even need this list." This file was unlinked from both pages
     and the belts came back.
   - RESTORED 2026-09-30 (round 1B, second pass). Ryan saw the belts on
     the PR 12 preview and asked for static grids again, on the homepage
     only this time: "take all these cards and make them not on a
     carousel, make them all visible on one page, make them smaller, in
     three rows of varying column numbers, and when you hover the mouse
     over the card it expands to show a bit more detail. Like Everlab
     but static." Relinked on index.html only. services.html keeps its
     two belts (styles/round1-pages.css), untouched, per Ryan's own
     instruction this round. The three-rows-of-varying-counts layout is
     new (.chip-rows/.chip-row below); the .chip-grid auto-fill layout
     underneath it is kept for any future page that wants a plain wrap
     instead of deterministic rows, nothing currently uses it.
   - REVERSED AGAIN, Therapies and Consultations only, 2026-10-05 (round
     2, founders asked for carousels on the homepage). Those two groups
     moved to styles/carousel.css belts; every rule this file carried
     for the Consultations grid specifically is gone with them.
     Packages stays exactly as it was, a static chip grid, Ryan's call
     this round too.

   Reuses design tokens from styles/tokens.css and conventions from
   styles/base.css (--line, --bg-card, --radius-lg/md, --ease-reveal,
   .reveal, .u-display) throughout rather than reinventing them. */

/* ---------- Grid (auto-fill, currently unused, kept for later) ---------- */

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* ---------- Rows (index.html, round 1B second pass) ----------
   Three explicit rows per block rather than a wrapping grid, so the
   column count per row is deterministic (Consultations 4/3/3, Therapies
   2/1/2, Packages 2/2/2 or similar) and reads as staggered, offset rows
   the way Everlab's own grid does, rather than a uniform wrap. Cards
   within one row are flex: 1 1 0 up to a max-width, so they always share
   one width across that row; a row of fewer cards naturally centres
   narrower than a row of more, which is what gives the stagger, no extra
   offset math needed.

   2026-09-30, round 1B fourth pass: Ryan's next review flagged row 1
   reading differently from rows 2/3 (flex: 1 1 0 divides each row's own
   width by that row's own card count, so a 4-card row and a 3-card row
   never matched, and the longest title, Integrative and functional
   medicine consultation, made its whole row taller too). Every .chip in
   a grid is now one fixed width AND one fixed height
   (--chip-w/--chip-h custom properties, set per grid below), not
   flex-grown, so every row's cards match every other row's regardless
   of how many share the row; .chip-row's existing justify-content:
   center still gives the stagger (a 3-card row is simply narrower
   overall than a 4-card row at the same card width, no separate offset
   math needed). The height is sized for the tallest real content at
   that width (see the grid-specific rules below), same for every card
   in the grid, so nothing about hover can change it any more either:
   .chip-reveal is a fixed-height crossfade slot (see further down)
   inside that fixed box, not a growing one. */
.chip-rows {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.chip-row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.chip-row .chip {
  flex: 0 0 auto;
  width: var(--chip-w, 15.5rem);
  height: var(--chip-h, 9.75rem);
}
@media (max-width: 640px) {
  /* Single column: every row becomes a plain stack, full width, no
     horizontal scroll, every card still visible. Height stays fixed
     (per grid, redeclared below at the narrower width) so rows are
     still uniform top to bottom. */
  .chip-row {
    flex-direction: column;
    align-items: stretch;
  }
  .chip-row .chip {
    width: 100%;
  }
}

/* Group heading used to stack "Consultations" then "Therapies" under
   one section on index.html (services.html keeps its three blocks'
   own eyebrow + h2 instead and does not use this). */
.chip-group + .chip-group {
  margin-top: 2.5rem;
}
.chip-group-head {
  text-align: center;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

/* Hairline between the two stacked groups on index.html. */
.chip-hr {
  height: 1px;
  background: var(--line);
  margin: 2.5rem 0;
}

/* ---------- Chip ---------- */

.chip {
  position: relative;
  z-index: 1;
  display: flex;
  /* Round 1B, regression fix (second review): center, not flex-start.
     A fixed-height card whose content (thumb + text block) is shorter
     than the card, sized for the tallest real card in the grid, used to
     leave every shorter card's content stuck at the top with the extra
     room dumped below it as a blank band, reading like a bug. Centring
     the row means the thumb and text block sit in the middle of
     whatever fixed height the grid uses, symmetric top and bottom,
     regardless of how short that particular card's own title or
     tagline happens to be. */
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease-reveal), box-shadow 260ms var(--ease-reveal), border-color 260ms var(--ease-reveal);
}

.chip-thumb {
  flex: none;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.chip-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chip-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.2rem;
  flex: 1 1 auto;
}

.chip-label {
  /* Round 1B, regression fix (fourth review): the 3-line clamp above
     was truncating real service names with a "…" (Integrative and
     functional medicine consultation, the longest one, needs a full
     four lines at this column width even at 1rem, tried and measured,
     not just a guess: 1.0625rem needs 3.98 lines and 1rem needs 3.99,
     so the smaller size bought nothing worth the smaller type). Service
     names must never be truncated, so there is no clamp at all now,
     just a plain wrapping block; --chip-h below is sized to the
     tallest title actually renders to (four lines, this one card),
     same principle as the reveal slot next to it. overflow-wrap here
     (and on .chip-more below) so a single long word, at the narrow
     column Consultations uses at mobile, wraps inside the card rather
     than overflowing its edge; found by measuring real scrollWidth
     against clientWidth, not by eye. */
  display: block;
  overflow-wrap: break-word;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.chip-meta {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chip-tagline {
  display: block;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.4;
}

/* Fixed-height crossfade slot, Consultations only from round 1B fifth
   pass on (Packages no longer crossfades here at all, see the override
   block right below): .chip-meta (duration) and .chip-more (detail
   sentence) sit absolutely inset: 0 inside a slot whose own height
   never changes on hover, so nothing about the card's box moves,
   crossfading opacity between the two.

   Round 1B, regression fix (second review): .chip-more used to reserve
   room for its longest sentence in full (up to 9rem), which is most of
   what made these cards run 212px tall with a mostly-empty card at
   rest. Clamped to two lines instead, same idiom as .chip-label above,
   with the slot's own height shrunk to match.

   Round 1B, regression fix (fourth review): that two-line clamp was
   truncating the actual sentence with a "…" on every card (all ten
   detail sentences need more than two lines in this column) and, worse,
   letting a fragment of the cut third line paint below the slot on some
   of them, an overflow: hidden edge case rather than a clean clip.
   Detail sentences must never be truncated either, so the clamp is
   raised to four lines here, the real measured maximum any of the ten
   sentences needs at 0.85rem in this column (several need exactly four;
   none need five), not the three the fix started out trying. --chip-
   reveal-h below is sized to that four-line slot with a small margin,
   so the clamp is now a defensive cap that never actually engages
   for real content, not a live truncation boundary; verified by
   asserting .chip-more's scrollHeight equals its clientHeight on every
   card (nothing is being cut). */
.chip-reveal {
  position: relative;
  height: var(--chip-reveal-h, 2.5rem);
}
.chip-reveal .chip-meta,
.chip-reveal .chip-more {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease;
}
.chip-reveal .chip-more {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: 0;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chip-reveal .chip-meta {
  opacity: 1;
}

/* Round 1B, regression fix (fourth review), Packages: the who-for line
   used to live in the same hover-only crossfade slot as above, clamped
   to three lines, which was both truncating several of the six
   sentences (up to seven natural lines in this column) and leaving an
   empty band at rest, since there is no chip-meta/duration equivalent
   for Packages to crossfade FROM, so the slot just sat blank until
   hover. Ryan's call: show the who-for line at rest instead, in full,
   muted so it still reads as secondary to the tagline above it; hover
   goes back to doing only the icon redraw, lift, tint and arrow
   (round1-home.css), no text change at all. That makes this no longer
   a "reveal" for Packages, so the slot drops out of the absolute/
   fixed-height crossfade mechanism entirely here and back into plain
   flow, sized by its own (unclamped) content like .chip-tagline next to
   it; --chip-h for this grid is measured to fit the longest real
   who-for sentence in full, not a clamped fragment of it. */
.chip-rows--packages .chip-reveal {
  position: static;
  height: auto;
}
.chip-rows--packages .chip-reveal .chip-more {
  position: static;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  opacity: 1;
  transition: none;
}

.chip:hover,
.chip:focus-visible,
.chip:focus-within {
  z-index: 2;
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 14px 34px -18px rgba(28, 25, 24, 0.35);
  border-color: var(--accent-tint-deep);
}
.chip:hover .chip-reveal .chip-meta,
.chip:focus-visible .chip-reveal .chip-meta,
.chip:focus-within .chip-reveal .chip-meta {
  opacity: 0;
}
.chip:hover .chip-reveal .chip-more,
.chip:focus-visible .chip-reveal .chip-more,
.chip:focus-within .chip-reveal .chip-more {
  opacity: 1;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    transition: box-shadow 200ms ease, border-color 200ms ease;
  }
  .chip:hover,
  .chip:focus-visible,
  .chip:focus-within {
    transform: none;
  }
  .chip-reveal .chip-meta,
  .chip-reveal .chip-more {
    transition: none;
  }
}

@media (max-width: 24.375rem) {
  .chip-grid { grid-template-columns: 1fr; }
}

/* ---------- Per-grid layout and sizing (index.html, Packages) ----------
   Round 1B, regression fix (fifth review), row counts: Ryan's own note
   on the shape of each grid rather than any one card. Packages'
   previous 3/2/1 grouping (three .chip-row divs of 3, 2 and 1 cards)
   read as an inverted triangle because .chip-row centres each row
   independently, so a shorter row simply sits narrower than a fuller
   one above it; regrouped in index.html into two .chip-row divs of
   three, no CSS involved (the DOM order of the six package links is
   unchanged, only which wrapper div each sits inside).

   Packages, two rows of three: widened to 18rem (three across 1056px
   leaves 152px of centred margin either side, comfortably inside the
   row) specifically to give the always-visible who-for sentence more
   width to wrap into, so the card is not taller than it needs to be
   for real, unclamped text.

   Every height below is measured the same way as before (Playwright
   against the live page, each element's real, live DOM briefly
   flipped off its clamp/absolute positioning to read its true
   unclamped scrollHeight at this exact width, not cloned nodes and not
   a guess), with a small margin (roughly 4 to 10px) over the worst
   real card so ordinary cross-browser text-metric rounding cannot
   reopen any truncation.

   2026-10-05, round 2: Consultations is a carousel belt again
   (styles/carousel.css), not a chip grid, so its own --chip-w/--chip-h
   sizing and the photo-strip layout rules that used to live in this
   file are gone; only Packages' own rules remain below. */
.chip-rows--packages {
  /* --chip-reveal-h intentionally not set here: the Packages override
     above takes .chip-reveal out of the fixed-height slot mechanism
     entirely (position: static, height: auto), so this grid's card
     height comes from its real content stack, not a reveal slot. */
  --chip-w: 18rem;
  --chip-h: 15.75rem;
}
/* Round 2, 2026-10-06 (Ryan's preview note): every title starts on the
   same line across the grid. The shared .chip centres its row, so a
   two-line title sat higher than a three-line one. Packages top-align
   the text block (Enquire is already pinned to the card's bottom edge by
   styles/round1-home.css); the icon tile stays vertically centred. */
.chip-rows--packages .chip { align-items: flex-start; }
.chip-rows--packages .chip-thumb { align-self: center; }
@media (max-width: 640px) {
  .chip-rows--packages {
    --chip-w: 100%;
  }
  /* Round 1B, mobile addendum, re-measured the same way at 100% width
     now that Packages' who-for line is always shown: the same text
     wraps onto fewer lines at this wider column, so the desktop number
     above, carried straight through, would leave a blank band here
     again. Longest title two lines (44px), longest tagline two lines
     (38px), longest who-for line 79px. */
  .chip-rows--packages {
    --chip-h: 14.25rem;
  }
}