/* TrackingTCG — page heading pattern.
   One h1 treatment for every page: optional context eyebrow, left-aligned title,
   optional support line. Pairs with ambient-cards.css (independent of it).

   Markup:
     <header class="ttcg-page-head">
       <p class="ttcg-eyebrow">Pokémon</p>          <!-- optional context -->
       <h1>Expansions</h1>
       <p class="ttcg-page-sub">400 sets tracked.</p> <!-- optional -->
     </header>

   Rules of thumb:
   - Eyebrow = where you are, not what you're looking at: the TCG on TCG pages
     ("Pokémon"), the series on a set page ("Pokémon · Scarlet & Violet").
     Every page on a TCG subdomain carries its TCG eyebrow, /collections
     included; omitted only on www account/site pages (Settings).
   - Always left-aligned to the page gutter. Never centre a page h1.
   - No text-shadow on flat backgrounds — the halo is only for text over card art
     (use .ttcg-page-head--on-art for that case).

   DEVIATION FROM THE HANDOFF: the element-qualified `header.ttcg-page-head`
   form is used instead of the bare class. Several pages already style their
   title with a descendant selector of the same specificity — `.cards-title h1`
   (pokemon/cards.css) is the live example — and those sheets load after this
   one, so on a tie they win on source order and the page keeps its old fixed
   `font-size: var(--text-lg)` instead of the fluid ramp. Qualifying with the
   element name settles it without resorting to !important. */

header.ttcg-page-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 32px;
  text-align: left;
}

header.ttcg-page-head .ttcg-eyebrow {
  margin: 0;
  font-family: var(--font-header, Montserrat), sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-secondary);
}

header.ttcg-page-head h1 {
  margin: 0;
  font-family: var(--font-header, Montserrat), sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.44rem); /* 28.8 → 39.06px */
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--colour-text);
  text-wrap: balance;
  text-shadow: none;
}

header.ttcg-page-head .ttcg-page-sub {
  margin: 2px 0 0;
  font-family: var(--font-paragraph, Hind), sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--colour-text-muted);
  max-width: 62ch;
}

/* Page head that sits in the same row as a search field or view toggle. */
header.ttcg-page-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

header.ttcg-page-head--row .ttcg-page-head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Compact variant — for a heading that sits INSIDE a component box rather than
   at the page gutter (the expansion page puts its h1 in the set info card, so
   the set name is not printed twice on one screen). Same treatment, one size
   step down, so a 480px box does not have a 39px title in it. */
header.ttcg-page-head--compact {
  margin: 0 0 4px;
}

header.ttcg-page-head--compact h1 {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.15;
}

header.ttcg-page-head--compact .ttcg-eyebrow {
  font-size: 11px;
}

/* Only when the heading sits over card art / a set banner. */
header.ttcg-page-head--on-art h1,
header.ttcg-page-head--on-art .ttcg-eyebrow {
  text-shadow: var(--text-halo);
  color: var(--colour-text);
}

@media (max-width: 640px) {
  header.ttcg-page-head { margin-bottom: 24px; }
  header.ttcg-page-head .ttcg-eyebrow { font-size: 12px; }
}