/* ==========================================================================
   pages.css - obsahove (staticke) stranky

   Poradi v hlavicce: az za mth-base.css (bere z nej promenne i .mth-btn).
   Muze byt kdekoli za nim, na poradi vuci fixes.css nezalezi.

   Nahrazuje <style> bloky, ktere byly nalepene primo v obsahu kazde stranky.
   Ty se pri prepisu HTML mazou - tenhle soubor je jejich nahrada pro vsechny
   stranky naraz, v obou mutacich.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Obalka stranky
   --------------------------------------------------------------------------
   Meritko textu drzi kolem 68 znaku na radek. Delsi radky se hur cte -
   oko ztraci navaznost pri skoku na dalsi radek.

   text-align: left je zamerne: puvodni obsah mel na vetsine odstavcu inline
   `text-align: justify`, coz na uzkem mobilu roztahuje mezislovni mezery
   do "rek". Prepis inline styly odstranuje, tohle je pojistka.
   -------------------------------------------------------------------------- */
.mth-page {
  font-family: var(--mth-font-body);
  color: var(--mth-ink-soft);
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}

/* Reset s NULOVOU specificitou. :where() do vahy selektoru nepridava nic,
   takze `.mth-page :where(p)` zustava na 0-1-0 a rytmicke pravidlo nize ho
   prebije poradim. Kdyby tu bylo `.mth-page p { margin: 0 }` (0-1-1), vyhral
   by reset a po sobe jdouci odstavce by nemely mezeru vubec. */
.mth-page :where(p, h2, h3, h4, ul, ol, figure, blockquote) {
  margin: 0;
}

.mth-page > * + * {
  margin-top: 22px;
}

/* Pojistka pro obrazky s pevnou sirkou v atributu.
   Legacy obsah ma napr. <img width="600"> u dekorativnich oddelovacu - bez
   max-width takovy obrazek na 375px displeji pretece o 245 px a rozjede
   celou stranku do strany.

   :where() ma nulovou specificitu, takze komponenty (.mth-page__shot img
   s height: 100 %, karty a dalsi) tohle pravidlo prebiji bez souboje. */
.mth-page :where(img, video, iframe, table) {
  max-width: 100%;
  height: auto;
}

.mth-page p {
  max-width: 68ch;
}

/* :not(.mth-btn) je zasadni - tlacitko je taky <a>, takze bez teto vyjimky
   by `.mth-page a` (0-1-1) prebilo barvu z .mth-btn--primary (0-1-0)
   a text tlacitka by mel barvu pozadi tlacitka. */
/* Odkazy pouzivaji --mth-brown-dark, ne --mth-brown. Duvod je kontrast:
     --mth-brown      #bd5928  na bile 4,54:1  na kremove 4,13:1  <- pod limitem
     --mth-brown-dark #a44a20  na bile 5,87:1  na kremove 5,33:1
   Obsahove stranky maji hodne kremovych panelu, kde svetlejsi hneda
   nesplnuje AA (4,5:1). Token uz v systemu je (pouziva se na hover),
   takze to zustava v brandu.

   Kdyby se melo vratit puvodni odstinu, staci prehodit zpet na --mth-brown.

   :not(.mth-btn) - tlacitko je taky <a>; bez vyjimky by dostalo barvu
   odkazu misto barvy tlacitka. */
.mth-page a:not(.mth-btn) {
  color: var(--mth-brown-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mth-page a:not(.mth-btn):hover {
  color: var(--mth-brown);
}

.mth-page strong {
  color: var(--mth-ink);
  font-weight: 600;
}


/* ------------------------------- nadpisy --------------------------------- */
.mth-page h2 {
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mth-ink);
  text-wrap: balance;
}
/* Vetsi mezera NAD nadpisem nez pod nim - nadpis tak opticky patri
   k textu, ktery nasleduje, ne k tomu pred nim. */
.mth-page > h2 {
  margin-top: 52px;
}
.mth-page > h2 + * {
  margin-top: 16px;
}

.mth-page h3 {
  font-family: var(--mth-font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--mth-ink);
}
.mth-page > h3 {
  margin-top: 36px;
}


/* --------------------------------------------------------------------------
   Uvod stranky - portret + perex
   --------------------------------------------------------------------------
   Puvodne to byl `<img style="float: left">` primo v odstavci. Float se na
   mobilu chova spatne (text se lame na par znaku vedle obrazku), proto grid.

   Portrety jsou prorezane PNG s alfou (600x700), takze pod nimi je kremovy
   panel - jinak by postava "plavala" v prazdnu.
   -------------------------------------------------------------------------- */
.mth-page__lead {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.mth-page__portrait {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
  overflow: hidden;
  aspect-ratio: 6 / 7;
}
.mth-page__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.mth-page__lead-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mth-page__lead-text > * {
  margin: 0;
}

/* prvni veta perexu je o stupen vetsi - dela vstup do textu */
.mth-page__lead-text .mth-page__perex {
  font-size: 20px;
  line-height: 1.55;
  color: var(--mth-ink);
}
.mth-page__lead-text em {
  /* stejny duvod jako u odkazu - svetlejsi hneda nesplnuje AA */
  color: var(--mth-brown-dark);
  font-style: normal;
  font-size: 16px;
}


/* --------------------------------------------------------------------------
   Galerie fotek
   --------------------------------------------------------------------------
   Puvodni `.style_prevu_kitFoto-galf:hover { transform: scale(1.05) }` zvetsoval
   CELY prvek, takze fotka pri najeti prelezla sousedni. Tady se zvetsuje
   obrazek UVNITR ramu, ktery ma overflow: hidden - rozmery mrizky se nehnou.
   -------------------------------------------------------------------------- */
.mth-page__gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 16px;
}

.mth-page__shot {
  display: block;
  border-radius: var(--mth-radius);
  overflow: hidden;
  background: var(--mth-cream);
  aspect-ratio: 1 / 1;
}
.mth-page__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.mth-page__shot:hover img,
.mth-page__shot:focus-visible img {
  transform: scale(1.06);
}
.mth-page__shot:focus-visible {
  outline: 2px solid var(--mth-brown);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Zvyrazneny blok
   --------------------------------------------------------------------------
   Puvodne `.left-yellow-border-box` - jen zluta linka vlevo, bez pozadi.
   Ta linka je dobry napad, tak zustava; pribyla kremova vypln a radius,
   aby blok sedel do zbytku webu (stejny vzor jako .mth-story__card).
   -------------------------------------------------------------------------- */
.mth-page__note {
  padding: 28px 32px;
  background: var(--mth-cream);
  border-left: 4px solid var(--mth-yellow);
  border-radius: 6px var(--mth-radius) var(--mth-radius) 6px;
}
.mth-page__note > * + * {
  margin-top: 14px;
}
.mth-page__note h2 {
  font-size: 27px;
}


/* ------------------------------- tlacitka -------------------------------- */
/* .mth-btn a .mth-btn--primary jsou uz v mth-base.css - tady jen odsazeni. */
.mth-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mth-page__actions .mth-btn {
  text-decoration: none;
}


/* ==========================================================================
   Responzivita - breakpointy 1279 / 991 / 639 dle konvence modulu
   ========================================================================== */

@media (max-width: 1279px) {
  .mth-page__lead {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .mth-page__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mth-page h2 {
    font-size: 27px;
  }
  .mth-page > h2 {
    margin-top: 42px;
  }
  .mth-page__note {
    padding: 24px 24px;
  }
}

@media (max-width: 639px) {
  .mth-page {
    font-size: 16px;
  }
  /* Portret nad textem, ale ne pres celou sirku - prorezana postava
     roztazena na 100 % vypada nepatricne. */
  .mth-page__lead {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .mth-page__portrait {
    width: 180px;
  }
  .mth-page__lead-text .mth-page__perex {
    font-size: 18px;
  }
  .mth-page h2 {
    font-size: 24px;
  }
  .mth-page__note {
    padding: 20px 18px;
  }
  .mth-page__actions .mth-btn {
    width: 100%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .mth-page__shot img {
    transition: none;
  }
  .mth-page__shot:hover img,
  .mth-page__shot:focus-visible img {
    transform: none;
  }
}


/* ==========================================================================
   DALSI KOMPONENTY - mapovani zbylych legacy vzoru
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel (div-pozadi-sede / div-pozadi-hnede / div-ram-tmavehnedy)
   --------------------------------------------------------------------------
   Puvodne sedy #f5f5f5 bez radiusu. Kremova z design systemu sedne k webu
   lip nez neutralni seda, ktera na strance pusobila jako cizorody prvek.
   -------------------------------------------------------------------------- */
.mth-page__panel {
  padding: 26px 32px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
}
.mth-page__panel > * + * {
  margin-top: 14px;
}

.mth-page__panel--dark {
  background: #3e160f;
  color: #f3e7d8;
}
.mth-page__panel--dark h2,
.mth-page__panel--dark h3,
.mth-page__panel--dark h4,
.mth-page__panel--dark strong {
  color: #fff;
}
/* :not(.mth-btn) ze stejneho duvodu jako u .mth-page a - tlacitko je taky
   <a>, takze by bez vyjimky dostalo zlutou na hnedem pozadi (2,56:1).
   Zatim to nebylo videt jen proto, ze legacy obsah ma text tlacitek
   obaleny v <strong>, ktery si bere bilou. */
.mth-page__panel--dark a:not(.mth-btn) {
  color: var(--mth-yellow);
}
.mth-page__panel--dark a:not(.mth-btn):hover {
  color: #fff;
}

/* Panel s tlacitkem vpravo nahore - puvodne to byl float: right uvnitr textu,
   ktery se na mobilu lamal do textu. Grid to resi bez floatu. */
.mth-page__panel--with-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: start;
}
.mth-page__panel--with-action > .mth-page__actions {
  grid-column: 2;
  grid-row: 1;
}
.mth-page__panel--with-action > *:not(.mth-page__actions) {
  grid-column: 1;
}


/* --------------------------------------------------------------------------
   Ramecek se zlutymi rohy (div-zlute-rohy)
   --------------------------------------------------------------------------
   Zustava princip - jen dva protilehle rohy, ne cely ramecek - ale vykresluji
   se borderem na pseudoelementech, takze nepretekaji obsah.
   -------------------------------------------------------------------------- */
.mth-page__frame {
  position: relative;
  padding: 32px 34px;
}
.mth-page__frame::before,
.mth-page__frame::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  border: 4px solid var(--mth-yellow);
}
.mth-page__frame::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.mth-page__frame::after {
  right: 0;
  bottom: 0;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 8px 0;
}
.mth-page__frame > * + * {
  margin-top: 16px;
}


/* --------------------------------------------------------------------------
   Dva sloupce (flex-container-clnk + div-Lclnk / div-Rclnk)
   --------------------------------------------------------------------------
   Puvodne float: left / float: right. Na mobilu se sloupce nezalamovaly
   spolehlive a text obtekal, kam nemel. Grid stohuje cistě.
   -------------------------------------------------------------------------- */
.mth-page__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.mth-page__cols > * > * + * {
  margin-top: 16px;
}
.mth-page__cols p {
  max-width: none;
}


/* --------------------------------------------------------------------------
   Mrizka karet (flex-container-gal5 / flex-container-card4)
   --------------------------------------------------------------------------
   Pocet sloupcu se ridi promennou --cols primo v HTML:
     <div class="mth-page__cards" style="--cols: 5">
   -------------------------------------------------------------------------- */
.mth-page__cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.mth-page__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
}
.mth-page__card > * {
  margin: 0;
}
.mth-page__card h4 {
  font-family: var(--mth-font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mth-ink);
}
.mth-page__card p {
  font-size: 15px;
  line-height: 1.6;
  max-width: none;
}
.mth-page__card ul {
  font-size: 15px;
}

/* Nahled dokumentu v karte. Na rozdil od fotogalerie se NEOREZAVA -
   certifikat musi byt videt cely. */
.mth-page__doc {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.mth-page__doc img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}
.mth-page__doc:hover img {
  transform: scale(1.04);
}


/* --------------------------------------------------------------------------
   Radek s nahledem (ambasadori, prehled medu)
   --------------------------------------------------------------------------
   Puvodne to byl <h3> s plovoucim obrazkem uvnitr - nadpis tim narostl do
   vysky obrazku a nasledujici text se lamal kolem nej. Grid to rozdeli
   na dva sloupce a na mobilu slozi pod sebe.
   -------------------------------------------------------------------------- */
.mth-page__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.mth-page__row-media {
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
  overflow: hidden;
}
.mth-page__row-media img {
  display: block;
  width: 100%;
  height: auto;
}
.mth-page__row-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mth-page__row-body > * {
  margin: 0;
}


/* --------------------------------------------------------------------------
   Tabulky
   --------------------------------------------------------------------------
   Puvodni obsah na to upozornoval textem "Na telefonu se v tabulce posouvejte
   pohybem do strany". Obalka s overflow-x to resi tak, ze roluje SAMA TABULKA
   - stranka se do strany nehne.
   -------------------------------------------------------------------------- */
.mth-page__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--mth-radius);
  border: 1px solid var(--mth-line);
}
.mth-page__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
}
.mth-page__table td,
.mth-page__table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mth-line);
  text-align: left;
  vertical-align: top;
}
/* prvni radek je zahlavi, i kdyz je v HTML jako <td> */
.mth-page__table tr:first-child td {
  background: var(--mth-cream);
  font-weight: 600;
  color: var(--mth-ink);
  white-space: nowrap;
}
.mth-page__table tr:last-child td {
  border-bottom: 0;
}
.mth-page__table td:first-child {
  font-weight: 600;
  color: var(--mth-ink);
}


/* ------------------------------- seznamy --------------------------------- */
.mth-page ul,
.mth-page ol {
  padding-left: 22px;
  max-width: 68ch;
}
.mth-page li + li {
  margin-top: 7px;
}
.mth-page li::marker {
  color: var(--mth-brown);
}
.mth-page ul ul,
.mth-page ol ol,
.mth-page ul ol,
.mth-page ol ul {
  margin-top: 7px;
}


/* -------------------------------- video ---------------------------------- */
.mth-page__video {
  border-radius: var(--mth-radius);
  overflow: hidden;
  background: var(--mth-cream);
}
.mth-page__video video {
  display: block;
  width: 100%;
  height: auto;
}


/* ------------------------------- oddelovac ------------------------------- */
.mth-page hr {
  height: 1px;
  border: 0;
  background: var(--mth-line);
  margin: 0;
}


/* -------------------------- obrazek v textu ------------------------------ */
/* Puvodne style="float: right" primo v odstavci - na mobilu se text lamal
   na par znaku vedle obrazku. Na uzkem displeji float mizi uplne. */
.mth-page__aside {
  float: right;
  width: 160px;
  margin: 0 0 16px 28px;
}
.mth-page__aside img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   Responzivita doplnenych komponent
   ========================================================================== */

@media (max-width: 991px) {
  .mth-page__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mth-page__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mth-page__panel,
  .mth-page__frame {
    padding: 22px 24px;
  }
  .mth-page__panel--with-action {
    grid-template-columns: 1fr;
  }
  .mth-page__panel--with-action > .mth-page__actions {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 639px) {
  .mth-page__cards {
    grid-template-columns: 1fr;
  }
  .mth-page__row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }
  .mth-page__frame {
    padding: 28px 22px;
  }
  .mth-page__frame::before,
  .mth-page__frame::after {
    width: 30px;
    height: 30px;
  }
  .mth-page__aside {
    float: none;
    width: 140px;
    margin: 0 0 16px;
  }
  .mth-page__table {
    font-size: 14px;
  }
}

/* Pomer 7:3 - text vlevo, video vpravo (flex-container-clnk-pomer73) */
.mth-page__cols--73 {
  grid-template-columns: 7fr 3fr;
}
@media (max-width: 991px) {
  .mth-page__cols--73 {
    grid-template-columns: 1fr;
  }
}

/* Pomer 3:7 - video vlevo, text vpravo (obracene poradi flex-item-B / -A) */
.mth-page__cols--37 {
  grid-template-columns: 3fr 7fr;
}
@media (max-width: 991px) {
  .mth-page__cols--37 {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Nativni Shoptet galerie (plus-gallery-wrap)
   --------------------------------------------------------------------------
   Tridy jsou Shoptetu, ne nase - proto se NEPREJMENOVAVAJI. Puvodne mela
   kazda dlazdice inline `height: 200px; width: 200px`, takze se mrizka
   na mobilu nezmensovala a pretekala. Inline rozmery se pri prepisu
   odstranuji a velikost ridi grid.
   -------------------------------------------------------------------------- */
.mth-page .plus-gallery-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.mth-page .plus-gallery-item {
  width: auto;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mth-cream);
  aspect-ratio: 1 / 1;
}
.mth-page .plus-gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.mth-page .plus-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.mth-page .plus-gallery-item a:hover img {
  transform: scale(1.06);
}

@media (max-width: 639px) {
  .mth-page .plus-gallery-wrap {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mth-page .plus-gallery-item img {
    transition: none;
  }
  .mth-page .plus-gallery-item a:hover img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Ramecek kolem formulare (div-ram-cerny)
   --------------------------------------------------------------------------
   Uvnitr je Shoptet placeholder #FORM[code=contact]#, ktery se nahrazuje
   az pri vykresleni - obsah proto nesmi nic prepisovat.
   -------------------------------------------------------------------------- */
.mth-page__formbox {
  padding: 26px 28px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
}

/* obrazky uvnitr karet (cleni tymu) - prorezane PNG na svetlem podkladu */
.mth-page__card > p > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 991px) {
  .mth-page__formbox {
    padding: 22px 20px;
  }
}


/* --------------------------------------------------------------------------
   Oprava kontrastu v tlacitkach
   --------------------------------------------------------------------------
   Legacy obsah ma text tlacitek obaleny v <strong>. Pravidlo
   `.mth-page strong { color: var(--mth-ink) }` (0-1-1) prebiji barvu, kterou
   tlacitko dedi z .mth-btn--primary (0-1-0) - text pak byl tmavy na hnede.
   Uvnitr tlacitka ma <strong> drzet barvu tlacitka, ne barvu textu stranky.
   -------------------------------------------------------------------------- */
.mth-page .mth-btn strong,
.mth-page .mth-btn b {
  color: inherit;
  font-weight: inherit;
}

/* Sirka obrazku v textu se prebira z puvodniho atributu width
   (byla 90 az 300 px podle mista), fallback 150 px.

   display: block je nutne - .mth-page__aside je <span>, tedy inline, a na
   inline prvku `width` nedela vubec nic. Na desktopu to zachranoval float
   (ten dela z prvku blok), ale jakmile se na mobilu float vypne, obrazek
   se roztahl na svou prirozenou velikost. */
.mth-page__aside {
  display: block;
  width: var(--aside-w, 150px);
}


/* --------------------------------------------------------------------------
   Legacy pomocne tridy pro sirku videa
   --------------------------------------------------------------------------
   responsive-video80p / -400 / -600 nastavovaly pevnou sirku (80 %, 400 px,
   600 px) s vlastnim breakpointem. Sirku ted ridi .mth-page__video, resp.
   sloupec, ve kterem lezi - tyhle tridy se proto jen zneskodnuji, aby
   nezustaly viset po odstraneni puvodnich <style> bloku.
   -------------------------------------------------------------------------- */
.mth-page [class*="responsive-video"] {
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   /poznejte-nase-medy/ - skryty vypis clanku
   --------------------------------------------------------------------------
   Stranka je typu posts-listing, takze pod obsahem Shoptet vypisuje clanky.
   Puvodni obsah je schovaval pravidlem `#newsWrapper { display: none }`
   nalepenym v <style> primo ve strance.

   To NENI dekorace, ale funkce - proto se pri prepisu prenasi sem, misto
   aby se s ostatnimi bloky zahodilo. Scopovane na tuhle stranku, jinde
   se vypis clanku schovavat nesmi.
   -------------------------------------------------------------------------- */
body.in-poznejte-nase-medy #newsWrapper {
  display: none !important;
}


/* ==========================================================================
   Prebiti Apollo barvy textu
   --------------------------------------------------------------------------
   Apollo vynucuje uvnitr obsahu `color: #0f0f0f !important` na <p> a <li>.
   Overeno empiricky (main.css je cross-origin, do pravidel nevidim):
     .mth-page__panel--dark p              -> zustane #0f0f0f
     .mth-page .mth-page__panel--dark p    -> zustane #0f0f0f
     #content .mth-page__panel--dark p     -> zustane #0f0f0f
     ... !important                        -> projde

   !important tu tedy neni lenost, ale jedina cesta - prebit !important jde
   jenom dalsim !important.

   DVA DUSLEDKY:
   1) Na tmavem panelu byla cerna na tmave hnede = necitelne.
   2) Na vsech obsahovych strankach tise prebijelo --mth-ink-soft z design
      systemu, takze text byl Apollo-cerny misto brandove teple hnede.

   Rozsah je zamerne omezeny na .mth-page - mimo prepsane stranky se nic nemeni.
   ========================================================================== */

.mth-page p,
.mth-page li,
.mth-page td,
.mth-page dd,
.mth-page dt {
  color: var(--mth-ink-soft) !important;
}

/* Tmavy panel - svetly text na tmavem podkladu.
   Vyssi specificita nez pravidlo vyse, takze staci stejna sila. */
.mth-page__panel--dark p,
.mth-page__panel--dark li,
.mth-page__panel--dark td {
  color: #f3e7d8 !important;
}
.mth-page__panel--dark h2,
.mth-page__panel--dark h3,
.mth-page__panel--dark h4,
.mth-page__panel--dark strong,
.mth-page__panel--dark b {
  color: #fff !important;
}
.mth-page__panel--dark li::marker {
  color: var(--mth-yellow);
}


/* ==========================================================================
   INFORMACNI KOMPONENTY
   --------------------------------------------------------------------------
   Nejde o dalsi obaly na text, ale o zpusoby, jak ukazat KONKRETNI TYP
   informace: volbu, cenik, sadu stitku. Odrazky to vsechno umi zobrazit,
   ale neumi to odlisit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Volba (zpusob dopravy, varianta baleni ...)
   --------------------------------------------------------------------------
   Karta, kde je CENA HRDINOU - to je udaj, kvuli kteremu clovek na stranku
   prisel. Nazev nad ni, podminky pod ni, drobnym.
   -------------------------------------------------------------------------- */
.mth-page__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.mth-page__option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 26px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
}
.mth-page__option > * {
  margin: 0;
}

.mth-page__option-name {
  font-family: var(--mth-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--mth-ink-soft);
}

/* Cena ve Faculty Glyphic - stejny hlas jako nadpisy sekci, takze cislo
   pusobi jako soucast znacky, ne jako udaj z tabulky. */
.mth-page__price {
  font-family: var(--mth-font-head);
  font-size: 34px;
  line-height: 1;
  color: var(--mth-ink);
  font-variant-numeric: tabular-nums;
}
.mth-page__price--free {
  color: var(--mth-brown-dark);
}

.mth-page__option-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mth-ink-soft);
  max-width: none;
}
.mth-page__option-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mth-line);
  font-size: 13px;
  color: var(--mth-ink-soft);
}


/* --------------------------------------------------------------------------
   Cenik (zeme a ceny)
   --------------------------------------------------------------------------
   Jedenact zemi v zanorenych odrazkach se necte - oko musi u kazde radky
   preskocit pres oddelovac. Mrizka postavi ceny pod sebe, takze se daji
   porovnat pohledem.
   -------------------------------------------------------------------------- */
.mth-page__pricelist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 24px;
}

.mth-page__pricerow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--mth-line);
}
.mth-page__pricerow > span:first-child {
  flex: 1 1 auto;
  font-size: 15px;
}
/* tecky mezi nazvem a cenou - oko po nich prejde bez ztraty radku */
.mth-page__pricerow::after {
  content: "";
  order: 1;
  flex: 0 1 auto;
}
.mth-page__pricerow .mth-page__priceval {
  font-weight: 600;
  color: var(--mth-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Stitky (platebni metody)
   --------------------------------------------------------------------------
   Sada rovnocennych moznosti. Odrazky naznacuji poradi nebo dulezitost,
   stitky ne - a presne o to jde.
   -------------------------------------------------------------------------- */
.mth-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mth-page__chip {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--mth-cream);
  font-size: 15px;
  font-weight: 500;
  color: var(--mth-ink);
}


/* --------------------------------------------------------------------------
   Zvyrazneny udaj v textu (prah dopravy zdarma apod.)
   -------------------------------------------------------------------------- */
.mth-page__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--mth-yellow);
  color: var(--mth-ink);
  font-weight: 600;
}


@media (max-width: 639px) {
  .mth-page__options {
    grid-template-columns: 1fr;
  }
  .mth-page__option {
    padding: 20px 22px;
  }
  .mth-page__price {
    font-size: 30px;
  }
  .mth-page__pricelist {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Float nesmi utect z odstavce
   --------------------------------------------------------------------------
   .mth-page__aside je float: right. Blokovy prvek, ktery tvori novy
   formatovaci kontext (grid, flex, overflow), se floatu NEVYHNE podtecenim,
   ale ZUZI SE, aby se vedle nej vesel. Mrizka karet tim dostala 587 px
   misto 1358.

   flow-root uzavre float do odstavce, kde vznikl. clear na komponentach
   je pojistka pro pripad, ze by :has() nekde nefungovalo.
   -------------------------------------------------------------------------- */
.mth-page p:has(> .mth-page__aside) {
  display: flow-root;
}

.mth-page__options,
.mth-page__cards,
.mth-page__gallery,
.mth-page__cols,
.mth-page__table,
.mth-page__pricelist,
.mth-page__chips {
  clear: both;
}


/* --------------------------------------------------------------------------
   Vyhody (kratke body, ktere nejsou volba)
   --------------------------------------------------------------------------
   Lehci nez karta - jen linka nahore a text. Zamerne slabsi hlas nez
   .mth-page__option, aby si obe mrizky na jedne strance nekonkurovaly.
   -------------------------------------------------------------------------- */
.mth-page__perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 28px;
  clear: both;
}
.mth-page__perk {
  padding-top: 14px;
  border-top: 2px solid var(--mth-yellow);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mth-ink-soft);
}

/* Zvyraznena volba - nejlepsi uroven vernostniho programu apod. */
.mth-page__option--highlight {
  /* Stejna tmava jako .mth-page__panel--dark. --mth-brown (#bd5928) je na
     kremovy text moc svetla: 3,73:1, a zluta cena na ni dokonce 2,56:1. */
  background: #3e160f;
}
.mth-page__option--highlight .mth-page__option-name,
.mth-page__option--highlight .mth-page__option-note,
.mth-page__option--highlight .mth-page__option-meta {
  color: #f3e7d8;
}
.mth-page__option--highlight .mth-page__price {
  color: var(--mth-yellow);
}
.mth-page__option--highlight .mth-page__option-meta {
  border-top-color: rgba(255, 255, 255, 0.25);
}
.mth-page__option--highlight strong {
  color: #fff;
}

@media (max-width: 639px) {
  .mth-page__perks {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* --------------------------------------------------------------------------
   Produktova karta (rozcestnik na clanky o medech)
   --------------------------------------------------------------------------
   Fotka nahore, nazev, kratky popis a tlacitko dole. Tlacitko je pres
   margin-top: auto zarovnane na spodek, takze u ruzne dlouhych popisu
   zustava v jedne linii.
   -------------------------------------------------------------------------- */
.mth-page__promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  clear: both;
}

.mth-page__promo {
  display: flex;
  flex-direction: column;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
  overflow: hidden;
}
.mth-page__promo-media {
  background: #fff;
  /* Zdroje jsou 400x400. Bez stropu by medium na dvousloupcove mrizce
     vyslo 460 px vysoke - produkt by plaval v prazdnu a karta by
     zabrala cely viewport. Padding dava produktu vzduch. */
  aspect-ratio: 16 / 10;
  max-height: 240px;
  padding: 20px;
}
.mth-page__promo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.mth-page__promo:hover .mth-page__promo-media img {
  transform: scale(1.04);
}
.mth-page__promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  padding: 24px 26px 26px;
}
.mth-page__promo-body > * {
  margin: 0;
}
.mth-page__promo-body h3 {
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  color: var(--mth-ink);
}
.mth-page__promo-body .mth-btn {
  margin-top: auto;
  padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .mth-page__promo-media img {
    transition: none;
  }
  .mth-page__promo:hover .mth-page__promo-media img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Rozbor (nazev + parametry + shrnuti)
   --------------------------------------------------------------------------
   Puvodne h4 + odrazky + odstavec pod sebou, ctyrikrat za sebou. Ctenar
   nemel jak poznat, kde jeden med konci a druhy zacina. Karta to ohranici
   a shrnuti oddeli, protoze to je zaver, ne dalsi parametr.
   -------------------------------------------------------------------------- */
.mth-page__analyses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  clear: both;
}

.mth-page__analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
}
.mth-page__analysis > * {
  margin: 0;
}
.mth-page__analysis h4 {
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  color: var(--mth-ink);
}
.mth-page__analysis ul {
  padding-left: 20px;
  font-size: 15px;
  max-width: none;
}

/* Shrnuti - zaver rozboru, proto oddelene linkou a na bilem podkladu */
.mth-page__summary {
  margin-top: auto;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 639px) {
  .mth-page__analysis {
    padding: 22px 20px;
  }
}


/* --------------------------------------------------------------------------
   Rada videi
   --------------------------------------------------------------------------
   Videa nepotrebuji obal karty - maji vlastni ram. .mth-page__cards jim
   pridavalo kremovy padding navic, ktery nic nerika.
   -------------------------------------------------------------------------- */
/* FLEX, ne grid. Videa maji ruzny pomer stran (na vysku i na sirku) a grid
   by jim dal stejne siroke sloupce - video na vysku by vyplnilo tretinu
   sveho sloupce a vedle nej by zustala dira pres pul obrazovky.

   Flex da kazde polozce jeji prirozenou sirku. Spolecny strop vysky nize
   pak zaridi, ze videa sdileji horni i spodni hranu. */
.mth-page__videos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  clear: both;
}

/* Odkazy na varianty uvnitr karty - male pilulky, ne odrazky */
.mth-page__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.mth-page__variant {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.mth-page__variant:hover {
  background: var(--mth-yellow);
}


/* Pilulka varianty ma VLASTNI bile pozadi, takze na ni nesmi dosahnout
   barvy dedene z tmave karty (.mth-page__option--highlight barvi <strong>
   na bilou - v pilulce by vznikla bila na bile, kontrast 1,00).
   !important je nutne, protoze prebijene pravidlo ho ma taky. */
.mth-page__variant,
.mth-page__option--highlight .mth-page__variant,
.mth-page__option--highlight .mth-page__variant strong {
  color: var(--mth-ink) !important;
}


/* --------------------------------------------------------------------------
   Reference (doporucujici dopis)
   --------------------------------------------------------------------------
   Puvodne <div style="overflow: hidden"> s plovoucim obrazkem, jmenem
   a kurzivou. Citat si zaslouzi vlastni tvar - fotka, text, podpis.
   -------------------------------------------------------------------------- */
.mth-page__testimonial {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  background: var(--mth-cream);
  border-radius: var(--mth-radius);
  clear: both;
}
.mth-page__testimonial-photo {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.mth-page__testimonial-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.mth-page__testimonial blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--mth-ink);
}
.mth-page__testimonial blockquote em {
  font-style: normal;
}
/* uvozovka jako znak, ne jako dekorace navic */
/* Uvozovka je VYJMUTA Z TOKU a misto pro ni drzi padding-top.

   Dvakrat predtim jsem ji nechal v toku a ladil line-height a margin -
   jenze glyf pretekal svuj radkovy box, takze dosedal na prvni radku
   textu at jsem nastavil cokoli. Absolutni pozice to resi natvrdo:
   znacka uz nemuze s textem interagovat a mezera je dana paddingem,
   ne metrikami pisma. */
.mth-page__testimonial blockquote {
  position: relative;
  padding-top: 46px;
}
.mth-page__testimonial blockquote::before {
  content: "„";
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mth-font-head);
  font-size: 38px;
  line-height: 1;
  color: var(--mth-yellow);
}
.mth-page__testimonial figcaption {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mth-ink-soft);
}

/* jmeno nad videem v rade */
.mth-page__videoname {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mth-ink);
}

@media (max-width: 639px) {
  .mth-page__testimonial {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }
  .mth-page__testimonial-photo {
    width: 150px;
  }
  .mth-page__testimonial blockquote {
    font-size: 17px;
  }
}


/* --------------------------------------------------------------------------
   Fakta (nazev: hodnota)
   --------------------------------------------------------------------------
   Fakturacni udaje jsou dvojice popisek-hodnota, ne seznam odrazek.
   <dl> to rika i semanticky.
   -------------------------------------------------------------------------- */
.mth-page__facts {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  gap: 0 24px;
  margin: 0;
  clear: both;
}
.mth-page__facts dt {
  padding: 10px 0;
  border-top: 1px solid var(--mth-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--mth-ink-soft);
}
.mth-page__facts dd {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--mth-line);
  font-size: 15px;
  color: var(--mth-ink);
}
.mth-page__facts dt:first-of-type,
.mth-page__facts dt:first-of-type + dd {
  border-top: 0;
}

@media (max-width: 639px) {
  .mth-page__facts {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mth-page__facts dt {
    padding-bottom: 0;
  }
  .mth-page__facts dd {
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 12px;
  }
}


/* Citat bez fotky - jen text pres celou sirku karty */
.mth-page__testimonial--text {
  grid-template-columns: 1fr;
}
.mth-page__testimonial--text blockquote {
  font-size: 17px;
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Sirka samostatneho videa
   --------------------------------------------------------------------------
   Puvodni obsah mel tridy responsive-video400 / -600 / -80p s pevnou sirkou.
   Pri jejich neutralizaci (width: 100 %) se ZTRATIL ZAMER - samostatne video
   se roztahlo pres celou sirku textu, coz u portretove reference vypadalo
   obrovske.

   Zamer se vraci pres max-width na OBALU (ne na <video>) - jinak by obal
   zustal siroky a kolem videa by svitil kremovy podklad.

   Uvnitr mrizky (.mth-page__cols, .mth-page__videos) sirku ridi sloupec,
   proto jen primy potomek .mth-page.
   -------------------------------------------------------------------------- */
.mth-page > .mth-page__video,
.mth-page__videos > .mth-page__video {
  /* Sirka nestaci: video na vysku (9:16) ma pri 400 px sirky pres 700 px
     vysky a zabere cely viewport. Rozhoduje tedy VYSKA a obal se smrskne
     na skutecnou velikost videa, aby kolem nej nesvitil kremovy pruh. */
  width: fit-content;
  max-width: 100%;
}
.mth-page > .mth-page__video video,
.mth-page__videos > .mth-page__video video {
  max-height: 440px;
  width: auto;
  max-width: 100%;
}
.mth-page__video:has(.responsive-video400) {
  max-width: 400px;
}
.mth-page__video:has(.responsive-video600) {
  max-width: 600px;
}
.mth-page__video:has(.responsive-video80p) {
  max-width: 80%;
}



/* V rade videi rozhoduje VYSKA, ne sirka - jinak by kazde video melo jinou
   vysku a nesdilela by hranu. Legacy sirkove tridy (responsive-video400/600)
   se tu proto neuplatnuji; plati jen na samostatne video mimo radu. */
.mth-page__videos > .mth-page__video {
  max-width: none;
}


/* ==========================================================================
   Doladeni podle prohlidky na ostrem webu
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Mezera na konci stranky
   --------------------------------------------------------------------------
   Pod obsahem nasleduje pas s hodnocenim obchodu. Posledni prvek (casto
   tlacitko) na nej nalehal bez jedine mezery.
   -------------------------------------------------------------------------- */
.mth-page {
  padding-bottom: 56px;
}

/* --------------------------------------------------------------------------
   2) Prorezane portrety bez ramecku
   --------------------------------------------------------------------------
   Portrety jsou PNG s alfou a maji do grafiky zapecenou zlutou plastev.
   Kdyz pod ne dame vlastni podklad, vznikne v obsahu box navic:

     ambasador (uvod)  kremovy box na bile strance
     karty tymu        BILY box uvnitr KREMOVE karty

   Obojí pusobilo nahodne a navzajem si to odporovalo. Pravidlo je proto
   jednoduche: prorezany portret nema vlastni podklad a bere pozadi toho,
   v cem lezi. Plastev v grafice pak funguje jako ramecek sama o sobe.
   -------------------------------------------------------------------------- */
.mth-page__portrait,
.mth-page__row-media,
.mth-page__testimonial-photo {
  background: transparent;
}
.mth-page__card > p > img {
  background: transparent;
}

@media (max-width: 639px) {
  .mth-page {
    padding-bottom: 40px;
  }
}


/* --------------------------------------------------------------------------
   Strop vysky videa i uvnitr sloupcu
   --------------------------------------------------------------------------
   Predchozi strop platil jen na samostatne video a na radu videi. Video
   NA VYSKU uvnitr .mth-page__cols proto vyslo 738x1312 px a zabralo
   vic nez cely viewport.

   Zaroven video vyplni sirku sveho sloupce - legacy trida
   responsive-video80p mu davala 80 %, takze vedle nej zustavala mezera
   pres 180 px, ktera vypadala jako chyba layoutu.
   -------------------------------------------------------------------------- */
.mth-page__cols .mth-page__video {
  max-width: 100%;
}
.mth-page__cols .mth-page__video video {
  max-height: 560px;
  width: 100%;
  object-fit: cover;
}