/*
 * Rozvrzeni: mrizka stranky, hlavicka, navigace, paticka, sekce.
 * Mobil je vychozi stav, sirsi obrazovky dostavaji vic pres @media.
 */

/* --- Kontejnery --- */

.obal {
  width: 100%;
  max-width: var(--sirka-obsahu);
  margin-inline: auto;
  padding-inline: var(--okraj-strany);
}

/* Seznamy v rozhrani si rozestupy resi pres gap. Spodni margin, ktery ma
   v base.css kazde li kvuli textovym seznamum, by se k nemu jen pricetl –
   a u vodorovnych seznamu navic udela seznam vyssi nez jeho jediny radek,
   takze odkazy sednou vys nez popisek nebo logo vedle nich. Drobecky to uz
   resi u sebe, tohle dorovnava zbytek. */
.weby-pruh-seznam li,
.navigace-seznam li,
.paticka-seznam li,
.paticka-pravni li { margin: 0; }

.obal-uzky {
  max-width: var(--sirka-uzka);
}

.sekce {
  padding-block: var(--sekce-svisle);
}

.sekce-tesna {
  padding-block: calc(var(--sekce-svisle) * 0.62);
}

.sekce-krem { background: var(--krem-200); }
.sekce-bila { background: var(--bila); }

.sekce-zelena {
  background: linear-gradient(160deg, var(--zelena-800), var(--zelena-900));
  color: var(--zelena-100);
}

.sekce-zelena h2,
.sekce-zelena h3 { color: var(--bila); }

/* --- Pruh s dalsimi weby skoly --- */

.weby-pruh {
  display: none;
  background: var(--zelena-900);
  color: var(--zelena-200);
  font-size: var(--velikost-mini);
}

/* Az od tabletu: na mobilu by pruh jen odsunul obsah pod ohyb,
   tam jsou tytez odkazy na konci rozbalovaci nabidky. */
@media (min-width: 48rem) {
  .weby-pruh { display: block; }
}

.weby-pruh-obsah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera-2) var(--mezera-4);
  min-height: 2.25rem;
}

.weby-pruh-popisek {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--zelena-300) 85%, transparent);
}

.weby-pruh-seznam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera-2) var(--mezera-5);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* Inline-block je tu podstatny: u obycejneho inline odkazu se svisly padding
   ani spodni linka nepromitnou do vysky radku, odkazy pak sedi vys nez
   popisek vedle nich a cely pruh vypada posunuty. */
.weby-pruh-seznam a {
  display: inline-block;
  color: var(--zelena-100);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--prechod), border-color var(--prechod);
}

.weby-pruh-seznam a:hover {
  color: var(--bila);
  border-bottom-color: var(--zelena-400);
}

/* --- Weby skoly uvnitr mobilni nabidky --- */

.navigace-weby {
  margin-top: var(--mezera-5);
  padding-top: var(--mezera-4);
  border-top: 1px solid var(--linka);
}

.navigace-weby-popisek {
  display: block;
  padding-inline: var(--mezera-4);
  margin-bottom: var(--mezera-2);
  font-size: var(--velikost-mini);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-svetly);
}

.navigace-weby .navigace-odkaz {
  font-weight: 500;
  color: var(--text-tlumeny);
}

@media (min-width: 62rem) {
  .navigace-weby { display: none; }
}

/* --- Hlavicka --- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: var(--nad-hlavicku);
  background: color-mix(in srgb, var(--krem-100) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--prechod), box-shadow var(--prechod),
              background-color var(--prechod);
}

/* Trida prida JS az pri odscrollovani – nahore ma hlavicka splynout. */
.hlavicka.je-odscrollovana {
  border-bottom-color: var(--linka);
  box-shadow: var(--stin-s);
  background: color-mix(in srgb, var(--krem-100) 95%, transparent);
}

.hlavicka-obsah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera-4);
  min-height: 4.25rem;
}

/* Logotyp uz nese nazev statku primo v krivkach, hlavicka proto vedle nej
   zadny text nema. Min-width dovoli, aby se v uzke hlavicce spis zmensil,
   nez aby nabidku vytlacil z radku. */
.znacka {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.znacka:hover { opacity: 0.8; }

.znacka-logo {
  width: 13.25rem;
  max-width: 100%;
  height: auto;
}

/* --- Navigace --- */

.navigace-prepinac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--linka);
  border-radius: var(--radius-m);
  background: var(--bila);
  color: var(--zelena-900);
  cursor: pointer;
  transition: background-color var(--prechod), border-color var(--prechod);
}

.navigace-prepinac:hover {
  background: var(--zelena-50);
  border-color: var(--zelena-300);
}

.navigace-prepinac svg { width: 1.5rem; height: 1.5rem; }
.navigace-prepinac .ikona-krizek { display: none; }
.navigace-prepinac[aria-expanded="true"] .ikona-krizek { display: block; }
.navigace-prepinac[aria-expanded="true"] .ikona-menu { display: none; }

/* Nabidka visi pod hlavickou. Absolutne vuci .hlavicka (ta je sticky, tedy
   pozicovana), takze sedi spravne i kdyz je nad hlavickou jeste pruh s weby. */
.navigace {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 74dvh;
  overflow-y: auto;
  background: var(--krem-100);
  border-bottom: 1px solid var(--linka);
  box-shadow: var(--stin-l);
  padding: var(--mezera-4) var(--okraj-strany) var(--mezera-6);
  /* Zavrena nabidka nesmi jit zamerit klavesnicí – proto display, ne jen posun. */
  display: none;
}

.navigace.je-otevrena {
  display: block;
  animation: nabidka-dolu 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes nabidka-dolu {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.navigace-seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mezera-1);
}

.navigace-odkaz {
  display: block;
  padding: var(--mezera-3) var(--mezera-4);
  border-radius: var(--radius-m);
  color: var(--zelena-900);
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--prechod), color var(--prechod);
}

.navigace-odkaz:hover { background: var(--zelena-100); }

.navigace-odkaz[aria-current="page"] {
  background: var(--zelena-600);
  color: var(--bila);
}

@media (min-width: 62rem) {
  .navigace-prepinac { display: none; }

  .navigace {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .navigace-seznam {
    flex-direction: row;
    align-items: center;
    gap: var(--mezera-1);
  }

  .navigace-odkaz {
    padding: var(--mezera-2) var(--mezera-4);
    font-size: var(--velikost-maly);
  }

  /* Vedle rozbalene nabidky je mista malo, logo proto roste az na sirsi
     obrazovce – jinak by se sedm polozek neveslo na radek. */
  .znacka-logo { width: 14.875rem; }
}

@media (min-width: 75rem) {
  .znacka-logo { width: 17.25rem; }
}

/* --- Paticka --- */

.paticka {
  background: var(--zelena-900);
  color: var(--zelena-200);
  padding-block: var(--mezera-8) var(--mezera-6);
  margin-top: auto;
}

.paticka a {
  color: var(--zelena-200);
  text-decoration-color: color-mix(in srgb, var(--zelena-300) 45%, transparent);
}

.paticka a:hover { color: var(--bila); }

.paticka h2 {
  font-size: 1rem;
  color: var(--bila);
  margin-bottom: var(--mezera-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paticka-mrizka {
  display: grid;
  gap: var(--mezera-7);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .paticka-mrizka { grid-template-columns: 1.4fr 1fr 1fr; }
}

.paticka-text {
  font-size: var(--velikost-maly);
  max-width: 26rem;
}

.paticka-seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mezera-2);
  font-size: var(--velikost-maly);
}

.paticka-znacka {
  display: flex;
  align-items: center;
  gap: var(--mezera-3);
  margin-bottom: var(--mezera-4);
}

.paticka-znacka img { width: 3rem; height: 3rem; }

.paticka-nazev {
  font-weight: 700;
  color: var(--bila);
  font-size: 1.05rem;
  line-height: 1.3;
}

.paticka-spodek {
  margin-top: var(--mezera-7);
  padding-top: var(--mezera-5);
  border-top: 1px solid color-mix(in srgb, var(--zelena-300) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-3) var(--mezera-6);
  justify-content: space-between;
  align-items: center;
  font-size: var(--velikost-mini);
  color: color-mix(in srgb, var(--zelena-200) 80%, transparent);
}

.paticka-pravni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-2) var(--mezera-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stranka drzi paticku dole i u kratkeho obsahu. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main { flex: 1 0 auto; }