/* ==========================================================================
   Základní škola Mladá Boleslav – hlavní stylopis
   Barevné schéma vychází z původního webu. Odstíny použité pro text
   a pro plochy s textem jsou ztmavené tak, aby splnily kontrastní poměr
   4,5 : 1 podle WCAG 2.1 AA (zákon č. 99/2019 Sb.).
   ========================================================================== */

/* --------------------------------------------------------------- proměnné */
:root {
  /* původní odstíny – dekorace, plochy bez textu */
  --cervena:        #de0000;
  --modra:          #00b0f0;
  --zelena:         #a1e60d;
  --oranzova:       #ff9500;

  /* ztmavené odstíny – text a plochy s textem (kontrast ≥ 4,5 : 1) */
  --cervena-t:      #c00000;
  --modra-t:        #00609f;
  --zelena-t:       #4d7300;
  --oranzova-t:     #a35200;

  /* neutrální */
  --modra-hlavicka: #0070c0;
  --zluta-cmelak:   #f9e116;   /* žlutá ze čmeláka v logu */
  --bezova:         #eeece1;
  --podklad:        #f3f3f1;
  --ramecek:        #dbdaCF;
  --text:           #3f3f3f;
  --text-slaby:     #5c5c5c;
  --bila:           #ffffff;

  --sirka:          1180px;
  --radius:         6px;
  --stin:           0 1px 3px rgba(0, 0, 0, .10);
  --stin-vyssi:     0 4px 14px rgba(0, 0, 0, .16);
}

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

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

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--podklad);
  overflow-wrap: break-word;
}

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

/* Video se musí vejít do svého sloupce – atributy width/height v HTML slouží
   jen jako pomůcka proti poskakování rozvržení při načítání. */
video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius);
}

/* ------------------------------------------------------- přeskočit na obsah */
.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--modra-hlavicka);
  color: var(--bila);
  font-weight: 700;
  text-decoration: none;
}
.preskocit:focus { left: 0; }
.preskocit:hover { color: var(--bila); }

/* ------------------------------------------------------------- viditelný fokus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--modra-hlavicka);
  outline-offset: 2px;
  border-radius: 2px;
}

.stranka {
  max-width: var(--sirka);
  margin: 1.25rem auto;
  background-color: var(--bezova);
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ------------------------------------------------------------------ hlavička */
.hlavicka {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background-color: var(--modra-hlavicka);
  color: var(--bila);
}

/* Logo se plynule přizpůsobuje šířce okna, není potřeba ho ladit
   v jednotlivých bodech zlomu. */
.hlavicka__logo {
  flex: 0 0 auto;
  width: clamp(86px, 14vw, 168px);
}
.hlavicka__logo img { width: 100%; }

.hlavicka__nazev {
  margin: 0;
  font-size: clamp(1.5rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--bila);
  text-align: right;
  margin-left: auto;
}
.hlavicka__nazev a { color: inherit; text-decoration: none; }

/* Po najetí myší zůstává název bílý a podtrhne se čmelákovou žlutou z loga.
   Bílou barvu je nutné zopakovat, jinak by ji přebilo obecné pravidlo a:hover
   a nadpis by na modrém poli ztmavl. */
.hlavicka__nazev a:hover,
.hlavicka__nazev a:focus-visible {
  color: var(--bila);
  text-decoration: underline;
  text-decoration-color: var(--zluta-cmelak);
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
}
.hlavicka__nazev span { display: block; }

/* --------------------------------------------------------------------- motto */
.motto {
  margin: 0;
  padding: .8rem 1.25rem;
  background-color: var(--cervena);
  color: var(--bila);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------------------- pásek */
.pasek-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .5rem;
  background-color: var(--bezova);
}
.pasek-foto img {
  width: 100%;
  aspect-ratio: 35 / 24;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ navigace */
.navigace { background-color: var(--bezova); }

.navigace__prepinac {
  display: none;
  width: calc(100% - 1rem);
  margin: .5rem;
  padding: .85rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--bila);
  background-color: var(--modra-hlavicka);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.navigace__prepinac::before {
  content: "☰";
  margin-right: .6rem;
  font-size: 1.15em;
}
.navigace__prepinac[aria-expanded="true"]::before { content: "✕"; }

.navigace__seznam {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: .5rem;
}

.navigace__odkaz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 150px;
  padding: .6rem 1.4rem;
  color: var(--bila);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  transition: box-shadow .15s ease;
}
/* Najetí myší ztmaví podklad a text podtrhne. Ztmavení je vnitřní stín, který
   se kreslí nad pozadím, ale pod textem – text tak zůstane čistě bílý.
   (Dřívější filter: brightness() barvil i text a ikonu.)
   Barvu je nutné zopakovat, jinak by ji přebilo obecné pravidlo a:hover. */
.navigace__odkaz:hover,
.navigace__odkaz:focus-visible {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .2);
  color: var(--bila);
  text-decoration: underline;
}

/* Aktuální stránka má prohozené barvy: bílá výplň, text a tenký rámeček
   v barvě tlačítka. Výplň i rámeček jsou vnitřní stín, takže si tlačítko
   zachová přesně stejný rozměr jako ostatní – nic z jeho plochy neubývá. */
.navigace__odkaz[aria-current="page"] {
  box-shadow:
    inset 0 0 0 2px currentColor,
    inset 0 0 0 999px var(--bila);
}
.navigace__odkaz.n-oranzova[aria-current="page"] { color: var(--oranzova-t); }
.navigace__odkaz.n-modra[aria-current="page"]    { color: var(--modra-t); }
.navigace__odkaz.n-cervena[aria-current="page"]  { color: var(--cervena-t); }
.navigace__odkaz.n-zelena[aria-current="page"]   { color: var(--zelena-t); }

/* Prohozené tlačítko si bílou výplň drží i po najetí myší, zvýrazní se podtržením */
.navigace__odkaz[aria-current="page"]:hover,
.navigace__odkaz[aria-current="page"]:focus-visible { text-decoration: underline; }

.n-oranzova { background-color: var(--oranzova-t); }
.n-modra    { background-color: var(--modra-t); }
.n-cervena  { background-color: var(--cervena-t); }
.n-zelena   { background-color: var(--zelena-t); }
.n-fb       { background-color: #1b3a70; }
.n-ig       { background-color: #c13584; }

/* poznámka „(externí web)“ uvnitř barevného tlačítka */
.navigace__odkaz .poznamka {
  font-size: .82rem;
  font-weight: 400;
  margin-left: .4rem;
  color: inherit;
}

/* ---------------------------------------- tlačítka sociálních sítí (jen ikona) */
.navigace__odkaz--ikona {
  min-width: 60px;
  padding: .6rem;
}
.navigace__odkaz--ikona .ikona {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--bila);
}

/* Text u ikony je skrytý jen vizuálně – odečítače obrazovky a našeptávače
   překladu s ním normálně pracují. Na malých displejích se zobrazí,
   protože rozbalená nabídka je tam svislý seznam. */
.popisek-ikony {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- podnavigace */
.podnavigace {
  background-color: var(--bezova);
  border-top: 1px solid var(--ramecek);
  border-bottom: 1px solid var(--ramecek);
}
.podnavigace__seznam {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: .6rem .5rem;
}
.podnavigace__odkaz {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3rem .85rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--bila);
  text-decoration: none;
  border-radius: 999px;
  transition: box-shadow .15s ease;
}
.podnavigace__odkaz:hover,
.podnavigace__odkaz:focus-visible {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .2);
  color: var(--bila);
  text-decoration: underline;
}
/* U oválných tlačítek podnavigace je aktivní stránka prohozená: bílá výplň
   a text v barvě tlačítka, orámovaný tenkou linkou téže barvy. Rozdíl proti
   ostatním tlačítkům je tak výrazný, samotné ztmavení by bylo příliš slabé.
   Vše je řešené vnitřním stínem, takže rozměr zůstává stejný. */
.podnavigace__odkaz[aria-current="page"] {
  box-shadow:
    inset 0 0 0 2px currentColor,
    inset 0 0 0 999px var(--bila);
  font-weight: 700;
}
.podnavigace__odkaz.d-modra[aria-current="page"]    { color: var(--modra-t); }
.podnavigace__odkaz.d-zelena[aria-current="page"]   { color: var(--zelena-t); }
.podnavigace__odkaz.d-oranzova[aria-current="page"] { color: var(--oranzova-t); }
.podnavigace__odkaz.d-cervena[aria-current="page"]  { color: var(--cervena-t); }

/* prohozené tlačítko si bílou výplň drží i po najetí myší, zvýrazní se podtržením */
.podnavigace__odkaz[aria-current="page"]:hover,
.podnavigace__odkaz[aria-current="page"]:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------- drobečky */
.drobecky {
  padding: .6rem 1.5rem 0;
  font-size: .9rem;
  color: var(--text-slaby);
}
.drobecky ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.drobecky li + li::before { content: "›"; margin-right: .35rem; }

/* ----------------------------------------------------------------- obsah */
.obsah {
  padding: 1.5rem;
  background-color: var(--bezova);
}

.obsah > :first-child { margin-top: 0; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin: 1.75rem 0 .75rem;
  font-weight: 700;
}
h1 { font-size: clamp(1.6rem, 3.6vw, 2.15rem); color: var(--cervena-t); margin-top: 0; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem);   color: var(--modra-t); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.4rem);  color: var(--zelena-t); }
h4 { font-size: 1.15rem; color: var(--oranzova-t); }
h5 { font-size: 1.05rem; color: var(--modra-t); }

p { margin: 0 0 1rem; }

a { color: var(--modra-t); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: var(--text); }

ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }
li { margin-bottom: .4rem; }

hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 2px solid var(--ramecek);
}

strong, b { font-weight: 700; color: var(--text); }

.uvodni-text { font-size: 1.1rem; }
.mensi { font-size: .92rem; color: var(--text-slaby); }

/* --------------------------------------------------------------- dvousloupec */
.sloupce {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Bez tohoto by měly položky mřížky min-width: auto a roztáhly by se podle
   přirozené šířky obsahu (video 640 px, široká tabulka) – sloupec by přetekl. */
.sloupce > * { min-width: 0; }

/* ------------------------------------------------------------------- karty */
.karta {
  background-color: var(--bila);
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--stin);
}
.karta > :first-child { margin-top: 0; }
.karta > :last-child { margin-bottom: 0; }

.karta--cervena  { border-top: 5px solid var(--cervena); }
.karta--modra    { border-top: 5px solid var(--modra); }
.karta--zelena   { border-top: 5px solid var(--zelena); }
.karta--oranzova { border-top: 5px solid var(--oranzova); }

/* --------------------------------------------------------------- aktuality */
.aktualita { margin-bottom: 1.75rem; }
.aktualita:last-child { margin-bottom: 0; }
.aktualita h3 { margin-top: 0; }

/* ----------------------------------------------------------- galerie obrázků */
.galerie {
  display: grid;
  /* auto-fit (ne auto-fill): když je fotek v řadě méně, roztáhnou se přes celou
     šířku místo toho, aby vpravo zůstalo prázdné místo. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.galerie li { margin: 0; }
/* Jednotný tvar dlaždic 4:3 - fotky na výšku i na šířku se tak zobrazí
   ve stejné velikosti a řada nepůsobí rozhozeně. Přebytek se ořízne. */
.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Logo se nesmí oříznout. Vejde se do dlaždice celé, zbytek plochy doplní
   bílá – dlaždice tak má stejnou velikost jako fotografie vedle ní. */
.galerie img.logo {
  object-fit: contain;
  background-color: var(--bila);
  padding: .85rem;
}

/* Řady po čtyřech fotkách: na užších displejích je hezčí mřížka 2 × 2
   než rozpadlé 3 + 1, na telefonu pak fotky pod sebou. */
@media (max-width: 980px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr; }
}

/* přehled alb ve fotogalerii */
.alba {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.alba li { margin: 0; }

.album {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bila);
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--stin);
  transition: transform .15s ease, box-shadow .15s ease;
}
.album:hover,
.album:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--stin-vyssi);
  color: var(--text);
}
.album img {
  width: 100%;
  aspect-ratio: 250 / 193;
  object-fit: cover;
  background: var(--podklad);
}
.album__popis {
  padding: .75rem .85rem;
  font-weight: 700;
  font-size: .98rem;
  border-top: 4px solid var(--modra);
}
.album--cervena  .album__popis { border-top-color: var(--cervena); }
.album--modra    .album__popis { border-top-color: var(--modra); }
.album--zelena   .album__popis { border-top-color: var(--zelena); }
.album--oranzova .album__popis { border-top-color: var(--oranzova); }

/* ------------------------------------------------------- dlaždice dokumentů */
.dlazdice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.dlazdice li { margin: 0; }

.dlazdice__odkaz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  height: 100%;
  min-height: 130px;
  padding: 1.25rem 1rem;
  color: var(--bila);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  transition: box-shadow .15s ease;
}
/* stejné chování jako u navigace – ztmavení podkladu, text zůstává bílý */
.dlazdice__odkaz:hover,
.dlazdice__odkaz:focus-visible {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .2);
  color: var(--bila);
  text-decoration: underline;
}
.dlazdice__odkaz .typ {
  font-size: .8rem;
  font-weight: 600;
  opacity: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* datum poslední aktualizace dokumentu na dlaždici */
.dlazdice__odkaz .datum {
  font-size: .78rem;
  font-weight: 400;
  opacity: .92;
}

.d-cervena  { background-color: var(--cervena-t); }
.d-modra    { background-color: var(--modra-t); }
.d-zelena   { background-color: var(--zelena-t); }
.d-oranzova { background-color: var(--oranzova-t); }

/* -------------------------------------------------------------- soubory / odkazy */
.seznam-souboru { list-style: none; margin: 1.25rem 0; padding: 0; }
.seznam-souboru li {
  margin: 0 0 .55rem;
  padding-left: 1.75rem;
  position: relative;
}
.seznam-souboru li::before {
  content: "📄";
  position: absolute;
  left: 0;
  top: 0;
}
.seznam-souboru a { font-weight: 600; }

.seznam-odkazu { list-style: none; margin: 1.25rem 0; padding: 0; }
.seznam-odkazu li { margin-bottom: .55rem; }

/* ----------------------------------------------------------------- tabulky */
.tabulka-obal {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
  background: var(--bila);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bila);
}
caption {
  padding: .75rem 1rem;
  font-weight: 700;
  text-align: left;
  color: var(--modra-t);
}
th, td {
  padding: .65rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ramecek);
}
th { background-color: #e5e2d5; font-weight: 700; color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background-color: #faf9f4; }

/* ------------------------------------------------------------------ kontakt */
.kontakt-polozka { margin-bottom: 1.25rem; }
.kontakt-polozka h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.kontakt-polozka p { margin: 0; }

.definice { margin: 0 0 1.25rem; }
.definice dt { font-weight: 700; color: var(--modra-t); margin-top: .75rem; }
.definice dd { margin: 0 0 .25rem; }

/* ---------------------------------------------------------------- rozbalovací */
details {
  margin-bottom: .75rem;
  background: var(--bila);
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
}
summary {
  padding: .85rem 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--modra-t);
}
details > *:not(summary) { padding: 0 1rem; }
details > *:last-child { padding-bottom: 1rem; }

/* ------------------------------------------------------------------- tlačítko */
.tlacitko {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.4rem;
  background-color: var(--modra-t);
  color: var(--bila);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.tlacitko:hover,
.tlacitko:focus-visible {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .2);
  color: var(--bila);
  text-decoration: underline;
}
/* --------------------------------------- svislý seznam odkazů na soc. sítě */
/* Bez barevných podkladů – běžné textové odkazy. Barvu textu dědí od okolí:
   v obsahu tmavě modrá (--modra-t), v patičce bílá (viz .paticka a).
   Obě varianty splňují kontrast ≥ 4,5 : 1. */
.socialni {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.socialni li { margin: 0; }
.socialni a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* pohodlný cíl pro dotyk */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* --------------------------------------------------------------- upozornění */
.upozorneni {
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: #fff8e6;
  border-left: 5px solid var(--oranzova);
  border-radius: var(--radius);
}
.upozorneni > :last-child { margin-bottom: 0; }

/* Plakáty povinné publicity, certifikáty a loga partnerů – jednotná mřížka
   přes celou šířku stránky, každá položka nejvýše 330 px široká. */
.plakaty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 330px));
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.plakaty li { margin: 0; }
.plakaty a { display: block; }
.plakaty img {
  width: 100%;
  border: 1px solid var(--ramecek);
  border-radius: var(--radius);
  background: var(--bila);
  box-shadow: var(--stin);
}
.plakaty a:hover img,
.plakaty a:focus-visible img { box-shadow: var(--stin-vyssi); }

/* --------------------------------------------------------------------- patička */
.paticka {
  background-color: var(--modra-hlavicka);
  color: var(--bila);
  padding: 2rem 1.5rem 1.5rem;
}
.paticka a { color: var(--bila); text-decoration: underline; }
.paticka a:hover { color: #ffe7a8; }

.paticka__mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  max-width: var(--sirka);
  margin: 0 auto;
}
.paticka h2 {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  color: var(--bila);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.paticka ul { list-style: none; margin: 0; padding: 0; }
.paticka li { margin-bottom: .4rem; }
.paticka p { margin: 0 0 .4rem; }

.paticka__copyright {
  max-width: var(--sirka);
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: .9rem;
  text-align: center;
}

/* ============================================================ responzivita */
@media (max-width: 760px) {
  .stranka { margin: 0; border: 0; border-radius: 0; }

  .hlavicka { padding: .85rem 1rem; }
  .hlavicka__nazev { font-size: 1.35rem; }

  .motto { font-size: .95rem; padding: .7rem 1rem; }

  .pasek-foto { grid-template-columns: 1fr; }
  .pasek-foto img:nth-child(n + 2) { display: none; }

  .navigace__prepinac { display: block; }

  .navigace__seznam {
    display: none;
    flex-direction: column;
    padding: 0 .5rem .5rem;
  }
  .navigace__seznam.je-otevrene { display: flex; }
  .navigace__odkaz { width: 100%; justify-content: flex-start; }

  /* v rozbalené nabídce dáváme k ikoně i text */
  .navigace__odkaz--ikona { gap: .7rem; padding: .6rem 1.4rem; }
  .popisek-ikony {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }

  .obsah { padding: 1rem; }
  .drobecky { padding: .6rem 1rem 0; }

  .paticka { padding: 1.5rem 1rem 1rem; }
}

@media (max-width: 420px) {
  .alba,
  .dlazdice,
  .galerie { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ omezený pohyb / tisk */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .navigace, .podnavigace, .pasek-foto, .preskocit, .drobecky { display: none; }
  body, .stranka, .obsah { background: #fff; color: #000; }
  .stranka { border: 0; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; }
}