/* Sklo v scéne má vlastné, lacnejšie nastavenie: leží nad videom, ktoré sa
   pri sledovaní myši prekresľuje, a rozostrenie sa musí prepočítať pri každej
   zmene obrazu. Nasýtenie je druhý priechod navyše, preto tu nie je, a polomer
   je menší. Vzhľad drží výplň, svetlý rám a tieň – tie nestoja nič. */
.hero.hero-video{--sklo-blur:blur(7px)}

/* ============================================================
   Úvodná scéna s maskotom.
   Celý obraz z videa je pozadím hero – pes nie je vystrihnutý,
   takže tam nie je žiaden švík ani obdĺžnik obrázka. Video sa
   neprehráva: kurzor v ňom posúva čas a pes tak sleduje myš.
   Súbor sa načítava až za styl.css, preto tunajšie pravidlá
   prebíjajú pôvodné červené hero pri rovnakej špecifickosti.
   ============================================================ */

.hero.hero-video{
  /* Farba je odmeraná zo spodnej hrany snímky, aby plocha okolo videa
     nadväzovala bez viditeľného predelu. */
  --scena: #C9C0B9;
  /* Hlavička je lepivá, teda v toku. Scéna sa o jej výšku povytiahne hore
     a rovnakou hodnotou sa odsadí zvnútra: video ide až za menu a scéna
     aj tak sadne presne na obrazovku. */
  --hlavicka: 76px;
  background: var(--scena);
  color: var(--ink-2);
  margin-top: calc(-1 * var(--hlavicka));
  padding: var(--hlavicka) 0 0;
  min-height: 100vh;
  min-height: 100svh;   /* záloha vyššie – Safari pod 15.4 `svh` nepozná a deklaráciu zahodí */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero.hero-video::before{content:none}
/* Zladiť farbu plochy s videom sa nedá spoľahlivo: `object-fit: cover` podľa
   pomeru okna oreže inú časť obrazu, takže spodná hrana má zakaždým trochu
   inú farbu. Namiesto hádania sa video naspodku rozplynie do plochy stránky –
   švík tak neexistuje pri žiadnom pomere strán. */
.hero.hero-video::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14vh,170px);
  background:linear-gradient(180deg, rgba(235,228,219,0) 0%, rgba(235,228,219,.55) 55%, var(--bg) 100%);
  z-index:1;pointer-events:none;
}

.hero-video-pozadie{position:absolute;inset:0;z-index:0}
.hero-video-pozadie video,
.hero-video-pozadie .hero-poster{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 100%;
}
/* Poster drží obraz, kým sa video nenačíta – bez neho hero pri prvom
   načítaní blikne prázdnou plochou. */
.hero-video-pozadie .hero-poster{
  background:50% 100%/cover no-repeat;
  transition:opacity .35s;
}
.hero-video.pripravene .hero-poster{opacity:0}
/* Druhý klip (žranie) leží na prvom a prelína sa. Oba sú zarámované
   rovnako, overené na červenom kríži, takže pes pri prechode neposkočí. */
#heroVidJ{opacity:0;transition:opacity .55s ease}
.hero-video.zranie #heroVidJ{opacity:1}

.hero-mriezka{
  position:relative;z-index:2;flex:1 1 auto;
  display:grid;
  /* Stredný stĺpec drží psovi miesto. Musí byť širší než pes sám, inak text
     dobehne až k nemu – v obraze zaberá asi 27 % šírky, ale s odstupom na
     obe strany potrebuje okolo 40 %.
     Scéna ide od kraja po kraj, nie do 1180 px ako zvyšok webu: video je
     celoplošné a stĺpce po jeho stranách boli inak zbytočne stiesnené. */
  grid-template-columns:minmax(0,1fr) minmax(320px,34vw) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:end;
  max-width:none;width:100%;
  padding:0 clamp(20px,3.2vw,60px) clamp(26px,6vh,74px);
}

/* ---- ľavý stĺpec: pôvodné texty, len na svetlom podklade ---- */
.hero.hero-video .hero-lavo{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero.hero-video .hero-badges{margin-bottom:0}
/* Rovnaký polopriehľadný sklovitý štýl ako tlačidlo „Navigovať k nám“ –
   nad videom to drží lepšie než plná biela. Farbu nesie len bodka. */
/* Pilulka je odkaz na rozpis hodín v kontakte. */
/* Pilulka so stavom otvorenia je odkaz na rozpis hodín, tak sa má aj správať:
   pri nabehnutí myšou nadskočí a prehĺbi tieň rovnako ako tlačidlá pod ňou
   (`.btn:hover{transform:translateY(-2px)}`). Doteraz len zosvetlela plochu,
   takže nepôsobila klikateľne, hoci klikateľná je. */
.hero.hero-video .pill{
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hero.hero-video .pill:hover{
  background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.95);
  transform:translateY(-2px);box-shadow:var(--tien-zdvih);
}
.hero.hero-video .pill:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .hero.hero-video .pill,
  .hero.hero-video .pill:hover{transition:none;transform:none}
}
.hero.hero-video .pill,
.hero.hero-video .pill.live{
  background:var(--sklo);color:var(--ink);border:1.5px solid var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--sklo-tien);
}
.hero.hero-video .pill .dot{color:#7a726e}
.hero.hero-video .pill.live .dot{color:#2E9E4F}
.hero.hero-video h1{color:var(--ink);font-size:clamp(2rem,3.2vw,3.2rem);max-width:13ch}
/* Pôvodný obrys písma bol biely na červenej. Na svetlom pozadí by zmizol. */
.hero.hero-video h1 u{-webkit-text-stroke:0;color:var(--red)}
/* Veta má 121 znakov a má vyjsť na tri riadky, teda okolo 41 znakov na riadok.
   Samotné `max-width` na to nestačí – ak je ľavý stĺpec užší, zlomí sa na
   štyri. Preto sa s úzkym oknom zmenšuje aj písmo, takže tri riadky vydržia
   aj tam. */
.hero.hero-video .hero-claim{
  color:var(--ink-2);line-height:1.62;
  font-size:clamp(.95rem, .9vw + .3rem, 1.08rem);
  max-width:46ch;
}
/* Tlačidlá musia zostať v rade. Pri zalomení vypadli pod seba a ľavý stĺpec
   sa vytiahol do výšky, kde už zavadzal psovi. */
.hero.hero-video .hero-actions{margin-top:4px;flex-wrap:nowrap;gap:12px}
.hero.hero-video .hero-actions .btn{white-space:nowrap;padding:15px 26px}
/* Tieň je neutrálne tmavý, nie červená žiara – na teplej stene drží lepšie. */
.hero.hero-video .btn-white{
  background:var(--cta);color:#fff;
  box-shadow:var(--cta-lesk), 0 18px 32px -16px rgba(96,38,30,.7);
}
.hero.hero-video .btn-white:hover{background:var(--cta);filter:brightness(1.06);
  box-shadow:var(--cta-lesk-h), 0 24px 38px -16px rgba(96,38,30,.78)}
.hero.hero-video .btn-ghost{
  background:var(--sklo);color:var(--ink);border-color:var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--sklo-tien);
}
.hero.hero-video .btn-ghost:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.95)}
/* Informácie pod pásom. Šírku im držím pevne – rozšíriť sa mal iba pás
   s krmivami, štyri krátke údaje roztiahnuté cez celý stĺpec by sa rozpadli.
   Každý má vlastnú červenú linku zľava; farbu tak nesie štruktúra a nie text. */
.hero.hero-video .trust{
  display:grid;grid-template-columns:1fr 1fr;gap:15px 20px;margin-top:2px;
  padding:0;border-top:0;background:none;max-width:404px;
}
.hero.hero-video .trust div{
  position:relative;padding-left:13px;
  color:var(--ink-soft);font-size:.715rem;line-height:1.5;
}
.hero.hero-video .trust div::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--red),rgba(225,33,31,.22));
}
.hero.hero-video .trust b{
  display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;
  font-size:.83rem;font-weight:600;color:var(--ink);margin-bottom:2px;
}
/* Otváracie hodiny: hlavna.js dáva hlavnú skupinu do <b> a ostatné dni za ňu
   ako holý text – ten preto padne na vlastný riadok pod ňu. */
.hero.hero-video .trust #gRating{color:var(--red);font-weight:700}

/* ---- pravý stĺpec: čo si ľudia najčastejšie rezervujú ----
   Podľa predlohy: priesvitné mliečne panely s rámom a tieňom, nie biele karty
   ani holé dlaždice. Tú hĺbku robí práve rám na svetlej hrane a tieň pod ním. */
.hero-pravo{justify-self:end;width:min(100%,468px);display:flex;flex-direction:column;gap:12px}
/* Štítok aj odkaz na katalóg sú zarovnané doprava, k okraju scény – pás
   s krmivami zostáva cez celú šírku stĺpca. */
.hero-top{display:flex;flex-direction:column;align-items:flex-end}
.hero-top[hidden]{display:none}
.hk-pas{width:100%}

.hk-oko{
  align-self:flex-end;text-decoration:none;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  background:var(--sklo);border:1px solid var(--sklo-ram);
  border-radius:12px;padding:9px 13px;margin-bottom:10px;
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:0 10px 24px -18px rgba(58,44,34,.9);
  transition:border-color .2s, color .2s, transform .2s;
}
.hk-oko:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.95);transform:translateY(-1px)}

/* Pás sa pri prejdení myšou sám posúva a doťahuje ďalšie položky sprava.
   Vpravo mizne do stratena, aby bolo vidno, že tam ešte niečo je. */
.hk-pas{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  /* Do stratena na oboch stranách, nie len vpravo. Pás sa posúva oboma
     smermi a dokola, takže naľavo je vždy ďalšia položka – tvrdý orez tam
     vyzeral ako chyba, kým vpravo to pôsobilo, že produkty vychádzajú z hmly.

     POZNÁMKA K CENE: maska z pásu robí „backdrop root", takže dlaždice
     vnútri prestanú snímať video za sebou a `backdrop-filter` na nich
     nemá čo rozostriť – ostane z nich priesvitná biela bez rozostrenia.
     Skúšal som to obísť prekryvnými vrstvami nad pásom; rozplynutie bolo
     citeľne slabšie a majiteľ si vypýtal späť pôvodné. Je to jeho voľba
     medzi ostrým rozplynutím okrajov a rozostrením pod dlaždicami –
     obe naraz sa v CSS mať nedajú. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
/* Obal ostáva v HTML aj tu – nesie len šírku. Rozplynutie okrajov robí
   maska priamo na `.hk-pas` (viď poznámku pri ňom). */
.hk-obal{position:relative;width:100%}

.hk-pas::-webkit-scrollbar{display:none}
.hk-zoznam{display:flex;gap:12px;width:max-content;padding:2px 2px 6px}

.hk-riadok{
  flex:0 0 212px;display:flex;flex-direction:column;gap:9px;text-decoration:none;
  /* Dlaždica si vzhľad skla nesie sama, nie cez `backdrop-filter`. Ten je tu
     mŕtvy: maska na páse z neho robí „backdrop root", takže rozostrovať nemá
     čo (viď poznámku pri `.hk-pas`). Namiesto rozostrenia teda šikmý prechod
     priehľadnej bielej a svetlý pruh po hornej hrane – to je to, čo oko na
     skle číta ako lesk. Plocha je zámerne redšia než `--sklo`: cez dlaždicu
     má byť vidieť stenu za ňou.

     `contain` hovorí prehliadaču, že vnútro dlaždice neovplyvňuje okolie,
     takže pri posune neprepočítava celú stránku. */
  background:linear-gradient(158deg,
    rgba(255,255,255,.60) 0%, rgba(255,255,255,.32) 54%, rgba(255,255,255,.46) 100%);
  border:1px solid rgba(255,255,255,.78);
  border-radius:16px;padding:13px 13px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sklo-tien);
  contain:layout paint;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
.hk-riadok:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 26px 42px -24px rgba(58,44,34,1)}

.hk-foto{
  height:196px;display:flex;align-items:flex-end;justify-content:center;
  /* Fotky od dodávateľa sú na bielom, nie vystrihnuté. Násobenie bielu na
     svetlom podklade zhasne a zostane len produkt – preto nemá dlaždica pod
     fotkou žiadny biely štvorec. Drží to len na svetlej ploche. */
  mix-blend-mode:multiply;
}
.hk-foto img{
  max-width:100%;max-height:196px;width:auto;height:auto;object-fit:contain;display:block;
  /* Dva tiene: tesný pod produktom a mäkký širší – bez toho výrobok na paneli
     len leží namiesto toho, aby nad ním stál. */
  filter:drop-shadow(0 6px 4px rgba(72,54,40,.32)) drop-shadow(0 18px 22px rgba(72,54,40,.26));
}
.hk-foto:empty{border-radius:12px;background:rgba(255,255,255,.3)}
.hk-meno{
  font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hk-meno span{
  display:block;font-weight:600;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:4px;
}
.hk-cena{font-size:.9rem;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.hk-vsetky{display:inline-block;margin-top:12px;font-size:.75rem;font-weight:600;color:var(--red)}

/* ---- telefón ---- */
@media(max-width:1000px){
  /* Šestnásť ku deviatim na výšku telefónu ukrojí tri štvrtiny šírky.
     Video preto dostane vlastný pás nad textom: kým je pás užší než 16:9,
     oreže sa len do šírky a pes v ňom zostáva celý.

     Odsadenie zhora tu nie je. Keď bolo, začínal pás pod hlavičkou a nad ním
     ostal pásik farby scény. Odkedy má pás pomer strán samotného klipu, je
     v zábere nad psom dosť miesta na logo aj pilulky – tie teda plávajú
     priamo nad videom, rovnako ako na počítači, a nič sa neoreže.

     `--hlavicka` tu riadi len záporný margin (vnútorné odsadenie rušíme),
     takže sa scéna povytiahne pod lištu a video ide až k hornej hrane okna. */
  .hero.hero-video{--hlavicka:64px;padding-top:0}
  /* Bez min-width:0 sa stĺpec mriežky nezmenší pod šírku svojho obsahu.
     Tlačidlá so zákazom zalomenia tak roztiahli celý hero za okraj obrazovky
     a veta pod nadpisom sa orezala vpravo. */
  .hero-mriezka > *{min-width:0}
  /* Prostredný stĺpec je prázdny div (miesto pre psa). V jednom stĺpci dostane
     vlastný riadok s nulovou výškou a `gap` sa uplatní pred ním aj za ním –
     medzera pod textom bola dvojnásobná. */
  .hero-mriezka > [aria-hidden="true"]:empty{display:none}
  /* Na mobile je scéna pás nad textom, nie pozadie celej sekcie – rozplynutie
     naspodku by prekrylo text pod ním. */
  .hero.hero-video::after{content:none}
  .hero-video-pozadie::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;
    background:linear-gradient(180deg, rgba(235,228,219,0), var(--bg));
    pointer-events:none;
  }
  /* Mobilný klip je 960 × 1080, teda takmer na výšku – nie 16:9 ako ten
     desktopový. Pás mal pevnú výšku 46 svh, takže bol na väčšine telefónov
     širší, než je pomer videa, a `cover` ukrojil zvrchu: psovi zmizli uši.

     Pás preto dostane pomer strán samotného klipu. Vtedy `cover` neoreže nič
     ani na jednej strane a nad psom ostane presne toľko miesta, koľko je
     v zábere – to isté, čo na počítači, kde nad ním plávajú logo a pilulky. */
  .hero-video-pozadie{position:relative;inset:auto;width:100%;order:1;
    flex:0 0 auto;min-height:0;aspect-ratio:960 / 1080}
  /* Pes nestojí v zábere presne v strede, je kúsok vpravo. Vrstvu preto
     posunieme o 6 % doľava a o toľko ju rozšírime – orežeme tým ľavý okraj
     pozadia (je to prázdna stena) a pes sadne na stred obrazovky.
     `object-position` by tu nepomohol: pri zhodnom pomere strán niet čo
     posúvať, lebo obraz presne sadne. */
  .hero-video-pozadie video,
  .hero-video-pozadie .hero-poster{width:110%;left:-10%;right:auto}
  .hero-mriezka{
    order:2;flex:0 0 auto;grid-template-columns:1fr;align-items:start;gap:18px;
    padding:18px 20px 24px;background:var(--scena);
  }
  .hero.hero-video .hero-lavo{padding:0;gap:14px;align-items:stretch;min-width:0}
  /* Dve tlačidlá vedľa seba sa na telefón nezmestia. Idú pod seba a cez celú
     šírku – na dotyk je to aj pohodlnejšie než dva úzke terče. */
  .hero.hero-video .hero-actions{flex-wrap:wrap;gap:10px}
  .hero.hero-video .hero-actions .btn{flex:1 1 100%;justify-content:center;padding:15px 20px}
  /* Tri riadky nadpisu zaberali na telefóne tretinu prvej obrazovky. „Natankuj
     svojmu miláčikovi" sa do jedného riadka zmestí – pri 6,6 vw je aj na
     320 px displeji potrebná šírka menšia než dostupná.

     „Plnú nádrž" je pointa vety, preto je väčšie než riadok nad ním – nie
     rovnaké. Rozdiel je 1,32×, čo je zhruba tercia na typografickej škále:
     dosť na to, aby oko poradie vnímalo, málo na to, aby to pôsobilo ako
     dva rôzne nadpisy. */
  .hero.hero-video h1{font-size:clamp(1.25rem,6.6vw,2.4rem);max-width:none;
    letter-spacing:.02em;line-height:1.06}
  .hero.hero-video h1 > span:nth-child(1),
  .hero.hero-video h1 > span:nth-child(2){display:inline}
  /* Medzi spanmi nie je v HTML medzera, inak by sa slová zlepili. */
  .hero.hero-video h1 > span:nth-child(1)::after{content:' '}
  .hero.hero-video h1 > span:nth-child(3){display:block;font-size:1.32em;
    letter-spacing:.035em;margin-top:.06em}
  .hero.hero-video .hero-claim{max-width:none}
  .hero-pravo{width:100%;justify-self:stretch;gap:18px}
  .hero.hero-video .trust{grid-template-columns:1fr 1fr}
  /* Rozostrenie dlaždíc tu ostáva zámerne, hoci je to osemnásť kompozitných
     vrstiev nad prehrávaným videom. Raz som ho kvôli výkonu vypol a majiteľ
     ho dvakrát vypýtal späť – vyzerá to inak a horšie. Výkon sa dá získať
     inde, tento vzhľad nie. */
  .hk-riadok{flex:0 0 158px}
  .hk-foto,.hk-foto img{height:140px;max-height:140px}
}

@media (prefers-reduced-motion:reduce){
  #heroVidJ{transition:none}
}

/* Plocha stránky, hlavička a jej bubliny žijú v styl.css – platia pre celý
   web, nielen pre úvodnú scénu. Tu zostávajú len výnimky úvodnej stránky. */
@media(min-width:1001px){
  /* styl.css skrýva Kontakt nad 1200 px, lebo pôvodná lišta bola preplnená.
     Tu sa zmestí – menu je bez podfarbenia a s tesnejšími rozostupmi. */
  body.uvod .nav-links a.nav-kontakt{display:inline-block}
  /* Rezervácia vyzerá ako ostatné položky. Červený text ani ružové podfarbenie
     z styl.css sem nepatria – v menu má byť päť rovnocenných nápisov a červenú
     nesú tlačidlá, nie odkazy. */
  body.uvod .nav-links a.nav-hot{background:none;color:var(--ink-2);font-weight:600}
  /* A pri nabehnutí myšou tá istá sklovitá bublina ako pri ostatných
     položkách. Bez tohto riadka vyhral `background:none` vyššie: má rovnakú
     špecifickosť ako pravidlo v styl.css (obe 0,3,2) a hero.css sa načítava
     neskôr, takže pri zhode rozhoduje poradie – a „Rezervovať krmivo" ostalo
     ako jediná položka celkom bez bubliny. */
  body.uvod .nav-links a.nav-hot:hover{
    color:var(--ink);background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.95);
    -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  }
}

/* ================= HUSTEJŠÍ RYTMUS ÚVODNEJ STRÁNKY =================
   Sekcií je na úvodnej deväť a pri pôvodnom odsadení sa medzi nimi
   scrolluje dlhšie než sa číta. Zmenšujeme len zvislé medzery, veľkosti
   písma a šírky zostávajú – tie sú v poriadku.
   Platí len pre úvodnú stránku; v katalógu je rytmus iný a sedí. */
body.uvod{--sekcia:clamp(34px,4.2vw,62px)}

/* Nadpis stál od očka aj od textu pod sebou skoro rovnako ďaleko, takže
   sa skupina nedržala pokope. Očko je bližšie k nadpisu, nadpis k textu. */
body.uvod .eyebrow{margin-bottom:7px}
body.uvod section h2{margin-bottom:.3em}
body.uvod .sort-intro{margin-bottom:26px}
body.uvod .rev-top{margin-bottom:20px}
body.uvod #google-reviews-widget{margin-bottom:16px}
body.uvod .f-grid{gap:28px;margin-bottom:24px}
body.uvod .lead{max-width:66ch}

/* Väčšie celky vnútri sekcií mali vlastné veľké odsadenia navrch. */
body.uvod .band{padding:clamp(28px,3.6vw,44px)}
body.uvod footer{padding:40px 0 20px}


/* ==========================================================================
   Telefón: „Rezervovať krmivo" musí byť vidieť bez rolovania
   --------------------------------------------------------------------------
   Poradie bolo: pes (439 px) → pilulka so stavom → nadpis → veta → tlačidlá.
   Na displeji vysokom 800 px vyšlo „Rezervovať krmivo" na 692 px a „Navigovať
   k nám" už za spodnú hranu. Kto prišiel rezervovať, musel najprv rolovať.

   Nové poradie: hlavička → nadpis → pes so stavom otvorenia → obe tlačidlá.
   Veta o obsluhe ide pod ne — je to argument, nie akcia, a číta ju ten, kto
   sa nerozhodol hneď.

   Robí to `display:contents` na dvoch obaloch: mriežka aj ľavý stĺpec svoje
   boxy odovzdajú a ich deti sa stanú priamymi deťmi `#hero`. Až tak sa dá
   nadpis dostať NAD pozadie s videom, ktoré je ich súrodenec — inak by sa
   celý blok textu musel sťahovať do dvoch kópií. Odsadenie po zrušených
   obaloch preberajú jednotlivé prvky.
   ========================================================================== */
@media(max-width:700px){
  .hero.hero-video{display:flex;flex-direction:column}
  .hero.hero-video .hero-mriezka,
  .hero.hero-video .hero-lavo{display:contents}

  /* Hero sa zámerne podsúva pod hlavičku (`margin-top:-64px`), aby scéna
     siahala po vrch displeja. Kým tam bolo video, nevadilo to; nadpis by
     tam ale skončil pod logom a burgerom. Odsadenie preto o výšku hlavičky
     a ešte kúsok. */
  /* Poradie na telefóne: obrázok → nadpis → Rezervovať krmivo → veta
     o obsluhe → Navigovať k nám. Nadpis stál chvíľu NA psovi, ale scéna sa
     tým prerušila a text sedel na kanistri — patrí pod obrázok, ako bol.

     Tlačidlá musia ísť od seba, lebo medzi ne patrí veta. Preto `.hero-actions`
     odovzdá svoj box (`display:contents`) a obe tlačidlá sa stanú priamymi
     deťmi scény, kde sa dajú zoradiť každé zvlášť. Odsadenie a šírku po
     zrušenom obale preberajú samy. */
  .hero.hero-video .hero-video-pozadie{
    order:1;position:relative;height:auto;aspect-ratio:1.28;min-height:0;margin-top:0}
  /* Stav otvorenia sedí na psovi, nie pod ním — samostatný riadok len pre
     pilulku ujedal 52 px z prvej obrazovky. Je na stred, menší a priehľadný:
     je to údaj, nie akcia, a scéna má cezeň presvitať. */
  .hero.hero-video .hero-badges{
    order:2;position:relative;z-index:3;justify-content:center;
    margin:-46px 0 0;padding:0 20px}
  .hero.hero-video #statusPill{
    padding:6px 13px;font-size:.72rem;letter-spacing:.04em;
    background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
    box-shadow:none}
  .hero.hero-video #statusPill .dot{width:6px;height:6px}
  .hero.hero-video h1{order:3;margin:22px 0 0;padding:0 20px}
  .hero.hero-video .hero-actions{display:contents}
  .hero.hero-video .hero-actions .btn{
    flex:0 0 auto;align-self:stretch;margin:0 20px;justify-content:center}
  .hero.hero-video .hero-actions .btn-white{order:4;margin-top:18px}
  .hero.hero-video .hero-claim{order:5;margin:18px 0 0;padding:0 20px}
  .hero.hero-video .hero-actions .btn-ghost{order:6;margin-top:18px}
  .hero.hero-video .hero-pravo{
    order:7;padding:18px 20px 24px;background:var(--scena)}

  /* Stredný prázdny stĺpec držal miesto psovi v mriežke. Mriežka tu už nie
     je, takže by z neho ostal len prázdny riadok. */
  .hero.hero-video .hero-mriezka > [aria-hidden="true"]{display:none}
}

/* ---------- doladenie scény na telefóne ----------
   Na telefóne ide preorezaný záber (`*-mobil-4`), vypálený presne na pomer
   rámu. Poster aj klip nesú ten istý obdĺžnik, takže pes pri spustení videa
   nepreskočí.

   Preto tu NIE JE `object-position`: keď sa obraz a rám pomerom zhodujú,
   `cover` nemá čo orezať a posúvať sa nemá čím. Rozšírenie prvku by obraz
   len zväčšilo a odrezalo psovi hlavu, `transform` by nechal pri okraji
   prázdny pruh. Tá cesta je slepá a už sa ňou išlo.

   Keď sa má pes posunúť, mení sa SÚBOR, nie štýl: v `hero.js` sa dočasne
   vrátia široké `*-4k-b`, výrez sa vyberie nástrojom a súbory sa preorežú
   nanovo (naposledy 45 % / 110 %, teda obdĺžnik 1060 × 982 zo súradnice
   392 × 98). Nástroj sa volal `posun-psa.html` a je v histórii:
   `git show 36cbe58:posun-psa.html > posun-psa.html`. */
@media(max-width:700px){
  .hero.hero-video .hero-video-pozadie{aspect-ratio:1.08;overflow:hidden}
  .hero.hero-video .hero-video-pozadie video,
  .hero.hero-video .hero-video-pozadie .hero-poster{
    inset:0;width:100%;height:100%}

  .hero.hero-video .hero-actions .btn{width:auto;max-width:none}
  /* „Plnú nádrž" je pointa vety, nie jej pokračovanie — potrebuje nad sebou
     viac vzduchu než riadkovanie jedného odseku. */
  .hero.hero-video h1 > span:nth-child(3){margin-top:.2em}
}