/* ============================================================
   ZenSnake — podstránka „Pro školy a školky"
   Staví na ../styles.css (tokeny, tlačítka, hlavička, patička).
   Tady jsou jen sekce, které hlavní stránka nemá.
   ============================================================ */

/* ============================================================
   Hlavička podstránky
   Jen „Zpět na úvod" + logo + CTA. Leží ve světlém pruhu nad zeleným
   blokem, takže potřebuje tmavý text — výchozí .header je bílá kvůli
   fotce na hlavní stránce.
   ============================================================ */
body.subpage .header { color: var(--ink); }

/* stejná výplň jako mají kroužky se šipkami */
.btn-soft { background: rgba(32, 39, 33, .1); color: var(--ink); }
.btn-soft:hover { background: rgba(32, 39, 33, .16); }
.nav-back { height: 45px; }

/* Znak bez wordmarku — naskočí až v mobilní hlavičce (viz media 760px). */
.logo-mark { display: none; width: 40px; height: 47px; color: currentColor; }

/* Rytmus podstránky — přebíjí clamp z ../styles.css.
   80px nahoře i dole, takže mezi sousedními sekcemi je ~160px. */
.subpage .section { padding: 80px 0; }

/* Ribbon — jediný způsob, jak se na téhle stránce označuje sekce
   (nahradil dřívější verzálkové podnadpisy). Sotva znatelné inkoustové
   podbarvení na 5 %, text v plné inkoustové. */
.sub-badge {
  display: inline-block;
  background: rgba(32, 39, 33, .05);
  color: #202721;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.center-badge { display: block; width: fit-content; margin: 0 auto 22px; }
/* v heru nese odstup až titulek */
.sub-hero .sub-badge { margin-bottom: 0; }
/* Na tmavě zeleném heru by inkoustový text splynul s pozadím, takže si
   tam ribbon drží světlou variantu. */
.is-dark .sub-badge { background: rgba(255,255,255,.1); color: #eef0e6; }

/* Display sazba podstránky — stejný předpis jako v ../styles.css:
   Bricolage SemiBold, -2 % prostrkání. */
.sub-hero-title,
.stat-big,
.stat-claim,
.price-value {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ============================================================
   Hero — vycentrovaný layout (thanks.co/advertise, bez log)
   ============================================================ */
.sub-hero {
  position: relative;
  /* Horní padding je o 80px nižší (text jde nahoru), spodní o 140px vyšší —
     dole musí zbýt místo, do kterého se zapustí karty s čísly.
     Od obojího se pak ubírá 50px, aby byl blok celkem o 100px kompaktnější;
     `max()` drží dolní hranici, ať se to na mobilu nesrazí na nulu. */
  padding: max(40px, calc(clamp(70px, 11vw, 160px) - 50px)) 0
           max(110px, calc(clamp(150px, 18vw, 260px) - 50px));
  text-align: center;
  overflow: hidden;
}
.sub-hero .container { position: relative; z-index: 1; }

/* WebGL scéna na pozadí tmavého hera — pod textem i fotkami po stranách.
   Zelený podklad drží `.sub-hero.is-dark`, takže bez WebGL vypadá hero
   jako dřív. Ořez řeší `overflow: hidden` na sekci. */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Tmavá varianta: blok drží stejnou zeleň jako patička. Nahoře je 90px
   světlého pruhu, ve kterém sedí menu, po stranách 15px vzduchu. */
.sub-hero.is-dark {
  background: var(--footer-green);
  color: #eef0e6;
  /* Mobil a tablet: přes celou šířku, bez radiusu — zaoblený roh opřený
     o okraj okna vypadá jako chyba. Desktop vrací rámeček níž. */
  margin: 90px 0 0;
  border-radius: 0;
}
/* Desktop: 15px vzduchu po stranách a zaoblené rohy (původní podoba).
   Hranice 1181px = stejná, od které se ukazují boční fotky hera. */
@media (min-width: 1181px) {
  .sub-hero.is-dark {
    margin: 90px 15px 0;
    border-radius: var(--radius);
  }
}
.sub-hero.is-dark .sub-hero-sub { color: #b9c2a6; }
.sub-hero-title {
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: .98;
  margin: 22px 0 26px;
}
.sub-hero-sub {
  max-width: 56ch;
  margin: 0 auto 34px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--gray);
}
.sub-hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* fotky po stranách hera — schované na užších displejích, kde by
   se dostaly pod text */
.hero-float {
  position: absolute;
  z-index: 1;
  width: clamp(150px, 15vw, 240px);
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  margin: 0;
}
.hero-float img { width: 100%; height: 100%; object-fit: cover; }
/* Obě fotky jdou o 30px výš než na co vychází procento z výšky bloku.
   Samotné zkrácení bloku je posune jen zhruba o 44px, což bylo málo. */
.hero-float-l { left: 0; top: calc(44% - 30px); transform: rotate(-7deg); }
/* pravá fotka sedí o 100px výš než levá */
.hero-float-r { right: 0; top: calc(30% - 130px); transform: rotate(6deg); }
@media (max-width: 1180px) { .hero-float { display: none; } }

/* ============================================================
   Statistiky
   ============================================================ */
/* Karty s čísly leží ve vrstvě nad zeleným blokem a straddlují jeho
   spodní hranu — půlka v zeleném, půlka ve světlém. Zápornou marži
   ladíme na polovinu výšky karty. */
/* .subpage .section má stejnou specificitu jako .stat-band, takže tady
   musí být taky dvě třídy — jinak plošný padding vyhraje a karty spadnou
   pod blok místo do něj */
/* dole o 20px míň než plošných 80 — claim měl k další sekci moc vzduchu */
.subpage .stat-band { padding-top: 0; padding-bottom: 60px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 2;
  /* karta je ~188px vysoká, takže -94px ji rozdělí přesně na půl */
  margin-top: clamp(-94px, -6.5vw, -71px);
}
.stat-cell {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 44px);
  text-align: center;
}
.stat-cell:nth-child(2) { background: var(--lime); }
.stat-big {
  display: block;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1;
  margin-bottom: 12px;
}
.stat-hiss { letter-spacing: .04em; }
/* delší hodnoty (ceny, „dohodou") — plný stupeň by se lámal do dvou řádek */
.stat-big[data-sm] { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; }
.stat-cell p { color: var(--gray); }
.stat-cell:nth-child(2) p { color: #4a5a12; }
.stat-claim {
  text-align: center;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.2;
  max-width: 22ch;
  margin: clamp(50px, 6vw, 90px) auto 0;
  padding-top: 40px;
}

/* ============================================================
   Text + fotka vedle sebe
   ============================================================ */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.split-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}
.split-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.split-photo .photo-chip { position: absolute; left: 20px; bottom: 20px; }
.split-body p { color: var(--gray); margin-top: 18px; }
.split-body .h2 { max-width: 16ch; }
.split-body .text-arrow { margin-top: 26px; }

/* ============================================================
   Polaroidy — 1:1 podle hollow-template.webflow.io/about
   ============================================================ */
/* Ani `clip` na ose X tu nesmí být natěsno: ořezávalo stíny krajních karet.
   `overflow-clip-margin` nechá kolem ořezové hrany 60px, do kterých se stín
   vejde, a přitom pás pořád nemůže vyrobit vodorovný scroll. */
.polaroid-section {
  overflow: clip visible;
  overflow-clip-margin: 60px;
}
/* Perex téhle sekce zmizel; odsazení pod nadpisem po něm přebírá nadpis sám,
   jinak by fotky vyskočily o jeho výšku nahoru. */
.polaroid-section .h2 { margin-bottom: clamp(62px, 6.4vw, 92px); }
/* Pás fotek jde blíž k nadpisu. Hodnota je -25px, ne -100px: dokud si dva
   tweeny v skoly.js přepisovaly `y`, karty seděly ~75px níž, než chtělo CSS,
   a marže to kompenzovala. Po opravě té chyby (viz „Polaroidy" v skoly.js)
   už kompenzace není potřeba — výsledná poloha na obrazovce je stejná. */
.polaroid-strip {
  margin-top: -65px;
  /* Mezera pod fotkami k ribbonu „Cena a doprava". Ze stejného důvodu jako
     marže výš je hodnota nižší, než byla před opravou tweenů — layoutový box
     pásu se posunul dolů, takže odsazení už tolik dobírat nemusí. */
  padding-bottom: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(-84px, -4.4vw, -30px);
  padding-top: 20px;
}
.polaroid {
  flex: 0 0 auto;
  width: clamp(180px, 19vw, 290px);
  background: var(--white);
  border-radius: 10px;
  /* Spodní lem je širší než boční — bez něj by po odebrání popisků fotka
     končila na hraně karty a polaroid by přestal vypadat jako polaroid. */
  padding: 14px 14px 34px;
  /* Rozestupy: o 40px volnější než původní vějíř — každá karta +20px
     na každé straně (platí desktop/tablet; mobil má vlastní margin níž). */
  margin: 0 clamp(-28px, calc(-3.2vw + 20px), 0px);
  box-shadow: 0 22px 50px rgba(0,0,0,.16);
  will-change: transform;
  transition: box-shadow .45s ease;
}
/* karta pod kurzorem se odlepí — stín drží CSS, aby ho nemusel řešit tween */
.polaroid-img {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
/* vrchní karty musí přebít ty pod sebou, ať stín nepadá přes fotku */
.polaroid:nth-child(1) { z-index: 1; }
.polaroid:nth-child(2) { z-index: 2; }
.polaroid:nth-child(3) { z-index: 3; }
.polaroid:nth-child(4) { z-index: 4; }
.polaroid:nth-child(5) { z-index: 5; }

/* ============================================================
   Pro koho — checklist v kartě
   ============================================================ */
.checklist-sub { color: var(--gray); margin-top: 15px; margin-bottom: clamp(36px, 4vw, 56px); }

/* „Domluvme termín": sdílených 48px pod nadpisem je tu moc — perex jde
   o 30px blíž. Jen desktop; mobil má vlastní rytmus. */
@media (min-width: 761px) {
  .subpage .contact .h2 { margin-bottom: 18px; }
}
.checklist {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 34px) clamp(22px, 3vw, 44px);
}
.check-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid rgba(220,220,218,.5);
}
.check-row:last-child { border-bottom: none; }
.check-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}
.check-row h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.check-row p { color: var(--gray); font-size: 16px; }

/* ============================================================
   Co si děti odnesou — fotka + mřížka boxů
   ============================================================ */
.take-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
}
.take-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}
.take-photo img { width: 100%; height: 100%; object-fit: cover; }
.take-sub { color: var(--gray); max-width: 52ch; margin: 18px 0 clamp(28px, 3vw, 42px); }
.take-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.take-box {
  background: var(--white);
  border-radius: 22px;
  padding: clamp(20px, 2.2vw, 30px);
}
.take-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--bg);
  font-size: 19px;
  margin-bottom: 14px;
}
.take-ico img { width: 26px; height: 26px; display: block; }
.take-box h3 { font-size: 17px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; }
.take-box p { color: var(--gray); font-size: 16px; }

/* ============================================================
   Cena a doprava
   ============================================================ */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.price-card {
  border-radius: var(--radius);
  padding: clamp(28px, 3.2vw, 48px);
  background: var(--white);
}
.price-main { background: var(--lime); }
.price-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 16px;
}
.price-main .price-label { color: #4a5a12; }
.price-value {
  display: block;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1;
  margin-bottom: 16px;
}
/* 7) CTA v kartě základní ceny — tmavá varianta, na limetce je čitelnější */
.price-cta { margin-top: 28px; }
.btn-dark { background: var(--ink); color: #eef0e6; }
.btn-dark:hover { background: var(--footer-green); }
.price-card > p { color: var(--gray); max-width: 40ch; }
/* Věta o základní ceně se má vejít na jeden řádek — 40ch (364px) ji lámalo tak,
   že na druhém řádku zbylo samotné „minut.". Karta má uvnitř 531px, věta 387px.
   Na užším displeji se karta zmenší a zalomí se sama, což je v pořádku. */
.price-main > p { max-width: none; }
.price-main > p { color: #4a5a12; }
.price-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.price-mini div {
  background: rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 18px 20px;
}
.price-mini strong { display: block; font-size: 19px; font-weight: 600; }
.price-mini span { font-size: 14px; color: #4a5a12; }
.price-ship h3 {
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 14px;
  max-width: 20ch;
}
.price-rows { list-style: none; margin-top: 30px; }
.price-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(220,220,218,.7);
}
.price-rows li:last-child { border-bottom: 1px solid rgba(220,220,218,.7); }
.price-rows span { color: var(--gray); }
.price-rows strong { font-weight: 600; }

/* Doprava v tmavé zeleni patičky — na přání klienta */
.price-card.is-dark {
  background: var(--footer-green);
  color: #eef0e6;
}
.price-card.is-dark .price-label { color: #9fb08a; }
.price-card.is-dark > p { color: #b9c2a6; }
.price-card.is-dark .price-rows li { border-top-color: rgba(255,255,255,.16); }
.price-card.is-dark .price-rows li:last-child { border-bottom-color: rgba(255,255,255,.16); }
.price-card.is-dark .price-rows span { color: #b9c2a6; }
.price-card.is-dark .price-rows strong { color: var(--lime); }

/* ============================================================
   Přepínač prostředí — layout testimonialu z thanks.co
   ============================================================ */
.switch-sub { color: var(--gray); margin: 16px 0 clamp(40px, 5vw, 70px); }
.switch-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 940px;
  margin: 0 auto;
  /* kotva pro odjíždějící klony karet (viz skoly.js) */
  position: relative;
}
/* 8) pevná výška, ne min-height — jinak si každá varianta roztáhla box
   i fotku podle délky svého textu */
.switch-card {
  border-radius: 34px;
  overflow: hidden;
  height: clamp(320px, 34vw, 470px);
}
.switch-photo { transform: rotate(-2.5deg); background: #e4e0d6; }
.switch-photo img { width: 100%; height: 100%; object-fit: cover; }
.switch-quote {
  transform: rotate(1.8deg);
  background: #e8e4da;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 3.4vw, 54px);
  /* leží nad fotkou, stejně jako na předloze */
  position: relative;
  z-index: 2;
}
.switch-text {
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 600;
  line-height: 1.32;
}
.switch-meta { margin-top: 26px; font-size: 15px; font-weight: 600; }
.switch-meta span { color: var(--gray); font-weight: 400; }

.switch-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 56px);
}
.switch-tab {
  border: none;
  background: var(--white);
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
  transition: color .3s, background-color .3s, transform .3s;
}
.switch-tab:hover { color: var(--ink); transform: translateY(-2px); }
.switch-tab.is-active { background: var(--lime); color: var(--ink); }

/* ============================================================
   FAQ
   Výšku animuje CSS přechodem grid-template-rows (0fr → 1fr). Oba
   klidové stavy tak drží CSS a JS jen přepíná třídu — kdyby přechod
   neproběhl, odpověď je pořád buď schovaná, nebo celá vidět.
   ============================================================ */
.faq-sub { color: var(--gray); margin-bottom: clamp(36px, 4vw, 56px); }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border-radius: 22px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  color: var(--ink);
}
/* znaménko: vodorovná čárka + svislá, která se při otevření sklopí */
.faq-sign {
  flex: 0 0 auto;
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .25s ease;
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.6px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q:hover .faq-sign { background: var(--lime); }
.faq-item.is-open .faq-sign { background: var(--lime); }
.faq-item.is-open .faq-sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.22,1,.36,1);
}
.faq-item.is-open .faq-wrap { grid-template-rows: 1fr; }
/* Kolabující potomek NESMÍ mít vlastní padding — ten se do nuly nesmrskne
   a v zavřeném stavu jím prosvítal první řádek odpovědi (řádek zůstával
   28px vysoký). Odsazení proto nese až text uvnitř. */
.faq-wrap > * { overflow: hidden; min-height: 0; }
.faq-body { color: var(--gray); }
.faq-body > * {
  padding: 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.2vw, 28px);
  max-width: 62ch;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .split-grid,
  .take-grid,
  .price-grid { grid-template-columns: 1fr; }
  .take-photo { max-width: 420px; }
  .stat-grid { grid-template-columns: 1fr; }
  .switch-stage { grid-template-columns: 1fr; max-width: 520px; }
  .switch-photo, .switch-quote { transform: none; }
  .switch-photo { min-height: 300px; }
}

@media (max-width: 760px) {
  /* 160px na uzkem displeji dusi — rytmus se zmensuje uměrně */
  .subpage .section { padding: 60px 0; }
  /* Plošných 60px by pásu s čísly znovu otevřelo horní padding (stejná
     specificita, pozdější pravidlo vyhrává) a karty by nezalézaly do
     zeleného bloku. Stejná past jako u .section.contact níž. */
  .subpage .stat-band { padding-top: 0; padding-bottom: 40px; }
  /* Sdílené CSS schovává navigaci a odhaluje burger. Tady žádný burger
     není — roli mobilního menu hraje přepínač služeb. Dvě tlačítka
     (Mé služby + CTA) se vejdou i na mobil, jen se zmenší. */
  .subpage .nav-links { display: flex; }
  .subpage .header-inner::before { content: none; }
  .subpage .nav-back,
  .subpage .svc-toggle,
  .subpage .nav-cta { height: 38px; padding: 0 14px; font-size: 13px; }
  /* Lockup zůstává i na mobilu, stejně jako na homepage — jen menší.
     (Dřív se tu ukazoval samotný znak `.logo-mark`, protože se celý lockup
     mezi dvě tlačítka nevešel. To platilo, dokud měla tlačítka plnou výšku;
     po jejich zmenšení nad tímhle řádkem zbývá při 375px v hlavičce 131px
     volného místa a lockup má 76 — vejde se i s rezervou.) */
  .subpage .logo-svg,
  .subpage .header.scrolled .logo-svg { display: block; width: 76px; height: 52px; }
  .subpage .logo-mark { display: none; }
  /* polovina výšky karty (124px), aby seděla 50/50 na hraně zeleného */
  .stat-grid { margin-top: -62px; }
  .polaroid-strip {
    overflow-x: auto;
    justify-content: flex-start;
    /* `overflow-x: auto` udělá ze pásu scroll kontejner, který ořezává i svisle —
       výplň musí pojmout celý stín (0 22px 50px ⇒ ~75px pod kartou). */
    padding: 40px 6vw 100px;
    scroll-snap-type: x mandatory;
    /* swipe bez viditelného posuvníku */
    scrollbar-width: none;
    /* spodní výplň je jen na stín — o tuhle rezervu se další sekce zase
       přitáhne zpátky, ať pod kartami nezbývá zbytečný pruh */
    margin-bottom: -60px;
  }
  .polaroid-strip::-webkit-scrollbar { display: none; }
  /* Menší stín než na desktopu: scrub karty posouvá až ~46px dolů a plný
     rozptyl (0 22px 50px) by se do výplně pásu nevešel — řezal by se. */
  .polaroid { width: 62vw; scroll-snap-align: center; margin: 0 8px; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
  .price-mini { grid-template-columns: 1fr; }
  .take-boxes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid { transform: none !important; }
}

/* Nejužší telefony (iPhone SE a spol.). Při 320px zbývá v hlavičce po obou
   tlačítkách jen 79px a lockup 76px by se o ně opřel — mezera vycházela na
   0px. Tlačítka i logo se proto ještě o kousek srazí, ať kolem loga zůstane
   vzduch. Nad 360px to potřeba není, tam vychází mezera 13px a víc. */
@media (max-width: 359px) {
  .subpage .nav-back,
  .subpage .svc-toggle,
  .subpage .nav-cta { padding: 0 11px; font-size: 12px; }
  /* šipka u „Mé služby" si na nejužším displeji ukrojí i mezeru vedle textu */
  .subpage .svc-toggle { gap: 5px; }
  .subpage .logo-svg,
  .subpage .header.scrolled .logo-svg { width: 64px; height: 44px; }
}

/* Mezi formulářem a patičkou bylo málo vzduchu — o 100px víc.
   Tři třídy, aby to přebilo plošné `.subpage .section { padding: 80px 0 }`. */
.subpage .section.contact { padding-bottom: 60px; }

/* Mezera formulář → patička: 60px výš platí pro mobil, desktop chce vzduch.
   Blok musí být AŽ ZA pravidlem s 60px — stejná specificita, pořadí rozhoduje. */
@media (min-width: 761px) {
  .subpage .section.contact { padding-bottom: 160px; }
}

/* ============================================================
   Přepínač služeb v hlavičce podstránky
   Desktop/tablet: rozbalovací panel pod tlačítkem vedle „Zpět na úvod".
   Mobil: „Zpět na úvod" mizí a tlačítko otevře celoobrazovkové menu,
   stejné jako burger na homepage.
   ============================================================ */
/* „Zpět na úvod" a „Mé služby" patří k sobě, proto těsněji než plošných
   clamp(16px, 2.4vw, 38px) ze sdíleného ../styles.css — to je rozestup pro
   textové menu na homepage, mezi dvěma tlačítky vedle sebe působí rozvolněně. */
.subpage .nav-left { gap: 10px; }

.svc-menu { position: relative; }

.svc-toggle { display: inline-flex; align-items: center; gap: 8px; }
/* Šipka se při otevření otočí. `.btn` má `overflow: hidden` kvůli rolování
   textu, takže se sem nic nevejde navíc — proto jen rotace. */
.svc-caret { display: inline-flex; transition: transform .3s ease; }
.svc-toggle[aria-expanded="true"] .svc-caret { transform: rotate(180deg); }

/* Seznam NEleží v hlavičce, ale přímo v <body> — přestěhuje ho tam skoly.js.
   Důvod: hlavička má po vstupní animaci `transform` a po odscrollování
   `backdrop-filter`, a obojí z ní dělá ukotvení pro `position: fixed`
   potomky. Celoobrazovkové menu uvnitř ní proto mělo jen výšku hlavičky.
   Na desktopu mu polohu pod tlačítkem dopočítá JS (top/left inline). */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: fixed;
  min-width: 230px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  /* Klidový stav je schovaný krytím, ne `display: none` — jinak by nešel
     animovat a odkazy by se do měření nedostaly. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .25s;
  /* Pod hlavičkou (100), ať jde menu zavřít stejným tlačítkem — stejně jako
     mobilní menu na homepage. */
  z-index: 99;
}
/* Třída je na seznamu, ne na .svc-menu: po přestěhování do <body> už seznam
   není potomkem přepínače, takže by ho selektor přes rodiče nenašel. */
.svc-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.svc-list a {
  display: block;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink);
  transition: background-color .2s ease;
}
.svc-list a:hover { background: var(--bg); }
/* Služba, na které právě jsem — ať je z menu poznat, kde člověk stojí. */
.svc-list a[aria-current="page"] { background: var(--lime); font-weight: 600; }

@media (max-width: 760px) {
  /* Na mobilu se „Zpět na úvod" nevejde vedle dvou dalších tlačítek a je
     zbytečné — do úvodu vede logo uprostřed hlavičky. */
  .subpage .nav-back { display: none; }

  /* Menu přes celou obrazovku, stejný princip jako burger na homepage.
     `inset` má `!important`, protože na desktopu píše JS top/left přímo do
     atributu style a ten by jinak vyhrál i tady. */
  .svc-list {
    inset: 0 !important;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    transform: none;
  }
  .svc-list.is-open { transform: none; }
  .svc-list a {
    font-size: 26px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
  }
  .svc-list a[aria-current="page"] { background: var(--lime); }
}