/* intake.css: úvodní segmentační kvíz na `/` (Web_Intake_Navrh.md sekce 12,
   KONTRAKT-intake.md v2, 15.9.2026). Moderní styl JEN pro tuhle stránku: karta na
   pískové ploše, tučný Inter, velká zaoblená tlačítka v Sand (Richard, 15.9.2026:
   „spíš tu moji béžovou"), rychlý pohyb.
   Výjimka z quiet luxury je zapsaná v Brand_Visual_Language.md. Barvy, mezery,
   rozměry a typografie POUZE přes tokens.css (WORKFLOW pravidlo 15), blok
   „INTAKE v2" na konci tokens.css. */

/* ============ PLOCHA A KARTA ============ */
/* Patička sedí u spodního okraje i u krátkých kroků (3 až 5, konce): body má v
   site.css min-height 100vh, sloupcový flex nechá hlavní obsah vyplnit zbytek.
   Bez toho patička visí uprostřed obrazovky a pod ní zůstává pískové pozadí. */
body.page-light.page-intake {
  display: flex;
  flex-direction: column;
  background: var(--sand);
}
.intake-main { flex: 1 0 auto; padding: var(--space-7) var(--space-4) var(--space-9); }
.page-intake footer { flex-shrink: 0; }
.page-intake main section.intake-section { padding: 0; background: none; }
.intake-card {
  max-width: var(--intake-card-max);
  margin: 0 auto;
  padding: var(--intake-card-pad);
  background: var(--page-bg);
  border-radius: var(--intake-card-radius);
  box-shadow: var(--intake-card-shadow);
}
@media (max-width: 599px) {
  /* Na mobilu karta od kraje ke kraji a až k patičce (Off White bez pískové mezery),
     nahoře o něco víc vzduchu než dává clamp paddingu. */
  .intake-main,
  .intake-section {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .intake-main { padding: 0; }
  .intake-card {
    flex: 1 0 auto;
    width: 100%;
    margin: 0; /* auto okraje by ve flex sloupci zrušily roztažení na šířku */
    padding-top: var(--space-7);
    border-radius: 0;
    box-shadow: none;
  }
}

/* Patička je sdílená (site.css) a bere barvu z --page-surface-1, což není brandový
   odstín (CLAUDE.md, neplatné tokeny --page-surface-*). Na intake stránce Cream. */
.page-intake footer,
.page-intake footer p { color: var(--accent); }

/* ============ HLAVA KARTY (jen krok 1) ============ */
.intake-hlava { text-align: center; margin-bottom: var(--space-6); }
.intake-foto {
  display: block;
  width: var(--space-10);
  height: var(--space-10);
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  object-fit: cover;
}
/* Věta „kdo jsem" je nadpis stránky (h1). Richard 15.9.2026: nejdřív „malý a
   nevýrazný" (15 px kurzívou ve Stone), pak „moc velký a ten font se mi nelíbí"
   (26 až 34 px EB Garamond). Teď Inter jako zbytek stránky, Warm Black, pod
   velikostí otázky. Třída přebíjí výchozí h1 ze site.css (písmo, váha, velikost,
   řádkování, okraje). */
.intake-kdo-jsem {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--font-weight-heading);
  font-size: var(--intake-headline-size);
  line-height: var(--leading-snug);
  letter-spacing: var(--intake-tracking-tight);
  text-wrap: balance; /* delší věta bez osamoceného slova na posledním řádku */
  color: var(--ink);
}
.intake-titulek {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  color: var(--ink);
}

/* ============ PROGRESS + POČÍTADLO ============ */
.intake-progress-wrapper {
  height: var(--space-1);
  margin-bottom: var(--space-3);
  background: var(--ink-12);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.intake-progress {
  width: 0%;
  height: 100%;
  background: var(--ink);
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-reveal);
}
.intake-counter {
  margin: 0 0 var(--space-6);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--stone);
}
.intake-uvod {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--stone);
}

/* ============ PŘECHOD MEZI KROKY ============ */
.intake-fade {
  transition:
    opacity var(--duration-fast) var(--ease-reveal),
    transform var(--duration-fast) var(--ease-reveal);
}
.intake-fade.intake-fade-hidden {
  opacity: 0;
  transform: translateY(var(--intake-shift));
  pointer-events: none; /* klik do mizejícího kroku nesmí zapsat odpověď */
}

/* ============ OTÁZKA ============ */
.intake-question {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--intake-question-size);
  line-height: var(--leading-snug);
  letter-spacing: var(--intake-tracking-tight);
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}
.intake-question:focus { outline: none; }

/* ============ MOŽNOSTI: velká zaoblená tlačítka ============
   Sand na Off White kartě (plocha za kartou je na desktopu taky Sand): aby
   tlačítko četlo jako tlačítko a ne jako díra do pozadí, má tenkou linku z
   průhledné Warm Black a stín. Hover zvýrazní linku na plnou Warm Black a zvedne
   stín, aktivní stav stín sundá, vybraná možnost je Warm Black s Cream textem. */
.intake-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.intake-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--intake-option-min-h);
  padding: var(--space-3) var(--space-6);
  border: var(--border-hairline) solid var(--ink-20);
  border-radius: var(--radius-pill);
  background: var(--sand);
  box-shadow: var(--intake-option-shadow);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--duration-fast) var(--ease-reveal),
    box-shadow var(--duration-fast) var(--ease-reveal),
    border-color var(--duration-fast) var(--ease-reveal),
    background var(--duration-fast) var(--ease-reveal),
    color var(--duration-fast) var(--ease-reveal);
}
@media (hover: hover) {
  .intake-option:hover {
    border-color: var(--ink);
    transform: translateY(var(--intake-lift));
    box-shadow: var(--intake-option-shadow-hover);
  }
}
.intake-option:active {
  transform: none;
  box-shadow: none;
}
.intake-option:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}
.intake-option[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

/* „Něco jiného": pole hned pod tlačítkem */
.intake-jine { margin: var(--space-1) 0 var(--space-2); }

/* ============ POLE (textová otázka, jiné, kontakt) ============ */
.intake-textarea,
.intake-jine input,
.intake-field input[type="text"],
.intake-field input[type="email"],
.intake-field select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--ink-20);
  border-radius: var(--intake-input-radius);
  background: var(--sand);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--ink);
}
.intake-textarea {
  min-height: var(--intake-textarea-min-h);
  padding: var(--space-4);
  line-height: var(--leading-normal);
  resize: vertical;
}
.intake-field input,
.intake-field select,
.intake-jine input { min-height: var(--touch-target-min); }
.intake-textarea::placeholder,
.intake-jine input::placeholder,
.intake-field input::placeholder { color: var(--stone); }
.intake-textarea:focus,
.intake-jine input:focus,
.intake-field input:focus,
.intake-field select:focus {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--border-hairline);
}
.intake-poznamka {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--stone);
}

/* ============ KONTAKT (krok 6) ============ */
.intake-field { display: block; margin-bottom: var(--space-5); }
.intake-field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-md);
  color: var(--ink);
}
.intake-hint {
  font-weight: var(--font-weight-normal);
  font-size: var(--text-xs);
  color: var(--stone);
}
.intake-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}
.intake-fieldset legend { width: 100%; padding: 0; } /* výchozí padding legendy posouval popisek o pár px vpravo */
.intake-radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  border: var(--border-hairline) solid var(--ink-20);
  border-radius: var(--radius-pill);
  background: var(--sand);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  color: var(--ink);
  cursor: pointer;
}
.intake-radio-option:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent);
}
.intake-radio-option input,
.intake-consent input { accent-color: var(--ink); }
/* Na tmavém vybraném pillu by ink tečka radia splynula s pozadím a radio vypadalo
   nezaškrtnuté. Stejná Cream jako text pillu. */
.intake-radio-option:has(input:checked) input { accent-color: var(--accent); }
.intake-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--stone);
}
.intake-consent input { margin-top: var(--space-1); flex-shrink: 0; }
.intake-consent a { color: var(--ink); text-decoration: underline; }

/* ============ TLAČÍTKA ============ */
.intake-btn-primary {
  width: 100%;
  min-height: var(--intake-option-min-h);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  color: var(--accent);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-reveal);
}
@media (hover: hover) {
  .intake-btn-primary:hover { transform: translateY(var(--intake-lift)); }
}
.intake-btn-primary:disabled {
  opacity: var(--intake-disabled-opacity);
  cursor: progress;
  transform: none;
}
.intake-btn-primary:focus-visible,
.intake-btn-back:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}
.intake-btn-back {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  color: var(--stone);
  cursor: pointer;
}
.intake-btn-back:hover { color: var(--ink); }
.intake-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.intake-nav .intake-btn-back { align-self: center; }

/* ============ CHYBOVÁ HLÁŠKA ============
   Žádná nová barva (paleta nemá roli „error"): odlišeno plochou z průhledné
   Warm Black a tučností, ne odstínem červené. */
.intake-error {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--intake-input-radius);
  background: var(--ink-06);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ink);
}

/* ============ KONEC (krok 7) ============ */
.intake-zrcadlo {
  margin: 0 0 var(--space-6);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-normal);
  color: var(--ink);
}
.intake-konec-pair { display: flex; flex-direction: column; }
/* Oddělovač jen mezi dvěma VIDITELNÝMI bloky (oba_*). Sourozenecký selektor bere i
   skrytý blok, takže samotné „ozvu se" nebo „pod 18" dostávalo osiřelou linku a
   dvojitou mezeru nad sebou. */
.intake-konec-block:not([hidden]) ~ .intake-konec-block:not([hidden]) {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--border-hairline) solid var(--ink-12);
}
.intake-konec-text {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: var(--text-lg);
  color: var(--stone);
}
.intake-svedectvi {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--intake-input-radius);
  background: var(--sand);
}
.intake-svedectvi blockquote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ink);
}
.intake-svedectvi figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--stone);
}
.page-intake .calendly-embed { border-radius: var(--intake-input-radius); }
/* site.css dává .calendly-loading barvu z --text-faint, což není brandový odstín
   (viz CLAUDE.md, neplatné tokeny --text*). Na intake stránce Stone. */
.page-intake .calendly-loading { color: var(--stone); }

/* ============ OMEZENÝ POHYB ============ */
@media (prefers-reduced-motion: reduce) {
  .intake-fade,
  .intake-option,
  .intake-btn-primary,
  .intake-progress { transition: none; }
  .intake-fade.intake-fade-hidden,
  .intake-option:hover,
  .intake-btn-primary:hover { transform: none; }
}