/* ============================================================
   nkjk.cz — style.css
   Grafická identita NKJK / Moovinity v4.0
   Master reference: nkjk-brain/00_meta/NKJK_graficka_identita_v4.md
   ============================================================ */

/* 1. CSS proměnné (kanonický základ z identity v4, sekce 12) */

:root {
  /* Základ */
  --black:           #0D0D0D;
  --white:           #FFFFFF;

  /* Primární akcent */
  --midnight:        #2C3E6B;
  --midnight-dk:     #1A2547;

  /* Světlý akcent (baby blue). Akcentní plocha, NE náhrada midnight. Text na ní vždy tmavý. */
  --baby-blue:       #A9D6EE;

  /* Ocelová škála */
  --steel:           #4A5568;
  --steel-light:     #E2E8F0;

  /* Signature accent */
  --bronze:          #8B6914;

  /* Pozadí */
  --bg:              #FFFFFF;
  --bg-section:      #F8F9FB;
  --bg-card:         #F0F2F5;

  /* Text */
  --text:            #0D0D0D;
  --text-muted:      #4A5568;
  --text-subtle:     #8A9AAE;

  /* Signature prvek: osa a uzly (nahradilo neuronovou síť 11. 9. 2026) */
  --osa-color:           #2C3E6B;
  --osa-width-thin:      1px;
  --osa-width-thick:     1.5px;

  /* Typografie */
  --font-display:    'Barlow Condensed', sans-serif;
  --font-body:       'Montserrat', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Hairlines */
  --hairline:        0.5px solid rgba(13,13,13,0.10);
  --hairline-strong: 0.5px solid rgba(13,13,13,0.18);
  --hairline-dark:   0.5px solid rgba(255,255,255,0.10);

  /* Radius */
  --radius-card:     8px;
  --radius-button:   4px;

  /* Spacing */
  --page-max:        1200px;
  --page-padding:    48px;
  --section-padding: 88px;
  --hero-padding-t:  96px;
  --hero-padding-b:  80px;

  /* Transitions */
  --tx-default:      160ms ease;
}

/* 2. Reset a base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tx-default);
}

::selection {
  background: var(--midnight);
  color: var(--white);
}

/* 3. Container */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

/* 4. Stavební bloky sekcí */

.topbar {
  border-bottom: var(--hairline);
}

.hero {
  position: relative;
  padding-top: var(--hero-padding-t);
  padding-bottom: var(--hero-padding-b);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -100px;
  width: 720px;
  height: 640px;
  /* NKJK pattern. Vrácen 11. 9. 2026 poté, co byl omylem zaměněn za neuronovou
     síť a odstraněn. Pattern je samostatný prvek identity a zůstává. */
  background-image: url("assets/pattern1.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Tick scale (11 jemných čar vertikálně, D.07 z identity v4) podél levé hrany hero. */
.hero__ticks {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
  color: var(--midnight);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* Watermark číslo sekce (I.04 z identity v4, vzor z laco-cz). */
.section {
  position: relative;
  overflow: hidden;
}

/* Watermark čísla sekce. Revize 11. 9. 2026: přesunut zprava doleva a zvětšen.
   Sec-head nechává levý sloupec prázdný a na širokých displejích tam vznikala
   mrtvá plocha, kvůli které web působil plochý. Číslice ji teď drží. */
.section[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute;
  top: 40px;
  left: calc(var(--page-padding) - 8px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(120px, 17vw, 240px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: rgba(44, 62, 107, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .section[data-watermark]::before {
    top: 20px;
    left: 20px;
    font-size: clamp(90px, 22vw, 130px);
  }
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.footer {
  border-top: var(--hairline);
  padding-top: 28px;
  padding-bottom: 28px;
}

/* 5. Sekce 1. TopBar */

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}

.topbar__logo {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.topbar__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text);
}

.topbar__nav {
  display: flex;
  gap: 28px;
}

.topbar__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--tx-default);
}

.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--midnight);
}

/* 6. Sekce 2. Hero */

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: 32px;
}

.hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 880px;
}

.hero__h1-sentence {
  display: block;
}

.hero__h1-sentence + .hero__h1-sentence {
  margin-top: 18px;
}

/* Inverzní druhá věta hero (midnight bar per řádek). */
.hero__h1-sentence--invert {
  line-height: 1.4;
}

.hero__h1-sentence--invert + .hero__h1-sentence,
.hero__h1-sentence + .hero__h1-sentence--invert {
  margin-top: 24px;
}

.hero__h1-highlight {
  display: inline;
  background: var(--midnight);
  color: var(--white);
  padding: 4px 14px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__subhead {
  margin: 36px 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
}

.hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__tagline {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: var(--hairline);
  max-width: 640px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--midnight);
}

/* 7. Sec-head pattern (společný pro sekce 3 až 9) */

.sec-head {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 72px;
  align-items: start;
}

.sec-head__num {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
}

.sec-head__num-line {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--midnight);
  flex-shrink: 0;
}

.sec-head__num-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--midnight);
  white-space: nowrap;
}

.sec-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.sec-sub {
  margin: 24px 0 0;
  max-width: 580px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* 8. Bullet lists (B.01 full dot, B.02 open ring, B.05 arrow lead) */

.bullet-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  max-width: 740px;
}

.bullet-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

.bullet-list li:last-child {
  margin-bottom: 0;
}

/* B.01 full dot (default) */
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--midnight);
  border-radius: 50%;
}

/* B.05 arrow lead */
.bullet-list--arrow li {
  padding-left: 26px;
}

.bullet-list--arrow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--midnight);
  border-radius: 0;
}

.bullet-list--arrow li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--midnight);
  border-right: 1px solid var(--midnight);
  transform: rotate(45deg);
}

/* B.02 open ring */
.bullet-list--ring li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid var(--midnight);
  border-radius: 50%;
}

/* 9. Karty */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 28px 26px 26px;
  background: var(--bg-card);
  border: 0.5px solid rgba(13, 13, 13, 0.08);
  border-radius: var(--radius-card);
}

/* Lead magnet karta: bronze tag (jediný bronze prvek na stránce, podle identity v4). */
.magnet .card__tag {
  color: var(--bronze);
}

.card__tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
}

.card__h3 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.card__body {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

.card__body--meta {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* 10. Lead magnet karta (bronze rámeček + bronze tag = bronze koncentrovaný na klíčovém momentu) */

.magnet {
  margin-top: 48px;
  max-width: 720px;
  padding: 36px 36px 32px;
  border: 0.5px solid var(--bronze);
}

.magnet .form {
  margin-top: 22px;
}

/* 11. Sekce 4. Pilotní program — týdenní karty */

.weeks {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.week {
  min-height: 200px;
  padding: 24px 22px 22px;
}

.week__index {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.week .card__h3 {
  font-size: 24px;
  margin-top: 12px;
}

.week .card__body {
  margin-top: 12px;
  font-size: 14px;
}

/* 12. Sub-bloky */

.subblocks {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 32px;
}

.subblock__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--midnight);
}

.subblock .bullet-list {
  margin-top: 20px;
}

/* 12a. Časová osa šesti týdnů */

/* Jeden 6sloupcový grid řízený areas. Šest karet má identickou šířku (1fr),
   tři fázové labely se nad ně roztáhnou přes příslušné sloupce. */
.timeline {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "l1 l2 l2 l2 l2 l3"
    "w1 w2 w3 w4 w5 w6";
  column-gap: 14px;
  row-gap: 16px;
  align-items: start;
}

.timeline__phase-label {
  display: block;
  border-top: var(--osa-width-thick) solid var(--midnight);
  padding-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--midnight);
}

.timeline__phase-label--solo   { grid-area: l1; }
.timeline__phase-label--group  { grid-area: l2; }
.timeline__phase-label--result { grid-area: l3; }

.timeline__week {
  align-self: stretch;
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px;
  background: var(--bg-section);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-1 { grid-area: w1; }
.tw-2 { grid-area: w2; }
.tw-3 { grid-area: w3; }
.tw-4 { grid-area: w4; }
.tw-5 { grid-area: w5; }
.tw-6 { grid-area: w6; }

.timeline__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.timeline__topic {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.timeline__note {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
}

/* 12b. Co si odneseš (benefit) */

.benefit {
  margin-top: 64px;
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 32px;
  background: var(--bg-section);
}

.benefit__h3 {
  margin: 0 0 20px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--midnight);
}

.benefit__list {
  max-width: 780px;
}

/* 12c. Komunita jako pokračování */

/* Baby blue panel (světlý akcent z identity v4, sekce 2). Téma komunita, sounáležitost.
   Menší panel jako doplněk k velké ploše Hlasů. Midnight label, tmavý text. */
.continuation {
  margin-top: 64px;
  background: var(--baby-blue);
  border-radius: var(--radius-card);
  padding: 32px 36px;
}

.continuation__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: 14px;
}

.continuation__body {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* 12d. Video pozvánka (otvírák programu). Fasáda s play tlačítkem, přehrává se po kliknutí.
   Žádný hover scale ani shadow (identita v4), jen darken play tlačítka. */
.video-invite {
  margin: 40px 0 0;
}

.video-invite__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  background: var(--midnight-dk);
}

.video-invite__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-invite__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--midnight);
  transition: background var(--tx-default);
}

.video-invite__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--white);
}

.video-invite__facade:hover .video-invite__play,
.video-invite__facade:focus-visible .video-invite__play {
  background: var(--midnight-dk);
}

.video-invite__facade:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 62, 107, 0.25);
}

.video-invite__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--hairline);
  border-radius: var(--radius-card);
  display: block;
}

.video-invite__caption {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .timeline {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "l1 l1"
      "w1 w1"
      "l2 l2"
      "w2 w3"
      "w4 w5"
      "l3 l3"
      "w6 w6";
    column-gap: 14px;
    row-gap: 16px;
  }
}

/* 12b. Sekce 4b. Co říkají rodiče (testimonialy mezi pilot info a přihláškou)
   3 karty s citáty z prvního pilotu, anonymně, hairline rámeček, identity v4. */

/* Baby blue akcentní plocha (světlý akcent z identity v4, sekce 2).
   Jediná velká baby blue plocha na stránce. Dech mezi programem a přihláškou.
   Text tmavý, karty bílé (vrstvení na světlé ploše). Midnight zůstává kotva. */
.section--testimonials {
  padding-top: 56px;
  padding-bottom: 56px;
  background: var(--baby-blue);
}

.testimonials__intro {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 32px 0;
  text-align: center;
}

.testimonials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial {
  border: var(--hairline);
  border-radius: 8px;
  padding: 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.testimonial__quote {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.testimonial__by {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  border-top: var(--hairline);
  padding-top: 16px;
}

/* 13. Sekce 5. Hero stats */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: var(--hairline);
  padding-top: 28px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

/* 14. Signup blok pod stats */

.signup {
  margin-top: 64px;
}

.signup__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.signup__sub {
  margin: 20px 0 0;
  max-width: 580px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
}

.signup .form {
  margin-top: 32px;
}

/* 15. Sekce 6. Dark quote + princip */

.quote-dark {
  position: relative;
  margin: 32px 0 0;
  padding: 36px 44px 40px;
  background: var(--midnight);
  border-radius: var(--radius-card);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-width: 880px;
}

.quote-dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--midnight-dk);
}

/* Výjimka identity v4: glyph uvozovky v patkovém fontu (Georgia, system).
   Drží klasický editorial look quote bloku, ostatní typografie zůstává sans-serif. */
.quote-dark__glyph {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 88px;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 0;
  letter-spacing: -0.04em;
}

.quote-dark blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: var(--white);
  max-width: 760px;
}

.prose {
  margin-top: 40px;
  max-width: 540px;
}

.prose p {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

.prose p:last-child {
  margin-bottom: 0;
}

.closing-line {
  margin: 56px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--midnight);
  white-space: nowrap;
}

/* 16. Sekce 7. Kdo to vede (autor) */

.author {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}

.author__photo-wrap {
  margin: 0;
}

.author__photo {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border: var(--hairline);
  border-radius: var(--radius-card);
  filter: grayscale(10%) contrast(0.98);
}

.author__text {
  display: flex;
  flex-direction: column;
}

.author__text .sec-h2 {
  margin: 0 0 24px;
}

.author__text p {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  max-width: 560px;
}

.author__lede strong {
  font-weight: 600;
}

/* Vrstvy autor bio (2x2 grid s hairline) */
.layers {
  list-style: none;
  margin: 32px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.layer {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 16px 0;
  align-items: start;
}

.layer:nth-child(n+3) {
  border-top: var(--hairline);
}

.layer__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--midnight);
  padding-top: 6px;
}

.layer__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.layer__body {
  margin: 6px 0 0;
  max-width: 480px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--midnight);
  width: max-content;
  transition: color var(--tx-default);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--midnight-dk);
}

/* 17. Sekce 9. Newsletter — kompaktní layout */

.form--newsletter {
  margin-top: 48px;
}

.form--newsletter .form__row--inline {
  max-width: 480px;
}

.form--newsletter .form__actions {
  margin-top: 20px;
}

/* 18. Formuláře (společné) */

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 22px;
}

.form__row {
  display: flex;
  flex-direction: column;
}

.form__row--full {
  grid-column: 1 / -1;
}

.form__label {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--midnight);
}

.form__row input,
.form__row textarea {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  border: 0.5px solid rgba(13, 13, 13, 0.20);
  border-radius: var(--radius-button);
  padding: 12px 14px;
  line-height: 1.5;
  width: 100%;
  transition: border-color var(--tx-default), box-shadow var(--tx-default);
}

.form__row input::placeholder,
.form__row textarea::placeholder {
  color: var(--text-subtle);
  font-weight: 300;
}

.form__row input:focus,
.form__row textarea:focus {
  outline: none;
  border-color: var(--midnight);
  box-shadow: 0 0 0 3px rgba(44, 62, 107, 0.10);
}

.form__row textarea {
  resize: vertical;
  min-height: 120px;
}

.form__row--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.form__status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.form__status:empty {
  display: none;
}

/* Stavová hláška po odeslání. Do 1. 8. 2026 to byla drobná šedá věta vedle
   tlačítka, kterou uživatel přehlédl, když mu chybělo povinné pole.
   Teď je to celý řádek pod tlačítkem, větší a s barevnou linkou. */
.form__status--ok,
.form__status--err {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-button);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.form__status--ok {
  background: var(--bg-section);
  border-left: 1px solid var(--midnight);
  color: var(--midnight-dk);
}

.form__status--err {
  background: rgba(139, 105, 20, 0.06);
  border-left: 1px solid var(--bronze);
  color: var(--bronze);
}

/* Chyba u konkrétního pole, ať uživatel ví, které doplnit. */
.form__row--err input,
.form__row--err textarea {
  border-color: var(--bronze);
}

.form__row--err input:focus,
.form__row--err textarea:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.12);
}

.form__row-err {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bronze);
}

.form__gdpr {
  margin: 22px 0 0;
  max-width: 560px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-subtle);
}

/* Odkaz v poznámce pod formulářem (např. mailto), ať je poznat */
.form__gdpr a {
  color: var(--midnight);
  border-bottom: 0.5px solid rgba(44, 62, 107, 0.4);
}

.form__gdpr a:hover {
  color: var(--midnight-dk);
}

.magnet .form__row + .btn,
.magnet .form button[type="submit"] {
  margin-top: 18px;
}

/* 19. Tlačítka */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--tx-default), color var(--tx-default), border-color var(--tx-default);
  text-decoration: none;
  line-height: 1;
}

.btn--primary {
  background: var(--midnight);
  color: var(--white);
  border-color: var(--midnight);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--midnight-dk);
  border-color: var(--midnight-dk);
}

.btn--secondary {
  background: transparent;
  color: var(--midnight);
  border-color: var(--midnight);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--midnight);
  color: var(--white);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 62, 107, 0.25);
}

.cta-arrow {
  flex-shrink: 0;
  color: currentColor;
}

/* 20. Sekce 10. Footer */

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
}

.footer__stamp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* 21. Mobile breakpoint */

@media (max-width: 960px) {
  :root {
    --page-padding: 28px;
    --section-padding: 64px;
    --hero-padding-t: 64px;
    --hero-padding-b: 56px;
  }

  .topbar__row {
    height: 56px;
    gap: 16px;
  }

  /* Na mobile (<960px) skrýváme wordmark "NKJK", protože překrývá první nav link.
     Logo icon vlevo nese identitu sám. Desktop verze obě stále ukazuje vedle sebe. */
  .topbar__wordmark {
    display: none;
  }

  .topbar__nav {
    gap: 18px;
  }

  .topbar__link {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .hero__h1 {
    font-size: clamp(32px, 8.5vw, 52px);
  }

  .hero__tagline {
    font-size: 20px;
  }

  .sec-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sec-head__num {
    padding-top: 0;
  }

  .magnet {
    padding: 28px 24px 24px;
  }

  .weeks {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  .subblocks {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .stat__value {
    font-size: 26px;
  }

  .testimonials {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .testimonial {
    padding: 24px;
    min-height: 0;
  }

  /* Pilot CTA "Odeslat nezávaznou přihlášku" je delší text,
     na úzkém mobilu povolit wrap přes 2 řádky bez rozbití layoutu. */
  .form--pilot .btn span {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .quote-dark {
    padding: 36px 32px;
  }

  .quote-dark__glyph {
    font-size: 56px;
  }

  .quote-dark blockquote {
    font-size: 20px;
  }

  .closing-line {
    white-space: normal;
    font-size: 17px;
    margin-top: 40px;
  }

  .layers {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .layer:nth-child(n+2) {
    border-top: var(--hairline);
  }

  .subblocks {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .author {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .author__photo {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .form__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Topbar na malých displejích: 4 položky menu se do jedné řádky vedle
   loga nevejdou (potřebují ~500px), nav se zalamuje pod logo. */
@media (max-width: 560px) {
  .topbar__row {
    height: auto;
    flex-wrap: wrap;
    /* Vodorovný padding musí zůstat z .container, jinak menu leží na hraně displeje. */
    padding: 10px var(--page-padding) 12px;
    row-gap: 8px;
  }

  /* Pět položek se na 375 px do řádku nevejde. Místo lámání slov uvnitř
     položky se zalomí celé položky na druhý řádek. */
  .topbar__nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 16px;
    row-gap: 6px;
  }

  .topbar__link {
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================
   Pobyt jako druhá cesta (index.html, sekce 6b). Přidáno 2026-08-02.
   Klidná karta na světle šedém podkladu, hairline rámeček.
   Žádný bronze (patří lead magnetu) ani baby blue (ta je na stránce 2x).
   ============================================================ */

.sec-aside {
  margin: 10px 0 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
}

.sec-aside a {
  color: var(--midnight);
  font-weight: 600;
  border-bottom: 0.5px solid rgba(44, 62, 107, 0.45);
}

.pobyt-cta {
  max-width: 780px;
  background: var(--bg-section);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 36px 40px;
}

.pobyt-cta__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: 16px;
}

.pobyt-cta__h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--black);
}

.pobyt-cta__body {
  margin: 0 0 22px;
  max-width: 660px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.pobyt-cta__meta {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.pobyt-cta__meta li {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--midnight-dk);
}

@media (max-width: 720px) {
  .pobyt-cta {
    padding: 28px 24px;
  }
}

/* ============================================================
   14. NOVÁ PODOBA WEBU (větev novy-web, 11. 9. 2026)
   Mapa míst na rozcestníku + kostra stránky místa.
   Koncept: nkjk-brain/07_provoz/navrh_struktury_webu_2026_09.md
   ============================================================ */

/* --- 14.1 Mapa míst --------------------------------------- */

/* Mapa je dvojice panelů (rodič, trenér) pod společnou časovou osou.
   Revize 11. 9. 2026: původní verze byla jen text položený na linky,
   vypadala jako obsah a ne jako navigace, a hlavička řady („rodič")
   byla nejmenší prvek na stránce, přestože nese hlavní orientaci.

   Klíčová podmínka layoutu: tečka uzlu musí sedět na stejné svislici
   jako tick časové osy a jako spojka mezi panely. Drží to --panel-x,
   stejné vodorovné odsazení pro osu, panely i most. Padding uzlu musí
   zůstat symetrický, jinak se tečka posune mimo osu. */

.mapa {
  --panel-x: 28px;
  margin-top: 56px;
}

/* Vodorovná osa času nad oběma panely. Ticks navazují na mikroprvek D.07. */
.mapa__osa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--panel-x) 14px;
  margin-bottom: 28px;
  border-bottom: var(--hairline);
}

.mapa__osa-krok {
  position: relative;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.mapa__osa-krok::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 1px;
  height: 6px;
  background: rgba(13, 13, 13, 0.25);
}

/* Panel role. Jen hairline rámeček, žádná výplň, ať to drží charakter
   výkresu a ne krabice. Výplň patří jen dlaždici pod kurzorem. */
.mapa__panel {
  padding: 0 var(--panel-x) 30px;
  border: var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Poloprůhledné bílé pozadí: mřížka sekce pod panelem prosvítá, ale slabě,
     takže výkres pokračuje a text přitom zůstává čitelný. */
  background: rgba(255, 255, 255, 0.82);
}

/* Hlavička role je tmavý pruh přes celou šířku panelu. Dvě role, dva pruhy,
   rozdíl je vidět na první pohled. Dřív to byl jen popisek v jedenácti bodech
   a rodič netušil, že spodní polovina mapy není pro něj (zpětná vazba 11. 9.). */
.mapa__hlava {
  margin: 0 calc(var(--panel-x) * -1) 28px;
  padding: 22px var(--panel-x) 24px;
  background: var(--midnight);
}

.mapa__role {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.mapa__role-sub {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.mapa__radek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Spojka mezi panely. Přerušovaná linie říká, že mechanismus je na obou
   stranách stejný, jen jiné místo. */
.mapa__most {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 44px;
  padding: 0 var(--panel-x);
}

.mapa__most-linka {
  position: relative;
}

.mapa__most-linka::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: linear-gradient(to bottom, rgba(44, 62, 107, 0.45) 50%, transparent 50%);
  background-size: 1px 6px;
}

/* Uzel je dlaždice, ne odstavec. Padding musí zůstat symetrický (viz komentář
   nahoře), proto se linka s tečkou vytahuje zpátky negativním marginem. */
.uzel {
  display: block;
  padding: 18px;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: background var(--tx-default);
}

.uzel:hover,
.uzel:focus-visible {
  background: var(--baby-blue);
}

.uzel:focus-visible { outline: 1px solid var(--midnight); outline-offset: 2px; }

.uzel__osa {
  display: block;
  position: relative;
  height: 18px;
  margin: 0 -18px 16px;
}

.uzel__osa::before,
.uzel__osa::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: rgba(44, 62, 107, 0.35);
}

.uzel__osa::before { left: 0; right: 50%; }
.uzel__osa::after  { left: 50%; right: 0; }

.uzel--prvni .uzel__osa::before { display: none; }
.uzel--posledni .uzel__osa::after { display: none; }

.uzel__tecka {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--midnight);
  transition: background var(--tx-default);
}

.uzel:hover .uzel__tecka,
.uzel:focus-visible .uzel__tecka { background: var(--midnight-dk); }

/* Bronzový uzel tady byl do 11. 9. 2026. Zrušen, protože nic neznamenal.
   Šest míst je rovnocenných a zvýraznění jednoho bez vysvětlení je dekorace.
   Doporučený vstup řeší věta v perexu mapy. Bronze na rozcestníku drží
   lead magnet karta, kde signalizuje konverzi. */

.uzel__nazev {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--tx-default);
}

.uzel__kdy {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
  transition: color var(--tx-default);
}

.uzel__veta {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  transition: color var(--tx-default);
}

.uzel__dal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--midnight);
  opacity: 0;
  transition: opacity var(--tx-default);
}

/* Na baby blue ploše musí být text tmavý (pravidlo identity v4, sekce 2).
   Proto se při hoveru stmavují i popisky, které jsou jinak světle šedé. */
.uzel:hover .uzel__nazev,
.uzel:focus-visible .uzel__nazev,
.uzel:hover .uzel__veta,
.uzel:focus-visible .uzel__veta,
.uzel:hover .uzel__kdy,
.uzel:focus-visible .uzel__kdy { color: var(--midnight-dk); }

.uzel:hover .uzel__dal,
.uzel:focus-visible .uzel__dal { opacity: 1; }

.mapa__zaver {
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: var(--hairline);
  max-width: 720px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}

@media (max-width: 900px) {
  /* Na mobilu z mapy padá výkres a zůstávají dva panely se svislým seznamem. */
  .mapa { --panel-x: 18px; }
  .mapa__osa { display: none; }
  .mapa__radek { grid-template-columns: 1fr; gap: 10px; }
  .mapa__most { display: none; }
  .mapa__panel + .mapa__panel { margin-top: 28px; }
  .mapa__role { font-size: 26px; }
  .uzel { padding: 16px; }
  .uzel__osa::before { display: none; }
  .uzel__osa::after { left: 0; right: auto; width: 40px; }
  .uzel__tecka { left: 0; }
  .uzel__dal { opacity: 1; }
}

/* --- 14.2 Stránka místa ----------------------------------- */

/* Drobná navigace zpátky do mapy, nad hero. */
.zpet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color var(--tx-default);
}

.zpet:hover { color: var(--midnight); }

.zpet::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* Dvě věty vedle sebe. Vlevo co situaci zhorší, vpravo co ji otočí. */
.vety {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 40px 0 0;
  border-top: var(--hairline-strong);
}

.veta {
  padding: 32px 36px 32px 0;
}

.veta + .veta {
  padding-left: 36px;
  border-left: var(--hairline);
}

.veta__label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.veta__text {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text);
}

.veta--otoci .veta__text { color: var(--midnight); }

.veta__proc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* Jedna věc na tenhle týden. Baby blue plocha, jediná velká na stránce. */
.jedna-vec {
  margin-top: 8px;
  padding: 44px 48px;
  background: var(--baby-blue);
  border-radius: var(--radius-card);
}

.jedna-vec__label {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

.jedna-vec__h3 {
  margin: 0 0 20px;
  max-width: 640px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

.jedna-vec__body {
  margin: 0 0 14px;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--midnight-dk);
}

.jedna-vec__body:last-child { margin-bottom: 0; }

/* Dveře na konci stránky místa. Dvě karty vedle sebe. */
.dvere {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

/* Bronze tag na kartě hlavní nabídky. Jediný bronze prvek stránky. */
.card--trigger { border-color: rgba(139, 105, 20, 0.30); }
.card--trigger .card__tag { color: var(--bronze); }

/* Odkaz na sousední místo na konci stránky. */
.sousedi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: var(--hairline);
}

.sousedi__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sousedi__odkaz {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--midnight);
  text-decoration: none;
  transition: color var(--tx-default);
}

.sousedi__odkaz:hover { color: var(--midnight-dk); text-decoration: underline; }

@media (max-width: 900px) {
  .vety { grid-template-columns: 1fr; }
  .veta { padding: 28px 0; }
  .veta + .veta { padding-left: 0; border-left: none; border-top: var(--hairline); }
  .dvere { grid-template-columns: 1fr; }
  .jedna-vec { padding: 32px 28px; }
  .jedna-vec__h3 { font-size: 30px; }
}

/* --- 14.3 Blok se studií ---------------------------------- */

/* Data ze studie v sekci Proč děti přestávají se sportem.
   Čísla nesou .stats (komponenta výš), tenhle blok drží zdroj a odkaz.
   Pravidlo z brainu: studie je partner, ne dekorace. Vždy se uvádí i to,
   co studie neříká, viz odstavec pod čísly v index.html. */
.studie {
  margin: 8px 0 0;
  padding: 26px 0 0;
  border-top: var(--hairline);
}

.studie__zdroj {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

.studie__zdroj a {
  color: var(--midnight);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 62, 107, 0.35);
  transition: color var(--tx-default), border-color var(--tx-default);
}

.studie__zdroj a:hover {
  color: var(--midnight-dk);
  border-bottom-color: var(--midnight-dk);
}

/* Čísla studie stojí na bílé, ne v tmavém pruhu jako .section--stats. */
.studie-cisla {
  margin-top: 32px;
  padding-top: 26px;
  border-top: var(--hairline-strong);
}

.studie-cisla .stat__value { color: var(--midnight-dk); }

/* --- 14.4 Rytmus ploch ------------------------------------ */

/* Identita v4 povoluje světlou plochu i tmavou sekci jako důraz, web je
   ale používal jen výjimečně a deset bílých sekcí za sebou splývalo.
   Rytmus na dlouhé stránce: bílá, světlá, bílá, tmavá. */

.section--plocha {
  background: var(--bg-section);
}

.section--tmava {
  background: var(--midnight-dk);
  color: var(--steel-light);
}

.section--tmava .sec-h2,
.section--tmava .sec-sub,
.section--tmava .form__label { color: var(--white); }

.section--tmava .sec-sub { color: rgba(255, 255, 255, 0.72); }

.section--tmava .sec-head__num-label { color: var(--baby-blue); }
.section--tmava .sec-head__num-line { background: rgba(255, 255, 255, 0.35); }

.section--tmava .bullet-list li { color: rgba(255, 255, 255, 0.82); }
.section--tmava .bullet-list--arrow li::before,
.section--tmava .bullet-list--arrow li::after { border-color: var(--baby-blue); background: var(--baby-blue); }

.section--tmava[data-watermark]::before { color: rgba(255, 255, 255, 0.06); }

.section--tmava input[type="email"],
.section--tmava input[type="text"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.section--tmava input::placeholder { color: rgba(255, 255, 255, 0.45); }

.section--tmava .btn--primary {
  background: var(--baby-blue);
  color: var(--midnight-dk);
}

.section--tmava .btn--primary:hover { background: var(--white); }

/* Na tmavé ploše hláška nesmí být bílý box s modrým písmem, to se nedá číst.
   Průhledná plocha, baby blue linka a bílý text. */
.section--tmava .form__status--ok {
  background: rgba(255, 255, 255, 0.06);
  border-left: 1px solid var(--baby-blue);
  color: var(--white);
}

.section--tmava .form__status--err {
  background: rgba(255, 255, 255, 0.06);
  border-left: 1px solid var(--baby-blue);
  color: var(--white);
}

/* --- 14.5 Křivka nervového systému ------------------------ */

/* Mikroprvek O.04 z identity v4, rozšířený na dvě křivky a tři kóty.
   Používá se tam, kde text mluví o výšce reakce a rychlosti návratu
   (dnes /tribuna). Kóty jsou záměrně jako v technickém výkresu, ne jako
   infografika. Bronzový bod spouštěče je jediný bronze na stránce. */

.krivka {
  margin: 40px 0 8px;
  padding: 32px 8px 24px;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline);
}

.krivka__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
}

.krivka__popis {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
}

.krivka__caption {
  margin: 18px 0 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  /* Na úzkém displeji by se popisky v mono slily, proto o kousek větší
     a kóty zůstávají, protože nesou hlavní sdělení. */
  .krivka { padding: 24px 0 20px; }
  .krivka__popis { font-size: 13px; letter-spacing: 1.2; }
}

/* Legenda kót pod křivkou. Čísla v grafu, texty tady, aby se popisky
   nekřížily s křivkami (oprava 11. 9. 2026 po prvním renderu). */
.krivka__kotuj {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 720px;
}

.krivka__kotuj li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  padding-top: 14px;
  border-top: var(--hairline);
}

.krivka__kotuj-c {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--midnight);
}

@media (max-width: 720px) {
  .krivka__kotuj { grid-template-columns: 1fr; gap: 14px; }
}

/* --- 14.6 Coordinate grid a method stamp ------------------ */

/* Mikroprvek O.05. Mřížka 16px jako pozadí sekce, aby stránka měla technický
   spodek. Datové body z původní specifikace tady ZÁMĚRNĚ nejsou: mapa má
   vlastní uzly a další tečky v pozadí by s nimi soupeřily. Ze stejného důvodu
   chybí bronzový signální bod, bronze na rozcestníku drží lead magnet karta. */
.section--grid {
  position: relative;
  background-image:
    repeating-linear-gradient(to right, rgba(44, 62, 107, 0.055) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, rgba(44, 62, 107, 0.055) 0 1px, transparent 1px 16px);
}

/* Mřížka se u krajů vytrácí, aby sekce neměla tvrdý řez. */
.section--grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, var(--bg) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Mikroprvek S.02. Technický štítek v záhlaví stránky místa.
   Nahradil prostý eyebrow, protože číslo místa je údaj, ne ozdoba. */
.stamp {
  /* flex, ne inline-flex: štítek musí stát na vlastním řádku pod odkazem
     zpátky na mapu, jinak se mu lepí na konec. */
  display: flex;
  width: fit-content;
  align-items: stretch;
  margin-bottom: 22px;
  border: 0.5px solid rgba(44, 62, 107, 0.55);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.stamp__cislo {
  padding: 7px 9px 6px;
  background: var(--midnight);
  color: var(--white);
}

.stamp__text {
  padding: 7px 12px 6px;
  color: var(--midnight);
}

.stamp__oddel {
  color: rgba(44, 62, 107, 0.45);
  padding: 0 2px;
}

@media (max-width: 720px) {
  .stamp { font-size: 9px; letter-spacing: 0.12em; }
}

/* --- 14.7 Odlišení metody v sekci autora ------------------- */

/* Blok, kde se říká, čím se metoda liší od běžné mentální přípravy.
   Stojí na jemné ploše, aby se odlišil od životopisných odstavců kolem,
   a má levý midnight okraj jako light quote z identity. */
.metoda {
  margin: 32px 0 8px;
  padding: 26px 30px 8px;
  background: var(--bg-section);
  border-left: 1px solid var(--midnight);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.metoda__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
}

.metoda .prose p:last-child { margin-bottom: 18px; }

.author__odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .metoda { padding: 22px 20px 4px; }
}

/* --- 14.8 Rohové značky na kartách dveří ------------------ */

/* Mikroprvky C.01 a C.02. Karty na konci stránky místa mění plný rámeček
   a šedou výplň za rohové značky. Identita to popisuje jako blueprint pocit,
   „místo plného rámečku, lehčí kompozice s technickou přesností".
   Hlavní nabídka (card--trigger) má značky větší a bronzové, vedlejší menší
   a midnight. Rozdíl v důrazu tedy nese geometrie, ne barva plochy. */

.dvere .card {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  padding: 24px 22px 22px;
}

.dvere .card::before,
.dvere .card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-style: solid;
  border-color: rgba(44, 62, 107, 0.55);
  pointer-events: none;
}

.dvere .card::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.dvere .card::after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

/* Hlavní nabídka: delší značky v bronzu. Bronze je na stránce místa jediný
   (spouštěč v křivce má vlastní stránku, tady je to karta). */
.dvere .card--trigger::before,
.dvere .card--trigger::after {
  width: 22px;
  height: 22px;
  border-color: rgba(139, 105, 20, 0.7);
}

/* Karta uvnitř mřížky potřebuje trochu vzduchu, aby značky nekolidovaly
   se sousední kartou. */
.dvere { gap: 32px; }

@media (max-width: 900px) {
  .dvere { gap: 28px; }
}

/* Odkaz na konci karty. Třída se na web dostala z laco.cz, ale nikdy tu
   nebyla nadefinovaná, takže šipka padala pod text. Doplněno 11. 9. 2026
   při nasazení rohových značek, kde to konečně bylo vidět. */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  width: max-content;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--midnight);
  text-decoration: none;
  transition: color var(--tx-default);
}

.card__cta:hover,
.card__cta:focus-visible { color: var(--midnight-dk); }

.card--trigger .card__cta { color: var(--bronze); }
.card--trigger .card__cta:hover { color: #6d520f; }

/* Varianta stampu pro prodejní stránky. Tmavé pole nese typ obsahu místo
   pořadového čísla, protože program, kruh ani pobyt nejsou místa na mapě
   a číslovat je do stejné řady by mátlo. */
.stamp--nabidka .stamp__cislo {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Karta dveří jako celá klikatelná plocha s podbarvením na hover.
   Odkaz uvnitř se roztahuje přes celou kartu (stretched link), takže
   sémantika zůstává správná (odkaz je pořád odkaz), ale kliknout jde
   kamkoli. Chování i barva odpovídají uzlům v mapě, aby web reagoval
   všude stejně. */
.dvere .card {
  cursor: pointer;
  transition: background var(--tx-default);
}

.dvere .card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dvere .card:hover,
.dvere .card:focus-within {
  background: var(--baby-blue);
}

/* Text na baby blue musí být tmavý (pravidlo identity v4, sekce 2). */
.dvere .card:hover .card__h3,
.dvere .card:focus-within .card__h3,
.dvere .card:hover .card__body,
.dvere .card:focus-within .card__body,
.dvere .card:hover .card__cta,
.dvere .card:focus-within .card__cta {
  color: var(--midnight-dk);
}

.dvere .card:hover .card__tag,
.dvere .card:focus-within .card__tag {
  color: var(--midnight);
}

/* Rohové značky na podbarvené ploše ztmavnou, ať nezmizí. */
.dvere .card:hover::before,
.dvere .card:hover::after,
.dvere .card:focus-within::before,
.dvere .card:focus-within::after {
  border-color: var(--midnight-dk);
}

.dvere .card:focus-within { outline: 1px solid var(--midnight); outline-offset: 4px; }

/* Hlavní nabídka si drží bronz i na podbarvené ploše, jinak by při hoveru
   ztratila odlišení od vedlejší karty. Bronze na baby blue je čitelný,
   je to tmavá barva na světlé (identita v4, sekce 2). */
.dvere .card--trigger:hover::before,
.dvere .card--trigger:hover::after,
.dvere .card--trigger:focus-within::before,
.dvere .card--trigger:focus-within::after {
  border-color: var(--bronze);
}

.dvere .card--trigger:hover .card__tag,
.dvere .card--trigger:focus-within .card__tag,
.dvere .card--trigger:hover .card__cta,
.dvere .card--trigger:focus-within .card__cta {
  color: #6d520f;
}

/* --- 14.9 Medailonek, výrazné odkazy a patičková navigace -- */

/* Mezi jménem a prvním odstavcem byla mezera 40px z .prose. V medailonku
   to trhalo lede od textu, který na něj přímo navazuje. */
.author__lede {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.author__text .prose { margin-top: 18px; }

/* Odkazy pod medailonkem jsou cíl, ne poznámka pod čarou. Chovají se
   stejně jako dlaždice v mapě, tedy podbarvení na hover. */
.author__odkazy .link-arrow {
  margin-top: 0;
  padding: 12px 18px;
  border: 0.5px solid rgba(44, 62, 107, 0.40);
  border-radius: var(--radius-button);
  transition: background var(--tx-default), color var(--tx-default), border-color var(--tx-default);
}

.author__odkazy .link-arrow:hover,
.author__odkazy .link-arrow:focus-visible {
  background: var(--baby-blue);
  color: var(--midnight-dk);
  border-color: var(--midnight);
}

/* Patičková navigace. Stránky jsou dlouhé a na konci každé z nich chyběla
   cesta dál i cesta nahoru. Doplněno 12. 9. 2026 po zpětné vazbě. */
.footer-nav {
  border-top: var(--hairline);
  padding-top: 32px;
  padding-bottom: 8px;
}

.footer-nav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 28px;
}

.footer-nav__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.footer-nav__row a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--midnight);
  text-decoration: none;
  transition: color var(--tx-default);
}

.footer-nav__row a:hover,
.footer-nav__row a:focus-visible { color: var(--midnight-dk); text-decoration: underline; }

/* Odkaz nahoru se odsazuje doprava, aby se nepletl s cestami dál. */
.footer-nav__nahoru {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-nav__nahoru::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid currentColor;
}

@media (max-width: 720px) {
  .footer-nav__row { gap: 12px 20px; }
  .footer-nav__nahoru { margin-left: 0; }
}

/* --- 14.10 Osa běhu kruhu ---------------------------------- */

/* Nultý běh kabiny má jinou strukturu než šestitýdenní program pro rodiče.
   Páteří jsou tři individuální cally, mezi nimi šest týdenních kruhů.
   Zdroj: nkjk-brain/04_piloty_a_data/pilot_k/program_nulty_beh_2026.md
   Pozor: kruhy nemají ohlášená témata, je to supervize, ne kurz. Osa proto
   ukazuje rytmus a ne obsah, jinak by z toho byl učební plán. */

.beh { margin-top: 40px; }

.beh__blok {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.beh__karta {
  padding: 18px 20px 20px;
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--bg-section);
}

/* Individuální call je páteř, proto tmavý. */
.beh__karta--call {
  background: var(--midnight);
  border-color: var(--midnight);
}

.beh__kdy {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.beh__karta--call .beh__kdy { color: var(--baby-blue); }

.beh__co {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.beh__karta--call .beh__co { color: var(--white); }

.beh__pop {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.beh__karta--call .beh__pop { color: rgba(255, 255, 255, 0.78); }

/* Poslední call stojí sám, uzavírá běh. */
.beh__zaver {
  display: grid;
  grid-template-columns: 1.15fr 3fr;
  gap: 16px;
}

.beh__note {
  margin: 22px 0 0;
  max-width: 720px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .beh__blok, .beh__zaver { grid-template-columns: 1fr; gap: 12px; }
  .beh__blok { margin-bottom: 12px; }
}

/* Čtyři stejné sloupce, když v bloku nestojí call vlevo jako první. */
.beh__blok--4 { grid-template-columns: repeat(4, 1fr); }

/* Dokument, který chodí předem. Není to setkání, proto ani tmavý, ani světlý. */
.beh__karta--doc {
  background: var(--baby-blue);
  border-color: rgba(44, 62, 107, 0.25);
}
.beh__karta--doc .beh__kdy { color: var(--midnight); }
.beh__karta--doc .beh__co,
.beh__karta--doc .beh__pop { color: var(--midnight-dk); }

@media (max-width: 900px) { .beh__blok--4 { grid-template-columns: 1fr; } }

/* --- 16.1 Sekce autora: role pod fotkou (13. 9. 2026) ------ */

/* Pět rolí (kouč, kabina, filmař, výzkum, otec) stojí přímo pod fotkou
   v levém sloupci, jedna pod druhou. Textový sloupec s odlišením metody
   je užší, aby se dal číst jedním pohledem. */
.author {
  grid-template-columns: 360px minmax(0, 600px);
  gap: 64px;
}

.author__side .layers {
  grid-template-columns: 1fr;
  column-gap: 0;
  margin: 28px 0 0;
}

.author__side .layer:nth-child(n+2) {
  border-top: var(--hairline);
}

.author__side .layer__body {
  max-width: none;
}

.author__text .metoda .prose p,
.author__text p {
  max-width: none;
}

/* Na mobilu jde nejdřív fotka, pak text a role až za ním,
   aby nadpis Kdo to vede nebyl až pod dlouhým výčtem. */
@media (max-width: 960px) {
  .author {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .author__side { display: contents; }
  .author__photo-wrap { order: 1; }
  .author__text { order: 2; }
  .author__side .layers { order: 3; margin-top: 0; }
}

.author__side .author__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}