/* =========================================================
   Komentovky.cz — styl jednostránkového webu
   Mobile-first, scroll shora dolů. Barevnost dle plakátu.
   ========================================================= */

/* ---------- Design tokeny ---------- */
/* Světlý motiv (výchozí) — přírodní paleta jako trasykolem: krém + zeleň. */
:root {
  --color-bg:        #F5F1E9;  /* krémové pozadí stránky */
  --color-bg-alt:    #EFE8DB;  /* jemně tmavší krém pro střídání sekcí */
  --color-surface:   #FFFFFF;  /* karty / boxy */
  --color-text:      #112A25;  /* tmavě zelený hlavní text */
  --color-muted:     #7A6B5C;  /* tlumený text (popisky, poznámky) */
  --color-accent:    #267D4A;  /* primární zeleň (odkazy, tlačítka, akcenty) */
  --color-accent-dk: #2C6B50;  /* tmavší zeleň pro hover */
  --color-accent-2:  #e67e22;  /* teplý doplněk (oranžová) */
  --color-line:      #d4cfc5;  /* jemná linka / separátor */

  /* Pruhy (hero, patička) — ve světlém motivu světlé, jemně odlišené od pozadí */
  --band-bg:    #EFE8DB;  /* světlý krémový pruh */
  --band-text:  #112A25;  /* tmavě zelený text */
  --band-muted: #7A6B5C;  /* tlumený text */
  --band-accent:#267D4A;  /* zelený akcent */

  /* Typografie */
  --font-heading: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;

  /* Tvar a stín */
  --card-radius: 12px;
  --card-shadow: 0 8px 24px rgba(17, 42, 37, 0.10);  /* jemný zelenavý stín */

  /* Rozměry */
  --container-max: 760px;  /* mobile-first, čitelná šířka i na desktopu */
  --space: 1.25rem;
  --pad: 0.5rem;           /* boční okraj obsahu — na mobilu maximálně využít šířku */
  --img-radius: 8px;       /* jemné zaoblení rohů fotek */
}

/* Tmavý motiv — drží zelenou rodinu kvůli identitě. */
[data-theme="dark"] {
  --color-bg:        #0f1c18;
  --color-bg-alt:    #15241f;
  --color-surface:   #1a2c26;
  --color-text:      #eef2ee;
  --color-muted:     #9fb0a8;
  --color-accent:    #3DB86E;
  --color-accent-dk: #5CCB87;
  --color-accent-2:  #e8a04a;
  --color-line:      #2b3d36;

  --band-bg:    #0b1512;
  --band-text:  #eef2ee;
  --band-muted: #9fb0a8;
  --band-accent:#5CCB87;

  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Reset / základ ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Header s prokliknutím na úvod ---------- */
.site-header {
  background: var(--band-bg);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);   /* jemné oddělení místo borderu */
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.7rem var(--pad);
  display: flex;
  align-items: center;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--band-text);
  text-decoration: none;
}
.site-brand svg { color: var(--band-accent); flex: 0 0 auto; }
.site-brand:hover { color: var(--band-accent); }
/* na stránce průvodce (fullscreen QR) header neukazovat — slide má být přes celý viewport */
.page-pruvodce .site-header { display: none; }

/* ---------- Přepínač light/dark ---------- */
.theme-toggle {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 1000;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
  transition: transform 0.15s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
/* zobraz správnou ikonu podle motivu */
.theme-toggle .icon-moon { display: inline-flex; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px — čitelné i pro seniory */
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* clip (ne hidden) — brání vodorovnému scrollu, ale neruší position: sticky */
}

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

a { color: var(--color-accent); }

/* Společný obsahový kontejner */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--band-bg);
  color: var(--band-text);
  padding: 2rem 0 3rem;
  text-align: center;
  position: relative;
}
/* texty v hero leží na tmavém pruhu — barvy z band tokenů */
.hero__eyebrow { color: var(--band-accent); }
.hero__meta { color: var(--band-text); }
.hero__perex { color: var(--band-text); }
.hero .guides { color: var(--band-muted); }
.hero .guides strong { color: var(--band-text); }
.hero .section__label { color: var(--band-accent); }
.hero .info dt { color: var(--band-accent); }
.hero .info dt svg { color: var(--band-accent); }
.hero .info dd { color: var(--band-text); }
.hero .info__row + .info__row { border-color: var(--color-line); }
.hero__scroll { color: var(--band-text); }
.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* horní textová loga */
.hero__logos {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2.5rem;
  text-align: left;
}
.hero__logo {
  font-size: 0.8rem;             /* pomocný label — výjimka pod 1rem */
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  font-weight: 600;
}
.hero__logo--right { text-align: right; }
.hero__logo em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-muted);
}

/* nadpisy hero */
.hero__eyebrow {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}
.hero__meta {
  color: var(--color-text);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* plakát */
.hero__poster {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  max-width: 460px;
  margin: 0 auto 2rem;
}

/* scroll šipka */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   SEKCE — obecné
   ========================================================= */
.section { padding: 3.5rem 0; }
.section--alt { background: var(--color-bg-alt); }   /* střídání pruhů místo borderů */

.section__label {
  font-size: 0.85rem;            /* pomocný label */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.lead {
  font-size: 1.18rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.guides { color: var(--color-muted); }
.guides strong { color: var(--color-text); }

/* jemné objevení sekcí při scrollu */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   PRAKTICKÉ INFO
   ========================================================= */
.info { margin-top: 0.5rem; }
.info__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 1rem 0;
}
.info__row + .info__row {
  border-top: 1px solid var(--color-line);   /* separátor řádků v seznamu — povoleno */
}
.info dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--color-accent);
}
.info dt svg { color: var(--color-accent); flex: 0 0 auto; }
.info dd { font-size: 1.1rem; }
.info__note { color: var(--color-muted); font-size: 0.98rem; }

/* =========================================================
   ZÁVĚR / DONIO
   ========================================================= */
.donio {
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  margin-top: 0.5rem;
  transition: transform 0.2s ease;
}
.donio:hover { transform: translateY(-1px); }
.donio img { width: 100%; height: auto; display: block; }
.donio__caption {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1.1rem 0 1.3rem;
}
.donio__caption strong { color: var(--color-text); }

/* =========================================================
   MAPA
   ========================================================= */
.map-wrap { margin: 1.5rem 0; }
/* mapová sekce bez spodní mezery — mapa přiléhá ke spodnímu okraji pruhu */
.section--map { padding-bottom: 0; }
.section--map .map-wrap { margin-bottom: 0; }
#map {
  height: 70vh;
  min-height: 360px;
  max-height: 560px;
  width: 100%;
  background: var(--color-surface);
}
.leaflet-container { font-family: var(--font-body); }

/* číslovaný marker stanoviště */
.stop-marker {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* tlačítko (odkaz na Mapy.cz) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.75rem 1.3rem;
  border-radius: var(--card-radius);
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--color-accent-dk); }

/* =========================================================
   STANOVIŠTĚ — svislá timeline
   ========================================================= */
.timeline {
  list-style: none;
  margin-top: 1.5rem;
}
.timeline__item { padding: 0 0 2.75rem 0; }

/* hlavička stanoviště — číslo inline vedle názvu (bez svislé čáry).
   Sticky: aktuální stanoviště se přilepí nahoru, další ho při scrollu vystrčí. */
.timeline__head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 calc(-1 * var(--pad)) 0.8rem;   /* pozadí na celou šířku viewportu */
  padding: 0.6rem var(--pad);                /* obsah zpět na okraj --pad */
  background: var(--color-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); /* jemné oddělení od podsouvaného obsahu */
}
.timeline__num {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.timeline__num--empty {
  background: var(--color-surface);
  color: var(--color-muted);
}
.timeline__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}
.timeline__sub {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.85rem;
}
/* fotky téměř přes celou šířku (jen drobný okraj) s jemným rádiusem */
.timeline__photo { margin: 0 0 0.85rem; }
.timeline__photo img {
  width: 100%;
  display: block;
  border-radius: var(--img-radius);
}
/* popisek pod fotkou (např. archivní snímky Ivana Polívky) */
.timeline__caption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-muted);
}
.timeline__text { color: var(--color-text); margin-bottom: 0.7rem; }
.timeline__text:last-child { margin-bottom: 0; }
/* stručné body (odrážky) — tečka řešena pseudo-elementem (žádné emoji) */
.timeline__list { list-style: none; margin: 0 0 0.7rem; padding: 0; }
.timeline__list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.timeline__list li:last-child { margin-bottom: 0; }
.timeline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.timeline__placeholder {
  color: var(--color-muted);
  font-style: italic;
}


/* =========================================================
   PATIČKA
   ========================================================= */
.footer {
  background: var(--band-bg);
  color: var(--band-text);
  padding: 3rem 0 2.5rem;
  text-align: center;
}
.footer a { color: var(--band-accent); }
.footer p { font-size: 1rem; }
.footer__small { color: var(--band-muted); font-size: 0.9rem; margin-top: 0.4rem; }

/* blok praktických informací v patičce — zarovnaný doleva */
.footer__info { text-align: left; margin-bottom: 2.5rem; }

/* tlačítko Mapy.cz v patičce */
.footer__btn { margin-bottom: 2.5rem; }

/* =========================================================
   Větší obrazovky — drobné vylepšení (web zůstává mobile-first)
   ========================================================= */
@media (min-width: 640px) {
  .info__row { grid-template-columns: 160px 1fr; align-items: baseline; gap: 1rem; }
  .info dt { padding-top: 0.1rem; }
}

/* =========================================================
   QR SLIDE — jen na stránce /poradatel (úvodní obrazovka s QR kódem)
   ========================================================= */
.qr-slide {
  min-height: 100vh;           /* fallback pro prohlížeče bez svh */
  min-height: 100svh;          /* celý viewport (moderní mobily) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-alt);
  padding: 2rem 1.25rem 3rem;
  position: relative;
}
.qr-slide__inner { max-width: 460px; width: 100%; }
.qr-slide__eyebrow {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}
.qr-slide__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 1.8rem;
}
/* QR kód ve světlém boxu kvůli spolehlivému naskenování */
.qr-slide__code {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 1.1rem;
  width: min(72vw, 300px);
  margin: 0 auto 1.4rem;
  box-shadow: var(--card-shadow);
}
.qr-slide__code img,
.qr-slide__code svg { width: 100%; height: auto; display: block; }
#qrcode svg { width: 100%; height: auto; display: block; }
.qr-slide__url {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.qr-slide__hint { color: var(--color-muted); font-size: 1.05rem; }
.qr-slide__scroll {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  animation: bob 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .qr-slide__scroll { animation: none; }
}

/* =========================================================
   PLATFORMA — rozcestník procházek
   ========================================================= */
/* perex v hero (rich text z procházky) */
.hero__perex { color: var(--color-text); font-size: 1.1rem; margin: 0 auto 1.2rem; max-width: 36rem; }
.hero__perex p { margin-bottom: 0.6rem; }
/* info blok v hero (termín procházky) — zarovnaný doleva, čitelný */
.hero__info { max-width: 30rem; margin: 1.5rem auto; text-align: left; }
/* odstup tlačítek v hero, když je jich víc */
.hero .btn { margin: 0.5rem 0.3rem 0; }

/* mřížka karet procházek */
.walks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 560px) {
  .walks { grid-template-columns: repeat(2, 1fr); }
}

/* karta jedné procházky */
.walk-card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease;
}
.walk-card:hover { transform: translateY(-1px); }      /* žádný silný stín na hover */
.walk-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--color-text); }
.walk-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-alt); }
.walk-card__media img { width: 100%; height: 100%; object-fit: cover; }
.walk-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; }
.walk-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.walk-card__meta { color: var(--color-muted); font-size: 0.95rem; }

/* „Jak to funguje" — dva sloupce s ikonou */
.how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 560px) { .how { grid-template-columns: 1fr 1fr; } }
.how__item {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: 1.4rem;
  box-shadow: var(--card-shadow);
}
.how__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);   /* jemné accent pozadí */
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}
.how__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.how__text { color: var(--color-muted); }

/* dlaždice procházky bez plakátu — placeholder s iniciálou (ať není rozbitá) */
.walk-card__media--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
  color: var(--color-accent);
}
.walk-card__media--empty span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.4rem;
  opacity: 0.5;
}

/* poznámka průvodce v samostatném režimu — odlišená jemným pozadím (ne border) */
.timeline__note {
  background: var(--color-surface);
  border-radius: var(--img-radius);
  padding: 0.7rem 0.9rem;
  margin-top: 0.6rem;
}
.timeline__text :is(p, ul, ol) { margin-bottom: 0.6rem; }
.timeline__text :is(p, ul, ol):last-child { margin-bottom: 0; }
.timeline__text ul { padding-left: 1.15rem; }