/* Program landing pages (/programs/ + /programs/<key>/) — layered on css/frontdesk.css.
   Tokens only (no colour literals — check-colour-drift.sh); weights 400/600/700 only (type-scale ratchet). */

.prog-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 90px 22px 40px;
}

/* Breadcrumbs */
.prog-crumbs {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.prog-crumbs a { color: var(--text-secondary); text-decoration: none; }
.prog-crumbs a:hover { color: var(--primary); }
.prog-crumbs span { margin: 0 4px; }

/* Hero */
.prog-hero { margin-bottom: 40px; }
.prog-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 6px 0 14px;
}
.prog-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.prog-chip {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}
.prog-chip-exp { background: var(--chip-bg); color: var(--text-secondary); }
.prog-lede { color: var(--text-secondary); font-size: 1.06rem; line-height: 1.6; }
.prog-lede p { margin: 0 0 12px; }
.prog-lede strong { color: var(--text); font-weight: 600; }
.prog-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }

/* Sections */
.prog-section { margin: 40px 0; padding-top: 34px; border-top: 1px solid var(--hairline); }
.prog-section > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 16px;
}
.prog-section-lede { color: var(--text-dim); margin: -6px 0 22px; font-size: 0.96rem; }

/* Who it's for */
.prog-whofor { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.prog-whofor li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.prog-whofor strong { color: var(--text); font-weight: 600; }

/* Variants ("how you can run it") — the splits a program actually ships.
   A WRAPPING PILL ROW, not a grid of cards, because the count is not fixed: three for BLS / TLS /
   Juggernaut and EIGHT for RP. Pills reflow at any count and stay one scannable block; per-variant
   cards would bury RP's page. Weights are 400/600 only — see docs/branding-and-styling.md.
   (feat_frontdesk_program_pages_list_every_split_variant) */
.prog-variant-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prog-variant {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* Structure ("how it's built") */
.prog-block-h { font-weight: 600; font-size: 1.08rem; margin: 20px 0 12px; }
.prog-meta { color: var(--text-dim); font-weight: 400; font-size: 0.86em; }
.prog-days { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prog-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.prog-day-h { font-weight: 600; font-size: 0.98rem; margin: 0 0 8px; color: var(--primary); }
.prog-sets { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.prog-sets li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; }
.prog-sets strong { color: var(--text); font-weight: 600; }
.prog-more { color: var(--text-dim); font-size: 0.84rem; }

/* Help sections (rendered markdown) */
/* Rhythm matched to the FAQ, the owner's stated reference ("spacing for FAQ is good"): a FAQ item is
   16px padding + hairline + 16px padding, i.e. 49px content-to-content, with its dt 8px off its dd.
   The band padding these <section>s used to inherit is killed in frontdesk.css (`section section`) —
   that was the real defect and it was worth 80px of the gap. Spacing only: no dividers added, because
   the report was about spacing. (fix_frontdesk_help_section_spacing_is_looser_than_the_faq) */
.prog-help-sec { margin-bottom: 48px; }
.prog-help-sec h3 { font-weight: 600; font-size: 1.12rem; margin: 0 0 8px; }
.prog-help p, .prog-lede p, .prog-whofor p { line-height: 1.62; }
.prog-help ul, .prog-help p { color: var(--text-secondary); }
.prog-help ul { padding-left: 20px; }
.prog-help li { margin: 5px 0; line-height: 1.55; }
.prog-help strong { color: var(--text); font-weight: 600; }
.prog-help a, .prog-lede a, .prog-faq-list a, .prog-whofor a { color: var(--primary); }
.prog-help code, .prog-faq-list code { background: var(--chip-bg); padding: 1px 6px; border-radius: 5px; font-size: 0.88em; }

/* Tables from help-markdown */
.prog-page table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.9rem; }
.prog-page th, .prog-page td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.prog-page th { background: var(--surface-2); font-weight: 600; }
.prog-page td { color: var(--text-secondary); }

/* Callout from help-markdown */
.help-callout {
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 14px 0;
  color: var(--text-secondary);
}

/* FAQ */
.prog-faq-list { margin: 0; }
.prog-faq-item { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.prog-faq-item dt { font-weight: 600; margin-bottom: 8px; color: var(--text); }
.prog-faq-item dd { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.prog-faq-item dd p:first-child { margin-top: 0; }

/* Credit */
.prog-credit p { color: var(--text-secondary); line-height: 1.6; }
.prog-credit strong { color: var(--text); font-weight: 600; }
.prog-resources { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.prog-resources li { color: var(--text-dim); font-size: 0.92rem; }
.prog-resources a { color: var(--primary); }
.prog-tm-note { color: var(--text-dim); font-size: 0.82rem; margin-top: 14px; }

/* Screenshots reuse .shot-row / .shot-frame from frontdesk.css.
   .shot-row is a 2-column grid, which the program pages previously fed THREE figures — so the third
   always wrapped alone. They now carry the program's own two, which fits it exactly.
   A program that captured only one (the bodyweight programs have no rest-timer shot) would otherwise
   sit in the left column with a hole beside it, so a single figure centres at its natural width.
   (fix_frontdesk_generic_screenshots_on_every_program_page) */
.shot-row-single { grid-template-columns: minmax(0, 22rem); justify-content: center; }

/* Hub cards */
.prog-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.prog-card a {
  display: block; height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.prog-card a:hover { border-color: var(--primary); transform: translateY(-2px); }
.prog-card h3 { font-weight: 600; font-size: 1.1rem; margin: 0 0 6px; color: var(--text); }
.prog-card p { margin: 0 0 10px; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
/* The badges live INSIDE the box (owner, 2026-08-13). Same .prog-chip / .prog-chip-exp the detail
   hero uses — one badge design, two surfaces. Replaces the old flat .prog-card-meta text run.
   (feat_frontdesk_programme_cards_carry_their_badges) */
.prog-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-buildyourown { margin-top: 22px; color: var(--text-secondary); }

/* .linklike + the apex .prog-chips link styling live in frontdesk.css (the apex loads only that sheet). */

/* Footer disclaimer */
.footer-disclaimer {
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── Dual units (feat_frontdesk_is_territory_aware_and_offers_a_locale_picker) ──────────────────
   The generator emits both halves of a derivable weight; this shows the one matching the locale.

   ⚠ IMPERIAL IS THE DEFAULT AND THE METRIC HALF IS WHAT HIDES, deliberately. `data-units` is set on
   <html> by the locale picker's pre-paint, but a page served before any script runs — or with
   scripting off, or to a crawler — has no attribute at all. Defaulting to imperial means that page
   reads exactly as it did before this feature existed, which is a known-good state. Defaulting the
   other way would mean the no-attribute case showed a unit the prose was not written in.

   ⚠ AND IT MUST STAY display:none RATHER THAN visibility/opacity: the hidden half is real text, and
   anything that leaves it in the layout puts both numbers in the accessibility tree and in the
   browser's find-on-page. A reader searching for "5 lb" would hit an invisible match. */
.u [data-w="metric"] { display: none; }
html[data-units="metric"] .u [data-w="imperial"] { display: none; }
html[data-units="metric"] .u [data-w="metric"] { display: inline; }