/* =====================================================================
   ÚzkostDeprese.cz — Styly šablon (článek, výpis, o projektu, právní,
   dotazník, komponenty). Vyžaduje tokens.css + main.css.
   ===================================================================== */

/* ============ MOBILNÍ NAV (sdílené) ============ */
.mobile-nav { border-top: 1px solid var(--color-line); background: var(--color-surface); }
.mobile-nav .wrap { display: grid; gap: var(--space-1); padding-block: var(--space-4); }
.mobile-nav a { padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink-soft); font-weight: var(--fw-medium); }
.mobile-nav a:hover { background: var(--color-primary-tint); color: var(--color-primary-ink); }

/* ============ PAGE HEAD (rozcestník / sekce) ============ */
.page-head { background: linear-gradient(180deg, var(--color-sage-tint), var(--color-bg)); border-bottom: 1px solid var(--color-line); }
.page-head__inner { padding-block: clamp(var(--space-7), 6vw, var(--space-9)); max-width: var(--maxw-text); }
.page-head .breadcrumbs { margin-bottom: var(--space-5); }
.page-head h1 { font-size: var(--fs-600); }
.page-head .lead { margin-top: var(--space-4); }

/* ===================================================================
   ŠABLONA ČLÁNKU
   =================================================================== */
.article { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(var(--space-6), 4vw, var(--space-9)); align-items: start; max-width: var(--maxw-wide); margin-inline: auto; }
.article-main { min-width: 0; }

/* hlavička článku */
.article-header { max-width: var(--maxw-prose); }
.article-header .breadcrumbs { margin-bottom: var(--space-5); }
.article-header h1 { font-size: var(--fs-600); margin-top: var(--space-3); }
.article-header .lead { margin-top: var(--space-5); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); font-size: var(--fs-100); color: var(--color-ink-muted); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-line-strong); }
.article-meta .author { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-soft); font-weight: var(--fw-medium); }
.article-meta .avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-primary-tint); display: inline-grid; place-items: center; color: var(--color-primary-ink); font-size: 0.7rem; font-weight: var(--fw-bold); object-fit: cover; }
.article-utility { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); padding-block: var(--space-5); border-block: 1px solid var(--color-line); }

/* hero obrázek */
.article-hero { position: relative; aspect-ratio: 21 / 9; border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-7) 0; max-width: var(--maxw-text); }
.article-hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-50); color: #fff; background: linear-gradient(transparent, #00000055); }

/* TL;DR box */
.tldr { max-width: var(--maxw-prose); background: var(--color-primary-tint); border: 1px solid var(--color-primary-tint-2); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-7); }
.tldr h2 { font-family: var(--font-sans); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-primary-ink); display: flex; align-items: center; gap: var(--space-2); }
.tldr h2 .ic { width: 1.2em; height: 1.2em; }
.tldr ul { margin: var(--space-4) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.tldr li { font-size: var(--fs-200); color: var(--color-ink); }
.tldr li::marker { color: var(--color-accent); }

/* tělo článku (prose) */
.prose { max-width: var(--maxw-prose); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--fs-500); margin-top: var(--space-8); scroll-margin-top: 6rem; }
.prose h3 { font-size: var(--fs-400); margin-top: var(--space-7); scroll-margin-top: 6rem; }
.prose p, .prose li { font-size: var(--fs-200); line-height: var(--lh-relaxed); color: var(--color-ink); }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--color-primary); }
.prose a { color: var(--color-accent-ink); text-decoration: underline; }
.prose a:hover { color: var(--color-accent-strong); }
.prose strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.prose blockquote { margin: var(--space-6) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 3px solid var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-300); font-style: italic; color: var(--color-ink-soft); }
.prose blockquote cite { display: block; margin-top: var(--space-3); font-size: var(--fs-100); font-style: normal; color: var(--color-ink-muted); }
.prose figure { margin: var(--space-7) 0; }
.prose figure .ph-fig { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; }
.prose figcaption { margin-top: var(--space-3); font-size: var(--fs-100); color: var(--color-ink-muted); }
.prose sup a { font-size: 0.7em; font-weight: var(--fw-bold); text-decoration: none; color: var(--color-accent-ink); padding: 0 0.15em; }

/* tabulka v článku */
.prose .table-scroll { overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-100); min-width: 28rem; }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); }
.prose thead th { background: var(--color-surface-2); font-weight: var(--fw-semibold); color: var(--color-ink); }
.prose tbody tr:last-child td { border-bottom: 0; }

/* zdroje a citace */
.sources { max-width: var(--maxw-prose); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.sources h2 { font-size: var(--fs-400); }
.sources ol { margin-top: var(--space-4); padding-left: 1.4em; display: grid; gap: var(--space-3); font-size: var(--fs-100); }
.sources li { color: var(--color-ink-soft); }
.sources li::marker { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.sources a { color: var(--color-accent-ink); word-break: break-word; }

/* sdílení */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.share__label { font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--color-ink-soft); }
.share__btns { display: flex; gap: var(--space-2); }
.share a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-ink-soft); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.share a:hover { background: var(--color-primary-tint); color: var(--color-primary-ink); border-color: var(--color-primary); }
.share a .ic { width: 1.2rem; height: 1.2rem; }

/* sidebar */
.article-aside { position: sticky; top: 6rem; display: grid; gap: var(--space-5); }
.toc { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); }
.toc h2 { font-family: var(--font-sans); font-size: var(--fs-50); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-3); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); counter-reset: toc; }
.toc a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-100); color: var(--color-ink-soft); text-decoration: none; border-left: 2px solid transparent; }
.toc a:hover, .toc a[aria-current="true"] { background: var(--color-primary-tint); color: var(--color-primary-ink); border-left-color: var(--color-primary); }
.aside-verified { display: flex; gap: var(--space-3); padding: var(--space-5); background: var(--color-sage-tint); border-radius: var(--radius-lg); font-size: var(--fs-100); color: var(--color-sage-deep); }
.aside-verified .ic { flex: none; width: 1.4rem; height: 1.4rem; }

/* related */
.related { background: var(--color-bg-warm); }
.related .cards-grid { grid-template-columns: repeat(3, 1fr); }

/* ===================================================================
   VÝPIS / KATEGORIE
   =================================================================== */
.listing { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }
.listing-cards { grid-template-columns: repeat(3, 1fr); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.chip { font-size: var(--fs-100); font-weight: var(--fw-medium); padding: 0.5em 1em; border-radius: var(--radius-pill); border: 1.5px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-soft); text-decoration: none; cursor: pointer; transition: all var(--dur) var(--ease); }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary-ink); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); align-items: center; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-soft); text-decoration: none; font-weight: var(--fw-medium); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary-ink); }
.pagination [aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.load-more { display: flex; justify-content: center; margin-top: var(--space-8); }

/* featured (první článek velký) */
.featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); margin-bottom: var(--space-7); }
.featured__media { position: relative; min-height: 18rem; }
.featured__body { padding: clamp(var(--space-5), 4vw, var(--space-7)); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.featured__body h2 { font-size: var(--fs-500); }
.featured__body h2 a { color: var(--color-ink); text-decoration: none; }
.featured__body h2 a:hover { color: var(--color-primary-ink); }

/* ===================================================================
   O PROJEKTU
   =================================================================== */
.about-intro { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; }
.about-intro .ph-wrap { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; }
.values-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.value { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.value h3 { font-size: var(--fs-400); display: flex; align-items: center; gap: var(--space-3); }
.value .num { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-accent-ink); }
.value p { margin-top: var(--space-3); font-size: var(--fs-100); color: var(--color-ink-soft); }
.provider-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; padding: var(--space-6); background: var(--color-primary-tint); border-radius: var(--radius-lg); }
.provider-card .mark { width: 4rem; height: 4rem; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: 1.6rem; }

/* ===================================================================
   PRÁVNÍ / TEXTOVÁ STRÁNKA
   =================================================================== */
.legal-grid { display: grid; grid-template-columns: 16rem minmax(0,1fr); gap: clamp(var(--space-6), 4vw, var(--space-9)); align-items: start; max-width: var(--maxw-wide); margin-inline: auto; }
.legal-aside { position: sticky; top: 6rem; }
.legal-aside h2 { font-family: var(--font-sans); font-size: var(--fs-50); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-3); }
.legal-aside ol { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.legal-aside a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-100); color: var(--color-ink-soft); text-decoration: none; }
.legal-aside a:hover { background: var(--color-primary-tint); color: var(--color-primary-ink); }
.legal-body { max-width: var(--maxw-text); }
.legal-body h2 { font-size: var(--fs-400); margin-top: var(--space-8); scroll-margin-top: 6rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: var(--fs-300); margin-top: var(--space-6); }
.legal-body p, .legal-body li { font-size: var(--fs-200); color: var(--color-ink-soft); }
.legal-body > * + * { margin-top: var(--space-4); }
.legal-body ul, .legal-body ol { padding-left: 1.4em; display: grid; gap: var(--space-2); }
.legal-meta { font-size: var(--fs-100); color: var(--color-ink-muted); margin-bottom: var(--space-6); }

/* ===================================================================
   DOTAZNÍK / SEBETEST
   =================================================================== */
.quiz-wrap { max-width: 40rem; margin-inline: auto; }
.quiz-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-8)); box-shadow: var(--shadow-sm); }
.quiz-progress { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.quiz-progress__bar { flex: 1; height: 8px; background: var(--color-line); border-radius: var(--radius-pill); overflow: hidden; }
.quiz-progress__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease); }
.quiz-progress__label { font-size: var(--fs-100); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quiz-step { display: none; }
.quiz-step.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-step.is-active { animation: quizIn var(--dur-slow) var(--ease); }
}
@keyframes quizIn { from { transform: translateY(10px); } to { transform: none; } }
.quiz-q { font-family: var(--font-serif); font-size: var(--fs-400); line-height: var(--lh-snug); margin-bottom: var(--space-2); }
.quiz-hint { font-size: var(--fs-100); color: var(--color-ink-muted); margin-bottom: var(--space-5); }
.quiz-options { display: grid; gap: var(--space-3); }
.quiz-option { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; font-size: var(--fs-200); transition: all var(--dur) var(--ease); text-align: left; }
.quiz-option:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.quiz-option.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); box-shadow: var(--ring); }
.quiz-option .mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--color-line-strong); display: grid; place-items: center; }
.quiz-option > span:last-child { flex: 1; }
.quiz-option.is-selected .mark { border-color: var(--color-primary); background: var(--color-primary); }
.quiz-option.is-selected .mark::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff; }
.quiz-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); }
.quiz-intro { text-align: center; }
.quiz-intro .badge-verified { margin-bottom: var(--space-5); }
/* výsledek */
.quiz-result { text-align: center; }
.result-meter { width: 100%; height: 14px; border-radius: var(--radius-pill); margin: var(--space-6) 0 var(--space-2); background: linear-gradient(90deg, var(--color-sage) 0%, #d9c27a 50%, var(--color-accent) 100%); position: relative; }
.result-meter__needle { position: absolute; top: -6px; width: 4px; height: 26px; background: var(--color-ink); border-radius: var(--radius-pill); transform: translateX(-50%); transition: left var(--dur-slow) var(--ease); }
.result-scale { display: flex; justify-content: space-between; font-size: var(--fs-50); color: var(--color-ink-muted); }
.result-band { display: inline-block; margin: var(--space-5) 0 var(--space-2); padding: 0.4em 1em; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); background: var(--color-primary-tint); color: var(--color-primary-ink); }

/* ===================================================================
   KNIHOVNA KOMPONENT (showcase)
   =================================================================== */
.ds-nav { position: sticky; top: 0; z-index: 90; background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding-block: var(--space-3); }
.ds-nav .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ds-section { padding-block: var(--space-8); border-bottom: 1px solid var(--color-line); scroll-margin-top: 5rem; }
.ds-section > .wrap > h2 { font-size: var(--fs-500); }
.ds-label { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--color-ink-muted); margin-bottom: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-5); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.swatch { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.swatch__chip { height: 5rem; }
.swatch__meta { padding: var(--space-3); font-size: var(--fs-50); }
.swatch__meta b { display: block; font-size: var(--fs-100); color: var(--color-ink); }
.swatch__meta code { font-family: var(--font-mono); color: var(--color-ink-muted); }
.type-spec { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.type-spec > div { padding-bottom: var(--space-4); border-bottom: 1px dashed var(--color-line); }
.type-spec small { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--color-ink-muted); display: block; margin-bottom: var(--space-2); }
.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }

/* ===================================================================
   RESPONSIVE (šablony)
   =================================================================== */
@media (max-width: 980px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-aside { position: static; order: -1; }
  .toc { display: none; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .about-intro { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr; }
  .featured__media { min-height: 14rem; }
  .listing-cards, .related .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .listing-cards, .related .cards-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .quiz-nav { flex-direction: column-reverse; }
  .quiz-nav .btn { width: 100%; }
}

/* =====================================================================
   PRŮZKUM — dotazník (pruzkum.html)
   =====================================================================  */
.survey { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }
.survey-wrap { max-width: 50rem; margin-inline: auto; }
.survey-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: clamp(var(--space-5), 4vw, var(--space-8)); box-shadow: var(--shadow-sm); }
.survey-intro { max-width: var(--maxw-text); margin-bottom: var(--space-6); }
.survey-note { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-100); color: var(--color-ink-soft); background: var(--color-sage-tint); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.survey-note .ic { flex: none; width: 1.2rem; height: 1.2rem; color: var(--color-sage-deep); margin-top: 0.15em; }

/* fieldset = otázka */
.q-block { border: 0; padding: 0; margin: 0; }
.q-block + .q-block { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--color-line); }
.q-legend { display: flex; align-items: baseline; gap: var(--space-3); padding: 0; }
.q-num { font-family: var(--font-mono); font-size: var(--fs-50); color: var(--color-primary-ink); background: var(--color-primary-tint); padding: 0.25em 0.6em; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); flex: none; }
.q-title { font-family: var(--font-serif); font-size: var(--fs-300); line-height: var(--lh-snug); color: var(--color-ink); }
.q-multi { font-family: var(--font-sans); font-size: var(--fs-50); font-weight: var(--fw-medium); color: var(--color-ink-muted); margin-left: 0.4em; white-space: nowrap; }
.q-controls { margin-top: var(--space-4); }

/* stylované option-karty (radio/checkbox) */
.opt-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.opt-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.opt-stack { display: grid; gap: var(--space-3); }
.opt {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); min-height: 52px;
  border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-bg); cursor: pointer; font-size: var(--fs-100); color: var(--color-ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box { flex: none; width: 1.4rem; height: 1.4rem; border: 2px solid var(--color-line-strong); display: grid; place-items: center; background: var(--color-surface); transition: all var(--dur) var(--ease); }
.opt--check .opt__box { border-radius: var(--radius-xs); }
.opt--radio .opt__box { border-radius: 50%; }
.opt__box .ic { width: 0.9rem; height: 0.9rem; color: #fff; opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
.opt__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0.4); transition: all var(--dur) var(--ease); }
.opt.is-checked { border-color: var(--color-primary); background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-primary); }
.opt.is-checked .opt__box { background: var(--color-primary); border-color: var(--color-primary); }
.opt.is-checked .opt__box .ic { opacity: 1; transform: scale(1); }
.opt.is-checked .opt__dot { opacity: 1; transform: scale(1); }
.opt:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.opt__label { line-height: var(--lh-snug); }

/* select + text inputs v průzkumu */
.field-select { position: relative; max-width: 26rem; }
.field-select select {
  appearance: none; width: 100%; padding: 0.9em 2.6em 0.9em 1.1em; font-size: var(--fs-100);
  border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-ink); cursor: pointer; min-height: 52px;
}
.field-select select:hover { border-color: var(--color-primary); }
.field-select::after { content: ""; position: absolute; right: 1.1em; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--color-ink-muted); border-bottom: 2px solid var(--color-ink-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.field-text input, .field-text textarea {
  width: 100%; padding: 0.85em 1.1em; font-size: var(--fs-100);
  border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-ink); font-family: inherit;
}
.field-text textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-normal); }
.field-text input:focus, .field-text textarea:focus, .field-select select:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--ring); }
.field-inline { margin-top: var(--space-3); }
.field-inline label { display: block; font-size: var(--fs-100); font-weight: var(--fw-medium); color: var(--color-ink-soft); margin-bottom: var(--space-2); }

/* hvězdičkové hodnocení */
.rating { display: inline-flex; flex-direction: row-reverse; gap: var(--space-1); }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating label { cursor: pointer; color: var(--color-line-strong); transition: color var(--dur) var(--ease); }
.rating label .ic { width: 2.1rem; height: 2.1rem; }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: var(--color-accent); }
.rating label:hover ~ label { color: var(--color-accent); }
.rating input:focus-visible + label { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); }

/* checkbox newsletter na konci */
.survey-consent { margin-top: var(--space-6); }
.survey-submit { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.survey-submit .btn { width: 100%; }
.survey-skip { text-align: center; font-size: var(--fs-100); }

/* poděkování po odeslání */
.survey-thanks { display: none; text-align: center; padding: var(--space-6) 0; }
.survey-thanks.is-visible { display: block; animation: quizIn var(--dur-slow) var(--ease); }
.survey-thanks__icon { width: 4.5rem; height: 4.5rem; margin: 0 auto var(--space-5); border-radius: 50%; background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; }
.survey-thanks__icon .ic { width: 2.2rem; height: 2.2rem; }
.is-submitted .survey-form { display: none; }

/* =====================================================================
   PRŮZKUM — výsledky (pruzkum-vysledky.html)
   =====================================================================  */
.res-statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.res-stat { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; }
.res-stat__num { font-family: var(--font-serif); font-size: var(--fs-500); font-weight: var(--fw-semibold); color: var(--color-primary-ink); line-height: 1; }
.res-stat__num .ic { width: 1.6rem; height: 1.6rem; color: var(--color-accent); vertical-align: -0.15em; }
.res-stat__label { font-size: var(--fs-50); color: var(--color-ink-muted); margin-top: var(--space-2); }

.res-group { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-7)); }
.res-group + .res-group { margin-top: var(--space-5); }
.res-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-5); }
.res-group h3 { font-size: var(--fs-400); flex-shrink: 0; }
.res-group__q { font-size: var(--fs-50); color: var(--color-ink-muted); font-family: var(--font-mono); margin-left: auto; }
.res-bars { display: grid; gap: var(--space-3); }
.res-bar { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: var(--space-3); align-items: center; }
.res-bar__label { font-size: var(--fs-100); color: var(--color-ink); }
.res-bar__track { height: 0.85rem; background: var(--color-bg-warm); border-radius: var(--radius-pill); overflow: hidden; }
.res-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-sage-deep), var(--color-primary)); width: 0; transition: width 900ms var(--ease); }
.res-bar--accent .res-bar__fill { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-ink)); }
.res-bar__val { font-family: var(--font-mono); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; min-width: 2.8em; text-align: right; }
.res-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* "jiné" odpovědi — moderovaný tag cloud */
.res-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.res-tag { flex: 0 0 auto; white-space: nowrap; font-size: var(--fs-100); padding: 0.45em 0.9em; border-radius: var(--radius-pill); background: var(--color-bg-warm); color: var(--color-ink-soft); border: 1px solid var(--color-line); }
.res-tags__group + .res-tags__group { margin-top: var(--space-5); }
.res-tags__label { font-size: var(--fs-50); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-muted); }
.res-moderation { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); font-size: var(--fs-100); color: var(--color-ink-soft); }
.res-moderation .ic { flex: none; width: 1.2rem; height: 1.2rem; color: var(--color-sage-deep); margin-top: 0.15em; }

/* citace z odpovědí */
.res-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.res-quote { background: var(--color-bg); border: 1px solid var(--color-line); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-5); }
.res-quote p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-200); color: var(--color-ink-soft); line-height: var(--lh-normal); }
.res-quote span { display: block; margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: var(--fs-50); color: var(--color-ink-muted); }

@media (max-width: 720px) {
  .res-statbar { grid-template-columns: 1fr; }
  .res-2col { grid-template-columns: 1fr; }
  .res-bar { grid-template-columns: 1fr auto; }
  .res-bar__track { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 560px) {
  .opt-grid, .opt-grid--narrow { grid-template-columns: 1fr; }
}

/* =====================================================================
   KONTAKT (kontakt.html)
   =====================================================================  */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-5), 4vw, var(--space-8)); align-items: start; max-width: var(--maxw-wide); margin-inline: auto; }
.contact-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: clamp(var(--space-5), 4vw, var(--space-7)); box-shadow: var(--shadow-sm); }
.contact-form .field-text + .field-text { margin-top: var(--space-4); }
.contact-form label.lbl { display: block; font-size: var(--fs-100); font-weight: var(--fw-medium); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.contact-form .btn { margin-top: var(--space-5); }
.contact-consent { font-size: var(--fs-100); color: var(--color-ink-muted); margin-top: var(--space-4); }
.contact-aside { display: grid; gap: var(--space-5); }
.contact-info h2 { font-size: var(--fs-300); }
.contact-info dl { margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.contact-info .row { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.contact-info dt { font-size: var(--fs-50); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-muted); }
.contact-info dd { margin: 0; font-size: var(--fs-100); color: var(--color-ink); }
.contact-info dd a { color: var(--color-primary-ink); }
.contact-info .org-name { font-family: var(--font-serif); font-size: var(--fs-300); color: var(--color-ink); margin-bottom: var(--space-1); }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .contact-info .row { grid-template-columns: 1fr; gap: 2px; }
}