/* ========================================
   LABYRINTH BJJ — PROGRAM PAGES
   ========================================

   Loaded only by the pages under /programs/, on top of style.css. Everything
   these pages share with the front page — the nav, buttons, section headings,
   coach cards, the FAQ accordion — comes from style.css and is not repeated
   here. What is here is the handful of blocks that only a program page has:
   its header, its fact strip, its own slice of the timetable, and the price
   row at the bottom.

   The front page does not load this file, which is the point of it being
   separate: four program pages should not make the homepage's stylesheet
   bigger. */

/* ===== SECTION RHYTHM ===== */
/* style.css gives each front-page section its own padding rule by name
   (.programs, .coaches, .faq …) and has no generic one, so these pages bring
   their own. Same clamp as the front page uses, so the two feel like one site
   when a visitor moves between them. */
.prog-section { padding: clamp(48px, 6vw, 80px) 0; }

.prog-section--surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ===== BREADCRUMBS ===== */
.prog-crumbs {
  padding: calc(var(--nav-height) + var(--space-8)) 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.prog-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.prog-crumbs a:hover { color: var(--gold); }
.prog-crumbs__sep { margin: 0 var(--space-2); color: var(--text-faint); }
.prog-crumbs__current { color: var(--text); }

/* ===== HEADER ===== */
.prog-hero { padding: var(--space-8) 0 var(--space-12); }

.prog-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: var(--space-3) 0 var(--space-5);
}

.prog-hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}

.prog-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* The photograph sits beside the words on a wide screen and above them on a
   narrow one, where a side-by-side would leave both too small to do any work. */
.prog-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}

.prog-hero__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}

/* <picture> is the element the height has to be given to: the <img> inside it
   resolves height:100% against its parent, and a bare <picture> is auto-height,
   so without this the photograph sits short and leaves a band of empty card
   under it. */
.prog-hero__shot picture {
  display: block;
  width: 100%;
  height: 100%;
}

.prog-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== FACT STRIP ===== */
/* auto-fit rather than a fixed count: the pages carry four facts each today,
   but a page with three should not leave a hole where the fourth would be. */
.prog-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-12);
}

.prog-fact { background: var(--surface); padding: var(--space-6); }

.prog-fact__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.prog-fact__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--text);
}

.prog-fact__value em {
  font-style: normal;
  color: var(--gold);
}

/* ===== PROSE ===== */
.prog-prose { max-width: 68ch; }
.prog-prose p { margin-bottom: var(--space-5); line-height: 1.75; color: var(--text-muted); }
.prog-prose p strong { color: var(--text); font-weight: 600; }
.prog-prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(200,162,76,0.35); }
.prog-prose a:hover { border-bottom-color: var(--gold); }

.prog-prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  margin: var(--space-10) 0 var(--space-4);
}

.prog-prose ul { margin: 0 0 var(--space-5) var(--space-5); }
.prog-prose li { margin-bottom: var(--space-3); line-height: 1.7; color: var(--text-muted); }
.prog-prose li strong { color: var(--text); font-weight: 600; }

/* ===== CLASS BREAKDOWN CARDS ===== */
.prog-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.prog-group__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.prog-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

.prog-group__desc { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }

/* ===== THIS PROGRAM'S TIMETABLE ===== */
/* One column per training day rather than the front page's seven-column grid:
   a program that runs three days a week in a seven-column table is four
   columns of dashes, which reads as a gap rather than as a schedule. */
/* 180px, not 200: the kids timetable runs six days, and at 200 the sixth wraps
   onto a row of its own with five columns of empty space beside it. */
.prog-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.prog-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.prog-day__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.prog-slot { margin-bottom: var(--space-4); }
.prog-slot:last-child { margin-bottom: 0; }

.prog-slot__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.prog-slot__name { font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; }

.prog-slot__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: var(--space-2);
  vertical-align: 2px;
}

.prog-slot__badge--gi { background: rgba(200,162,76,0.16); color: var(--gold); }
.prog-slot__badge--nogi { background: rgba(231,76,60,0.16); color: var(--red-hover); }
.prog-slot__badge--adv { background: rgba(255,255,255,0.08); color: var(--text-muted); }

.prog-week__note {
  margin-top: var(--space-6);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ===== PRICE ROW ===== */
.prog-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.prog-price--feature { border-color: var(--gold); }

.prog-price__name {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.prog-price__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text);
}

.prog-price__amount span { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
.prog-price__note { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; }

/* ===== COACH ROW ===== */
.prog-coaches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

/* ===== CLOSING CTA ===== */
.prog-close {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  margin: var(--space-20) 0;
}

.prog-close__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.prog-close__text {
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

/* ===== SIBLING PROGRAMS ===== */
.prog-siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-sibling {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.prog-sibling:hover { border-color: var(--gold); transform: translateY(-2px); }

.prog-sibling__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.prog-sibling__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ===== NARROW SCREENS ===== */
@media (max-width: 899px) {
  .prog-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Photograph first: it says what the class is faster than the heading does. */
  .prog-hero__shot { order: -1; }
}

@media (max-width: 560px) {
  .prog-hero__cta { flex-direction: column; align-items: stretch; }
  .prog-hero__cta .btn { justify-content: center; }
  .prog-close { padding: var(--space-12) var(--space-5); }
}