/* Záhlaví podstránky — drobečky, nadpis, jedna věta.
   Předloha: sekce `zahlavi` v prototyp/v22/vina.html */

.zahlavi { padding: 4rem 2rem 3rem; }
.zahlavi__obal { max-width: var(--sirka-obalu, 78rem); margin: 0 auto; }
.zahlavi__drobky { font-size: 0.875rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.5rem; }
.zahlavi__drobky a { color: inherit; text-decoration: none; }
.zahlavi__drobky a:hover { text-decoration: underline; }
.zahlavi__nadpis {
  font-family: var(--font-nadpis, Newsreader, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.zahlavi__veta { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0; max-width: 46ch; }
/* Perex textové stránky přichází z editoru, proto se stylují holé tagy. */
.zahlavi__perex { max-width: 44rem; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-muted, hsl(334 12% 42%)); }
.zahlavi__perex p { margin: 0 0 0.5rem; }
.zahlavi__perex p:last-child { margin-bottom: 0; }

/* Úzký sloupec zarovnaný s textem pod ním — textové stránky (`text`) a Tiché víno
   a DPH (`clanek`). U textové stránky text (blok `obsah`) navazuje hned pod nadpisem,
   proto záhlaví nemá spodní okraj. Článek má pod nadpisem perex jako úvod a řádek
   „Aktualizováno". Předloha: sekce `uvod` v analyza/prototyp/tiche-vino-a-dph.html */
.zahlavi--text .zahlavi__obal,
.zahlavi--clanek .zahlavi__obal { max-width: var(--sirka-clanku, 52rem); }
.zahlavi--text { padding-bottom: 0; }
.zahlavi--clanek { padding-bottom: 2.5rem; }
.zahlavi--clanek .zahlavi__perex { line-height: 1.6; color: var(--fg-normal, hsl(334 40% 22%)); }
.zahlavi--clanek .zahlavi__perex p { margin-bottom: 1.5rem; }
.zahlavi__aktualizace {
  display: inline-block;
  padding-top: 1rem;
  border-top: 1px solid var(--c-zlata, hsl(40 55% 52%));
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-muted, hsl(334 12% 42%));
}
.zahlavi--clanek .zahlavi__perex .zahlavi__aktualizace { margin-bottom: 0; }

@media (max-width: 900px) {
  .zahlavi { padding: 2.5rem 1.5rem 2rem; }
  .zahlavi--text { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .zahlavi { padding: 1.75rem 1rem 1.5rem; }
  .zahlavi--text { padding-bottom: 0; }
}