/* ==========================================================================
   pruvodce.css - Pruvodce Manukou (/co-je-to-manuka/), Figma v3

   Poradi v hlavicce: za mth-base.css (bere z nej promenne a .mth-btn),
   idealne hned za pages.css.

   Komponenta .mth-guide je SAMOSTATNA - neni to .mth-page. Ta ma vlastni
   rytmus (68 znaku na radek, mezera 22 px mezi vsemi potomky), ktery by
   se s layoutem pruvodce pral na kazdem kroku.

   PROC `#content` NA ZACATKU PRAVIDEL S TEXTEM
   Apollo styluje obsah stranek selektory typu
     .type-page .content-inner article p          (0-2-3)
     .type-page .content-inner article > div h2   (0-2-4)
   a nastavuje jimi font-size, margin i barvu. Trida komponenty (0-1-0,
   0-2-0) na to nestaci, `#content` (id <main>) ano. Barvu textu Apollo
   navic vynucuje pres !important (viz pages.css, "Prebiti Apollo barvy
   textu") - tam jinak nez !important nejde.

   PROC `body:has(.mth-guide)` MISTO `body.in-co-je-to-manuka`
   EN mutace ma stejny slug, ale jeste stary obsah. Trida na body by
   pravidla pro pruvodce (skryty Shoptet nadpis, skryte globalni FAQ)
   pustila i tam. :has() je plati jen tam, kde pruvodce opravdu je.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Barvy mimo design system
   --------------------------------------------------------------------------
   Figma pouziva par odstinu, ktere v mth-base.css nejsou. Dva jsou oproti
   Figme o kousek tmavsi - puvodni hodnota nesplnuje kontrast AA (4,5:1):
     text sedy    Figma #7d7265  na kremove 4,27:1  ->  #6f6559  5,18:1
     text na zlute Figma #8c6e45  na #fee49a 3,79:1  ->  #7a5f3a  4,76:1
   Oranzova FAQ karty (#d15b00, s bilou 4,03:1) je nahrazena --mth-brown
   (4,54:1) - stejnou barvu ma otevrena otazka v globalnim FAQ.
   -------------------------------------------------------------------------- */
.mth-guide {
  --g-muted: #6f6559;
  --g-bark: #614b2b;
  --g-rule: #ede4d2;
  --g-rule-strong: #8c6e45;
  --g-yellow: #fee49a;
  --g-yellow-text: #7a5f3a;
  --g-gap: 96px;
  --g-band-pad: 56px;

  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--mth-font-body);
  color: var(--mth-ink);
  text-align: left;
}

/* Reset s nulovou vahou pro vse, co Apollo odsazuje - vlastni pravidla
   komponent ho pak prebiji bez souboje o specificitu. */
#content .mth-guide :where(p, h1, h2, h3, ul, ol, li, table) {
  margin: 0;
  padding: 0;
}
#content .mth-guide :where(ul, ol) {
  list-style: none;
}

.mth-guide > * + * {
  margin-top: var(--g-gap);
}

/* Kotvy z obsahu - kapitola nesmi skoncit pod hlavickou */
.mth-guide [id] {
  scroll-margin-top: 110px;
}

.mth-guide img {
  display: block;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   Spolecna typografie
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__eyebrow {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mth-orange) !important;
}

#content .mth-guide .mth-guide__title {
  margin: 0 0 20px;
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.01em;
  color: var(--mth-ink);
  text-wrap: balance;
}

#content .mth-guide .mth-guide__lead,
#content .mth-guide .mth-guide__text {
  max-width: 760px;
  font-size: 17px;
  line-height: 29px;
  color: var(--mth-ink) !important;
}
#content .mth-guide .mth-guide__text {
  color: var(--g-muted) !important;
}
#content .mth-guide .mth-guide__lead + .mth-guide__text,
#content .mth-guide .mth-guide__text + .mth-guide__text {
  margin-top: 22px;
}
/* Figma: jeden radek (whitespace-nowrap) - do 1068 px se v prohlizeci
   posledni slovo nevejde */
#content .mth-guide .mth-guide__wide {
  max-width: 1120px;
}

#content .mth-guide .mth-guide__btn {
  min-height: 52px;
  padding: 13px 30px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Poradove cislo (kroky, znaky padelku) */
#content .mth-guide .mth-guide__num {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: var(--mth-orange);
}


/* --------------------------------------------------------------------------
   Plna sirka
   --------------------------------------------------------------------------
   Pasy (kremovy, zluty) jdou v Figme od kraje ke kraji. Pozadi se
   roztahne stinem + clip-path - na layout to nesaha, takze nevznikne
   vodorovny posuvnik (width: 100vw by ho udelal: pocita i scrollbar).
   -------------------------------------------------------------------------- */
.mth-guide__band {
  --g-band-bg: var(--mth-cream);
  padding-block: var(--g-band-pad);
  background: var(--g-band-bg);
  box-shadow: 0 0 0 100vmax var(--g-band-bg);
  clip-path: inset(0 -100vmax);
}
.mth-guide__band--yellow {
  --g-band-bg: var(--g-yellow);
}
/* Dva pasy za sebou (09 a 10) maji v Figme mezi sebou bily prouzek -
   mezera zustava, jen ji nezakryje stin. */


/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   Fotka musi jit pres celou sirku okna, ale obsah stranky je v Apollo
   kontejneru. Proto margin-inline: calc(50% - 50vw). 100vw zahrnuje
   i posuvnik, pretok o jeho sirku oreze overflow-x: clip na body
   (clip na rozdil od hidden nerozbije position: sticky v hlavicce).

   Text v hero ma padding-inline: calc(50vw - 50%) - procenta paddingu se
   pocitaji ze sirky RODICE (.mth-guide), takze vysledek je presne o kolik
   hero pretika na kazde strane. Text tak sedi na hrane obsahu pri kazde
   sirce okna, bez pevnych cisel pro breakpointy.

   Oba vypocty predpokladaji, ze obsah je ve stredu okna. Apollo ale dava
   <main class="content wide"> vpravo padding 20 px (misto pro sidebar,
   ktery tahle stranka nema) - bez vynulovani by hero vpravo nedosahl
   na kraj o 10 px. Overeno na ostrem webu 25. 9. 2026.
   -------------------------------------------------------------------------- */
body:has(.mth-guide) {
  overflow-x: clip;
}
body:has(.mth-guide) #content {
  padding-right: 0;
}

.mth-guide__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow: hidden;
  background: #2c4f63;
}
.mth-guide__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(23, 20, 18, 0.66) 0%,
    rgba(23, 20, 18, 0.16) 52%,
    rgba(23, 20, 18, 0.06) 100%
  );
}
.mth-guide .mth-guide__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.mth-guide__hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 64px;
}
#content .mth-guide .mth-guide__hero-title {
  max-width: 560px;
  margin: 0 0 20px;
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.01em;
  color: #fff;
}
#content .mth-guide .mth-guide__hero-lead {
  max-width: 420px;
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.88) !important;
}
#content .mth-guide .mth-guide__hero .mth-guide__btn {
  min-height: 43px;
  padding: 11px 32px;
  font-size: 16px;
}

/* Shoptet nadpis stranky nahrazuje nadpis v hero. Zustava jen jeden <h1>. */
body:has(.mth-guide) .pageArticleDetail > header[itemprop="headline"] {
  display: none;
}

/* Drobeckova navigace by stala mezi hlavickou a hero - v Figme hero
   navazuje primo na hlavicku. Strukturovana data drobecku zustavaji
   v HTML, skryva se jen vizualne cely obal i s jeho odsazenim. */
body:has(.mth-guide) .breadcrumbs-wrapper {
  display: none;
}

/* Mezi hero, uvodem a obsahem je v Figme mensi mezera nez mezi kapitolami */
.mth-guide > .mth-guide__intro,
.mth-guide > .mth-guide__toc {
  margin-top: 72px;
}


/* --------------------------------------------------------------------------
   Uvod
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__intro-lead,
#content .mth-guide .mth-guide__intro-bridge {
  max-width: 1000px;
  font-size: 20px;
  line-height: 30px;
  color: var(--g-muted) !important;
}
#content .mth-guide .mth-guide__intro-bridge {
  margin-top: 48px;
  color: var(--mth-ink) !important;
}

.mth-guide__intro-card {
  margin-top: 48px;
  padding: 56px;
  border-radius: var(--mth-radius);
  background: var(--mth-cream);
}
#content .mth-guide .mth-guide__intro-claim {
  font-size: 23px;
  line-height: 34px;
  color: var(--mth-ink) !important;
}
.mth-guide__intro-photos {
  display: grid;
  grid-template-columns: 506fr 306fr;
  gap: 24px;
  max-width: 836px;
  margin: 40px auto 0;
}
.mth-guide__intro-photos img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 12px;
}


/* --------------------------------------------------------------------------
   Obsah
   -------------------------------------------------------------------------- */
.mth-guide__toc {
  padding: 42px 48px 40px;
  border-radius: var(--mth-radius);
  background: var(--mth-cream);
}
#content .mth-guide .mth-guide__toc-title {
  margin: 0 0 16px;
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--mth-ink);
}
#content .mth-guide .mth-guide__toc-list li + li {
  border-top: 1px solid var(--g-rule);
}
#content .mth-guide .mth-guide__toc-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 450px) minmax(0, 1fr) 20px;
  align-items: baseline;
  padding: 9px 0;
  color: var(--mth-ink);
  text-decoration: none;
}
.mth-guide__toc-num {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  color: var(--mth-orange);
}
.mth-guide__toc-name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mth-guide__toc-desc {
  font-size: 13px;
  line-height: 18px;
  color: var(--g-muted);
}
/* Sipka je dekorace - alternativni text za lomitkem ji ctecce zamlci */
.mth-guide__toc-list a::after {
  content: "→" / "";
  font-size: 13px;
  font-weight: 800;
  color: var(--mth-orange);
  transition: transform 0.2s ease;
}
.mth-guide__toc-list a:hover .mth-guide__toc-name {
  color: var(--mth-brown-dark);
}
.mth-guide__toc-list a:hover::after {
  transform: translateX(4px);
}
.mth-guide__toc-list a:focus-visible {
  outline: 2px solid var(--mth-brown);
  outline-offset: 2px;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   Kapitola text + fotka (01, 04, 06, 09)
   --------------------------------------------------------------------------
   Fotka zacina v Figme u nadpisu, ne u nadnadpisu - odtud margin-top 26 px
   (vyska nadnadpisu + jeho mezera).
   -------------------------------------------------------------------------- */
.mth-guide__split {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 560px);
  justify-content: space-between;
  align-items: start;
  column-gap: 60px;
}
.mth-guide .mth-guide__photo {
  width: 100%;
  height: 420px;
  margin-top: 26px;
  object-fit: cover;
  border-radius: var(--mth-radius);
}
.mth-guide__split--tall .mth-guide__photo {
  height: 520px;
}
.mth-guide__split .mth-guide__btn {
  margin-top: 34px;
}

/* 06: textovy sloupec 605, portret 400 x 600 zarovnany na nadnadpis */
.mth-guide__split--portrait {
  grid-template-columns: minmax(0, 605px) minmax(0, 400px);
}
.mth-guide__split--portrait .mth-guide__photo {
  height: 600px;
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   Pojmy - nadpis, linka, popis (02, 03, 06, 07)
   -------------------------------------------------------------------------- */
.mth-guide__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 30px;
  margin-top: 62px;
}
#content .mth-guide .mth-guide__term h3 {
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--g-rule-strong);
  font-family: var(--mth-font-body);
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-bark);
}
#content .mth-guide .mth-guide__term p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--g-muted) !important;
}

/* 03 - radky pojmu jsou k sobe bliz a nasleduje poznamka */
#kapitola-03 .mth-guide__terms {
  margin-top: 63px;
  row-gap: 50px;
}

/* 07 - svetla linka, vetsi nadpis, sirsi radkovani */
.mth-guide__terms--light {
  margin-top: 24px;
}
#content .mth-guide .mth-guide__terms--light .mth-guide__term h3 {
  font-size: 20px;
  line-height: 28px;
  border-bottom: 1px solid var(--g-rule);
  color: var(--mth-ink);
}
#content .mth-guide .mth-guide__terms--light .mth-guide__term p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 26px;
}

/* 02 - dva odstavce vedle sebe pod pojmy */
.mth-guide__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 48px;
}
#content .mth-guide .mth-guide__pair p {
  font-size: 16px;
  line-height: 27px;
  color: var(--mth-ink) !important;
}

#content .mth-guide .mth-guide__note {
  margin-top: 50px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--g-muted) !important;
}


/* --------------------------------------------------------------------------
   Pet znaku padelku (05)
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__signs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  margin-top: 36px;
}
#content .mth-guide .mth-guide__signs li {
  padding: 14px 0 27px;
  border-bottom: 1px solid var(--g-rule);
}
#content .mth-guide .mth-guide__signs h3 {
  margin-bottom: 4px;
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mth-ink);
}
#content .mth-guide .mth-guide__signs p {
  font-size: 15px;
  line-height: 24px;
  color: var(--g-muted) !important;
}


/* --------------------------------------------------------------------------
   Jak pouzivat (06) - zluty pas
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__band--yellow .mth-guide__eyebrow {
  color: var(--mth-brown-dark) !important;
}
#content .mth-guide .mth-guide__band--yellow .mth-guide__title {
  margin-bottom: 22px;
  color: var(--g-bark);
}
#kapitola-06 .mth-guide__term + .mth-guide__term {
  margin-top: 36px;
}
#content .mth-guide #kapitola-06 .mth-guide__term h3 {
  padding-bottom: 12px;
  font-size: 21px;
  line-height: 28px;
}
#content .mth-guide #kapitola-06 .mth-guide__term p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 26px;
  color: var(--g-yellow-text) !important;
}


/* --------------------------------------------------------------------------
   Produkty (08)
   --------------------------------------------------------------------------
   Figma ma ve vsech trech kartach stejnou lahvicku 829+ (zastupny obrazek).
   Tady jsou skutecne produktove fotky z e-shopu - pruhledne PNG na
   kremove karte. PNG ma kolem lahvicky velky pruhledny okraj (lahvicka
   je ~43 % sirky), proto sirka 140 % - lahvicka pak zabira ~60 % karty
   jako v Figme.
   -------------------------------------------------------------------------- */
.mth-guide__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.mth-guide__product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mth-guide__product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 392 / 460;
  margin-bottom: 24px;
  border-radius: 25px;
  background: var(--mth-cream);
  overflow: hidden;
}
.mth-guide__product-media img {
  width: 140%;
  max-width: none;
  height: auto;
  transition: transform 0.3s ease;
}
.mth-guide__product-media:hover img {
  transform: scale(1.03);
}
#content .mth-guide .mth-guide__product h3 {
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mth-ink);
}
#content .mth-guide .mth-guide__product-size {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--g-muted) !important;
}
#content .mth-guide .mth-guide__product-desc {
  margin-top: 10px;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: -0.01em;
  color: var(--mth-ink) !important;
}
#content .mth-guide .mth-guide__product .mth-guide__btn {
  min-width: 186px;
  margin-top: auto;
  font-size: 18px;
  line-height: 25px;
}
/* odstup tlacitka od textu, i kdyz margin-top: auto srovnava tlacitka
   ve vsech kartach na jednu linku */
#content .mth-guide .mth-guide__product-desc {
  margin-bottom: 20px;
}


/* --------------------------------------------------------------------------
   Odkud pochazi (09)
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__bullets {
  margin-top: 28px;
}
#content .mth-guide .mth-guide__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mth-ink) !important;
}
#content .mth-guide .mth-guide__bullets li + li {
  margin-top: 10px;
}
.mth-guide__bullets li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mth-orange);
}
/* Figma: oranzovy odkaz. Na kremove ma oranzova 2,57:1, proto --mth-brown-dark
   (5,33:1) - stejne jako odkazy v pages.css. */
#content .mth-guide .mth-guide__more {
  margin-top: 26px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
}
#content .mth-guide .mth-guide__more a {
  color: var(--mth-brown-dark);
  text-decoration: none;
}
#content .mth-guide .mth-guide__more a:hover {
  color: var(--mth-brown);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Kroky (10)
   -------------------------------------------------------------------------- */
#content .mth-guide .mth-guide__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 27px;
  margin-top: 36px;
}
#content .mth-guide .mth-guide__steps h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--g-rule-strong);
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-bark);
}
#content .mth-guide .mth-guide__steps p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--g-muted) !important;
}


/* --------------------------------------------------------------------------
   Protokol (11)
   -------------------------------------------------------------------------- */
.mth-guide__protocol {
  margin-top: 34px;
  padding: 16px 32px 24px;
  border-radius: 12px;
  background: #fff;
}
#content .mth-guide .mth-guide__protocol table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
#content .mth-guide .mth-guide__protocol :is(th, td) {
  padding: 18px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--g-rule);
  background: none;
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  vertical-align: top;
}
#content .mth-guide .mth-guide__protocol tbody tr:last-child :is(th, td) {
  border-bottom: 0;
  padding-bottom: 0;
}
#content .mth-guide .mth-guide__protocol thead th {
  padding: 8px 0 11px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-muted);
}
#content .mth-guide .mth-guide__protocol th:first-child {
  width: 300px;
  padding-right: 20px;
}
#content .mth-guide .mth-guide__protocol tbody th {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-bark);
}
#content .mth-guide .mth-guide__protocol td {
  color: var(--g-muted) !important;
}
#kapitola-11 > .mth-guide__btn {
  margin-top: 30px;
}


/* --------------------------------------------------------------------------
   Caste otazky (12)
   --------------------------------------------------------------------------
   Stejna komponenta jako FAQ na HP: .mth-faq z faq.css + chovani z faq.js
   (faq.js inicializuje KAZDY .mth-faq na strance, nic dalsiho netreba).
   Otevrena karta preroste pres otazky pod sebou - proto je po nacteni
   vse zavrene, stejne jako na HP.

   Tady jen rozmery podle Figmy (HP ma otazky 25 px, pruvodce 20 px)
   a prebiti Apolla: odpoved je <p> uvnitr obsahu stranky, takze na ni
   dosahuje Apollo barva textu (!important) i reset odsazeni vyse.
   -------------------------------------------------------------------------- */
.mth-guide__faq {
  margin-top: 60px;
}
.mth-guide .mth-faq__slot,
.mth-guide .mth-faq__item {
  height: 86px;
}
#content .mth-guide .mth-faq__q {
  min-height: 86px;
  padding: 20px 24px 20px 36px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}
#content .mth-guide .mth-faq__a-in {
  padding-bottom: 26px;
}
#content .mth-guide .mth-faq__a-in p {
  padding: 0 36px;
  font-size: 16px;
  line-height: 23px;
  color: #fff !important;
}
#content .mth-guide .mth-faq__a-in a {
  color: #fff;
}

/* Globalni FAQ z paticky (banner s .js-faq-block) by pod pruvodcem
   opakovalo podobne otazky s jinymi odpovedmi - tady ho nahrazuje
   kapitola 12. */
body:has(.mth-guide) .js-faq-block {
  display: none !important;
}


/* ==========================================================================
   Responzivita - breakpointy modulu 1279 / 991 / 639
   ========================================================================== */
@media (max-width: 1279px) {
  .mth-guide {
    --g-gap: 80px;
  }
  .mth-guide__split,
  .mth-guide__split--portrait {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    column-gap: 48px;
  }
  .mth-guide__intro-card {
    padding: 44px;
  }
  #content .mth-guide .mth-guide__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  #content .mth-guide .mth-guide__toc-list a {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 20px;
    column-gap: 16px;
  }
}

@media (max-width: 991px) {
  .mth-guide {
    --g-gap: 64px;
    --g-band-pad: 48px;
  }
  .mth-guide__hero {
    min-height: 520px;
  }
  #content .mth-guide .mth-guide__hero-title {
    font-size: 46px;
    line-height: 50px;
  }
  #content .mth-guide .mth-guide__title {
    font-size: 34px;
    line-height: 40px;
  }

  /* Text + fotka pod sebou; fotka az za textem */
  .mth-guide__split,
  .mth-guide__split--portrait {
    grid-template-columns: minmax(0, 1fr);
  }
  .mth-guide .mth-guide__photo,
  .mth-guide__split--tall .mth-guide__photo {
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 36px;
  }
  .mth-guide__split--portrait .mth-guide__photo {
    width: min(100%, 420px);
    aspect-ratio: 2 / 3;
    margin-top: 36px;
  }

  .mth-guide__intro-photos img {
    height: 360px;
  }

  #content .mth-guide .mth-guide__toc-list a {
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    grid-template-areas:
      "num name arrow"
      ".   desc arrow";
    row-gap: 2px;
    column-gap: 8px;
  }
  .mth-guide__toc-num { grid-area: num; }
  .mth-guide__toc-name { grid-area: name; }
  .mth-guide__toc-desc { grid-area: desc; }
  .mth-guide__toc-list a::after { grid-area: arrow; align-self: center; }

  .mth-guide__products {
    gap: 20px;
  }

  .mth-guide__faq {
    margin-top: 40px;
  }
  .mth-guide .mth-faq__slot,
  .mth-guide .mth-faq__item {
    height: 72px;
  }
  #content .mth-guide .mth-faq__q {
    min-height: 72px;
    padding: 16px 18px 16px 24px;
    gap: 14px;
    font-size: 18px;
    line-height: 23px;
  }
  #content .mth-guide .mth-faq__a-in {
    padding-bottom: 22px;
  }
  #content .mth-guide .mth-faq__a-in p {
    padding-inline: 24px;
  }
}

@media (max-width: 639px) {
  .mth-guide {
    --g-gap: 56px;
    --g-band-pad: 40px;
  }

  .mth-guide__hero {
    align-items: flex-end;
    min-height: 480px;
  }
  /* Na mobilu je text pres celou sirku fotky - zavoj silnejsi a zdola */
  .mth-guide__hero::before {
    background: linear-gradient(
      0deg,
      rgba(23, 20, 18, 0.78) 0%,
      rgba(23, 20, 18, 0.45) 55%,
      rgba(23, 20, 18, 0.1) 100%
    );
  }
  .mth-guide .mth-guide__hero-img {
    object-position: 62% 50%;
  }
  .mth-guide__hero-body {
    padding-block: 40px 36px;
  }
  #content .mth-guide .mth-guide__hero-title {
    font-size: 38px;
    line-height: 42px;
  }
  #content .mth-guide .mth-guide__hero-lead {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 24px;
  }

  #content .mth-guide .mth-guide__title {
    font-size: 30px;
    line-height: 36px;
  }
  #content .mth-guide .mth-guide__intro-lead,
  #content .mth-guide .mth-guide__intro-bridge {
    font-size: 18px;
    line-height: 28px;
  }
  .mth-guide > .mth-guide__intro,
  .mth-guide > .mth-guide__toc {
    margin-top: 48px;
  }
  .mth-guide__intro-card {
    padding: 28px 22px;
  }
  #content .mth-guide .mth-guide__intro-claim {
    font-size: 19px;
    line-height: 29px;
  }
  .mth-guide__intro-photos {
    gap: 12px;
    margin-top: 28px;
  }
  .mth-guide__intro-photos img {
    height: 240px;
  }

  .mth-guide__toc {
    padding: 28px 20px 24px;
  }
  #content .mth-guide .mth-guide__toc-title {
    font-size: 28px;
    line-height: 34px;
  }

  .mth-guide__terms,
  .mth-guide__pair,
  #content .mth-guide .mth-guide__signs,
  #content .mth-guide .mth-guide__steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .mth-guide__terms,
  #kapitola-03 .mth-guide__terms {
    row-gap: 36px;
    margin-top: 40px;
  }
  .mth-guide__terms--light {
    margin-top: 24px;
  }
  .mth-guide__pair {
    gap: 22px;
    margin-top: 36px;
  }

  .mth-guide__products {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .mth-guide__product-media {
    aspect-ratio: 4 / 3;
  }
  .mth-guide__product-media img {
    width: 110%;
  }

  /* Tabulka se na mobilu sklada: parametr nad popisem */
  .mth-guide__protocol {
    padding: 8px 20px 20px;
  }
  #content .mth-guide .mth-guide__protocol thead {
    display: none;
  }
  #content .mth-guide .mth-guide__protocol tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--g-rule);
  }
  #content .mth-guide .mth-guide__protocol tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  #content .mth-guide .mth-guide__protocol :is(th, td),
  #content .mth-guide .mth-guide__protocol th:first-child {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  #content .mth-guide .mth-guide__protocol td {
    margin-top: 4px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mth-guide__toc-list a::after,
  .mth-guide__product-media img {
    transition: none;
  }
}