/* ============================================================
   Hero action cards — 8-card grid that replaces the legacy hero
   carousel on the home page. Lives inside the same
   .landing-hero-image / .landing-hero-image-frame wrappers as
   the carousel did, so the panel's reserved 300px footprint and
   mobile bleed-down behaviour are preserved without touching
   .landing-hero-panel rules in home.css.

   Colour, border, shadow values use design tokens from
   static/css/tokens/colors.css. Font sizes and icon sizes are
   raw px (the project does not currently expose typography
   tokens at this scale; see home-search.css for the same
   pattern).
   ============================================================ */

/* Card-variant frame — drops the dashed-placeholder chrome and
   lets the inner grid breathe. Keeps the same 12/5 aspect ratio
   as the carousel so the hero band height does not change. */
.landing-hero-image-frame--cards {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Override the carousel frame's `overflow: hidden` so a hover
     lift on the bottom row's cards isn't clipped. */
  overflow: visible;
  /* Drop the 12/5 aspect-ratio inherited from the base frame —
     for the cards variant the height is driven by the grid's
     fixed 200px rows, not by viewport width. */
  aspect-ratio: auto;
  height: auto;
}

/* 4×2 grid on desktop — fixed 200px row height per design spec.
   Switched from absolute-fill to in-flow so the grid drives the
   frame's height (frame is now `height: auto`). */
.hero-action-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 175px 175px;
  /* Split row vs column gap so the vertical breathing room
     between the two rows is preserved (space-3) while the
     horizontal gap between columns is tightened (space-1).
     `gap` shorthand sets both; using row-gap + column-gap
     separately lets us touch the horizontal axis only. */
  row-gap: var(--space-4);
  column-gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The home page renders TWO action grids: the desktop one (8
   individual product cards) and the mobile-only one (6 top-level
   category cards). Default state hides the mobile variant — the
   ≤768px block below toggles which is visible. */
.hero-action-grid--mobile {
  display: none;
}

/* Transparent spacer "cards" sit at the head and tail of the
   mobile category list. Two jobs:
   1. Give the first / last real card's drop shadow somewhere to
      render before the scroll container clips it.
   2. Defeat the Chrome scrollWidth-under-reporting bug — a real
      DOM item makes the scroller include the trailing gutter in
      its extent so the last card's shadow is reachable.
   Kept narrow (12px) so they don't introduce a visible left/right
   gap on the carousel — the swipe-discovery cue comes from the
   half-card peek at the right edge that the percentage flex-basis
   formula on `.home-hero-carousel .hero-action-grid > li` produces.
   The width
   selector is intentionally specific (`.home-hero-carousel
   .hero-action-grid > li.hero-action-card-spacer`) so it
   outranks the wider per-card flex-basis rule in home.css that
   would otherwise inflate spacers to ≈96px. */
.home-hero-carousel .hero-action-grid > li.hero-action-card-spacer {
  flex: 0 0 12px;
  pointer-events: none;
  scroll-snap-align: none;
}

.hero-action-grid > li {
  display: flex;
}

/* Individual card — generous padding, single icon, bold title,
   one-line subtitle. Background is solid white against the
   gradient panel so the cards read clearly. */
.hero-action-card {
  display: flex;
  flex-direction: column;
  /* Centre the icon + heading column (May 7 2026, Christine):
     icon sits centred at the top, heading wraps centred below.
     Anchor to the top so the icon's Y stays consistent across
     cards even when shorter headings leave blank space at the
     bottom (full-centre looked floaty as the icon drifted
     card-to-card with heading length). */
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  /* Card width cap inside its 1fr grid cell. Bumped 200 → 240
     → 280px (May 7 2026, Christine) to keep closing the
     horizontal gap between cards. Paired with column-gap: space-1
     above; together they pull the cards closer along the
     horizontal axis without changing the 4-col structure or
     the row-gap. */
  max-width: 280px;
  margin: 0 auto;
  min-height: 122px;
  padding: var(--space-5);
  /* Centre heading text (paired with align-items: center above)
     so the title block reads as one centred unit under the icon. */
  text-align: center;
  background: var(--white);
  border: 0;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  /* Layered "floating" shadow — a soft, wide ambient halo plus a
     tighter contact shadow. Tuned to read against the bright
     pink hero panel where single-layer brand shadows wash out. */
  box-shadow:
    0 24px 50px rgba(63, 53, 56, 0.22),
    0 8px 16px rgba(63, 53, 56, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Hover / keyboard-focus: lift the card and deepen the shadow.
   The fuchsia ring layer was removed per design feedback (Apr 2026)
   — the lift + shadow alone is enough hover feedback and looks
   cleaner against the bright pink hero panel. */
.hero-action-card:hover,
.hero-action-card:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 36px 70px rgba(63, 53, 56, 0.30),
    0 12px 24px rgba(63, 53, 56, 0.18);
  outline: none;
}

/* Mobile tap feedback — phones don't have hover, so :active
   gives a clear "I pressed this" pulse before the page navigates. */
.hero-action-card:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow:
    0 0 0 2px rgba(217, 38, 145, 0.55),
    0 18px 32px rgba(63, 53, 56, 0.22);
}

.hero-action-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Icon — same Lucide-style stroke weight as the rest of the
   site's inline SVGs (1.5, currentColor). */
.hero-action-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bumped 36px → 56px (May 7 2026, Christine) on top of the
     centred-card pass — the larger icon anchors the now-centred
     heading column and gives the cards more visual weight.
     Trimmed 56 → 50px (May 7 2026, Christine: ~10% smaller).
     Bumped 50 → 55px (May 7 2026, Christine: +10% on desktop after
     swap to designed full-colour icons). */
  width: 55px;
  height: 55px;
  /* Push the icon 15px down from the top of the card
     (May 7 2026, Christine) — gives the heading column more
     room above the icon so it visually centres in the card. */
  margin-top: 15px;
  /* Brand fuchsia — inline SVGs use stroke="currentColor", so this
     recolors them without touching each <svg> individually. Family
     modifier classes below override this per card group. */
  color: var(--fuchsia);
  /* Tightened 28 → 12px (May 7 2026, Christine) — heading sits
     closer to the icon now that both are centred in a narrower
     card. */
  margin-bottom: 12px;
}

/* Three-colour family system across the eight cards (Apr 2026):
   fuchsia = Research family, coral = Assess family, amber = Plan
   family. Modifier class is set in the template; default above is
   fuchsia so --fuchsia is technically a no-op but kept explicit
   for readability and future-proofing. */
.hero-action-card-icon--fuchsia { color: var(--fuchsia); }
.hero-action-card-icon--coral   { color: var(--coral); }
.hero-action-card-icon--amber   { color: var(--amber); }

.hero-action-card-icon svg,
.hero-action-card-icon img {
  width: 100%;
  height: 100%;
  /* Designed icons (May 7 2026) are full-colour SVGs served as
     <img>; preserve aspect ratio inside the square wrapper. */
  object-fit: contain;
  display: block;
}

.hero-action-card-title {
  font-family: inherit; /* Inter, per brief */
  /* Original 15px restored (May 2026 v2): the 20px bump felt
     oversized once the cards were tightened up. Title still
     clamps to 3 lines so high-expansion locales (DE / NL / FR)
     respect the min-height. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Tablet: tighten padding so 4 cards still fit comfortably. */
@media (max-width: 1100px) {
  .hero-action-card {
    padding: var(--space-4);
    gap: var(--space-1, 6px);
  }
  .hero-action-card-title { font-size: 15px; }
  .hero-action-card-icon { width: 33px; height: 33px; }
}

/* ── Mobile: 2×4 grid. Brief specifies <768px collapse.
   - Drops the carousel's 12/5 aspect-ratio constraint so cards
     size by content.
   - Neutralises the legacy `.landing-hero-image { max-width: 280px }`
     mobile rule in home.css that would squash the cards into a
     thin column. The cards variant takes full panel width.
   - The existing `.landing-hero-image { margin-bottom: -100px }`
     mobile rule in home.css still handles bleed-down. */
@media (max-width: 768px) {
  .landing-hero-image--cards {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* No horizontal padding here on mobile — the carousel inside
       (`.home-hero-carousel .hero-action-grid`) takes over the
       20px gutter as scroll-container padding instead, so the
       first and last cards get room for their drop shadows
       within the scroller's clipping box rather than having the
       shadow chopped off by the figure's edge. */
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    /* Cancel the -32px bottom-margin set on the generic
       .landing-hero-image mobile rule. On desktop the cards
       overhang the panel's bottom edge to bleed onto the next
       section over the video — but on mobile there's no video,
       and the user wants the cards to sit fully inside the
       gradient panel rather than spilling out. */
    margin-top: 28px;
    margin-bottom: 0;
  }
  .landing-hero-image-frame--cards {
    aspect-ratio: auto;
    height: auto;
  }
  .hero-action-grid {
    position: static;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: var(--space-3);
  }
  /* Swap which grid is visible on mobile: the home carousel
     wrapper switches from the desktop product list (hidden) to
     the category list (revealed). The 6 category cards become
     the new scroll-snap row. Both lists carry .hero-action-grid,
     so the existing `.home-hero-carousel .hero-action-grid > li`
     flex rule in home.css drives whichever one is shown. Only
     scoped to .home-hero-carousel so other places that might
     reuse .hero-action-grid in the future aren't disturbed. */
  .home-hero-carousel .hero-action-grid:not(.hero-action-grid--mobile) {
    display: none;
  }
  .home-hero-carousel .hero-action-grid--mobile {
    display: flex;
  }
  .hero-action-card {
    padding: var(--space-4);
  }
  .hero-action-card-title { font-size: 14px; }

  /* Mobile-only category cards: no icons (the labels alone do
     the disambiguation work for abstract categories like
     "Research" / "Planning"), title bumped a notch so it reads
     as the visual anchor, and tightened padding so the cards
     are squatter — they're stating a single concept, not a
     verb + supporting copy like the desktop product cards. */
  .hero-action-grid--mobile .hero-action-card-icon {
    display: none;
  }
  .hero-action-grid--mobile .hero-action-card {
    padding: var(--space-3);
    gap: var(--space-1, 4px);
  }
  .hero-action-grid--mobile .hero-action-card-title {
    font-size: 16px;
    line-height: 1.2;
  }
  .hero-action-grid--mobile .hero-action-card-subtitle {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* ── Tiny phones: keep 2×4 (per brief — horizontal scroll was
   considered and rejected because it hides half the value-prop
   below the fold on a hero). Reduce padding further. */
@media (max-width: 480px) {
  .hero-action-card { padding: var(--space-3); }
  .hero-action-card-icon { width: 22px; height: 22px; }
}