/* 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 first screen; on the index the town cards are its point ---- */
/* The cookie bar is fixed to the bottom (~170 px on a 390 px phone): shell.js
   measures it into --dh-cookie-h, 0 for everyone who has already answered, so
   the town cards — the only CTA on the index — never sit under it. 70svh,
   not 90: the hero is a first screen, not a void around four lines. */
.dh-hero--single {
  min-height: calc(70svh - var(--dh-cookie-h, 0px));
  display: flex;
  align-items: center;
}
/* A town page (an ad, a deep link) or a town just picked: the chooser is
   hidden and the hero shrinks to its text, so the groups start on screen. */
.dh-hero--single:has([data-town-chooser][hidden]) { min-height: 0; }
.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;
}
/* The question under the h1: display-sm on a phone (two steps below the
   three-line h1), display-md from a tablet up. */
.dh-hero--single h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.008em; }
.dh-hero--single [data-town-chooser] { margin-block-start: var(--sp-6); }
.dh-hero--single [data-town-chooser] > * + * { margin-block-start: var(--sp-6); }

/* Town cards: the outline card of DESIGN 6.2, the whole card one link. The
   name is the green of a link, so it reads as something to press; the line
   under it is what a parent chooses by — days and number of groups. */
.dh-town-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 22rem;
  margin-inline: auto;
}
.dh-town-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  height: 100%;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--dh-line);
  border-radius: var(--r-block);
  box-shadow: var(--sh-card);
  color: var(--text-body);
  text-decoration: none;
  transition: border-color .16s ease;
}
.dh-town-card:hover { border-color: var(--dh-ink); }
.dh-town-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--accent-nav);
}
.dh-town-card-name::after { content: " →"; }
.dh-town-card-note { font-size: .875rem; line-height: 1.4; color: var(--text-body); }
/* Names on one top line, days on one bottom line, whichever card has the
   extra place note („pri Veľkom Krtíši"). */
.dh-town-card-meta { font-size: .8125rem; line-height: 1.5; color: var(--text-muted); margin-top: auto; }
@media (min-width: 48rem) {
  .dh-hero--single [data-town-chooser] { margin-block-start: var(--sp-12); }
  .dh-hero--single h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em; }
  .dh-town-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); max-width: 54rem; }
  .dh-town-card { padding: var(--sp-6); }
}
/* 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; }
  .dh-hero--single .dh-container:has([data-town-chooser]:not([hidden])) .dh-hero-quote { margin-block-start: var(--sp-8); }
}

/* ---- 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; }
/* One card a row on a phone: as wide as the town cards, the schedule and the form. */
@media (max-width: 47.99rem) { .dh-cards > * { flex-basis: 100%; max-width: none; } }
.dh-section .dh-cards p { max-width: none; margin-inline: 0; }
/* The free trial, in the trainer's own hand, a breath under the cards. */
.dh-section p.dh-hand--trial {
  display: block;
  max-width: 42ch;
  margin-inline: auto;
  margin-block-start: var(--sp-12);
  transform: rotate(-1.5deg);
}
/* The sibling discount: its own small block, not a tail of the cards. */
.dh-section .dh-sibling { margin-block-start: var(--sp-12); }
.dh-sibling > * + * { margin-block-start: var(--sp-3); }
.dh-sibling h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.008em; }

/* ---- 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;
}
/* Already trained: an outline, so the filled chips are what is still ahead. */
.dh-chip--past {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--dh-line-strong);
  font-weight: 600;
}
/* 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; }
/* The gap between steps only where two are open at once (no JS, a posted
   form): a folded step before the current one must not push it down. */
.dh-form [data-step] + [data-step] { margin-block-start: 0; }
.dh-form [data-step]:not([hidden]) + [data-step]:not([hidden]) { margin-block-start: var(--sp-8); }
.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; }
/* wrap-reverse: on one line „Späť" stays left of the main button; when the
   two do not fit (a phone, a long label) the main button takes the top row
   and „Späť" sits under it on the left edge. */
.dh-step-actions {
  display: flex;
  flex-wrap: wrap-reverse;
  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; }
/* No side padding: the word starts on the content edge like the text above
   it; the height (and 44 px on a finger) still comes from .dh-btn. */
.dh-btn--back {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding-inline: 0;
  min-width: 2.75rem;
  justify-content: flex-start;
}
.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-form .dh-known { margin-block: 0 var(--sp-4); }   /* right under the child's heading */
.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);
}

/* ---- the gym: the text sits on the photo's middle; without a photo yet
   it is one centred column, not half a grid ---- */
.dh-split--2 { align-items: center; }
.dh-split--2:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 36rem); justify-content: center; }

/* ---- client account: Môj účet, login, 2nd-half order (batch 2026-10-10) ---- */
/* The page head + a sunken body (site.css) with white cards on it — the
   same surfaces as the group cards. Everything inside is left-aligned:
   these are forms and lists (DESIGN 4.3). */
.dh-container--slim { max-width: 34rem; }
.dh-account { text-align: left; }
.dh-account > * + * { margin-block-start: var(--sp-12); }
.dh-account > .dh-alert + * { margin-block-start: var(--sp-6); }
.dh-account h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; }
.dh-account > section > h2 { margin-block-end: var(--sp-4); }
.dh-account-who { color: var(--text-muted); }
@media (pointer: coarse) {
  .dh-page-head .dh-linkbtn { min-height: var(--control-h-touch); }   /* „Odhlásiť sa" */
}
.dh-account-card {
  background: var(--surface-raised);
  border: 1px solid var(--dh-line);
  border-radius: var(--r-block);
  box-shadow: var(--sh-card);
  padding: var(--sp-4);
}
.dh-account-card + .dh-account-card { margin-block-start: var(--sp-4); }
.dh-account-card > * + * { margin-block-start: var(--sp-3); }
.dh-account-card h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.008em; }
.dh-account-card h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.008em; }
.dh-account-card > h2 + * { margin-block-start: var(--sp-4); }
.dh-account-card > h3 + .dh-caption { margin-block-start: var(--sp-1); }
.dh-account-card legend + .dh-choices { margin-block-start: 0; }
.dh-account-card form > fieldset + p, * + .dh-account-notes { margin-block-start: var(--sp-4); }
.dh-account-card fieldset + fieldset { margin-block-start: var(--sp-8); }
/* A title and its state on one line; the badge drops under it on a phone. */
.dh-account-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.dh-account-card-head + .dh-caption { margin-block-start: var(--sp-1); }
.dh-account-amount { font-size: 1.125rem; color: var(--text-heading); }
.dh-account-after { margin-block-start: var(--sp-4); }
/* The 2nd-half card is the one with something to do: a darker outline. */
.dh-account-card--renewal { border-color: var(--dh-ink); }
.dh-account-card .dh-details { margin-inline: 0; max-width: none; }
.dh-account-card .dh-alert { border-radius: var(--r-inner); }   /* nested in an 8 px card (DESIGN 4.1) */
.dh-account-card .dh-details li + li { margin-block-start: var(--sp-2); }
@media (min-width: 48rem) {
  .dh-account-card { padding: var(--sp-6) var(--sp-8); }
}

/* A child and its groups: name, then one line per group. */
.dh-account-groups { list-style: none; padding: 0; }
.dh-account-groups li + li { margin-block-start: var(--sp-3); }
.dh-account-groups .dh-caption { display: block; }

/* The invoice list: one card, rows split by hairlines (DESIGN 4.2 allows a
   line inside a card). The amount and the state line up on the right. */
.dh-account-list {
  list-style: none;
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--dh-line);
  border-radius: var(--r-block);
  box-shadow: var(--sh-card);
}
.dh-account-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.dh-account-list li + li { border-top: 1px solid var(--dh-line); }
.dh-account-list-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.dh-account-list-end strong { color: var(--text-heading); white-space: nowrap; }
/* From a tablet up the states get a fixed column, so the amounts left of
   them form one right-aligned column and the badges share a left edge;
   „Stiahnuť PDF" goes under both, on the right. */
@media (min-width: 40rem) {
  .dh-account-list li { padding-inline: var(--sp-6); }
  .dh-account-list-end { display: grid; grid-template-columns: auto 10.5rem; justify-items: end; text-align: right; }
  .dh-account-list-end > .dh-badge { justify-self: start; }   /* a state column: one left edge */
  .dh-account-list-end > a { grid-column: 1 / -1; }
}
@media (min-width: 48rem) {
  .dh-account-list li { padding-inline: var(--sp-8); }   /* the cards' inset */
}

/* The order summary: what, and its price on the right. */
.dh-summary-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.dh-summary-lines li + li { margin-block-start: var(--sp-2); }
.dh-summary-price { white-space: nowrap; font-weight: 600; color: var(--text-heading); }
.dh-summary .dh-total { max-width: none; padding-top: var(--sp-3); border-top: 1px solid var(--dh-line); }
.dh-summary > p + p { margin-block-start: var(--sp-2); }
.dh-account-notes { list-style: none; padding: 0; color: var(--text-muted); font-size: .875rem; }