/* ===========================================================
   NEST & REST · společné prvky
   Nadpisy, text, tlačítka, karty, sekce. Všechno bere hodnoty
   z tokens.css přes proměnné — žádná barva tady nestojí natvrdo.

   Každá stránka webu načítá tenhle soubor a tokens.css.
   Vlastní <style> blok stránky smí řešit jen rozvržení,
   které je opravdu jen na téhle jedné stránce.
   =========================================================== */

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

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

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-zaklad);
  line-height: var(--text-radek);
}

/* --- Obaly ------------------------------------------------ */

.obal {
  width: 100%;
  max-width: var(--sirka-obsah);
  margin-inline: auto;
  padding-inline: var(--mezera-4);
}

/* Čtený text nikdy přes celou šířku — nad 700 px oko při
   návratu na další řádek mine a čtení se dře. */
.text {
  max-width: var(--sirka-text);
  margin-inline: auto;
}

.sekce { padding-block: var(--mezera-8); }
.sekce--pisek { background: var(--pozadi-sekce); }
.sekce--tmava { background: var(--pozadi-tmave); color: var(--text-na-tmavem); }
.sekce--uzka { padding-block: var(--mezera-7); }

/* --- Písmo ------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-nadpis);
  color: var(--barva-hlavni);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--mezera-4);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.3rem; margin-bottom: var(--mezera-3); }

.sekce--tmava h1,
.sekce--tmava h2,
.sekce--tmava h3 { color: #ffffff; }

p { margin: 0 0 var(--mezera-4); }
p:last-child { margin-bottom: 0; }

.perex {
  font-size: 1.2rem;
  color: var(--text-tlumeny);
}
.sekce--tmava .perex { color: var(--text-na-tmavem); }

.drobne {
  font-size: 0.9rem;
  color: var(--text-tlumeny);
}
.sekce--tmava .drobne { color: var(--text-na-tmavem); opacity: 0.8; }

a { color: var(--barva-akcent); }
a:hover { color: var(--barva-akcent-tmava); }
.sekce--tmava a { color: var(--barva-akcent-svetla); }

/* --- Tlačítka --------------------------------------------- */

.tlacitko {
  display: inline-block;
  min-height: 48px;              /* palec musí mít kam kliknout */
  padding: 14px var(--mezera-5);
  border: 0;
  border-radius: var(--zaobleni-tlacitko);
  background: var(--barva-akcent);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tlacitko:hover { background: var(--barva-akcent-tmava); color: #ffffff; }
.tlacitko:focus-visible { outline: 3px solid var(--barva-akcent-svetla); outline-offset: 3px; }

/* Druhé tlačítko v pořadí důležitosti — nesmí vypadat stejně
   silně jako hlavní, jinak člověk neví, co má zmáčknout. */
.tlacitko--tise {
  background: transparent;
  color: var(--barva-hlavni);
  box-shadow: inset 0 0 0 2px var(--oddelovac);
}
.tlacitko--tise:hover { background: var(--pozadi-sekce); color: var(--barva-hlavni); }

.sekce--tmava .tlacitko--tise {
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.sekce--tmava .tlacitko--tise:hover { background: rgba(255,255,255,0.1); color: #ffffff; }

/* --- Karty ------------------------------------------------ */

.mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mezera-4);          /* stejná mezera vodorovně i svisle */
}

.karta {
  background: var(--pozadi-karta);
  border-radius: var(--zaobleni-karta);
  box-shadow: var(--stin-karta);
  padding: var(--mezera-5);
}
.karta > :last-child { margin-bottom: 0; }   /* ať je spodní okraj stejný jako horní */

/* Zvýraznění uvnitř textu. Záměrně NEMÁ tvar tlačítka —
   člověk by na něj klikal a nic by se nestalo. */
.zvyrazneni {
  border-left: 4px solid var(--barva-akcent);
  background: rgba(138, 90, 28, 0.07);
  border-radius: 0 var(--zaobleni-karta) var(--zaobleni-karta) 0;
  padding: var(--mezera-4) var(--mezera-5);
  margin-block: var(--mezera-5);
}
.zvyrazneni > :last-child { margin-bottom: 0; }

/* --- Drobnosti -------------------------------------------- */

.znacka {
  font-family: var(--font-nadpis);
  font-size: 1.25rem;
  color: var(--barva-hlavni);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.sekce--tmava .znacka { color: #ffffff; }

.oddelovac {
  border: 0;
  border-top: 1px solid var(--oddelovac);
  margin-block: var(--mezera-6);
}

.stoh > * + * { margin-top: var(--mezera-4); }

.tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-3);
  margin-top: var(--mezera-5);
}

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

/* --- Mobil ------------------------------------------------ */

@media (max-width: 640px) {
  .sekce { padding-block: var(--mezera-6); }
  .obal { padding-inline: var(--mezera-3); }
  .karta { padding: var(--mezera-4); }
  /* Tlačítka na mobilu přes celou šířku — líp se trefí prstem */
  .tlacitka .tlacitko { flex: 1 1 100%; text-align: center; }
}