/* =========================================================================
   HN Theme Grid
   Insights hub theme grid (build plan 1.3). One to four large theme cards,
   each a whole-card link to a franchise spoke page.

   Colour model (Decision 048 scoped-token approach): each card scheme modifier
   sets four scoped custom properties, and each style variant consumes them:
     --card-accent   the scheme accent, used for the eyebrow, the pill text, the
                     watermark and the hover border. Every scheme's accent is a
                     tone of its own colour, including navy.
     --card-dark-bg  solid card background for the dark variant
     --card-spine    bright top-bar colour for the spine variant
     --card-tint     pastel card background for the tinted variant

   Topic pills add three more scoped properties, set per style variant on the
   card rather than per scheme, because the chip treatment is a property of the
   surface the chip sits on:
     --card-pill-bg      chip background
     --card-pill-fg      chip text, and the ghost more button's label
     --card-pill-border  the ghost more button's dashed border
   The dark variant takes --surface-on-dark-soft and --border-on-dark-soft
   (Decision 105), which are translucent so one pair reads correctly over all
   four dark card colours.

   Card layering (changed when topic pills landed). The card used to BE the
   anchor. It cannot be, now that it contains a real <button> (the more toggle),
   because interactive-inside-interactive is invalid HTML. The card is a DIV, the
   heading holds the anchor, and .hn-theme-grid__card-link::after stretches over
   the whole card so the entire surface is still clickable. Consequences:
     - card-content must stay position: static, so the overlay's containing
       block is the card, not the content box.
     - the card gets isolation: isolate and the watermark drops to z-index: -1,
       which puts the watermark above the card background but below the in-flow
       text: exactly the order card-content's old z-index: 1 produced.
     - the more button needs position: relative and z-index above the overlay,
       or the overlay would swallow its clicks and navigate instead.
     - the spine variant's ::before bar stays at z-index: 2, above both.

   Card shadow uses the codebase card-shadow idiom (navy at low alpha), matching
   CLAUDE.md visual identity and hn-path-cards/module.css:89. This rgba is the
   sanctioned shadow idiom, not a brand-colour fill.

   Layout is two finite modifier sets, so it is class-driven, not inline style
   (Decision 027): --count-{1..6} for how many cards there are, --cols-{1..4} for
   how many sit per row. Below 1024px three and four per row drop to two, and
   below 900px every option collapses to one column.
   ========================================================================= */

/* ---- Watermark size (editor-controlled) --------------------------------- */
/* A multiplier rather than three sets of pixel values, so it composes with the
   per-layout base sizes below instead of fighting them. */
.hn-theme-grid {
  --wm-scale: 1;
}

.hn-theme-grid--wm-large  { --wm-scale: 1; }
.hn-theme-grid--wm-medium { --wm-scale: 0.75; }
.hn-theme-grid--wm-small  { --wm-scale: 0.5; }

/* ---- Section vertical spacing (editor-controlled) ----------------------- */
.hn-theme-grid--pt-none    { padding-top: 0; }
.hn-theme-grid--pt-tight   { padding-top: 40px; }
.hn-theme-grid--pt-default { padding-top: 70px; }
.hn-theme-grid--pt-loose   { padding-top: 110px; }

.hn-theme-grid--pb-none    { padding-bottom: 0; }
.hn-theme-grid--pb-tight   { padding-bottom: 40px; }
.hn-theme-grid--pb-default { padding-bottom: 70px; }
.hn-theme-grid--pb-loose   { padding-bottom: 110px; }

/* ---- Grid layout -------------------------------------------------------- */
/* Columns come from --cols-{1..4}, resolved in module.html from the editor's
   Cards per row choice (Auto derives it from the card count). --count-{n} is
   still emitted and still styles the lone-card case below, but it no longer
   drives the column count. */
.hn-theme-grid__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  /* Watermark geometry lives here so the column and count modifiers below can
     restate the base size for narrower cards, and the editor's size choice can
     scale whichever base applies. The offsets scale with it, so a smaller icon
     keeps the same corner crop instead of being eaten by a fixed overhang. */
  --wm-base: 160px;
  --wm-right: -14px;
  --wm-bottom: -22px;
}

.hn-theme-grid__grid--cols-1 { grid-template-columns: 1fr; }
.hn-theme-grid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.hn-theme-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.hn-theme-grid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Card base ---------------------------------------------------------- */
.hn-theme-grid__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 32px;
  border-radius: 20px;
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* A lone card reads as a band, not a lonely giant. */
.hn-theme-grid__grid--count-1 .hn-theme-grid__card {
  min-height: 180px;
}

/* Four to a row leaves roughly 285px per card in the 1200px container, which the
   display face at 34px cannot hold without wrapping to four lines. Step it down
   so the option stays usable. */
.hn-theme-grid__grid--cols-4 .hn-theme-grid__heading {
  font-size: 28px;
}

/* Deliberately static: the stretched-link overlay measures against the card, so
   this must not become the overlay's containing block. Text still paints above
   the watermark because the watermark sits at z-index: -1 inside the card's
   isolated stacking context.
   A flex column that fills the card's height, so the link label can be pinned to
   the bottom edge and every card in a row lines its CTA up with its neighbours
   regardless of how much copy or how many pills sit above it. */
.hn-theme-grid__card-content {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Items stay stretched (the flex default) so the heading and copy size exactly
     as they did as block children. Shrink-to-fit would resize the heading to its
     max-content width and change where the display face wraps. */
}

/* ---- Stretched card link ------------------------------------------------- */
.hn-theme-grid__card-link {
  color: inherit;
  text-decoration: none;
}

/* The overlay that keeps the whole card clickable. */
.hn-theme-grid__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
}

/* ---- Card typography ---------------------------------------------------- */
.hn-theme-grid__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hn-theme-grid__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hn-theme-grid__copy {
  margin: 14px 0 0;
  max-width: 400px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- Topic pills --------------------------------------------------------- */
.hn-theme-grid__pills-wrap {
  margin: 16px 0 0;
  max-width: 400px;
}

.hn-theme-grid__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The disclosed rows sit directly below the top row, one gap apart. */
.hn-theme-grid__pills--extra {
  margin-top: 8px;
}

/* Added by module.js only. With JavaScript off these rows stay visible. */
.hn-theme-grid__pills--extra.is-collapsed {
  display: none;
}

.hn-theme-grid__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 16px;
  background: var(--card-pill-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--card-pill-fg);
  white-space: nowrap;
}

.hn-theme-grid__pills-more-item {
  display: inline-flex;
}

/* display: inline-flex above outranks the hidden attribute's UA display: none,
   so the server-rendered hidden toggle needs this to actually stay hidden. */
.hn-theme-grid__pills-more-item[hidden] {
  display: none;
}

/* Ghost chip: same outer box as a pill (1px border, 1px less padding), dashed,
   transparent, carrying the variant's chip text colour. position and z-index put
   it above the stretched-link overlay so clicking it toggles instead of
   navigating. */
.hn-theme-grid__pill--more {
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  border: 1px dashed var(--card-pill-border);
  background: transparent;
  color: var(--card-pill-fg);
  cursor: pointer;
  transition: background 0.2s ease;
}

.hn-theme-grid__pill--more:hover {
  background: var(--card-pill-bg);
}

.hn-theme-grid__pill--more:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 2px;
}

/* margin-top: auto pins the CTA to the bottom of the card, so a row of cards
   lines its CTAs up whatever sits above them. padding-top keeps the original
   20px gap for cards whose content already fills the height, where auto
   collapses to zero. align-self keeps the box hugging its text rather than
   stretching across the card. */
.hn-theme-grid__link-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}

.hn-theme-grid__arrow {
  transition: transform 0.2s ease;
}

.hn-theme-grid__card:hover .hn-theme-grid__arrow {
  transform: translateX(3px);
}

/* Its own rule, not a selector list with the hover rule above: an unsupported
   :has() would invalidate the whole list and take the hover nudge with it. */
.hn-theme-grid__card:has(.hn-theme-grid__card-link:focus-visible) .hn-theme-grid__arrow {
  transform: translateX(3px);
}

/* ---- Watermark icon (decorative, bottom-right, cropped) ----------------- */
/* z-index: -1 (not 0) so it paints above the card background but below the
   in-flow card text, which is what card-content's old z-index: 1 achieved. Safe
   because the card sets isolation: isolate, so -1 cannot escape behind the
   card's own background. */
.hn-theme-grid__watermark {
  position: absolute;
  right: calc(var(--wm-right) * var(--wm-scale));
  bottom: calc(var(--wm-bottom) * var(--wm-scale));
  width: calc(var(--wm-base) * var(--wm-scale));
  height: calc(var(--wm-base) * var(--wm-scale));
  z-index: -1;
  pointer-events: none;
}

.hn-theme-grid__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* A lone band card is shorter, so tuck the watermark tighter. */
.hn-theme-grid__grid--count-1 {
  --wm-base: 130px;
  --wm-bottom: -18px;
}

/* Narrower cards need a smaller starting size. At 160px on a three or four up
   card it stops reading as a corner accent and starts crowding the CTA. Same
   reasoning as the lone-card and mobile rules. The editor's size choice scales
   these, it does not replace them. */
.hn-theme-grid__grid--cols-3 {
  --wm-base: 130px;
}

.hn-theme-grid__grid--cols-4 {
  --wm-base: 112px;
}

/* ---- Keyboard focus ----------------------------------------------------- */
/* Focus lands on the heading anchor now, but the ring belongs on the card, which
   is what it circled before the restructure. Where :has() is available, suppress
   the anchor's own ring and draw the identical card ring. Where it is not, the
   anchor keeps its native ring, so focus is never invisible. */
@supports selector(:has(*)) {
  .hn-theme-grid__card-link:focus-visible {
    outline: none;
  }

  .hn-theme-grid__card:has(.hn-theme-grid__card-link:focus-visible) {
    outline: 3px solid var(--ruby);
    outline-offset: 3px;
  }
}

/* =========================================================================
   Per-scheme scoped tokens
   ========================================================================= */
/* Navy's accent is navy. It used to borrow --fuchsia on the theory that navy
   cannot be its own accent, but that made a navy card read pink: pink eyebrow,
   pink hover border, pink watermark. A quieter eyebrow in the same navy is the
   better trade. This is also why navy no longer needs a pill exception: its tint
   IS --bg and its accent IS navy, so the default pill rules already produce the
   neutral chip the exception used to force. */
.hn-theme-grid__card--navy {
  --card-accent: var(--navy);
  --card-dark-bg: var(--navy);
  --card-spine: var(--navy);
  --card-tint: var(--bg);
}

.hn-theme-grid__card--green {
  --card-accent: var(--green-deep);
  --card-dark-bg: var(--green-deep);
  --card-spine: var(--green);
  --card-tint: var(--bg-tint-green);
}

.hn-theme-grid__card--violet {
  --card-accent: var(--violet);
  --card-dark-bg: var(--violet);
  --card-spine: var(--violet);
  --card-tint: var(--bg-tint-violet);
}

.hn-theme-grid__card--ruby {
  --card-accent: var(--ruby);
  --card-dark-bg: var(--ruby);
  --card-spine: var(--ruby);
  --card-tint: var(--bg-tint-ruby);
}

/* Yellow. The spine bar and the tint carry the yellow; the accent and the dark
   card surface use the deep tiger tone, because --yellow as text on white, or as
   a dark card behind white text, is nowhere near legible. Same reuse of
   --tiger-deep as the dark-orange card surface in Decision 077. */
.hn-theme-grid__card--yellow {
  --card-accent: var(--tiger-deep);
  --card-dark-bg: var(--tiger-deep);
  --card-spine: var(--yellow);
  --card-tint: var(--bg-tint-tiger);
}

/* Pink, from the fuchsia family. Text and the dark surface take --fuchsia-deep
   (the token's stated role is fuchsia tag text); the bright bar takes --fuchsia.
   Pale --fuchsia is deliberately not the accent here: at 3.2:1 on white it fails
   AA for the eyebrow and the pill text. */
.hn-theme-grid__card--pink {
  --card-accent: var(--fuchsia-deep);
  --card-dark-bg: var(--fuchsia-deep);
  --card-spine: var(--fuchsia);
  --card-tint: var(--bg-tint-fuchsia);
}

/* =========================================================================
   Style variant: DARK
   Solid coloured card, yellow eyebrow, white heading and link, muted-on-dark
   copy, white low-opacity watermark. Hover lifts with a shadow.
   ========================================================================= */
.hn-theme-grid--dark .hn-theme-grid__card {
  background: var(--card-dark-bg);
  border-color: transparent;
  /* Translucent chips so one pair works on all four dark card colours. */
  --card-pill-bg: var(--surface-on-dark-soft);
  --card-pill-fg: var(--white);
  --card-pill-border: var(--border-on-dark-soft);
}

.hn-theme-grid--dark .hn-theme-grid__eyebrow {
  color: var(--yellow);
}

/* The yellow scheme's dark surface is the deep tiger tone, the lightest of the
   dark card colours, and a yellow eyebrow on it lands at 4.05:1, under the 4.5
   an eyebrow at 12px needs. White clears it at 5:1, and yellow on amber was
   muddy anyway. Every other scheme's dark card is dark enough for the yellow. */
.hn-theme-grid--dark .hn-theme-grid__card--yellow .hn-theme-grid__eyebrow {
  color: var(--white);
}

.hn-theme-grid--dark .hn-theme-grid__heading,
.hn-theme-grid--dark .hn-theme-grid__link-label {
  color: var(--white);
}

.hn-theme-grid--dark .hn-theme-grid__copy {
  color: var(--muted-on-dark-body);
}

.hn-theme-grid--dark .hn-theme-grid__watermark {
  color: var(--white);
  opacity: 0.16;
}

.hn-theme-grid--dark .hn-theme-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 32, 91, 0.10);
}

/* =========================================================================
   Style variant: LIGHT
   White card, 2px border, radius 20px. Navy heading, muted copy, navy link.
   Scheme-accent eyebrow. Watermark stroked in the accent at ~0.5 opacity.
   Hover: border becomes the accent, lift plus soft shadow.
   ========================================================================= */
.hn-theme-grid--light .hn-theme-grid__card {
  background: var(--white);
  border-color: var(--border);
  --card-pill-bg: var(--card-tint);
  --card-pill-fg: var(--card-accent);
  --card-pill-border: var(--card-accent);
}

.hn-theme-grid--light .hn-theme-grid__eyebrow {
  color: var(--card-accent);
}

.hn-theme-grid--light .hn-theme-grid__heading,
.hn-theme-grid--light .hn-theme-grid__link-label {
  color: var(--navy);
}

.hn-theme-grid--light .hn-theme-grid__copy {
  color: var(--muted);
}

.hn-theme-grid--light .hn-theme-grid__watermark {
  color: var(--card-accent);
  opacity: 0.5;
}

.hn-theme-grid--light .hn-theme-grid__card:hover {
  transform: translateY(-3px);
  border-color: var(--card-accent);
  box-shadow: 0 16px 40px rgba(0, 32, 91, 0.10);
}

/* =========================================================================
   Style variant: TINTED
   As light but no visible border (transparent 2px to avoid layout shift) and
   a pastel background per scheme. Accent eyebrow. Watermark accent at ~0.45.
   ========================================================================= */
.hn-theme-grid--tinted .hn-theme-grid__card {
  background: var(--card-tint);
  border-color: transparent;
  /* White chips so the pills read against the pastel card. */
  --card-pill-bg: var(--white);
  --card-pill-fg: var(--card-accent);
  --card-pill-border: var(--card-accent);
}

.hn-theme-grid--tinted .hn-theme-grid__eyebrow {
  color: var(--card-accent);
}

.hn-theme-grid--tinted .hn-theme-grid__heading,
.hn-theme-grid--tinted .hn-theme-grid__link-label {
  color: var(--navy);
}

.hn-theme-grid--tinted .hn-theme-grid__copy {
  color: var(--muted);
}

.hn-theme-grid--tinted .hn-theme-grid__watermark {
  color: var(--card-accent);
  opacity: 0.45;
}

.hn-theme-grid--tinted .hn-theme-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 32, 91, 0.10);
}

/* =========================================================================
   Style variant: SPINE
   Exactly the light variant plus a 7px bright colour bar across the top edge,
   following the top corner radius.
   ========================================================================= */
.hn-theme-grid--spine .hn-theme-grid__card {
  background: var(--white);
  border-color: var(--border);
  --card-pill-bg: var(--card-tint);
  --card-pill-fg: var(--card-accent);
  --card-pill-border: var(--card-accent);
}

/* pointer-events: none matters. This bar belongs to the card DIV, and it sits
   above the stretched-link overlay, so without it the top 7px of every spine
   card would stop being clickable (it used to hit-test to the card, which used
   to be the anchor). */
.hn-theme-grid--spine .hn-theme-grid__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  pointer-events: none;
  background: var(--card-spine);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 2;
}

.hn-theme-grid--spine .hn-theme-grid__eyebrow {
  color: var(--card-accent);
}

.hn-theme-grid--spine .hn-theme-grid__heading,
.hn-theme-grid--spine .hn-theme-grid__link-label {
  color: var(--navy);
}

.hn-theme-grid--spine .hn-theme-grid__copy {
  color: var(--muted);
}

.hn-theme-grid--spine .hn-theme-grid__watermark {
  color: var(--card-accent);
  opacity: 0.5;
}

.hn-theme-grid--spine .hn-theme-grid__card:hover {
  transform: translateY(-3px);
  border-color: var(--card-accent);
  box-shadow: 0 16px 40px rgba(0, 32, 91, 0.10);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .hn-theme-grid__heading {
    font-size: 30px;
  }
  /* Three and four up get tight on tablet; drop to two columns. */
  .hn-theme-grid__grid--cols-3,
  .hn-theme-grid__grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Single-column stack for all counts below 900px (build plan 1.9). */
@media (max-width: 900px) {
  /* Scale the spacing tokens down on mobile; None still means flush. */
  .hn-theme-grid--pt-tight   { padding-top: 28px; }
  .hn-theme-grid--pt-default { padding-top: 44px; }
  .hn-theme-grid--pt-loose   { padding-top: 64px; }
  .hn-theme-grid--pb-tight   { padding-bottom: 28px; }
  .hn-theme-grid--pb-default { padding-bottom: 44px; }
  .hn-theme-grid--pb-loose   { padding-bottom: 64px; }

  .hn-theme-grid__grid,
  .hn-theme-grid__grid--cols-1,
  .hn-theme-grid__grid--cols-2,
  .hn-theme-grid__grid--cols-3,
  .hn-theme-grid__grid--cols-4 {
    grid-template-columns: 1fr;
  }
  .hn-theme-grid__card {
    min-height: 200px;
  }
}

@media (max-width: 680px) {
  .hn-theme-grid__card {
    padding: 24px;
  }
  .hn-theme-grid__heading {
    font-size: 26px;
  }
  /* Later in the file than the cols modifiers and equally specific, so this base
     wins on mobile whatever the column choice was. */
  .hn-theme-grid__grid {
    --wm-base: 130px;
  }
}

/* Honour reduced-motion: no hover lift or arrow nudge. */
@media (prefers-reduced-motion: reduce) {
  .hn-theme-grid__card,
  .hn-theme-grid__arrow {
    transition: none;
  }
  .hn-theme-grid__card:hover {
    transform: none;
  }
}