/* ===========================================================================
   zkusenosti.css — stránka „Zkušenosti zákazníků" (page-zkusenosti.php,
   /zkusenosti-ostatnich/, CS 9366) VČETNĚ holého režimu `?vl_embed=1`
   (iframe z modalu hodnocení na PDP). Obě varianty kreslí týž markup, jen
   embed vynechává hlavičku, drobečky, patičku a CTA pruh — computed styly
   migrovaných prvků jsou v obou shodné (ověřeno proti snímkům
   tools/css-snap/base/zkusenosti@… i zkusenosti-embed@…).

   Načítá se ZA vlasimo-base.css a vlasimo-ui.css (inc/assets.php), takže
   `!important` je potřeba jen tam, kde přebíjím pravidlo, které ho samo má.
   Jméno souboru je slug z `vlasimo_page_css_slug()` = část za „page-" ze
   jména ŠABLONY, tedy `zkusenosti` — NE slug stránky (`zkusenosti-ostatnich`).

   Vznik: tools/migrate/11-zkusenosti.py vytáhl 19 inline stylů z dc renderu
   do tříd `.vl-zk-*`. Hodnoty odpovídají snímku computed stylů ve třech
   šířkách (1440 / 900 / 390).

   CO ZŮSTALO VE vlasimo-base.css (řádky 726–751) a proč se to sem nepřepisuje:
   `.vl-zk-wrap`, `.vl-zk-top`, `.vl-zk-grid`, `.vl-zk-story` jsou SDÍLENÉ
   — `.vl-zk-wrap` nese i drobečková navigace téhle stránky,
   parts/social-grid.php, parts/ig-wall.php a page-napsat-zkusenost.php,
   `.vl-zk-story` je jen obal cizího partu parts/story.php (jeho vnitřek si
   inline styly nechává, míří na ně `.vl-zk-story [style*="…"]`).
   Base tedy dál dodává:
     tablet 769–1024:  .vl-zk-wrap { padding-left/right: 32px !important }
                       .vl-zk-top  { grid-template-columns: 330px minmax(0,1fr) !important; gap: 24px !important }
                       .vl-zk-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important }
     mobil ≤768:       .vl-zk-wrap { padding-left/right: 20px !important }
                       .vl-zk-top, .vl-zk-grid { grid-template-columns: 1fr !important; gap: 16px !important }
   Ta `!important` přebijí i deklarace níž v tomhle souboru, takže vodorovné
   odsazení pásů a počty sloupců tu ZÁMĚRNĚ nejsou duplikované — píše se jen
   svislé odsazení a desktopové hodnoty.

   Z base.css se nic nemazalo: každá jehla `[style*="…"]`, na které stránka
   visela (`max-width:1440px; margin:0 auto`, `padding:44px 48px 0`,
   `padding:28px 48px`, `font-size:38px`, `font-size:28px`, `position:sticky`,
   `color:#5d6b62`, `repeat(3,`) se vyskytuje i v jiných šablonách a partech,
   takže žádné z těch pravidel neosiřelo — jen přestala platit pro tuhle stránku
   a jejich efekt je přepsaný do tříd níž.

   Konkurence, se kterou třídy počítají (CSS.getMatchedStylesForNode):
   - `h1, h2, h3 { margin:0; color:#16211c; letter-spacing:-.01em }` (0,0,1)
     ve vlasimo.css — `.vl-zk-hero__title` / `.vl-zk-head__title` (0,1,0) ji
     přebijí, ale letter-spacing i margin musí nastavovat samy.
   - `.vl p { text-align: justify }` (0,1,1) — perex ho měl i před migrací
     (inline text-align nenastavoval), proto `.vl-zk-hero__lead` text-align
     ZÁMĚRNĚ neřeší; jinak by se zarovnání změnilo z justify na left.
   - `a { color:#0b7c3d }` (0,0,1) a `.vl a { color:#16211c; text-decoration:none }`
     (0,1,1) — odkazy proto jako `.vl a.vl-zk-*`, včetně `:hover` (inline styl
     hover přebíjel, třída sama ne).
   =========================================================================== */

/* --- Pás na šířku webu ----------------------------------------------------
   Nese ho všech sedm sekcí stránky. Před migrací to dělalo obecné
   `[style*="max-width:1440px; margin:0 auto"]` (a jeho tabletová varianta),
   které po odstranění inline stylů nemá na čem viset. Na `.vl-zk-wrap` to
   dát nejde — tu nese i drobečková navigace, která max-width nemá. */
.vl-zk-band { max-width: 1440px; margin: 0 auto; }

/* --- Hero: nadpisek, H1, perex -------------------------------------------- */
.vl-zk-hero { padding: 28px 48px 0; display: flex; flex-direction: column; gap: 10px; }
.vl-zk-hero__kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; }
/* Tečka je flex položka bez flex-shrink:0 — na úzkém displeji se smrskne na
   3,97 px. Je to tak i před migrací, proto se to nefixuje. */
.vl-zk-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: #c99a12; }
.vl-zk-hero__title { margin: 0; font-size: 38px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: #16211c; }
.vl-zk-hero__lead { margin: 0; max-width: 760px; font-size: 16px; line-height: 1.7; color: #3d443e; text-wrap: pretty; }

/* --- Souhrn hodnocení + příběh proměny ------------------------------------
   Mřížku (340px + zbytek) drží `.vl-zk-top`, tady jen odsazení pásu; počty
   sloupců a gap pro tablet/mobil jsou v base.css (viz hlavička souboru). */
.vl-zk-top { padding: 28px 48px 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }
/* Souhrn jede s příběhem — proměna je vysoká, box hodnocení nízký. Na mobilu
   se sticky vypíná (viz mobilní blok), aby box zůstal v toku nad příběhem. */
/* `top` počítá s lepivou hlavičkou (od 11. 9.): `--hm-hdr` publikuje skript
   podle skutečně viditelné části hlavičky, takže při jejím schování spadne na
   nulu a pás vyjede nahoru. Bez toho se pás schová za hlavičku — přesně to se
   děje na Herbasu, odkud je vzor. */
.vl-zk-sticky { position: sticky; top: calc(var(--hm-hdr, 0px) + 16px); }
/* Rám kolem cizího partu parts/story.php. Třída existovala už dřív (visí na ní
   `.vl-zk-story [style*="…"]` v base.css), tady dostává vlastní vzhled. */
.vl-zk-story { background: #fdfcf8; border: 1px solid #e3e0d4; border-radius: 20px; overflow: hidden; }

/* --- Hlavička výpisu recenzí ---------------------------------------------- */
.vl-zk-head { padding: 44px 48px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vl-zk-head__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
.vl-zk-head__count { font-size: 13.5px; color: #5d6b62; }

/* --- Mřížka recenzí, donačítání, prázdný stav ------------------------------
   `.vl-zk-grid` řeší jen desktopové tři sloupce; dva na tabletu a jeden na
   mobilu dodává base.css. Prázdný stav se kreslí, jen když nejsou recenze —
   proto na něj není snímek a hodnoty jsou 1:1 z původního inline stylu. */
.vl-zk-grid { padding: 20px 48px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vl-zk-morewrap { padding: 26px 48px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Tlačítko „Zobrazit další" je `<a>` (fallback bez JS), takže barvu musí
   přebít nad `.vl a` i `.vl a:hover` — hover byl s inline stylem beze změny
   a musí takový zůstat. */
.vl a.vl-zk-more,
.vl a.vl-zk-more:hover { height: 50px; padding: 0 26px; border: 1.5px solid #0d8f46; color: #0b7c3d; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.vl-zk-shown { font-size: 12.5px; color: #8a887f; }
.vl-zk-empty { padding: 20px 48px 0; font-size: 15px; color: #5d6b62; }

/* --- Odkaz na vlastní zkušenost + mezera před certifikacemi ---------------- */
.vl-zk-writewrap { padding: 28px 48px 0; display: flex; justify-content: center; }
/* Decentní podtržený odkaz, ne tlačítko (pod ním je zelené nákupní CTA).
   `.vl a { text-decoration: none }` by podtržení sebralo, proto `.vl a.…`. */
.vl a.vl-zk-write,
.vl a.vl-zk-write:hover { font-size: 14px; color: #5d6b62; text-decoration: underline; text-underline-offset: 4px; }
.vl-zk-spacer { height: 56px; }

/* --- Tablet 769–1024 ------------------------------------------------------
   Přeneseno z pravidel `[style*="…"]` ve vlasimo-base.css. Vodorovné odsazení
   pásů (48 → 32 px) tu není — dělá ho `.vl-zk-wrap` v base.css s `!important`
   a přebilo by cokoliv, co bych sem napsal. */
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-zk-band { max-width: 1024px; }
	.vl-zk-hero__title { font-size: 30px; }
	.vl-zk-head__title { font-size: 25px; }
}

/* --- Mobil ≤768 -----------------------------------------------------------
   Stránka nemá druhou markupovou vrstvu, mobil je jen media query nad
   desktopovým markupem. `max-width` pásů zůstává 1440px — tabletové zúžení
   na mobilu neplatí. Vodorovné 20 px opět z `.vl-zk-wrap` v base.css;
   uvádí se i tady, protože obecné pravidlo `.vl-dcontent [style*="padding:28px 48px"]`
   měnilo shorthandem i SPODNÍ odsazení (0 → 20 px), a to je vidět. */
@media (max-width: 768px) {
	.vl-zk-hero,
	.vl-zk-top,
	.vl-zk-writewrap { padding: 20px 20px; }
	.vl-zk-head { padding: 28px 20px 0; }
	.vl-zk-hero__title { font-size: 27px; }
	.vl-zk-head__title { font-size: 22px; }
	.vl-zk-sticky { position: static; }
}