/* Homepage — jen to, co nemá vzor v layout.css */

/* Úvod homepage: nadpis s popisem drží LEVOU LINII sekce JPA (obsah
   + 1 krok, stejně jako ostatní nadpisy), ne střed okna; blok je o něco
   vyšší (80 % okna), ať text sedí níž, a bez spodního okraje — nad
   nadpisem JPA zůstává o řadu čtverců méně (Marek 2026-09-11) */
.hero--home { min-height: 80vh; min-height: 80svh; margin-bottom: var(--step); }
/* homepage úvod NENÍ svisle centrovaný: se značkami služeb je obsah vyšší
   než blok, a centrování během přichytávání (snap ve field.js) posouvá
   prvky o polovinu každého přidaného okraje — značky i šipka pak dopadly
   o několik řádků níž. Bez centrování je přichycení přesné; poloha
   textu zůstává (padding-top níže). */
.hero--home { justify-content: flex-start; }
/* padding nahoře posune vycentrovaný blok o půl své výšky níž */
.hero--home .hero__inner { margin-inline: var(--step) auto; padding-top: calc(1.5 * var(--step)); }
/* karty případovek a jejich nadpis na téže levé linii; nadpis o krok níž */
@media (max-width: 900px) {
  .hero--home .hero__inner { margin-inline: 0; }
}

/* plná terakotová kostička „rozhodnutí" — na explicitní zadání
   konceptem (spec 2026-08-16); sedí v mřížce jako buňka pole */
.decision-mark {
  display: inline-block;
  width: var(--cell);
  height: var(--cell);
  flex: none; /* flex ji mačkal na ~9 px — musí zůstat celá buňka */
  background: var(--terracotta);
}
.decision-block { display: flex; align-items: center; gap: var(--step); }
.decision-block p { margin: 0; }


/* příběh o strojírně: marker sedí u prvního řádku, tři odstavce pod sebou */
.decision-block { align-items: flex-start; }
.decision-block__story { max-width: 62ch; }
.decision-block__story p { margin: 0 0 0.8em; }
.decision-block__story p:last-child { margin-bottom: 0; }

/* ── JPA: mapa ve smyčce na pozadí pásu + box s textem ──
   Pás (.band) je podbarvený a přesahuje přes celou šířku okna (::before);
   mapa (canvas) leží ve stejném přesahu, box s textem sedí na uzlech
   stránkové mřížky (šířka v krocích, vnitřní odsazení krok), mapa má
   vlastní měřítko — proto je text v plném boxu, ať se mřížky nebijí. */
.band--jpa { min-height: 100vh; min-height: 100svh; padding-block: var(--step); display: flex; align-items: center; }
/* box se rozsvítí až chvíli po najetí pásu do záběru (home.js), ať je
   nejdřív vidět mapa; bez JS je vidět hned */
.jpa-box.is-wait { opacity: 0; }
.jpa-box.is-on { opacity: 1; transition: opacity 900ms ease; }
.jpa-map { position: absolute; top: 0; left: -100vw; width: calc(100% + 200vw); height: 100%; z-index: -1; pointer-events: none; }
.jpa-box {
  position: relative; box-sizing: border-box;
  width: calc(10 * var(--step) - var(--gap)); max-width: 100%;
  margin-left: var(--step);
  padding: calc(var(--step) - var(--gap)) var(--step);
  /* box mírně průhledný + backdrop blur: mapa pod ním zůstává tušená
     a rozpitá (Marek 2026-09-23) */
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.jpa-box h2 { margin: 0 0 0.5em; font-size: var(--fs-h2); white-space: nowrap; }
.jpa-box__br-m { display: none; }
/* box „huguje" obsah (Marek 2026-09-27): menší svislé mezery, ať výšku
   určují komponenty uvnitř a ne vzduch */
.jpa-box p { margin: 0 0 calc(0.5 * var(--step)); max-width: none; font-size: var(--fs-text); }
/* rotující věty pod popisem (Marek 2026-09-23): tři zahraniční zásahy se
   střídají kurzívou v terakotě, pevně zalomené na dva řádky (<br> v HTML,
   Marek 2026-09-27); kontejner drží výšku dvou řádků, věty se absolutně
   prolínají (home.js přepíná .is-on v „dynamickém rytmu") */
.jpa-ticker { position: relative; min-height: 2.9em; margin: 0 0 calc(0.5 * var(--step)); font-size: var(--fs-text); }
.jpa-ticker__item {
  position: absolute; inset: 0 auto auto 0; max-width: 100%;
  font-style: italic; color: var(--prilezitost);
  opacity: 0; transform: translateY(0.55em);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jpa-ticker__item.is-on { opacity: 1; transform: none; }
.jpa-ticker__item.is-out { opacity: 0; transform: translateY(-0.55em); }
/* omezený pohyb: věty se střídají dál, jen bez posunu (střih místo
   prolnutí — přechody vypíná globální pravidlo v layout.css) */
@media (prefers-reduced-motion: reduce) {
  .jpa-ticker__item, .jpa-ticker__item.is-out { transform: none; }
}
/* logo JPA malé (3 kroky), jen v barvě textu; marker v logu je obrys */
/* řada: CTA tlačítko + logo JPA vpravo od něj, obojí na spodní hraně boxu */
.jpa-box__row { display: flex; align-items: flex-end; gap: var(--step); } /* tlačítko snapuje na uzel (margin), logo drží jeho spodní hranu */
.jpa-logo { display: block; width: calc(3 * var(--step) - var(--gap)); flex: none; }
.jpa-logo__img { display: block; width: 100%; height: auto; color: var(--color-text); }
@media (max-width: 900px) {
  /* užší vnitřní odsazení (půl kroku jako karty případovek) a řada
     s tlačítkem se smí zalomit — logo JPA dřív přetékalo z boxu */
  .jpa-box { width: 100%; margin-left: 0; padding-inline: calc(0.5 * var(--step)); }
  .jpa-box__row { flex-wrap: wrap; row-gap: calc(0.5 * var(--step)); }
  .jpa-ticker { min-height: 3.7em; } /* úzký box: věta se smí zalomit na tři řádky */
  .jpa-box__br-m { display: inline; }
  .band--jpa { min-height: 0; display: block; }
  /* mapa nesmí roztahovat mobilní viewport: přesah jen o padding stránky
     (desktopových ±100vw si na úzkém okně vynucovalo vodorovný posuv) */
  /* šířka = celé okno (obsah je na mobilu kvůli dorovnání na sloupce užší
     vpravo než vlevo — s „100 % + 2× padding" mapa nedosáhla k pravé hraně) */
  .jpa-map { left: calc(-1 * (var(--gap) + var(--step))); width: 100vw; }
}
/* zamčené tlačítko v obsahu (nav.js LOCKED) */
.page-main .btn-grid[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
/* ── PŘÍPADOVKY: sekce na výšku okna, tři vysoké karty, tři varianty ──
   (viz komentář v index.html). Karty jsou grid-native: šířka v celých
   krocích, výška = zbytek sekce, přesná maska (.card); tlačítko sedí
   v levém dolním rohu karty a jeho text drží levou linii textu karty
   (stejné odsazení --case-pad). */
/* vnitřní odsazení karty = půl kroku (Marek: krok byl moc); tlačítko drží
   levou linii textu, svisle ho dorovná snap */
.cases { --case-pad: calc(0.5 * var(--step)); margin-left: var(--step); }
/* hlavička = 2 kroky vysoká (nadpis i přepínač dole), mezery v krocích → karty dosednou na uzel bez korekcí */
/* hlavička blízko předchozí sekce; pod ní jen JEDEN řádek mřížky (snap dorovná karty na uzel) */
/* hlavička sedí na uzlu (snap), je buňku vysoká a pod ní je přesně jeden
   řádek mřížky: krok + gap → karty dosednou na uzel bez korekce */
.cases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--step); height: var(--cell); margin: var(--step) 0 calc(var(--step) + var(--gap)); }
.cases__title { margin: 0; }
/* přepínač variant — jen pro výběr, tři buňky v rohu sekce */
.cases__switch { display: flex; gap: var(--gap); }
/* pracovní přepínač variant: utlumený (obrys v latentní barvě, drobné písmo),
   zvolená buňka mírně plná; barvy z tokenů → funguje v tmavém režimu i paletách */
.cases__switch .btn-grid { min-width: var(--cell); padding: 0; font-size: 0.7rem; background-color: transparent; border: var(--line-w) solid var(--color-latent); color: var(--color-text); opacity: 0.55; --btn-sweep: var(--color-text); }
.cases__switch .btn-grid:hover { color: var(--color-bg); opacity: 0.8; }
.cases__switch .btn-grid[aria-pressed="true"] { background-color: var(--color-text); color: var(--color-bg); opacity: 0.6; }
/* čtyři sloupce (3 karty + testimonial) stejné šířky: --case-k kroků dosazuje home.js;
   řada NEBERE ohled na ochranné sloupce — začíná na prvním uzlu od hrany stránky
   (záporný okraj = levá linie sekce + ochranný sloupec); na užších oknech
   (.cases--three) tři karty a testimonial pod nimi */
.cases__grid { grid-template-columns: repeat(4, calc(var(--case-k, 5) * var(--step) - var(--gap))); align-items: stretch; margin: 0 0 var(--step) 0; }
.cases--three .cases__grid { grid-template-columns: repeat(3, calc(var(--case-k, 5) * var(--step) - var(--gap))); }
.cases--three .testimonial { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: var(--step); min-height: 0; }
.cases--three .testimonial__mark { margin-bottom: 0; flex: none; }
.cases--three .testimonial blockquote { margin: 0; max-width: 60ch; }
/* výška karty v celých krocích (sekce ≈ výška okna: 1,5 + 1 + 1 + 9 kroků nadpis/mezery/karty) */
.case { display: flex; flex-direction: column; position: relative; padding: 0; min-height: calc(9 * var(--step) - var(--gap)); overflow: hidden; color: var(--color-text); transition: background-color 260ms ease; }
/* karty i testimonial se postupně objeví (fade) po najetí sekce do záběru; JS přidá is-in */
.cases__grid > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease; transition-delay: calc(var(--i, 0) * 160ms); }
.cases.is-in .cases__grid > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cases__grid > * { opacity: 1; transform: none; transition: none; } }
.case:hover { background-color: rgba(var(--aktivni-rgb), 0.08); }
.case__img { display: none; }
/* nahoře rezervované 2 kroky pro číslo a štítky (jsou absolutně), dole místo na tlačítko */
.case__body { display: flex; flex-direction: column; flex: 1; padding: calc(var(--case-pad) + 2 * var(--step)) var(--case-pad) calc(var(--cell) + 2 * var(--case-pad)); }
/* číslo a štítky vždy v horním rohu karty — u fotek PŘES fotku */
.case__top { position: absolute; left: var(--case-pad); right: var(--case-pad); top: var(--case-pad); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); z-index: 2; }
/* texty všech karet v jedné rovině: tělo tlačí obsah dolů (nejdelší text určuje horní linii ostatních přes stejnou výšku těla, viz home.js) */
.case .case__body > h3 { margin-top: auto; }
.case__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1; opacity: 0.35; }
/* štítky služeb: ikony přesně pod sebou (pevný sloupec), texty na prapor vlevo */
.case__tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 19px auto; column-gap: 8px; row-gap: 6px; align-items: center; }
.case__tags li { display: contents; font-weight: 700; font-size: var(--fs-small); line-height: 1; }
.case__tags .icon3x3 { --icon-cell: 5px; --icon-gap: 2px; margin: 0; }
.case__tags .icon3x3 .cell--ring, .case__tags .icon3x3 .cell--colring { border-width: 1px; }
.case h3 { margin: 0 0 0.35em; font-size: var(--fs-h3); }
.case p { margin: 0; font-size: var(--fs-text); max-width: 30ch; }
/* tlačítko vlevo dole v kartě: text na levé linii textu karty */
/* tlačítko UVNITŘ boxu: odsazené od hran stejně jako text (--case-pad) */
/* tlačítko: vlevo i dole na linii textu (půl kroku) — stejně ve všech kartách */
.case__btn { position: absolute; left: calc(var(--case-pad) - var(--line-w)); bottom: calc(var(--case-pad) - var(--line-w)); z-index: 2; }
/* CTA „Číst případ" v terakotě (btn-grid--terra v HTML) — stejná barva
   jako druhé tlačítko v závěru (Marek 2026-09-27) */

/* V2: čísla 01–03 zůstávají (jako ve V3), štítky služeb ne — službu
   vypráví ikona v pásu (Marek 2026-09-27). Horní padding těla rezervuje
   řádek čísla + řádek pásu (číslo i pás jsou absolutní a do přirozené
   výšky by se jinak nepočítaly). */
.cases[data-variant="j"] .case__tags { display: none; }
.cases[data-variant="j"] .case__body { padding-top: calc(var(--case-pad) + 2 * var(--step)); }
/* V2 (pás s ikonami) je obsahově nižší → karty o dva kroky menší
   (Marek 2026-09-27: „zmenšit boxy na výšku, když je tam tolik místa") */
.cases[data-variant="j"] .case { min-height: calc(7 * var(--step) - var(--gap)); }

/* ── ikonové příběhy V0a/V0b (Marek 2026-09-23): čtverce v rastru pole
   (skutečná --cell/--gap) vyprávějí případ na tři vteřiny, po vzoru
   „Das Leben in 5 Sekunden". V0a má plochu 5×4 volně, V0b jen prostřední
   pás rastru 5×3. Buňky: plná (text), terakotová (pointa), obrys (děj),
   škrtnutá (zásah). --x/--y = souřadnice v rastru. ── */
/* buňka příběhu: 5 sloupců přesně do vnitřní šířky karty
   (karta = --case-k kroků, vnitřek = o krok a mezeru méně); pás sedí
   POD číslem případu (o krok níž) */
.case__story { --sc: calc((var(--case-k, 5) - 1) * var(--step) / 5 - var(--gap)); position: absolute; left: var(--case-pad); right: var(--case-pad); top: calc(var(--case-pad) + var(--step)); display: none; grid-template-columns: repeat(5, var(--sc)); grid-auto-rows: var(--sc); gap: var(--gap); z-index: 1; }
.case__story .scell { aspect-ratio: 1; }
.cases[data-variant="j"] .case__story--j { display: grid; }
.scell { grid-column: var(--x); grid-row: var(--y); position: relative; }
/* V2 pás: obrysový čtverec s flat ikonou nebo nápisem uvnitř (fill,
   currentColor); pointa příběhu v terakotě přes .scell--accent */
.scell--box { border: var(--line-w) solid var(--color-latent); box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--color-text); }
/* ikona absolutně ve středu buňky: nesmí buňce diktovat rozměr (Safari
   počítá SVG bez rozměrů jako 300 px široké → pás přetekl a ikony se na
   mobilu ořezávaly) */
.scell--box svg { position: absolute; left: 19%; top: 19%; width: 62%; height: 62%; display: block; }
.scell--accent { color: var(--terracotta); }
.scell--txt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.6rem); line-height: 1; }
.scell--txt-s { font-size: clamp(0.55rem, 1vw, 0.8rem); letter-spacing: 0.06em; }
/* ikony služeb přes CELÝ čtverec (jako v menu) — Daně: dva plné rohy
   + škrt; Audit: 3×3 obrysy s plným středem; Právo: plný sloupec + dva
   obrysové */
.scell--dane { position: relative; }
.scell__q { position: absolute; width: 30%; height: 30%; background: var(--terracotta); }
.scell__q--a { left: 6%; top: 6%; }
.scell__q--b { right: 6%; bottom: 6%; }
.scell__slashline { position: absolute; inset: 6%; background: linear-gradient(to top left, transparent calc(50% - var(--line-w)), var(--latent-terra) calc(50% - var(--line-w)), var(--latent-terra) calc(50% + var(--line-w)), transparent calc(50% + var(--line-w))); }
.scell--audit { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7%; padding: 6%; box-sizing: border-box; }
.scell--audit .scell__r { border: var(--line-w) solid var(--latent-terra); box-sizing: border-box; }
.scell--audit .scell__s { background: var(--terracotta); }
.scell--pravo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; padding: 6%; box-sizing: border-box; }
.scell--pravo .scell__col { border: var(--line-w) solid var(--latent-terra); box-sizing: border-box; }
.scell--pravo .scell__col--solid { background: var(--terracotta); border: none; }
/* buňky příběhu naskakují po najetí sekce jedna po druhé */
.case__story .scell { opacity: 0; transition: opacity 420ms ease; transition-delay: calc(var(--k, 0) * 110ms); }
.cases.is-in .case__story .scell { opacity: 1; }
.cases.is-in .case__story .scell--ring, .cases.is-in .case__story .scell--slash { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .case__story .scell { opacity: 1; transition: none; } }

/* varianta V3 (a): ilustrace ve vršku karty nad textem. Sépiový přeliv
   ZRUŠEN (Marek 2026-09-27) — fotka je plná a po najetí jen mírně
   zoomuje; štítky přes fotku, jednobarevné v papíru na horním přechodu. */
.cases[data-variant="a"] .case__img { display: block; object-fit: cover; transition: transform 900ms ease; }
/* fotka vyplní vršek karty nad textem (NE čtverec), ořez jen shora — drží spodní hranu */
/* flex-basis 0 + height 0: do přirozené výšky karty se fotka nepočítá,
   karta je tak vysoká jako u V1 a fotka jen vyplní zbytek */
.cases[data-variant="a"] .case__img { width: 100%; flex: 1 1 0; height: 0; min-height: 0; object-position: center bottom; }
.cases[data-variant="a"] .case__body { flex: none; position: relative; z-index: 1; background: var(--color-bg); }
.case__wash { display: none; }
.cases[data-variant="a"] .case:hover .case__img { transform: scale(1.04); }
/* horní přechod pro čitelnost štítků na fotce */
.cases[data-variant="a"] .case__top::before { content: ''; position: absolute; left: calc(-1 * var(--case-pad)); right: calc(-1 * var(--case-pad)); top: calc(-1 * var(--case-pad)); height: calc(100% + 2 * var(--case-pad)); background: linear-gradient(to bottom, color-mix(in srgb, var(--sepie) 60%, transparent), transparent); z-index: -1; }
.cases[data-variant="a"] .case__top { color: var(--papir); }
.cases[data-variant="a"] .case__num { opacity: 0.8; }
.cases[data-variant="a"] .case__tags .icon3x3 .cell--solid,
.cases[data-variant="a"] .case__tags .icon3x3 .cell--colsolid { background: var(--papir); }
.cases[data-variant="a"] .case__tags .icon3x3 .cell--ring,
.cases[data-variant="a"] .case__tags .icon3x3 .cell--colring { border-color: var(--papir); }
.cases[data-variant="a"] .case__tags .icon3x3__slash { background: linear-gradient(to top left, transparent calc(50% - 1px), var(--papir) calc(50% - 1px), var(--papir) calc(50% + 1px), transparent calc(50% + 1px)); }
/* text těsně nad tlačítkem (rezerva jen na tlačítko + mezera), fotka bere
   zbytek; výšku těla sjednocuje home.js, ať mají fotky stejnou výšku */
.cases[data-variant="a"] .case__body { padding-top: calc(var(--case-pad) + var(--gap)); padding-bottom: calc(var(--cell) + 2 * var(--case-pad)); justify-content: flex-end; }
.cases[data-variant="a"] .case .case__body > h3 { margin-top: 0; }

/* testimonial (placeholder) = 4. karta, ZTLUMENÝ (Marek 2026-09-27):
   případovky musí křičet víc — obrys latentní, uvozovky jen v obrysovém
   čtverci, text menší a utlumený */
.testimonial { display: flex; flex-direction: column; margin: 0; padding: var(--case-pad); }
.testimonial__mark { width: var(--cell); height: var(--cell); background: transparent; border: var(--line-w) solid var(--color-latent); box-sizing: border-box; margin-bottom: auto; display: flex; align-items: center; justify-content: center; color: var(--color-text); opacity: 0.7; }
.testimonial__mark svg { width: 62%; height: 62%; display: block; }
.testimonial blockquote { margin: var(--step) 0 0; }
.testimonial blockquote p { margin: 0 0 0.6em; font-size: var(--fs-text); max-width: none; opacity: 0.75; }
.testimonial figcaption { font-size: var(--fs-small); opacity: 0.6; }

/* loga klientů: řada jede doleva ve smyčce; SVG se barví MASKOU do barvy
   textu (jednou barvou, funguje v tmavém režimu i paletách) */
.logo-row { overflow: hidden; margin: 0 0 calc(1.5 * var(--step)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-row__track { display: flex; align-items: center; gap: calc(2 * var(--step)); width: max-content; animation: logo-row 38s linear infinite; }
.logo-row:hover .logo-row__track { animation-play-state: paused; }
/* mask-image je v inline stylu (URL se řeší vůči dokumentu, ne vůči CSS) */
.logo-row__item { display: block; flex: none; height: var(--cell); width: calc(var(--cell) * var(--ar, 4)); background: var(--color-text); opacity: 0.8; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
@keyframes logo-row { to { transform: translateX(-50%); } }
/* omezený pohyb: pás nejede — loga se proto zalomí do řad, ať jsou
   vidět všechna (home.js stopu v tom případě nezdvojuje) */
@media (prefers-reduced-motion: reduce) {
  .logo-row { -webkit-mask-image: none; mask-image: none; }
  .logo-row__track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--step); }
}

@media (max-width: 900px) {
  .cases { margin-left: 0; --case-pad: calc(0.5 * var(--step)); }
  .cases__grid { margin-left: 0; }
  /* mobil: karty jsou přes celou šířku — buňky příběhu pruží a příběh
     stojí v toku NAD textem (absolutní poloha by se s textem křížila);
     horní okraj o krok níž kvůli číslu případu. Tělo pak nemusí nic
     rezervovat (pás je v toku), jinak by mezera byla dvojitá. */
  .case__story { --sc: minmax(0, 1fr); grid-auto-rows: auto; position: static; margin: calc(var(--case-pad) + var(--step)) var(--case-pad) var(--gap); }
  /* V3: fotka má na mobilu vlastní výšku (na desktopu bere zbytek karty
     — tady by z ní zbyl proužek) a karta roste s ní */
  .cases[data-variant="a"] .case__img { flex: none; height: calc(6 * var(--step) - var(--gap)); }
  .cases[data-variant="j"] .case__body { padding-top: var(--case-pad); }
  .cases__head { height: auto; flex-direction: column; align-items: flex-start; gap: var(--gap); margin-top: calc(2 * var(--step)); }
  .cases__grid { grid-template-columns: 1fr; }
  .case { min-height: calc(7 * var(--step) - var(--gap)); }
}
/* ── TÝM (Pavla + Marek 2026-09-30): zpět MASONRY GALERIE. Nadpis s větou
   a CTA nad fotkami (vzor hlavičky případovek), pod nimi masonry v mřížce
   pole: sloupce 3–4 kroky široké, dlaždice v celých krocích natěsno na
   mezeru pole. Rozvrh (--c/--r/--w/--h dlaždic a počet sloupců) dosazuje
   home.js podle šířky obsahu. Bez přelivu — po najetí jen zoom a popisek. */
/* dva řádky mřížky nad nadpisem i pod fotkami (Marek 2026-09-27).
   POZOR: selektor musí být silnější než .band — jeho padding-block je
   v tomhle souboru definovaný později a jinak tichý přebije cokoliv,
   co .team nastaví (proto dřívější změny paddingů „nefungovaly"). */
.team.band { position: relative; padding-block: calc(2 * var(--step)); display: block; }
/* CTA zarovnané na HORNÍ uzel řádku s nadpisem (flex-start) — sedí tak
   na mřížce jako ostatní tlačítka */
.team__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--step); margin: 0 var(--step) var(--step); }
.team__head h2 { margin: 0 0 0.25em; }
.team__head p { margin: 0; max-width: none; font-size: var(--fs-text); }
/* galerie začíná o krok od obsahové hrany (jako případovky) a běží
   v celých krocích; počet sloupců přepisuje home.js */
.team__grid { display: grid; grid-template-columns: repeat(16, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); width: fit-content; margin-left: var(--step); }
.person { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); position: relative; margin: 0; overflow: hidden; }
/* --pos = ohnisko ořezu fotky (tvář), u každé fotky zvlášť v HTML */
.person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 20%); transition: transform 900ms ease; }
.person:hover img { transform: scale(1.04); }
.person__wash { display: none; }
.person figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--step) calc(0.5 * var(--step)) calc(0.5 * var(--step)); background: linear-gradient(to top, color-mix(in srgb, var(--sepie) 92%, transparent), transparent); color: var(--papir); font-size: var(--fs-small); line-height: 1.25; opacity: 0; transition: opacity 220ms ease; }
.person figcaption strong { display: block; font-size: var(--fs-text); }
.person:hover figcaption, .person:focus-within figcaption { opacity: 1; }
.team__cta { display: inline-flex; }
@media (max-width: 900px) {
  .team { padding-block: var(--step); }
  .team__head { flex-direction: column; align-items: flex-start; gap: var(--gap); margin-inline: 0; }
  .team__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; width: auto; margin-left: 0; }
  /* fotky čtvercové i na mobilu (Marek 2026-09-27); jméno a role POD
     fotkou — bez hoveru by popisek přes fotku trvale zakrýval tvář */
  .team__grid .person { grid-column: auto; grid-row: auto; overflow: visible; }
  .team__grid .person img { height: auto; aspect-ratio: 1; }
  .team__grid .person:hover img { transform: none; }
  .person--office { display: none; }
  .team__grid .person figcaption { position: static; padding: var(--gap) 0 calc(0.5 * var(--step)); background: none; color: var(--color-text); opacity: 1; }
}

/* ── závěr (2026-09-21): dva sloupce — vlevo fotka 4×4, jméno, tlačítka;
   vpravo nadpis (pevně zalomený) a lead ── */
/* bez svislého centrování (centrování rozbíjí iterativní přichycení na uzly):
   obsah k vršku, odsazení shora v krocích */
/* INVERZNÍ závěr (Marek 2026-09-27): sekce si prohodí --color-* přes
   inverzní tokeny — ve světlém režimu je tmavá a naopak; podbarvení
   kreslí ::before přes celou šířku okna (pod canvasem pole, mřížka se
   v inverzi ztrácí — záměr, závěr působí jako čistý uzavírací blok).
   Obsah je svisle VYSTŘEDĚNÝ v celé výšce okna (align-content:center),
   žádné mrtvé místo dole. */
.outro {
  --color-bg: var(--inv-bg); --color-text: var(--inv-text); --color-latent: var(--inv-latent);
  color: var(--color-text);
  position: relative;
  min-height: 100vh; min-height: 100svh;
  /* FLEX místo mřížky sloupců (Marek 2026-09-28): pevné sloupce 15–21
     na notebooku nevznikly a fotka přetékala z okna; uvnitř inverzního
     bloku mřížka není vidět, takže sloupce pole nejsou potřeba. Na úzkém
     oknu se fotka zalomí pod text. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--step);
  margin: 0 0 0 var(--step); padding: var(--step) var(--step) var(--step) 0;
}
.outro::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -2; background: var(--color-bg); }
/* stránka končí hranou inverzního bloku — spodní padding obsahu by pod
   ním nechal světlý pruh pole */
.page-main--home { padding-bottom: 0; }
.outro__left { flex: 0 1 auto; min-width: 0; }
.outro__right { flex: none; margin-top: 0; }
.outro__person { width: calc(6 * var(--step) - var(--gap)); height: calc(6 * var(--step) - var(--gap)); }
.outro__person img { object-position: center 15%; }
.outro__who { margin-top: var(--gap); font-size: var(--fs-text); line-height: 1.3; }
.outro__who strong { display: block; }
.outro__buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); margin-top: var(--step); }
.page-main .outro__title { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 calc(0.5 * var(--step)); max-width: none; white-space: nowrap; }
.page-main .outro__lead { font-size: var(--fs-lead); opacity: 0.75; max-width: 30ch; margin: 0 0 var(--step); }
/* notebook (Marek 2026-09-28): menší fotka a titulek v H2 bez nowrap —
   text pruží vedle fotky, nic se nezalamuje pod ni ani nepřetéká z okna.
   MUSÍ být až ZA základními pravidly titulku (stejná specificita). */
@media (max-width: 1500px) and (min-width: 901px) {
  .outro__person { width: calc(4 * var(--step) - var(--gap)); height: calc(4 * var(--step) - var(--gap)); }
  .outro__left { flex: 1 1 0; }
  .page-main .outro__title { white-space: normal; font-size: var(--fs-h2); }
}
@media (max-width: 900px) {
  .outro { display: block; margin-left: 0; min-height: 0; padding-block: calc(2 * var(--step)) var(--step); }
  .outro__right { margin-top: var(--step); }
  .page-main .outro__title { font-size: var(--fs-h2); white-space: normal; }
  .outro__buttons { width: 100%; }
}
/* ── úvod: společné ── */
.hero--home { position: relative; }
.hero--home .hero__inner { position: static; margin-inline: auto; }
.hero__line { display: block; white-space: pre-line; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.015em; font-weight: 700; }
.hero__split { display: contents; }
.hero__sub { white-space: pre-line; font-size: var(--fs-text); opacity: 0.75; margin: 0; max-width: none; }
.hero__mark { width: var(--cell); height: var(--cell); background: var(--terracotta); }
.hero-mark { display: block; width: var(--cell); height: var(--cell); text-decoration: none; color: var(--color-text); }
.icon3x3--cell { --icon-gap: 3px; --icon-cell: calc((var(--cell) - 2 * var(--icon-gap)) / 3); margin: 0; }
.icon3x3--cell .cell--ring, .icon3x3--cell .cell--colring { border-width: 1px; }
/* šipka dolů na homepage NEZVÝRAZNĚNÁ: vypadá jako ostatní čtverce pole */
.hero--home .scroll-cue { background: transparent; border: var(--line-w) solid var(--color-latent); box-sizing: border-box; color: var(--color-text); margin-inline: auto; }
.hero--home .scroll-cue:hover { filter: none; border-color: var(--terracotta); }
@media (max-width: 900px) {
  .hero--home .hero__inner { margin-inline: 0; }
  /* obal úvodu jde na mobilu přes celé okno → šipka zpět na levou linii obsahu */
  .hero--home .scroll-cue { margin: var(--step) 0 0 calc(var(--gap) + var(--step)); }
}

/* ── úvod: pohyblivá mřížka (viz komentář v index.html) ── */
.hero-comp {
  display: grid;
  grid-template-columns: auto var(--cell) auto; grid-template-rows: var(--cell) var(--cell) var(--cell) var(--cell);
  row-gap: var(--gap); column-gap: calc(0.5 * var(--cell));
  width: fit-content; will-change: transform;
  transition: opacity 600ms ease;
}
.hero-comp.is-gone { opacity: 0; }
.hero-comp .hero__line--left { grid-column: 1; grid-row: 1; align-self: end; text-align: right; margin-bottom: 0.12em; }
/* pravý text vedle 2. a 3. ikony */
.hero-comp .hero__line--right { grid-column: 3; grid-row: 3 / 5; align-self: center; }
/* sloupec buněk: marker + tři ikony pod ním (rozestup = --gap → všechny na uzlech) */
.hero-col { grid-column: 2; grid-row: 1 / 5; display: flex; flex-direction: column; gap: var(--gap); }
.hero-col > * { flex: none; }
.hero-comp .hero__mark { position: static; opacity: 1; transition: none; }
/* ikony před rozbalením schované v markeru, vyjedou dolů na místo */
.hero-comp .hero-mark { opacity: 0; transform: translateY(calc(-1 * var(--from, 0px))); transition: opacity 220ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1); transition-delay: var(--d, 0ms); }
.hero-comp .hero-mark:nth-of-type(1) { --from: var(--step); --d: 0ms; }
.hero-comp .hero-mark:nth-of-type(2) { --from: calc(2 * var(--step)); --d: 80ms; }
.hero-comp .hero-mark:nth-of-type(3) { --from: calc(3 * var(--step)); --d: 160ms; }
.hero-comp.is-out .hero-mark { opacity: 1; transform: none; }
/* finále: marker + věta (věta začíná pod horní hranou markeru, dle mockupu) */
.hero-final { display: block; width: fit-content; opacity: 0; transition: opacity 400ms ease; position: absolute; left: 0; top: 0; }
.hero-final.is-on { opacity: 1; }
/* omezený pohyb (home.js přidá .hero--static): věta stojí staticky pod
   kompozicí, o řádek mřížky níž — bez animace je vidět hned */
.hero--static .hero-final { position: static; opacity: 1; margin-top: var(--step); }
@media (max-width: 900px) { .hero--static .hero-final { margin-inline: auto; } }
/* závěrečná věta výjimečně větším písmem */
.hero__sub--big { font-size: var(--fs-lead); opacity: 0.9; margin: 0; }
/* závěr: texty zmizí a MARKER sjede dolů přes ikony (sbalí je) — zastaví
   se na místě spodní ikony a už se nehýbe; ikony zhasnou, jak je míjí */
.hero-comp .hero__line { transition: opacity 300ms ease; }
.hero-comp.is-merged .hero__line { opacity: 0; }
.hero-comp .hero__mark { transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero-comp.is-merged .hero__mark { transform: translateY(calc(3 * var(--step))); }
.hero-comp.is-merged .hero-mark { opacity: 0; transform: none; transition: opacity 180ms ease; transition-delay: var(--sweep, 0ms); }
.hero-comp.is-merged .hero-mark:nth-of-type(1) { --sweep: 80ms; }
.hero-comp.is-merged .hero-mark:nth-of-type(2) { --sweep: 220ms; }
.hero-comp.is-merged .hero-mark:nth-of-type(3) { --sweep: 360ms; }
/* kompozice po odjezdu zůstává v toku (jen neviditelná), ať šipka neposkočí;
   marker sedí níž než u ostatních variant — po odjezdu mřížky o 2 řádky
   nahoru musí text zůstat pod horní hranou */
.hero-comp.is-hidden { visibility: hidden; }
.hero--home .hero__inner { padding-top: calc(52svh - 2 * var(--step)); }
/* odhalení textu zleva doprava (místo psacího stroje): maska řízená --rv 0…1 */
.hero-reveal {
  --rv: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--rv) * 130% - 30%), transparent calc(var(--rv) * 130%));
  mask-image: linear-gradient(90deg, #000 calc(var(--rv) * 130% - 30%), transparent calc(var(--rv) * 130%));
}
.hero-reveal.is-hidden { opacity: 0; } /* před odhalením: díru do pole nevyráží */
@media (max-width: 900px) {
  /* mobil: sloupec, vše vycentrované — první věta NAD markerem, ikony pod
     ním, druhá věta pod ikonami; závěrečná věta pod markerem */
  .hero-comp { grid-template-columns: auto; grid-template-rows: auto auto auto; justify-items: center; row-gap: var(--step); margin-inline: auto; }
  .hero-comp .hero__line--left { grid-column: 1; grid-row: 1; text-align: center; align-self: auto; margin-bottom: 0; }
  .hero-col { grid-column: 1; grid-row: 2; }
  .hero-comp .hero__line--right { grid-column: 1; grid-row: 3; align-self: auto; text-align: center; }
  .hero__sub--big { text-align: center; }
  /* (Marek 2026-09-30) obal přes celou šířku OKNA (ne obsahu — ten je
     na mobilu kvůli dorovnání na celé sloupce nesouměrný): sloupec se
     středí na střed displeje a home.js ho dorovná na nejbližší uzel.
     Dřív měl obal fit-content, stál u levé hrany a „vystředění" se dělo
     jen uvnitř něj. Odsazení shora počítané od středu okna: rozbalená
     kompozice (~10 kroků) po odjezdu mřížky o 2 řádky sedí uprostřed mezi
     lištou menu a spodní lištou s výzvou, nic nepadá pod ohyb. */
  .hero--home .hero__inner { width: 100vw; margin-left: calc(-1 * (var(--gap) + var(--step))); padding-top: max(var(--step), calc(50svh - 6 * var(--step))); }
}
/* omezený pohyb: statická kompozice i se závěrečnou větou je vyšší a nic
   neodjíždí → odsazení shora je menší; přesné vystředění mezi lištou menu
   a spodní lištou s výzvou dopočítá home.js z naměřené výšky (tohle je
   jen výchozí hodnota před měřením) */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hero--home .hero__inner { padding-top: max(var(--step), calc(50svh - 9 * var(--step))); }
}

/* ── podbarvený pás sekce (JPA) ── tón o stupeň tmavší než papír, přes
   celou šířku okna (::before přesahuje, .page-main je stacking context
   s overflow-x hidden na těle); mřížka se kreslí přes něj (canvas z -1) */
.band { position: relative; padding-block: var(--step); }
.band::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -2; background: var(--band-bg, color-mix(in srgb, var(--color-bg) 93%, var(--color-text))); }
.band--jpa .jpa-split { margin-top: 0; }

/* ── překlápěcí mřížka (flip.js, vzor foto.html „samočinná · úhlopříčka";
   od 2026-09-30 jen fotka partnera v závěru): plocha rozřezaná na dlaždice
   po celých krocích, každá má líc a rub (CSS 3D), překlopení běží
   úhlopříčnou vlnou přes zpoždění --d ── */
.flipbox { position: absolute; inset: 0; perspective: 1200px; }
/* dlaždice jsou absolutně na CELÝCH pixelech (kreslí je flip.js) —
   grid s plovoucím krokem nechával na Retině vlasové švy */
.flipbox__tile { position: absolute; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); transition-delay: var(--d, 0ms); }
.flipbox.is-flipped .flipbox__tile { transform: rotateY(180deg); }
.flipbox__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(0deg); }
.flipbox__face--b { transform: rotateY(180deg); }
.flipbox__face img { position: absolute; left: var(--ox); top: var(--oy); width: var(--mw); height: var(--mh); max-width: none; object-fit: cover; object-position: center 20%; display: block; }
.flipbox__face img[hidden] { display: none; }
/* celistvá krycí fotka přes dlaždice v klidovém stavu (stejný ořez jako
   dlaždice) — maskuje vlasové švy GPU vrstev */
.flipbox__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; z-index: 2; }
.flipbox__cover[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .flipbox__tile { transition: none; } }
/* závěr: původní fotka se po postavení flipboxu jen zneviditelní,
   ať drží rozměr dlaždice; zoom po najetí u flipu vypnutý */
.outro__person.is-flip > img { visibility: hidden; }
.outro__person.is-flip:hover img { transform: none; }

/* ── ODBORNOST (2026-09-23, úprava 2026-09-27): tři reels 9:16 vedle
   sebe, stories vzhled — proužek průběhu nahoře, play/pauza přes celou
   plochu, zvuk vpravo dole. Bez nadpisu i profilu. Videa s Václavem se
   OŘEZÁVAJÍ na výšku (cover); Václav sedí ve zlatém řezu v první třetině
   záběru → ohnisko ořezu 25 % zleva, ne střed. Mobil: horizontální pás
   se snapem. ── */
/* menší svislé okraje sekce; řadu centruje home.js na uzly pole */
.reels { margin: var(--step) 0; }
/* mezera mezi reely = krok + mezera pole: rozteč rámů je pak násobek
   kroku a KAŽDÝ rám sedí na uzlech (jen --step rozteč z uzlů sjížděla) */
.reels__row { display: flex; gap: calc(var(--step) + var(--gap)); align-items: flex-start; }
/* šířku reelu i výšku rámu (celé kroky, poměr ~9:16) dosazuje home.js;
   min() a aspect-ratio jsou fallback bez JS */
.reel { flex: none; width: min(calc((100% - 3 * var(--step)) / 3), calc(72svh * 9 / 16)); margin: 0; }
.reel__frame { position: relative; aspect-ratio: 9 / 16; background: var(--sepie); overflow: hidden; border: var(--line-w) solid var(--color-latent); }
/* tlačítko PŘILEPENÉ pod rámem (Marek 2026-09-27): rám končí na hraně
   buňky, + mezera pole = tlačítko na dalším uzlu hned pod videem */
.reel__more { margin-top: var(--gap); }
/* scale 1.07 ořezává letterbox pruhy zapečené ve zdrojovém klipu */
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% center; transform: scale(1.07); }
.reel__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* proužek průběhu jako u stories: --p 0…1 dosazuje home.js */
.reel__bar { position: absolute; top: 10px; left: 10px; right: 10px; height: 3px; background: color-mix(in srgb, var(--papir) 35%, transparent); z-index: 3; }
.reel__bar-fill { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--papir); }
/* play/pauza přes celou plochu; ikona play jen když stojí, pauza po najetí při přehrávání */
.reel__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; color: var(--papir); cursor: pointer; }
.reel__play svg { width: 58px; height: 58px; padding: 14px; background: color-mix(in srgb, var(--sepie) 55%, transparent); transition: opacity 200ms ease; }
.reel .reel__ico-pause { display: none; }
.reel.is-playing .reel__ico-play { display: none; }
.reel.is-playing .reel__ico-pause { display: block; opacity: 0; }
.reel.is-playing .reel__frame:hover .reel__ico-pause { opacity: 1; }
.reel__mute { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sepie) 55%, transparent); border: 0; padding: 0; color: var(--papir); cursor: pointer; }
.reel__mute svg { width: 60%; height: 60%; display: block; }
.reel__mute[aria-pressed="true"] .reel__ico-waves { opacity: 0.25; }
.reel--fake .reel__mute { display: none; }
/* vzkaz místo přehrání u fejkového reelu (Katka) */
.reel__joke { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 0.7em; padding: 14%; background: color-mix(in srgb, var(--sepie) 80%, transparent); color: var(--papir); text-align: center; }
.reel__joke[hidden] { display: none; }
.reel__joke strong { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; }
.reel__joke span { font-size: var(--fs-small); opacity: 0.85; }
/* popisek NAD videem, velikost H3, pevně zalomený na dva řádky (<br>);
   blok má výšku přesně jedné buňky + mezery — rám pod ním tak zůstává
   na uzlech pole a všechny tři rámy drží stejnou horní linii */
.reel__caption { margin: 0 0 var(--gap); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; max-width: none; height: var(--cell); display: flex; align-items: flex-end; }
.reels__more { margin-top: var(--step); }
/* šipky pásu videí — jen mobil */
.reels__nav { display: none; }
@media (max-width: 900px) {
  .reels { margin-left: 0; position: relative; }
  /* užší mezera: další video vykukuje zpoza hrany → je vidět, že pás pokračuje */
  .reels__row { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; gap: var(--gap); scrollbar-width: none; }
  .reels__row::-webkit-scrollbar { display: none; }
  .reel { width: min(calc(100% - var(--step)), calc(70svh * 9 / 16)); scroll-snap-align: center; }
  /* popisek má na mobilu výšku svých DVOU řádků: buňka pole je tu jen
     30 px, horní řádek z ní přetékal nahoru a posuvný pás ho ořízl */
  .reel__caption { height: auto; min-height: 2.4em; }
  /* šipky po stranách (Marek 2026-09-30): buňka pole v terakotě jako šipka
     „pokračuj dolů", svisle na středu videa: střed řady (−4 px za spodní
     padding) posunutý o půl rozdílu mezi popiskem nahoře a tlačítkem dole */
  .reels__nav { position: absolute; top: calc(50% - 4px + (2.4 * var(--fs-h3) - var(--cell)) / 2); z-index: 4; display: flex; align-items: center; justify-content: center; width: var(--cell); height: var(--cell); margin-top: calc(-0.5 * var(--cell)); padding: 0; border: 0; background: var(--terracotta); color: var(--beige); cursor: pointer; }
  .reels__nav[hidden] { display: none; }
  .reels__nav svg { width: 55%; height: 55%; display: block; }
  .reels__nav--prev { left: 0; }
  .reels__nav--next { right: 0; }
}