/* The one page: hero, the three town panels, the schedule cards and the
   registration wizard. Tokens and every base class come from site.css — this
   file only adds what /parkour-treningy/ needs. */


/* ---- hero: the whole first screen and, on the index, the only screen ---- */
/* The cookie bar is fixed to the bottom and ~240 px tall on a 390 px phone;
   a 90svh hero centres its content behind it and the three town buttons — the
   only CTA on the index — end up under the bar. shell.js measures the bar
   into --dh-cookie-h; it is 0 for everyone who has already answered. */
.dh-hero--single {
  min-height: calc(90svh - var(--dh-cookie-h, 0px));
  display: flex;
  align-items: center;
}
.dh-hero--single .dh-container { width: 100%; }
/* Caveat at the owner's request, in --dh-ink rather than the accent colours of
   DESIGN.md 3.4: it is the trainer speaking, not a decorative flourish. */
.dh-hero .dh-hero-quote {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--dh-ink);
  max-width: 70ch;   /* two lines on a desktop, not three */
  margin-inline: auto;
  text-wrap: balance;
}
.dh-hero--single h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em; }
.dh-town-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}
.dh-town-choice .dh-btn { min-width: 12rem; }
/* Belt and braces for the same bug: on a phone the quote wraps to four or
   five lines and the buttons drop out of sight whatever the hero is tall.
   Ask for the town first there; desktop keeps h1 → quote → buttons. */
@media (max-width: 47.99rem) {
  .dh-hero--single .dh-container { display: flex; flex-direction: column; }
  .dh-hero--single h1 { order: -2; }
  .dh-hero--single [data-town-chooser] { order: -1; }
}

/* ---- group cards: at most three per row, the last row centred ---- */
.dh-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  text-align: center;
}
.dh-cards > * { flex: 0 1 20rem; max-width: 20rem; }
.dh-section .dh-cards p { max-width: none; margin-inline: 0; }
/* The free trial, in the trainer's own hand, right under the cards. */
.dh-section p.dh-hand--trial {
  display: block;
  max-width: 42ch;
  margin-inline: auto;
  transform: rotate(-1.5deg);
}

/* ---- age ladder (category columns) ---- */
.dh-category { text-align: left; }
.dh-category .dh-mascot { display: block; margin-bottom: var(--sp-2); }
.dh-category h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.008em; }
.dh-category .dh-caption { margin-block-start: var(--sp-1); }

/* ---- schedule: one card per training day, the dates as chips ---- */
.dh-schedule-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  text-align: left;
}
.dh-schedule-card {
  flex: 1 1 20rem;
  max-width: 26rem;
  background: var(--surface-raised);
  border: 1px solid var(--dh-line);
  border-radius: var(--r-block);
  box-shadow: var(--sh-card);
  padding: var(--sp-6);
}
.dh-schedule-card h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.008em; }
.dh-schedule-times { font-weight: 400; color: var(--text-muted); }
.dh-month { margin-block-start: var(--sp-4); }
.dh-month-label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-block-end: var(--sp-2);
}
.dh-section .dh-schedule-card p { max-width: none; margin-inline: 0; }
.dh-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.dh-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: .2rem .5rem;
  border-radius: var(--r-round);
  background: var(--dh-green-action);
  color: var(--dh-white);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.dh-chip--skip {
  background: var(--dh-grey-surface);
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
}
/* The reasons in words — a strikethrough alone says nothing out loud. */
.dh-schedule-legend {
  list-style: none;
  padding: var(--sp-3) 0 0;
  margin-block-start: var(--sp-4);
  border-top: 1px solid var(--dh-line);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.dh-schedule-legend li + li { margin-block-start: var(--sp-1); }

/* ---- registration: a wizard in a card ---- */
/* Folded steps are hidden; the ones ahead of the visitor are disabled too, so
   a half-filled form can neither be validated nor posted. Steps already filled
   in stay enabled behind the current one — their values still have to post.
   Without JS none of this applies and every step is open. */
.dh-form [data-step][hidden] { display: none; }
.dh-form p.dh-form-intro { max-width: 46ch; margin-inline: auto; text-align: center; }
.dh-form legend { display: block; width: 100%; }
.dh-step-mark {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}
.dh-step-title { display: block; }
.dh-step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}
.dh-step-actions .dh-btn--primary, .dh-step-actions .dh-btn--cta { min-width: 12rem; }
.dh-btn--back {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.dh-btn--back:hover { color: var(--dh-ink); }

@media (min-width: 48rem) {
  /* On a phone the form is the page; a card around it would only add walls. */
  .dh-form-card {
    background: var(--surface-raised);
    border: 1px solid var(--dh-line);
    border-radius: var(--r-block);
    box-shadow: var(--sh-card);
    padding: var(--sp-8);
  }
}

/* ---- returning parent ---- */
.dh-welcome {
  margin-block-start: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-block);
  background: var(--surface-sunken);
  color: var(--text-heading);
  font-weight: 600;
}
.dh-known { margin-block-end: var(--sp-4); }
.dh-known legend { font-weight: 600; margin-bottom: var(--sp-1); }
.dh-input.is-locked {
  background: var(--dh-grey-surface);
  border-color: var(--dh-line);
  color: var(--text-body);
}