/* ============================================================
   B57 - GOOGLE RECENZE V NAŠÍ GRAFICE (nahrazuje Trustindex)
   ------------------------------------------------------------
   Drží se design systému Mujvit: bílé karty na krémové, radius 16,
   rámeček --brand-gray-1, text --brand-text, hvězdičky Google žluté #FBBC04.
   Mobile-first. Zlomy: 560 px (hlavička popupu), 660 a 980 px (sloupce zdi),
   768 px (dvě karty v karuselu), 1024 px (šipky karuselu).
   Tlačítka hranatá 12 px (Vít 21. 5. 2026: „všechny tlačítka ať jsou hranaté"), kolečka jen
   u ikonových tlačítek (křížek, šipky) - stejně jako `.mv-lightbox-close` v mujvit.css.
   Fokusový rámeček tu NENÍ nikde nastavený schválně: platí globální zelený z mujvit.css
   (`button:focus-visible`, `a:focus-visible`, `[tabindex]:focus-visible`).
   Rozměry odpovídají dnešnímu Trustindexu (změřeno na produkci 28. 8. 2026):
   odznak v hlavičce 63 px na výšku, souhrn na /recenze 121 px, zeď 3 sloupce.
   ============================================================ */

.mvr { font-family: inherit; color: var(--brand-text, #1A2332); }
/* Text jen pro čtečku - hvězdičky jsou z textových znaků a jsou `aria-hidden`, takže bez
   tohohle by se člověk se čtečkou hodnocení nedozvěděl vůbec. */
.mvr .mvr-skryty-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mvr, .mvr *, .mvr *::before, .mvr *::after { box-sizing: border-box; }

/* hvězdičky - textové, ne obrázky (design system) */
.mvr .mvr-stars { display: inline-flex; letter-spacing: -1px; font-size: 15px; line-height: 1; }
/* ⚠ Vít 1. 9. 2026: hvězdičky v odznaku vycházely ŠEDÉ. Nebyla to chyba tady - přebíjelo to
   vlastní CSS stránky (na hlavní `.hp-hero-trust span { color: var(--brand-text-soft) }`,
   které je specifičtější (0,1,1) než holé `.mvr-stars-on` (0,1,0)). Trustindexu se to stát
   nemohlo, ten si své HTML nesl v vlastním kontextu; naše značky vykreslujeme přímo do stránky,
   takže si její styly sáhnou i na ně. Proto je každá barevná deklarace zavěšená na `.mvr`
   (kořenová třída všech pěti podob) - tím je 0,2,0 a bleed ze stránky přebije. */
.mvr .mvr-stars-on { color: #FBBC04; }
.mvr .mvr-stars-off { color: var(--brand-gray-1, #E5E7EB); }
/* ⚠ Tentýž bleed (`.hp-hero-trust span { font-size: 13.5px }`) sahá i na VNITŘNÍ spany:
   hvězdičky jsou `.mvr-stars > span` a písmena nápisu Google `.mvr-g-napis > span`. Velikost
   je nastavená na obalu, jenže span uvnitř si ji od stránky přepsal na 13,5 px - na hlavní
   stránce byly hvězdičky v odznaku i v hlavičce seznamu menší, než mají být. `font: inherit`
   (0,2,1) je vrátí obalu. Barvu hvězdiček nese pravidlo výš, barvu písmen inline styl. */
.mvr .mvr-stars > span, .mvr .mvr-g-napis > span { font: inherit; }
.mvr .mvr-g { flex: 0 0 auto; display: block; }


/* ---------- 1+2. ODZNAK (1:1 podle Trustindexu, Vít 30. 8. 2026) ----------
   Rozměry a rozestupy jsou ODMĚŘENÉ na živém widgetu na www.mujvit.cz, ne odhadnuté:
     klikací plocha 336x63 · padding 20px · obsah na JEDNOM řádku vysokém 23px
     nápis Google 62x20 · 7px · hvězdičky 89x20 (5x 17) · 6px · počet 14px/600 · 3px · šipka 20x20
   Pozadí PRŮHLEDNÉ, žádný rámeček, žádný stín, rádius 12px.
   Naše je jen písmo a barva textu; struktura, rozměry i chování jsou jejich.
   Je to <button>: celý odznak otevírá vyskakovací seznam a musí to jít i klávesnicí. */
.mvr.mvr-badge {
  display: inline-flex; align-items: center;
  width: 336px; max-width: 100%; height: 63px;
  padding: 0 20px; margin: 0;
  background: transparent; border: 0; border-radius: 12px;
  font: inherit; color: var(--brand-text, #1A2332);
  cursor: pointer; text-align: left;
}
/* nápis Google naším písmem, ale v barvách Googlu (barvu nese každé písmeno zvlášť) */
.mvr .mvr-g-napis { flex: 0 0 auto; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 20px; margin-right: 7px; }
/* letter-spacing dorovnává šířku pěti hvězdiček na 89 px, jako to má Trustindex
   (základní .mvr-stars má -1px, což by tady dalo jen 79 px) */
.mvr.mvr-badge .mvr-stars { flex: 0 0 auto; font-size: 17px; line-height: 20px; letter-spacing: 1px; margin-right: 6px; }
.mvr .mvr-badge-pocet {
  flex: 0 1 auto; min-width: 0; margin-right: 3px;
  font-size: 14px; font-weight: 600; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* šipka › - dvě čáry 2px otočené o 45°, stejná konstrukce jako u nich */
.mvr .mvr-badge-sipka { flex: 0 0 auto; position: relative; width: 20px; height: 20px; }
.mvr .mvr-badge-sipka::before {
  content: ''; position: absolute; left: 5px; top: 6px; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .mvr.mvr-badge:hover .mvr-badge-pocet { text-decoration: underline; }
}
/* mobilní varianta: stejná výška i struktura, jen přes celou šířku a s menším odsazením.
   ⚠ `.mvr.mvr-badge-m` bez mezery - třída sedí na KOŘENI odznaku, ne na potomkovi. S mezerou
   (`.mvr .mvr-badge-m`) pravidlo nikdy nesedlo a mobilní odznak byl totožný s tím pro počítač
   (336 px, odsazení 20 px) - nález z kontroly 2. 9. 2026. */
.mvr.mvr-badge-m { width: 100%; max-width: none; padding: 0 12px; }
/* Vít 9. 9. 2026 z 320px telefonu: v odznaku se počet uřízl na „466 hod…". Spočítáno:
   odznak má 288 px, po odsazení zbývá 264 a pevné části (nápis 62 + hvězdičky 89 + šipka 20
   + mezery 16) si vezmou 187 - na počet zbylo 77 px, ale potřebuje 107.
   Pod 360 px se proto celý odznak o kus zmenší: menší písmo nápisu i hvězdiček, užší
   rozestupy a odsazení. Text se nezkracuje, jen se scvrkne to kolem něj.
   Od 360 px výš zůstávají rozměry odměřené podle Trustindexu beze změny. */
@media (max-width: 359.98px) {
  .mvr.mvr-badge-m { padding: 0 6px; }
  .mvr.mvr-badge-m .mvr-g-napis { font-size: 15px; margin-right: 5px; }
  .mvr.mvr-badge-m .mvr-stars { font-size: 15px; letter-spacing: .5px; margin-right: 5px; }
  .mvr.mvr-badge-m .mvr-badge-pocet { font-size: 13px; }
}

/* ---------- 3. SOUHRN (stránka /recenze) ---------- */
/* ---------- SOUHRN NAD ZDÍ (jen /recenze) ----------
   Vít 9. 9. 2026: „ať to je prostě podobné jak v tom popupu." Souhrn tedy vykresluje
   TU SAMOU hlavičku (`popupHlava(d, true)`), takže tu není co stylovat - jen se
   vycentruje a bez místa pro křížek, který tady žádný není. */
.mvr.mvr-souhrn { display: flex; justify-content: center; padding: 6px 0 0; }
/* Vít 10. 9. 2026: na /recenze logo Mujvit pryč (výš na stránce je v hlavičce i v nadpisu)
   a nápis Google, hvězdičky i počet na střed. Ve vyskakovacím seznamu zůstává všechno
   po levé straně a s logem - tam je to jediné místo, kde je vidět, čí hodnocení to je. */
.mvr .mvr-popup-hlava.mvr-hlava-solo {
  width: max-content; max-width: 100%; padding: 0;
  background: none; border: 0; border-radius: 0;
  justify-content: center;
}
.mvr .mvr-hlava-solo .mvr-popup-hlava-txt { align-items: center; gap: 6px; }
.mvr .mvr-hlava-solo .mvr-popup-google-logo .mvr-g-napis { font-size: 34px; line-height: 38px; }
.mvr .mvr-hlava-solo .mvr-popup-radek { gap: 10px; justify-content: center; }
.mvr .mvr-hlava-solo .mvr-stars { font-size: 26px; }
.mvr .mvr-hlava-solo .mvr-popup-prumer { font-size: 17px; }
.mvr .mvr-hlava-solo .mvr-popup-prumer strong { font-size: 28px; }
/* počet: bez záporného okraje, tady nic netlačí k hvězdičkám a má být na střed */
.mvr .mvr-hlava-solo .mvr-popup-google { align-self: center; margin-top: -8px; font-size: 15px; }
@media (max-width: 560px) {
  .mvr .mvr-hlava-solo .mvr-popup-google-logo .mvr-g-napis { font-size: 28px; line-height: 32px; }
  .mvr .mvr-hlava-solo .mvr-stars { font-size: 22px; }
  .mvr .mvr-hlava-solo .mvr-popup-prumer strong { font-size: 24px; }
}
@media (max-width: 359.98px) {
  .mvr .mvr-hlava-solo .mvr-popup-google-logo .mvr-g-napis { font-size: 24px; line-height: 27px; }
  .mvr .mvr-hlava-solo .mvr-stars { font-size: 19px; letter-spacing: .5px; }
  .mvr .mvr-hlava-solo .mvr-popup-prumer { font-size: 15px; }
  .mvr .mvr-hlava-solo .mvr-popup-prumer strong { font-size: 21px; }
}
/* ---------- 4. KARUSEL ---------- */
/* ⚠ Vít 2. 9. 2026: PŘESNĚ DVĚ KARTY, ne dvě a půl.
   Dřív tu bylo `grid-auto-columns: minmax(260px, 300px)`, což při šířce bloku 680 px vyšlo
   na 2,27 karty - třetí koukala zpoza okraje a vypadalo to jako chyba, ne jako náznak.
   Teď se šířka počítá z místa, které je: (100 % − mezera) / 2. Na 680 px bloku a mezeře
   16 px je karta 332 px - tedy na pixel totéž, co má Trustindex (změřeno na jeho živém
   widgetu na www.mujvit.cz: `flex: 0 0 50%`, karta 332 px, vnitřek 316 px).
   Pod 768 px jedna karta přes celou šířku a listuje se prstem. */
.mvr .mvr-carousel-pas {
  --mvr-mezera: 16px;
  display: flex; gap: var(--mvr-mezera); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;   /* posuvník pod pásem pryč - listuje se šipkami a prstem, Trustindex ho taky nemá */
}
/* Na mobilu karta ZÁMĚRNĚ není přes celou šířku: kus další musí vykukovat, jinak není poznat,
   že se dá listovat (šipky tam nejsou a posuvník je na dotyku překryvný, v klidu neviditelný).
   Na počítači je to naopak chyba, kterou Vít reklamoval - tam jsou přesně dvě, viz níž. */
.mvr .mvr-carousel-pas > .mvr-card { flex: 0 0 calc(100% - 34px); min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) {
  .mvr .mvr-carousel-pas > .mvr-card { flex: 0 0 calc((100% - var(--mvr-mezera)) / 2); }
}
.mvr .mvr-carousel-pas::-webkit-scrollbar { display: none; }

/* ---------- ŠIPKY KARUSELU ----------
   ⚠ Tenhle blok už jednou ZMIZEL - commit f4f2d016 (2. 9. 2026, přepis hlavičky popupu)
   ho omylem vzal s sebou a šipky pak neměly ani jedno pravidlo: průhledné tlačítko 12x44
   v proudu POD pásem. Přesně to Vít viděl na screenshotu („ty staré jsou mnohem lepší").
   Kdo tu bude sahat na sousední bloky, ať si po sobě zkontroluje `grep mvr-sip`.
   Šipky se ukazují od 1024 px stejně jako u Trustindexu (níž se listuje prstem); velikost
   a vzhled jsou naše, viz komentář u `.mvr-sip` níž. */
.mvr .mvr-carousel-telo { position: relative; }
/* Šipky (Vít 2. 9. 2026: „udělej je hezčí"). Kulaté bílé tlačítko, které leží NAD okrajem
   pásu - u Trustindexu je to 30 px kolečko bez rámečku a bez stínu, což na krémovém pozadí
   splývá. Naše je o kus větší (40 px), s jemným rámečkem a měkkým stínem, ať je vidět, že
   „pluje" nad kartami, a s reakcí na najetí myší. Svisle na střed, ne u horní hrany jako
   u nich - uprostřed se na ni míří líp. Kolečko, ne hranaté 12 px: je to ikonové tlačítko
   jako `.mv-lightbox-close` v mujvit.css, na ta se Vítovo „hranatá" nevztahuje.
   ⚠ Leží VEDLE pásu (-20 px), ne na něm. Když byly uvnitř (+6 px), překrývaly text druhé
   karty - změřeno: šipka 938-974, text druhé karty 680-980. Trustindex je má uvnitř, ale
   u horní hrany, kde je jen avatar; přes text by je nedal taky. */
.mvr .mvr-sip {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; min-height: 0; padding: 0; line-height: 0; box-sizing: border-box; cursor: pointer;
  font-size: 0;   /* globální styl tlačítek na webu jinak nafoukne výšku na 44 px */
  background: #fff; border: 1px solid var(--brand-gray-1, #E5E7EB); border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10); color: var(--brand-text, #1A2332);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
/* Klínek: čtverec 8x8 jen se dvěma rámečky, takže jeho „inkoust" leží mimo střed boxu -
   po otočení se posune asi o 2 px. Vyrovnává se to posunem v témž `transform` u OBOU šipek
   stejně; dřív to měla vyrovnané jen šipka zpět a ta dopředu seděla viditelně vpravo. */
.mvr .mvr-sip::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: translate(-70%, -50%) rotate(45deg);
}
.mvr .mvr-sip-zpet { left: -20px; }
.mvr .mvr-sip-zpet::before { transform: translate(-30%, -50%) rotate(-135deg); }
.mvr .mvr-sip-vpred { right: -20px; }
.mvr .mvr-sip[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-sip:hover { border-color: var(--brand-text-soft, #6B7785); box-shadow: 0 4px 16px rgba(0, 0, 0, .14); transform: translateY(-50%) scale(1.06); }
}
.mvr .mvr-sip:active { transform: translateY(-50%) scale(.96); }
/* ⚠ Šipky až od 1024 px, stejně jako je má Trustindex. Mezi 768 a 1023 px jsou sice dvě
   karty, ale to je pásmo tabletů - tam je to dotykové zařízení, `@media (hover: hover)` neplatí
   a 40px kolečko je pod 44px dotykovým minimem. Listuje se prstem. Hranice je 1023.98px
   schválně: při zlomkové šířce okna (zoom, škálování ve Windows) by mezi 1023 a 1024 neplatilo
   ani jedno pravidlo a šipky by naskočily tam, kde nemají. */
/* Vít 8. 9. 2026 (z mobilu): „přidat viditelné tlačítko doprava i doleva, ať jde klikat
   na další karty i bez swipu." Do 1024 px se proto šipky ukazují taky - ale POD pásem,
   ne po jeho stranách. Na 360 px je vidět jedna karta široká ~294 px; kolečko u kraje by
   leželo přes její text, což je zrovna to, co má člověk číst. Pod pásem nepřekáží ničemu
   a je na něj pohodlně vidět i dosáhnout palcem.
   44x44 místo 40x40: na dotyku platí 44px minimum z návrhového systému, u počítače je
   šipka „nad" kartami a myš trefí i 40. */
@media (max-width: 1023.98px) {
  .mvr .mvr-carousel-telo { padding-bottom: 58px; }
  /* svisle dolů místo na střed - proto `top: auto` a zrušený translateY */
  .mvr .mvr-sip { top: auto; bottom: 0; transform: none; width: 44px; height: 44px; }
  /* dvojice na střed, 16 px mezi sebou (52 - 44 = 8 px na každou stranu) */
  .mvr .mvr-sip-zpet { left: calc(50% - 52px); }
  .mvr .mvr-sip-vpred { right: calc(50% - 52px); }
  /* ⚠ obojí přebíjí pravidla výš, která počítají s translateY(-50%) - bez toho by šipka
     při stisku vyskočila o půl své výšky nahoru */
  .mvr .mvr-sip:active { transform: scale(.96); }
  @media (hover: hover) and (pointer: fine) {
    .mvr .mvr-sip:hover { transform: scale(1.06); }
  }
}
@media (prefers-reduced-motion: reduce) { .mvr .mvr-sip { transition: none; } }

/* ---------- 5. ZEĎ RECENZÍ ---------- */
/* minmax(0, 1fr), ne 1fr: `1fr` se roztáhne na nejširší nezalomitelný obsah v sloupci
   (dlouhé jméno, adresa bez mezer) a karty pak vylezou z mřížky ven. Naměřeno na
   mobilu 375 px: sloupec 390 px v kontejneru 353 px. */
.mvr .mvr-zed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* Trustindex počítá sloupce jako floor(šířka / 300): na 1280 tři, na 768 dva, na 375 jeden.
   Media dotazy to dělají nastejno a nepotřebují na to JavaScript. */
/* ⚠ Tyhle dva řádky MUSÍ mít `.mvr` stejně jako základní pravidlo výš. Bez něj mají
   specificitu 0,1,0 proti 0,2,0 základu - a prohrají BEZ OHLEDU na media query.
   Přesně to se stalo 1. 9. při hromadném zavěšení selektorů na `.mvr`: přepis šel po
   začátcích řádků, jenže tyhle dva začínají `@media`, takže je minul. Zeď od té chvíle
   držela JEDEN sloupec na všech šířkách a „Načíst další" odkrývalo po třech kartách
   místo po devíti - `porce()` v recenze.js počítá dávku z počtu sloupců. */
@media (min-width: 660px) { .mvr .mvr-zed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 980px) { .mvr .mvr-zed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* Karta schovaná do prvního kliknutí na „Načíst další" (schovává JS, ne server).
   ⚠ Zavěšeno na `.mvr`, NE na `.mvr-zed`: tutéž třídu dává `sbalZed()` i kartám ve
   vyskakovacím seznamu, kde mřížka je `.mvr-popup-seznam`. Dokud tu stálo `.mvr .mvr-zed
   .mvr-skryta`, v popupu se neschovalo NIC - vysypalo se všech 50 recenzí naráz a „Načíst
   další" naprázdno čtyřikrát nic neudělalo (nález z kontroly 2. 9. 2026).
   ⚠ A musí to být `.mvr-card.mvr-skryta` (0,3,0): samotné `.mvr .mvr-skryta` má 0,2,0 stejně
   jako `.mvr .mvr-card { display: flex }` níž, a to je v souboru později - vyhrálo by a karta
   by zůstala vidět (naměřeno: 50 z 50 viditelných i po opravě selektoru). */
.mvr .mvr-card.mvr-skryta { display: none; }
.mvr .mvr-zed-vic { display: flex; justify-content: center; margin-top: 16px; }
.mvr .mvr-vic-btn[hidden] { display: none; }
/* „Načíst další" = druhotné tlačítko webu (`.btn-secondary` v mujvit.css: bílé, rámeček
   gray-1, hranaté 12 px, 700/15 px). Dřív mělo vlastní zelený obrys, který v design systému
   neexistuje. */
.mvr .mvr-vic-btn {
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1.3; cursor: pointer;
  padding: 12px 24px; min-height: 44px; border-radius: 12px;
  background: #fff; color: var(--brand-text, #1A2332);
  border: 1.5px solid var(--brand-gray-1, #E5E7EB);
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-vic-btn:hover { border-color: var(--brand-text, #1A2332); background: #fafafa; }
}

/* ---------- KARTA RECENZE (sdílená) ---------- */
.mvr .mvr-card {
  background: #fff; border: 1px solid var(--brand-gray-1, #E5E7EB);
  border-radius: var(--radius-lg, 16px); padding: 15px;
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.04));
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;   /* ať karta nikdy netlačí sloupec do šířky (viz .mvr-zed výš) */
  text-align: left;   /* sekce `.rev-hero` na hlavní stránce centruje - karta se toho nesmí chytit */
}
.mvr .mvr-card-head { display: flex; align-items: center; gap: 10px; }
.mvr .mvr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--brand-cream, #FFF9F0); }
.mvr .mvr-avatar-txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-soft, #E8F5E9); color: var(--brand-primary, #289546);
  font-weight: 800; font-size: 16px;
}
.mvr .mvr-card-kdo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* ⚠ `line-height` je tu přišpendlený stejně jako u textu recenze. Výška karty 194 px se
   z těchhle čísel počítá, a kdyby je stránka posunula svým prokládáním, karta by přetekla.
   Na dnešních stránkách platí 1,55 všude, rozbilo by se to až tomu, kdo widget vloží jinam. */
.mvr .mvr-card-kdo strong { font-size: 14.5px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvr .mvr-card-datum { font-size: 12px; line-height: 19px; color: var(--brand-text-soft, #6B7785); }
/* Vít 1. 9. 2026: text recenze ČERNÝ, ne šedý. Velikost i prokládání jsou přišpendlené
   napevno (ne poměrem): přebíjelo je CSS stránky (`.rev-hero p` je 0,1,1) a zároveň se
   z nich počítá výška karty níž.
   14 px / 20 px je hustota Trustindexu (odečteno: 14 px, prokládání 20,3 px, textové pole
   81 px = ČTYŘI řádky). Dřív jsme měli 14,5/24, což jsou v témž místě jen tři. Vít chtěl
   „ať se do širší karty vejde víc" - tohle je ono. Velikost i prokládání jsou přišpendlené
   napevno, protože se z nich počítá výška karty a přebíjí je CSS stránky. */
.mvr .mvr-card-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--brand-text, #1A2332); white-space: pre-line; overflow-wrap: anywhere; }

/* fotka recenzenta s písmenem jako zálohou pod ní (viz `avatar()` v recenze-render.js) */
.mvr .mvr-avatar-obal { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.mvr .mvr-avatar-obal .mvr-avatar { position: absolute; inset: 0; }
/* fotka se objeví, až když je opravdu načtená (viz onload v recenze-render.js);
   do té doby je vidět písmeno pod ní, ne prázdné kolečko */
.mvr .mvr-avatar-obal .mvr-avatar-foto { opacity: 0; transition: opacity .15s ease; }

/* řádek s hvězdičkami a odznakem */
.mvr .mvr-card-hodnoceni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Vít 9. 9. 2026: zelená placka s nápisem „Ověřeno Googlem" byla NÁŠ design na cizí věci.
   Zůstává jen modrá fajfka v Google modré, jak ji má Google i Trustindex - bez pozadí,
   bez rámečku, bez textu. Nápis se z widgetu neztratil, jen se stal skrytým popiskem.
   ⚠ Žádné `font-size` tu být nemusí: uvnitř není text, jen SVG s pevnými 15 px. */
.mvr .mvr-overeno { display: inline-flex; align-items: center; color: #4285F4; }
.mvr .mvr-overeno svg { flex: 0 0 auto; display: block; }

/* ---------- KARTY STEJNĚ VYSOKÉ (zeď + karusel) ----------
   Bez tohohle roste karta podle textu, jedna dlouhá recenze roztáhne celý řádek
   mřížky a vedle ní zůstane prázdno. Pevná výška + rolování textu uvnitř karty je
   to, čím se dnešní Trustindex drží pohromadě. Text zůstává v HTML celý. */
/* Výška karty. Vít 1. 9. chtěl tři řádky textu, což si tehdy vynutilo 240 px - do 194 px se
   tři řádky a k tomu tlačítko „Číst celé" (44 px, minimum dotykové plochy) nevešly.
   2. 9. šlo tlačítko pryč, takže jsme zpátky na Trustindexových 194 px:
   hlavička 41 + hvězdičky 24 + text 79 + odsazení 32 + mezery 18 = 194.
   Od 2. 9. je uvnitř textové pole ~82 px a řádky mají 20 px, takže jsou vidět ČTYŘI -
   stejná hustota, jakou má Trustindex (jeho pole 81 px, prokládání 20,3 px). */
.mvr .mvr-card-fix { height: 194px; position: relative; }
/* ⚠ Vyblednutí u spodní hrany karty je PRYČ (Vít 2. 9. 2026, nález z kontroly).
   Bílý přechod byl přilepený na KARTU, ne na rolující text: ležel na y 156-178, ale textové
   pole končí na 177 - tedy přesně přes třetí řádek. Dokud existovalo „Číst celé", vedla z toho
   cesta ven (`.mvr-card-rozbalena::after { display: none }`). Po jeho zrušení už žádná nebyla
   a konec dlouhé recenze by nešel přečíst vůbec. Trustindex tam taky nic takového nemá -
   jeho textové pole se prostě roluje. */
/* ⚠ Vít 1. 9. 2026: u DLOUHÉ recenze byl vidět JEN JEDEN ŘÁDEK a pod ním prázdno.
   Na vině bylo `min-height: 0` v kombinaci s `flex: 1 1 auto`: základní velikost pružné
   položky je výška obsahu (u dlouhé recenze přes 300 px), karta má pevných 194 px, takže
   se skoro celé smrštění svezlo na tenhle box - a `min-height: 0` ho pustilo až na jednu
   řádku. `max-height: 81px` je STROP, ne podlaha, takže proti tomu nic nezmohlo.
   Teď je tam podlaha (80 px = čtyři řádky po 20 px) a strop je pryč - box vyplní, co
   v kartě zbude, a to je v karuselu i ve zdi totéž: karta má všude 194 px. */
.mvr .mvr-card-fix .mvr-card-textbox { flex: 1 1 auto; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.mvr .mvr-card-fix .mvr-card-textbox::-webkit-scrollbar { width: 6px; }
.mvr .mvr-card-fix .mvr-card-textbox::-webkit-scrollbar-thumb { background: var(--brand-gray-1, #E5E7EB); border-radius: 999px; }
/* Pevná výška platí i na mobilu. Zkoušel jsem tam nechat přirozenou výšku (jeden sloupec,
   ragged okraj vzniknout nemůže), jenže na skutečných datech má nejdelší recenze 1107 znaků
   a karta z ní na 360 px narostla na 534 px - jedna recenze přes celou obrazovku. Kdo chce
   číst celé, roluje uvnitř karty. */
/* Zeď žádnou vlastní výšku nemá a jede na týchž 194 px jako karusel - u Trustindexu je to
   taky jedna a tatáž karta (jeho zeď `ti-col-3` má vnitřek 348x194, karusel 316x194). */


/* ---------- 6. VYSKAKOVACÍ SEZNAM ---------- */
.mvr.mvr-popup[hidden] { display: none; }
.mvr.mvr-popup {
  position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26, 35, 50, .55);   /* stejné ztmavení jako `.cc-modal-overlay` v mujvit.css */
}
.mvr .mvr-popup-karta {
  position: relative; background: var(--brand-cream, #FFF9F0);
  border-radius: var(--radius-xl, 20px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.12));
  width: min(720px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column;
  padding: 14px;
}
/* ⚠ Křížek patří VPRAVO NAHORU (Vít 2. 9. 2026). Do teď na něj nebylo v tomhle sešitě
   ANI JEDNO pravidlo - bral si tvar z obecného stylu tlačítek v mujvit.css a stál
   v proudu, tedy uprostřed nad hlavičkou. Odsazení hlavičky zprava mu dělá místo,
   ať nesedí na tlačítku „Zobrazit na Google".
   44x44 jako `.mv-lightbox-close` v mujvit.css a jako dotykové minimum celého webu
   (`button[type="button"] { min-height: 44px }`) - 40 px z prvního pokusu bylo pod ním. */
.mvr .mvr-popup-zavri {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 26px; line-height: 1; color: var(--brand-text, #1A2332);
  background: #fff; border: 1px solid var(--brand-gray-1, #E5E7EB); border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-popup-zavri:hover { border-color: var(--brand-text-soft, #6B7785); }
}
/* ⚠ TĚLO SE ROLUJE. Taky na něj do teď nebylo ani jedno pravidlo, takže se seznam
   padesáti recenzí vůbec nedal projet - karta měla `max-height`, ale obsah z ní jen
   vytekl. `min-height: 0` je tu povinné: bez něj se pružná položka nesmrskne pod
   velikost obsahu a `overflow` nemá co odrolovat. */
.mvr .mvr-popup-telo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mvr .mvr-popup-seznam { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.mvr .mvr-popup-telo::-webkit-scrollbar { width: 8px; }
.mvr .mvr-popup-telo::-webkit-scrollbar-thumb { background: var(--brand-gray-1, #E5E7EB); border-radius: 999px; }
/* ---------- HLAVIČKA VYSKAKOVACÍHO SEZNAMU ----------
   Vít 9. 9. 2026: „to logo do čtverce jako fotka a pak někde logo Google a zarovnat to líp."
   Vlevo čtvercová profilovka Mujvit, vpravo sloupec: nápis Google / hvězdičky s číslem / počet.
   Vedle sebe se to vejde i na 320 px: 48 + 12 + sloupec 165 + odsazení = 275 do 288 px.
   Pravé odsazení drží místo pro křížek. */
.mvr .mvr-popup-hlava {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 62px 14px 16px; background: #fff;
  border: 1px solid var(--brand-gray-1, #E5E7EB); border-radius: var(--radius-lg, 16px);
}
/* Profilovka bez rámečku (Vít 9. 9. 2026: „dej pryč ten rámeček, ale malinko zvěč“).
   Logo stojí volně na bílé hlavičce - rámeček z něj dělal dlaždici. `contain`, ať se neořízne. */
.mvr .mvr-popup-foto { flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; }
.mvr .mvr-popup-hlava-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mvr .mvr-popup-google-logo { display: block; }
.mvr .mvr-popup-google-logo .mvr-g-napis { display: inline-block; font-size: 22px; line-height: 24px; margin-right: 0; }
/* hvězdičky a průměr na jedné účaří */
.mvr .mvr-popup-radek { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1; }
.mvr .mvr-popup-hlava .mvr-stars { font-size: 19px; line-height: 1; letter-spacing: 1px; }
.mvr .mvr-popup-prumer { font-size: 14px; line-height: 1; color: var(--brand-text-soft, #6B7785); }
.mvr .mvr-popup-prumer strong { font-size: 20px; font-weight: 800; color: var(--brand-text, #1A2332); }
/* Počet jako nenápadný podtržený odkaz (Vít 3. 9. 2026: žádné tlačítko, ať lidi neodcházejí.
   44 px na výšku kvůli doteku, záporný okraj tu výšku vizuálně stáhne zpátky k hvězdičkám. */
.mvr .mvr-popup-google {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; padding: 0 2px;
  font-size: 14px; font-weight: 600; color: var(--brand-text, #1A2332);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-popup-google:hover { color: var(--brand-primary, #289546); }
}
@media (max-width: 560px) {
  .mvr .mvr-popup-hlava { padding: 12px 56px 12px 12px; gap: 12px; }
  .mvr .mvr-popup-foto { width: 66px; height: 66px; }
  .mvr .mvr-popup-google-logo .mvr-g-napis { font-size: 20px; line-height: 22px; }
  .mvr .mvr-popup-hlava .mvr-stars { font-size: 17px; }
  .mvr .mvr-popup-prumer strong { font-size: 18px; }
}
@media (max-width: 359.98px) {
  .mvr .mvr-popup-hlava { padding: 12px 50px 12px 10px; gap: 10px; }
  .mvr .mvr-popup-foto { width: 54px; height: 54px; }
  /* Na 320 px zbyde textovemu sloupci 142 px a hvezdicky s cislem potrebovaly 153 -
     radek se lamal na dva. O dva pixely mensi hvezdicky a cislo se uz vejdou vedle sebe. */
  .mvr .mvr-popup-hlava .mvr-stars { font-size: 15px; letter-spacing: .5px; }
  .mvr .mvr-popup-prumer { font-size: 13px; }
  .mvr .mvr-popup-prumer strong { font-size: 17px; }
}
/* Patička vyskakovacího seznamu - odkaz na všechny recenze na Googlu, pod seznamem. */
.mvr .mvr-popup-paticka { display: flex; justify-content: center; padding: 4px 0 18px; }
.mvr .mvr-popup-paticka[hidden] { display: none; }   /* [hidden] samo o sobě display:flex nepřebije */
.mvr .mvr-popup-paticka a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--brand-text, #1A2332);
  text-decoration: none; padding: 10px 18px; min-height: 44px;
  border: 1.5px solid var(--brand-gray-1, #E5E7EB); border-radius: 12px; background: #fff;
}
.mvr .mvr-popup-paticka a span { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-popup-paticka a:hover { border-color: var(--brand-text, #1A2332); background: #fafafa; }
}

.mvr .mvr-paticka { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--brand-text, #1A2332); }
/* Věta pod karuselem - podle Trustindexu (Vít 2. 9. 2026): celá ČERNÝ TEXT, ne odkaz.
   Odkaz je jen počet hodnocení. Tučné je „Google", průměr a počet. `mvr-nowrap` drží
   dvojice slov pohromadě, ať se věta nezalomí uprostřed čísla. */
.mvr .mvr-nowrap { white-space: nowrap; }
.mvr .mvr-paticka strong { font-weight: 800; color: var(--brand-text, #1A2332); }
/* Vít 3. 9. 2026: místo slova „Google" jejich barevný nápis, ať to působí důvěryhodně. Základní
   `.mvr-g-napis` je 17 px s odsazením pro odznak - tady jede v řádku věty, o chlup větší než text. */
.mvr .mvr-paticka .mvr-g-napis { display: inline; font-size: 15px; line-height: inherit; margin: 0; }
.mvr .mvr-paticka a { color: var(--brand-text, #1A2332); text-decoration: underline; text-underline-offset: 3px; }
/* Počet hodnocení otevírá vyskakovací seznam, takže je to <button> - vypadat ale musí
   pořád jako kus věty, ne jako tlačítko. Web má globální styl pro <button> (výplň, rámeček,
   min-height 44px), který by tu větu rozbil, proto se to všechno ruší ručně. `font: inherit`
   je tu povinné: bez něj si tlačítko vezme systémové písmo prohlížeče místo našeho. */
.mvr .mvr-paticka-pocet {
  display: inline; margin: 0; padding: 0; border: 0; min-height: 0; background: none;
  font: inherit; font-weight: inherit; color: var(--brand-text, #1A2332); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .mvr .mvr-paticka a:hover,
  .mvr .mvr-paticka-pocet:hover { color: var(--brand-primary, #289546); }
}

/* ⚠ Pás se od 2. 9. 2026 posouvá PLYNULE, ale ne přes `scroll-behavior: smooth` ani
   `scrollBy({behavior:'smooth'})` - obojí v některých prostředích tiše neudělá nic
   (naměřeno: 0 -> 0). Animuje si to `naPozici()` v recenze.js přes requestAnimationFrame.
   ⚠ A pozor na `scroll-snap-type: x mandatory` výš: s ručně animovaným scrollLeft se pere
   (Chrome vrátí každou mezipolohu na nejbližší snap bod, naměřeno 0,0,0,…,348), proto ho
   `naPozici()` na dobu animace vypíná. Kdo tu animaci bude přepisovat, musí to udržet. */