/* ============================================================
   Jen to, co si vynutil WordPress.
   Vzhled patří do navrh.css (doslovná kopie návrhu B) — sem
   nepatří nic, co by mělo být i ve statickém náhledu.
   ============================================================ */

/* ---------- admin lišta ---------- */
/* Hlavička je position:sticky s top:0, takže by se schovala pod fixní lištu
   WordPressu. Pod 601 px si lišta přestane být fixní a odroluje pryč — tam
   se odsazení musí zase zrušit, jinak zůstane díra. */
body.admin-bar .site { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site { top: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .site { top: 0; }
}

/* Otevřené mobilní menu (position:fixed; inset:0) schválně nepřesouváme: jeho
   horní odsazení je --header-h + 1rem, tedy víc než 46px lišty, takže se položky
   pod lištu nedostanou. Lišta má navíc vyšší z-index a je krycí. */

/* ---------- přístupnost ---------- */
/* WordPress a WooCommerce vypisují popisky pro odečítače přes tuhle třídu. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--cream);
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ---------- obyčejná stránka a článek ---------- */
/* Návrh B žádnou textovou podstránku neobsahuje — sekce mají každá vlastní
   rozvržení. Tohle je střídmý společný podklad pro obsah z editoru
   (obchodní podmínky, GDPR, storno). Rozvržení podstránek přijde ve Fázi 3. */
.page-head {
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(1.5rem, 4vw, 3rem);
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}

.page-head__inner {
  width: min(100% - 2 * var(--pad), var(--container));
  margin-inline: auto;
}

.page-head h1 {
  font: 300 clamp(2.2rem, 6vw, 4rem)/1.05 var(--font-display);
  margin: 0;
  color: var(--ink);
}

.prose {
  width: min(100% - 2 * var(--pad), 68ch);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 10vw, 7rem);
  font-size: 1.05rem;
  line-height: 1.7;
}

.prose h2 {
  font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--font-display);
  margin: 2.2em 0 .6em;
  color: var(--ink);
}

.prose h3 {
  font: 500 1.15rem/1.3 var(--font-text);
  margin: 1.8em 0 .5em;
  color: var(--ink);
}

.prose a { color: var(--terakota-ink); text-underline-offset: .2em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.4em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: 2px; }

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--terakota);
  font: italic 300 1.25rem/1.5 var(--font-display);
  color: var(--muted);
}

/* Zarovnání z editoru WordPressu. */
.prose .alignleft { float: left; margin: .4em 1.6em 1em 0; }
.prose .alignright { float: right; margin: .4em 0 1em 1.6em; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignwide, .prose .alignfull { width: auto; max-width: 100%; }

/* ---------- stránky WooCommerce ---------- */
/* Zatím jen zasazení do rozvržení návrhu: šířka, odsazení pod lepivou hlavičku
   a písma. Vlastní rozvržení stránky termínu je Fáze 3 (viz woocommerce.php). */
.woo-obal {
  width: min(100% - 2 * var(--pad), var(--container));
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(4rem, 10vw, 7rem);
}

/* Na stránce košíku a pokladny je nad obsahem už .page-head s nadpisem,
   takže odsazení pod lepivou hlavičku je vyřešené a nesmí se sčítat. */
/* Výpis produktů (archiv typu kurzu): vyprodaný termín má tlačítko „Obsazeno“,
   ale s barvou hlavního tlačítka vypadal jako výzva k přihlášení. */
.products li.outofstock a.button {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

/* Stránka termínu má vlastní .container a odsazení (content-single-product.php). */
.woo-obal--termin { width: auto; padding: 0; }

.page-head + .woo-obal,
article > .woo-obal { padding-top: clamp(2rem, 5vw, 4rem); }

.woo-obal .product_title,
.woo-obal h1 {
  font: 300 clamp(2rem, 5vw, 3.2rem)/1.08 var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
}

.woo-obal h2 { font: 400 1.6rem/1.2 var(--font-display); color: var(--ink); }

.woo-obal .price,
.woo-obal .woocommerce-Price-amount {
  font: 500 1.4rem/1 var(--font-text);
  color: var(--terakota-ink);
}

/* Selektory schválně takhle ukecané: WooCommerce má pro hlavní tlačítko pravidlo
   `.woocommerce button.button.alt` (tři třídy + prvek). Cokoli slabšího prohraje
   a tlačítko zůstane fialové. Pořadí načtení řeší inc/aktiva.php. */
.woo-obal a.button,
.woo-obal button.button,
.woo-obal input.button,
.woo-obal a.button.alt,
.woo-obal button.button.alt,
.woo-obal input.button.alt,
.woo-obal button[type="submit"],
.woo-obal .wc-block-components-button:not(.is-link),
.woo-obal a.wc-block-components-button.wp-element-button,
.woo-obal button.wc-block-components-button.wp-element-button {
  background: var(--terakota);
  color: var(--cream);
  border: 1px solid var(--terakota);
  border-radius: 2px;
  padding: .95rem 1.7rem;
  font: 500 1rem/1 var(--font-text);
  cursor: pointer;
}

.woo-obal a.button:hover,
.woo-obal button.button:hover,
.woo-obal input.button:hover,
.woo-obal a.button.alt:hover,
.woo-obal button.button.alt:hover,
.woo-obal input.button.alt:hover,
.woo-obal button[type="submit"]:hover { background: var(--terakota-2); border-color: var(--terakota-2); }

.woo-obal .stock.out-of-stock { color: #b32d2e; }
.woo-obal .stock.in-stock { color: var(--les); }

/* ---------- stránka termínu ---------- */
/* Text vlevo, přihlašovací rámeček vpravo a lepivý — rozvržení, které v tomhle
   sektoru funguje: člověk čte, co kurz obnáší, a cena i volná místa mu přitom
   zůstanou na očích. */

.termin__hlava {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.termin__zpet {
  margin: 0 0 1.4rem;
  font-size: .9rem;
}

.termin__zpet a {
  color: var(--muted);
  text-decoration: none;
}

.termin__zpet a::before { content: "← "; }
.termin__zpet a:hover { color: var(--terakota-ink); }

.termin__hlava .eyebrow { margin-bottom: .8rem; }

.termin__nazev {
  font: 300 clamp(2.2rem, 6vw, 4rem)/1.05 var(--font-display);
  color: var(--ink);
  margin: 0 0 .3em;
  max-width: 18ch;
}

.termin__datum {
  font: 400 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--font-text);
  color: var(--terakota-ink);
  margin: 0;
}

.termin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem);
}

/* Rámeček je v HTML před textem (na telefonu tak cena a tlačítko stojí hned
   pod nadpisem); na desktopu ho mřížka pošle doprava.
   `align-self: stretch` je kvůli lepivosti: s `align-items: start` byl
   <aside> vysoký jen jako rámeček uvnitř, a `position: sticky` tak neměl
   kde jet — rámeček odjel nahoru s textem. */
.termin__box { grid-column: 2; grid-row: 1; align-self: stretch; }
.termin__text { grid-column: 1; grid-row: 1; }

.termin__perex p {
  font: 300 clamp(1.25rem, 2.4vw, 1.6rem)/1.45 var(--font-display);
  color: var(--ink);
  margin: 0 0 1.4rem;
}

.termin__popis p,
.termin__odstavec p,
.termin__vlastni p {
  max-width: 62ch;
  margin: 0 0 1.1em;
  line-height: 1.7;
}

.termin__odstavec,
.termin__vlastni { margin-top: clamp(2rem, 4vw, 3rem); }

.termin__odstavec h2,
.termin__vlastni h2 {
  font: 500 .74rem/1.4 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7em;
}

/* Nedopsané místo — vidí ho jen přihlášený editor, viz keramiko_text(). */
.chybi {
  background: #fff3cd;
  color: #7a5b00;
  border-bottom: 1px dashed #c9a227;
  padding: 0 .25em;
  font-size: .92em;
}

.chybi::before { content: "doplnit: "; opacity: .65; }

/* přihlašovací rámeček */
.termin__box-in {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.termin__mista {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-size: .95rem;
}

.termin__lektor {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.termin__lektor a { color: var(--ink); }

.termin__box-in .price,
.termin__box-in .woocommerce-Price-amount {
  display: block;
  font: 500 1.8rem/1 var(--font-text);
  color: var(--ink);
  margin: 0 0 1.2rem;
}

.termin__box-in form.cart { margin: 0 0 1rem; }

.termin__box-in .quantity { margin-bottom: .8rem; }

.termin__box-in .single_add_to_cart_button { width: 100%; }

.termin__box-in .stock { font-size: .9rem; }

.termin__cekacka {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  margin-top: .2rem;
}

.termin__cekacka p {
  margin: 0 0 .9rem;
  font-size: .92rem;
  line-height: 1.6;
}

.termin__cekacka .btn { width: 100%; justify-content: center; }

/* Výzva místo formuláře do košíku, dokud je prodej vypnutý (KERAMIKO_PRODEJ). */
.termin__bezprodeje p {
  margin: .9rem 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted);
}

.termin__bezprodeje .btn { width: 100%; justify-content: center; }

.termin__pozn {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.termin__dalsi {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem);
}

.termin__dalsi .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.termin__text a { color: var(--terakota-ink); text-underline-offset: .2em; }

/* formulář přímo na stránce termínu (parts/kontakt-formular.php) */
.termin__dotaz {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem);
}

.termin__dotaz-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.termin__dotaz-text p:not(.eyebrow) {
  color: var(--text);
  line-height: 1.65;
  max-width: 30rem;
  margin: 0;
}

@media (max-width: 860px) {
  .termin__grid { grid-template-columns: 1fr; }
  .termin__box,
  .termin__text { grid-column: auto; grid-row: auto; }
  .termin__box-in { position: static; }
  .termin__nazev { max-width: none; }
  /* Na telefonu šetřit výškou: cena a tlačítko mají být na první obrazovce
     i s lištou prohlížeče (390 × 664). */
  .termin__hlava { padding-top: calc(var(--header-h) + 1.5rem); }
  .termin__grid { padding-top: 1.5rem; }
  .termin__dotaz-in { grid-template-columns: 1fr; }
}

/* Nejnižší telefony (velký výřez do 700 px, tedy viditelných ~560): ještě o
   2 rem míň, ať je tlačítko celé vidět bez rolování. Práh se schválně měří
   proti velkému výřezu — media query jiný nezná. */
@media (max-width: 860px) and (max-height: 700px) {
  .termin__hlava { padding-top: calc(var(--header-h) + .5rem); }
  .termin__grid { padding-top: .5rem; }
}

/* Výsledek odeslání formuláře — jen z WordPressu, návrh neodesílá nic.
   Stojí nahoře ve formuláři: po odeslání se skáče na #dotaz, a hláška
   u tlačítka dole by na telefonu zůstala pod okrajem obrazovky. */
.form__notice {
  margin: 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--les);
  background: var(--cream-2);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
}

.form__notice--chyba { border-left-color: var(--terakota-ink); }

.form [aria-invalid="true"] { border-color: var(--terakota-ink); }

/* ---------- stránka lektora ---------- */

.lektor__hlava {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.lektor__jmeno {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.lektor__jmeno h1 {
  font: 300 clamp(2rem, 5vw, 3.4rem)/1.05 var(--font-display);
  color: var(--ink);
  margin: 0;
}

.ini--velka {
  width: clamp(3.4rem, 8vw, 5rem);
  height: clamp(3.4rem, 8vw, 5rem);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  flex: 0 0 auto;
}

.lektor__obor {
  margin: .4em 0 0;
  color: var(--muted);
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
}

.lektor__telo { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }

.lektor__bio p {
  max-width: 60ch;
  font: 300 clamp(1.15rem, 2.2vw, 1.45rem)/1.5 var(--font-display);
  color: var(--ink);
  margin: 0 0 1em;
}

.lektor__terminy { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem); }

.lektor__prazdno {
  max-width: 54ch;
  color: var(--muted);
}

/* ---------- 404 ---------- */
.notfound {
  width: min(100% - 2 * var(--pad), 56ch);
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(4rem, 12vw, 8rem)) 0 clamp(4rem, 10vw, 7rem);
  text-align: center;
}

.notfound h1 {
  font: 300 clamp(2.2rem, 6vw, 3.4rem)/1.1 var(--font-display);
  margin: 0 0 .6em;
  color: var(--ink);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ---------- stránka kurzu ---------- */

.kurz__hlava {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(1.8rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.kurz__nazev {
  font: 300 clamp(2.2rem, 6vw, 4rem)/1.05 var(--font-display);
  color: var(--ink);
  margin: 0 0 .4em;
  max-width: 18ch;
}

.kurz__perex p {
  font: 300 clamp(1.2rem, 2.3vw, 1.55rem)/1.45 var(--font-display);
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}

.kurz__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 17rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.kurz__text p { max-width: 62ch; margin: 0 0 1.1em; line-height: 1.7; }

.kurz__lektori h2 {
  font: 500 .74rem/1.4 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1em;
}

.kurz__lektori ul { list-style: none; margin: 0; padding: 0; }

.kurz__lektori li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
  font-size: .95rem;
}

.kurz__lektori a { color: var(--ink); }

.kurz__terminy {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem);
}

.kurz__terminy .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- přehled kurzů ---------- */

.kurzy-prehled { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem); }

.kurzy-prehled__uvod p {
  max-width: 60ch;
  font: 300 clamp(1.15rem, 2.2vw, 1.45rem)/1.5 var(--font-display);
  color: var(--ink);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.kurzy-prehled__seznam { list-style: none; margin: 0; padding: 0; }

.kurz-karta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 14rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
}

.kurz-karta:last-child { border-bottom: 1px solid var(--line); }

.kurz-karta h2 {
  font: 400 clamp(1.3rem, 2.6vw, 1.8rem)/1.2 var(--font-display);
  margin: 0 0 .35em;
}

.kurz-karta h2 a { color: var(--ink); text-decoration: none; }
.kurz-karta h2 a:hover { color: var(--terakota-ink); }

.kurz-karta__text p { max-width: 58ch; margin: 0; line-height: 1.6; }

.kurz-karta__termin { text-align: right; }

.kurz-karta__datum { margin: 0 0 .2em; font-size: .95rem; }
.kurz-karta__datum--mute { color: var(--muted); }
.kurz-karta__cena { margin: 0 0 .8em; font-weight: 500; }

@media (max-width: 860px) {
  .kurz__grid { grid-template-columns: 1fr; }
  .kurz__nazev { max-width: none; }
  .kurz-karta { grid-template-columns: 1fr; }
  .kurz-karta__termin { text-align: left; }
}

/* ---------- výběr ubytování u termínu ---------- */

.ubytovani-volba {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 1.2rem;
  padding: 1.1rem 0 0;
}

.ubytovani-volba legend {
  font: 500 .72rem/1.4 var(--font-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: .7rem;
}

.ubytovani-volba__radek {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem 0;
  cursor: pointer;
  font-size: .92rem;
}

.ubytovani-volba__radek input { margin-top: .25rem; flex: 0 0 auto; }
.ubytovani-volba__radek span { flex: 1 1 auto; }
.ubytovani-volba__radek b { display: block; font-weight: 500; color: var(--ink); }
.ubytovani-volba__radek small { display: block; color: var(--muted); font-size: .85em; }
.ubytovani-volba__radek i { font-style: normal; font-weight: 500; white-space: nowrap; }

.ubytovani-volba__pozn {
  margin: .6rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* ---------- prázdný kalendář ----------
   Stav mezi sezónami: termíny doběhly, nové ještě nejsou vypsané.
   V návrhu (navrhy/b-tyden/) obdobu nemá — statická stránka nikdy prázdná není. */
.terms__none {
  max-width: 46rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.terms__none-lead {
  margin: 0 0 .8rem;
  font: 400 italic clamp(1.5rem, 3.2vw, 2.1rem)/1.25 var(--font-display);
  color: var(--ink);
}

.terms__none-text {
  margin: 0 0 1.7rem;
  max-width: 42ch;
  line-height: 1.7;
  color: var(--muted);
}

.terms__none-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin: 0;
}

/* ---------- hero: <picture> ---------- */
/* Hero má ve WordPressu <picture> (výřez na výšku pro telefon, AVIF), návrh
   jen <img>. `display: contents` vrací <img> přímo do .hero__media, takže
   jeho `height: 100%` se dál počítá z rámu hero, jako v návrhu. */
.hero__media > picture { display: contents; }