/* =========================================================================
   FabLab Brno – podstránka „Stěhování"

   Hodnoty NEJSOU v tomto souboru. Všechny nese ../design/tokens.css (103 tokenů);
   tenhle soubor je jen selektory + var(--flb-*).

   Vizuální předloha od 3. 9. 2026: fablabuniversity.cz (stránka „O nás",
   soubor css/all.css) – její rytmus je bílá stránka, do které se vkládají
   RASTROVANÉ PLOCHY (tmavá dot-b-g, červená dot-r-g) jako bloky uvnitř
   kontejneru, ne pruhy přes celou šířku. Hero je tmavé s červenou plochou
   a vrstvou vyříznutou svorkami vpravo. Nadpisy sekcí jsou centrované 40/45.

   Surová hodnota (hex, px, ms) je tu chyba – kromě tří tříd, které token nemají
   a mají řádek v DESIGN-TOKENS.md §6 (O-9 až O-11):
     1) minimální cíl dotyku 2.75rem = 44 px (WCAG 2.5.8, ne brandová hodnota),
     2) geometrie komponent (poměry, %, viewBox, clip-path, border-image slice),
     3) šířky breakpointů – media query custom property neumí (tokens.css §BREAKPOINTY).

   Mobile-first, tři vrstvy podle artboardů wireframu v2:
     základ    → artboard 1b, mobil 390 px
     62.5rem   → artboard 1c, 1000 px → desktopové rozvržení
     75rem     → [FLU] 1200 px → hero se svorkami a červenou plochou
     80rem     → artboard 1a, 1280 px → nejvyšší vrstva rytmu
   ========================================================================= */

@import url('../design/tokens.css');

/* ---------- základ ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--flb-color-bg);
  color: var(--flb-color-text);
  font-family: var(--flb-font-sans);
  font-size: var(--flb-fs-base-m);
  font-weight: var(--flb-fw-regular);
  line-height: var(--flb-lh-base-m);
  font-feature-settings: 'pnum' on, 'lnum' on;   /* [FLU] číslice vždy proporcionální verzálkové */
  text-wrap: pretty;
}

h1, h2, h3 {
  margin: 0 0 var(--flb-space-xs);
  color: var(--flb-color-surface-dark);           /* [FLU] .content h1–h4 {color:#3C3C3B} */
  letter-spacing: 0.02em;                          /* [FLU] .content h1–h4 {letter-spacing:0.02em} – geometrie písma */
  text-wrap: balance;
}
figure { margin: 0; }

h1 {
  font-size: var(--flb-fs-display-m);
  line-height: var(--flb-lh-display-m);
  font-weight: var(--flb-fw-bold);
}
/* [FLU] nadpisy sekcí jsou centrované (h2.align-center text-center) */
h2 {
  font-size: var(--flb-fs-h2-m);
  line-height: var(--flb-lh-h2-m);
  font-weight: var(--flb-fw-bold);
  text-align: center;
  margin-bottom: var(--flb-space-md);
}
h3 {
  font-size: var(--flb-fs-h3);
  line-height: var(--flb-lh-h3);
  font-weight: var(--flb-fw-bold);
}

p  { margin: 0 0 var(--flb-space-sm); max-width: var(--flb-container-text); }
p:last-child { margin-bottom: 0; }

/* Recept ODKAZ V TEXTU – klidový stav --flb-color-accent-dark, hover
   --flb-color-accent (měřený kontrast, ne vkus – O-9). Odkazy v textu jsou
   [FLU] tučné (800 v image_text, 700 jinde) a podtržené. */
a {
  color: var(--flb-color-accent-dark);
  font-weight: var(--flb-fw-bold);
  transition: color var(--flb-duration) var(--flb-ease);
}
a:hover { color: var(--flb-color-accent); text-decoration: none; }

/* [FLB] fokus ruší (`body a:focus {outline:0}`) – vadu nepřebíráme (tokens.css). */
:focus-visible {
  outline: var(--flb-rule-w-strong) solid var(--flb-color-focus);
  outline-offset: var(--flb-border-w);
}

[id] { scroll-margin-top: var(--flb-space-sm); }

/* Text jen pro čtečky – geometrie, ne brandová hodnota (O-10). */
.flb-jen-ctecka {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- skip link ---------- */

.flb-skip {
  position: absolute;
  left: var(--flb-space-2xs);
  top: var(--flb-space-2xs);
  z-index: 10;
  padding: var(--flb-space-xs) var(--flb-space-sm);
  background: var(--flb-color-surface-dark);
  color: var(--flb-color-text-inverse);
  font-weight: var(--flb-fw-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.flb-skip:focus {
  transform: translateY(0);
  color: var(--flb-color-text-inverse);
}

/* ---------- rozvržení ---------- */

.flb-wrap {
  max-width: var(--flb-container-wide);
  margin-inline: auto;
  padding-inline: var(--flb-container-pad);
}

/* [FLU] sekce = margin 40px 0, žádné dělicí linky; hierarchii nesou plochy. */
.flb-sekce { margin-block: var(--flb-space-lg); }

/* RASTROVANÁ PLOCHA uvnitř kontejneru – [FLU] .container > .dot-b-g > .row
   {padding:30px 60px 40px}. Plocha je blok v bílé stránce, ne pruh. */
.flb-sekce--odlisena .flb-wrap,
.flb-sekce--klicova .flb-wrap,
.flb-sekce--upozorneni .flb-wrap {
  padding: var(--flb-space-md) var(--flb-space-sm) var(--flb-space-lg);
}

/* Odlišená (světlá) plocha – [FLU] .dot-w-g */
.flb-sekce--odlisena .flb-wrap {
  background: var(--flb-color-surface) var(--flb-asset-dot-light) repeat;
}

/* Klíčové bloky D a I – copy si o jejich odlišení výslovně říká. Berou
   ČERVENOU rastrovanou plochu [FLU] section-contact .in.dot-r-g – nejsilnější
   plochu, kterou brand má. */
.flb-sekce--klicova .flb-wrap {
  background: var(--flb-color-accent) var(--flb-asset-dot-red) repeat;
  color: var(--flb-color-text-inverse);
}
.flb-sekce--klicova h2,
.flb-sekce--klicova h3,
.flb-sekce--klicova a { color: var(--flb-color-text-inverse); }
.flb-sekce--klicova a:hover { color: var(--flb-color-text-inverse); text-decoration: underline; }
.flb-sekce--klicova :focus-visible { outline-color: var(--flb-color-text-inverse); }
.flb-sekce--klicova .flb-mezera { border-top-color: var(--flb-color-text-inverse); }
.flb-sekce--klicova .flb-odrazky li::marker { color: var(--flb-color-text-inverse); }

/* Upozorňovací sekce – TMAVÁ rastrovaná plocha [FLU] cols_12_6_6.theme-dark .dot-b-g */
.flb-sekce--upozorneni .flb-wrap {
  position: relative;
  background: var(--flb-color-surface-dark) var(--flb-asset-dot-dark-plate) repeat;
  color: var(--flb-color-text-inverse);
}
.flb-sekce--upozorneni h2,
.flb-sekce--upozorneni h3,
.flb-sekce--upozorneni a { color: var(--flb-color-text-inverse); }

/* Tmavá plocha S FOTKOU – [FLU] hero .image-layer-small: fotka pod rovným
   překryvem rgba(60,60,59,.8) a nad tím průhledný rastr dot-t-d, ať text drží
   čitelnost. Fotku nese sekce, ne token pozadí – jedna fotka = jedna sekce. */
.flb-sekce--foto .flb-wrap {
  background:
    var(--flb-asset-dot-dark) repeat,
    linear-gradient(var(--flb-color-scrim-dark-soft) 0 0),
    var(--flb-asset-clenstvi-photo) center / cover no-repeat
    var(--flb-color-surface-dark);
}
.flb-sekce--upozorneni a:hover { color: var(--flb-color-text-inverse); }
.flb-sekce--upozorneni :focus-visible { outline-color: var(--flb-color-text-inverse); }

/* Rohová svorka na tmavé ploše odebrána na přání (3. 9. 2026). */

/* Návěští sekce – [FLU] h2.section-title: uppercase, 600, proložení 0.3em, centrované.
   Proložení přidává mezeru i ZA poslední znak – bez kompenzace sedí text
   o půl mezery vlevo od středu; text-indent ji vyrovná. */
.flb-eyebrow {
  display: block;
  max-width: none;          /* jinak zdědí p {max-width:750px} a střed se posune */
  margin-bottom: var(--flb-space-2xs);
  text-indent: var(--flb-ls-eyebrow);
  font-size: var(--flb-fs-label);
  line-height: var(--flb-lh-h3);
  font-weight: var(--flb-fw-semibold);
  letter-spacing: var(--flb-ls-eyebrow);
  text-transform: uppercase;
  text-align: center;
  color: var(--flb-color-text-on-dark-muted);
}

/* ---------- hlavička ---------- */

/* [FLU] .section-header: bílá, logo 64px, uppercase nav 14/600/0.1em, hairline */
.flb-hlavicka {
  border-bottom: var(--flb-border-w) solid var(--flb-color-border-rule);
  background: var(--flb-color-bg);
}
.flb-hlavicka .flb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--flb-space-xs);
  padding-block: var(--flb-space-2xs);
}

/* Recept LOGOTYP. Text v odkazu zůstává (čtečka i režim bez obrázků), jen ho
   překrývá logo. */
.flb-znacka {
  display: block;
  width: calc(var(--flb-logo-h) * 3.05);   /* poměr logotypu 122:40 = geometrie (O-10) */
  height: var(--flb-logo-h);
  padding: 0;
  border: 0;
  background: var(--flb-asset-logo) left center / contain no-repeat;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
}
.flb-znacka:hover { opacity: .8; }

/* Kotva v hlavičce – [FLU] .nav-main li a: 14/600/0.1em uppercase, hover do šedé */
.flb-hlavicka-kotva {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--flb-space-2xs);
  color: var(--flb-color-surface-dark);
  font-size: var(--flb-fs-label);
  font-weight: var(--flb-fw-semibold);
  letter-spacing: var(--flb-ls-label);
  text-decoration: none;
  text-transform: uppercase;
}
.flb-hlavicka-kotva:hover { color: var(--flb-color-text-muted); }

/* ---------- hero ---------- */

/* [FLU] hero_banner.theme-dark – tmavá plocha, text vlevo, vpravo červená
   .bg-layer a .image-layer (fotka) vyříznutá clip-path se čtyřmi svorkami.
   Na mobilu [FLU] .image-layer-small: fotka přes celou plochu pod rovným
   překryvem rgba(60,60,59,.8). */
.flb-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--flb-space-lg);
  background:
    linear-gradient(var(--flb-color-scrim-dark) 0 0),
    var(--flb-asset-hero-photo) center / cover no-repeat
    var(--flb-color-surface-dark);
  color: var(--flb-color-text-inverse);
}
.flb-hero .flb-wrap {
  position: relative;
  padding-block: var(--flb-space-lg);
}
/* Do 1000 px [FLU] .text-wrapper text-center: vystředěný text na fotce */
.flb-hero-text { text-align: center; }
.flb-hero-text p { margin-inline: auto; }
.flb-hero h1 {
  color: var(--flb-color-text-inverse);
  margin-bottom: var(--flb-space-xs);
}
.flb-hero .flb-perex {
  font-size: var(--flb-fs-body-lg);
  line-height: var(--flb-lh-body-lg);
  margin-bottom: var(--flb-space-sm);
}
.flb-aktualizovano {
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
}
.flb-hero .flb-aktualizovano { color: var(--flb-color-text-on-dark-muted); }

/* Svorka vpravo nahoře v heru byla odebrána na přání (3. 9. 2026) — čtyři svorky
   v clip-path vrstvy ji dělají nadbytečnou. */

/* ---------- čtyři fakta + rozcestník ---------- */

.flb-fakta { margin-block: var(--flb-space-lg); }

/* Recept KARTA/DLAŽDICE – [FLU] .section-benefits .item: plochý #F5F5F5 blok,
   padding 20px, nadpis 20/32 bold, BEZ rámu a stínu. Na mobilu musí být všechny
   čtyři celé vidět hned pod hlavičkou (copy B). */
.flb-dlazdice {
  display: grid;
  gap: var(--flb-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.flb-dlazdice > li {
  padding: var(--flb-space-sm);
  background: var(--flb-color-surface);
}
.flb-dlazdice b {
  display: block;
  font-size: var(--flb-fs-base-m);
  line-height: var(--flb-lh-base-m);
  font-weight: var(--flb-fw-bold);
  color: var(--flb-color-surface-dark);
}
.flb-dlazdice span {
  display: block;
  margin-top: var(--flb-space-3xs);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
}

/* Rozcestník – [FLU] odkazy „Chci vědět víc": tučný text, šipka, bez rámu */
.flb-rozcestnik {
  display: grid;
  gap: var(--flb-space-2xs);
  margin: var(--flb-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.flb-rozcestnik a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flb-space-xs);
  min-height: 2.75rem;
  padding: var(--flb-space-2xs) 0;
  border-bottom: var(--flb-border-w) solid var(--flb-color-border-rule);
  color: var(--flb-color-surface-dark);
  font-size: var(--flb-fs-h3);
  font-weight: var(--flb-fw-bold);
  text-decoration: none;
}
.flb-rozcestnik a:hover { color: var(--flb-color-accent); }
.flb-rozcestnik a::after { content: "→"; color: var(--flb-color-accent); }

/* ---------- seznam „co ↔ jak to bude" (bloky E, F, G, H) ---------- */

.flb-seznam { margin: 0; }
.flb-seznam > div {
  padding-block: var(--flb-space-2xs);
  border-bottom: var(--flb-border-w) solid var(--flb-color-border-rule);
}
.flb-seznam > div:last-child { border-bottom: 0; }
.flb-seznam dt {
  font-weight: var(--flb-fw-bold);
  margin-bottom: var(--flb-space-3xs);
}
.flb-seznam dd {
  margin: 0;
  max-width: var(--flb-container-text);
}
/* Na tmavé ploše [FLU] jsou řádky bílé bary ([FLU] .params .param {background:#FFF}) */
.flb-sekce--upozorneni .flb-seznam > div {
  background: var(--flb-color-bg);
  color: var(--flb-color-text);
  padding: var(--flb-space-xs) var(--flb-space-sm);
  margin-bottom: var(--flb-space-2xs);
  border: 0;
}
.flb-sekce--upozorneni .flb-seznam dt { color: var(--flb-color-surface-dark); }

/* Seznam – [FLB] .content ul {list-style:square} */
.flb-odrazky {
  margin: 0 0 var(--flb-space-sm) var(--flb-space-sm);
  padding-left: var(--flb-space-3xs);
  max-width: var(--flb-container-text);
  list-style: square;
}
.flb-odrazky li { margin-bottom: var(--flb-space-2xs); }
.flb-odrazky li:last-child { margin-bottom: 0; }

/* ---------- MEZERA – devět míst, kde odpověď zatím není ----------
   Recept STAV „MEZERA": oddělení linkou, uppercase návěští, menší text.
   Mezera se PŘIZNÁVÁ, nemaskuje – nikdy prázdné místo bez návěští. */

.flb-mezera {
  margin-top: var(--flb-space-sm);
  padding-top: var(--flb-space-2xs);
  border-top: var(--flb-border-w) solid var(--flb-color-border);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
}
.flb-mezera p { margin: 0; max-width: var(--flb-container-text); }
.flb-mezera b {
  display: block;
  margin-bottom: var(--flb-space-3xs);
  font-size: var(--flb-fs-xs);
  font-weight: var(--flb-fw-semibold);
  letter-spacing: var(--flb-ls-label);
  text-transform: uppercase;
}
.flb-sekce--upozorneni .flb-mezera { border-top-color: var(--flb-color-text-on-dark-muted); }

/* ---------- časová osa (blok C) ----------
   Recept ČASOVÁ OSA – skutečná osa: svislá páteř vlevo, na ní hranaté uzly
   (brand nemá kulaté tvary). Stav nese TROJÍ zdroj: výplň uzlu, barva a textový
   štítek u data – barva sama nikdy (README). Interval leden–březen je červený
   úsek páteře, ne tečka. */

.flb-osa {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flb-osa > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--flb-corner-thickness-m) 1fr;
  column-gap: var(--flb-space-sm);
  padding-block: var(--flb-space-xs) var(--flb-space-md);
}
/* Páteř – tenká linka na ose uzlu, od uzlu dolů k dalšímu uzlu */
.flb-osa > li::before {
  content: "";
  position: absolute;
  left: calc((var(--flb-corner-thickness-m) - var(--flb-rule-w-strong)) / 2);
  top: 0;
  bottom: 0;
  width: var(--flb-rule-w-strong);
  background: var(--flb-color-border);
}
.flb-osa > li:first-child::before { top: var(--flb-space-xs); }
.flb-osa > li:last-child::before  { bottom: auto; height: var(--flb-space-xs); }
/* Uzel – hranatý, 14 px (= tloušťka svorky na mobilu), sedí na první řádce data */
.flb-osa > li::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: var(--flb-corner-thickness-m);
  height: var(--flb-corner-thickness-m);
  margin-top: calc((var(--flb-lh-base-m) - var(--flb-corner-thickness-m)) / 2);
  border: var(--flb-rule-w-strong) solid var(--flb-color-surface-dark);
  background: var(--flb-color-bg);
  position: relative;
  z-index: 1;
}
.flb-osa-kdy,
.flb-osa-co,
.flb-osa-stav,
.flb-osa .flb-mezera { grid-column: 2; }
/* Datum a štítek na jedné řádce; štítek je malý uppercase text, žádný rám */
.flb-osa-kdy {
  grid-row: 1;
  display: block;
  font-size: var(--flb-fs-base-m);
  line-height: var(--flb-lh-base-m);
  font-weight: var(--flb-fw-bold);
  color: var(--flb-color-surface-dark);
}
.flb-osa-stav {
  grid-row: 1;
  justify-self: end;
  align-self: center;
  color: var(--flb-color-text-muted);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-base-m);
  font-weight: var(--flb-fw-semibold);
  letter-spacing: var(--flb-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.flb-osa-co {
  grid-row: 2;
  display: block;
  margin-top: var(--flb-space-3xs);
  max-width: var(--flb-container-text);
}

/* 1) teď – plný červený uzel, červený štítek, páteř pod ním jde do budoucnosti */
.flb-osa > li[data-stav="aktualni"]::after {
  border-color: var(--flb-color-accent);
  background: var(--flb-color-accent);
}
.flb-osa > li[data-stav="aktualni"] .flb-osa-stav,
.flb-osa > li[data-stav="aktualni"] .flb-osa-kdy { color: var(--flb-color-accent); }

/* 2) hotovo – plný tmavý uzel, páteř nad ním tmavá (cesta, kterou jsme ušli) */
.flb-osa > li[data-stav="hotovo"]::after { background: var(--flb-color-surface-dark); }
.flb-osa > li[data-stav="hotovo"]::before { background: var(--flb-color-surface-dark); }

/* 3) budoucí – prázdný uzel (výchozí) */

/* 4) interval leden–březen 2027 – není bod, ale úsek: páteř je tu červená a
   uzel se natáhne do svislého pruhu přes celou výšku položky */
.flb-osa > li.flb-osa--interval::before { background: var(--flb-color-accent); }
.flb-osa > li.flb-osa--interval::after {
  height: auto;
  align-self: stretch;
  margin-top: 0;
  margin-bottom: calc(-1 * var(--flb-space-md));
  border-color: var(--flb-color-accent);
  background: var(--flb-color-accent);
}
.flb-osa > li.flb-osa--interval .flb-osa-kdy { color: var(--flb-color-accent-dark); }

/* ---------- rozcestník mezer (sekce #nevime) ---------- */

/* [FLU] .content table: 1px #DDD rámy, hlavička na #F1F1F1 (→ --flb-color-surface) */
.flb-tabulka-obal { overflow-x: auto; }
.flb-tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
  text-align: left;
}
.flb-tabulka caption {
  margin-bottom: var(--flb-space-xs);
  text-align: left;
}
.flb-tabulka th,
.flb-tabulka td {
  padding: var(--flb-space-2xs);
  border: var(--flb-border-w) solid var(--flb-color-border);
  vertical-align: top;
}
.flb-tabulka thead th {
  background: var(--flb-color-surface);
  color: var(--flb-color-surface-dark);
  font-size: var(--flb-fs-xs);
  font-weight: var(--flb-fw-semibold);
  letter-spacing: var(--flb-ls-label);
  text-transform: uppercase;
}
.flb-tabulka tbody th { font-weight: var(--flb-fw-semibold); }
.flb-tabulka tbody th a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;   /* odkazy v tabulce jsou navigace sekce, ne text ve větě */
}
.flb-kdy { white-space: nowrap; }

/* ---------- schéma dvou částí dílny (blok G) ---------- */

.flb-schema {
  display: block;
  width: 100%;
  max-width: var(--flb-container);
  height: auto;
  margin: var(--flb-space-sm) auto;
}
.flb-schema .flb-schema-plocha {
  fill: var(--flb-color-bg);
  stroke: var(--flb-color-surface-dark);
  stroke-width: 2;                    /* geometrie SVG, ne brandová hodnota (O-10) */
}
.flb-schema .flb-schema-plocha--dohled {
  fill: var(--flb-color-surface);
  stroke-dasharray: 8 5;
}
.flb-schema .flb-schema-nazev {
  fill: var(--flb-color-surface-dark);
  font-family: var(--flb-font-sans);
  font-size: var(--flb-fs-h3);
  font-weight: var(--flb-fw-bold);
}
.flb-schema .flb-schema-popis {
  fill: var(--flb-color-text);
  font-family: var(--flb-font-sans);
  font-size: var(--flb-fs-sm);
  font-weight: var(--flb-fw-regular);
}
.flb-sekce--odlisena figcaption { text-align: center; margin-inline: auto; }

/* ---------- vizualizace nové dílny (sekce #vystaviste) ---------- */

/* Dvojice renderů od architekta. Stejný rytmus jako .flb-stavba, ale dva sloupce
   místo tří a poměr 4:3 – rendery přišly na šířku (geometrie komponenty, výjimka
   O-10, ne brandová hodnota); soubory v img/ jsou na 4:3 už oříznuté a object-fit
   je jen pojistka. */
.flb-vize {
  display: grid;
  gap: var(--flb-space-2xs);
  margin: var(--flb-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.flb-vize img {
  display: block;
  width: 100%;
  /* height:auto je POVINNÉ – viz komentář u .flb-stavba img (prezentační hint
     z atributu height vypne aspect-ratio). */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--flb-color-surface);
}
.flb-vize-popis {
  margin: var(--flb-space-3xs) 0 0;
  color: var(--flb-color-text-muted);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
  text-align: center;
}

/* ---------- inkubátor (blok H) – samostatně, ne v seznamu ---------- */

/* [FLU] .section-benefits .item – plochý #F5F5F5 blok, žádný rám */
.flb-inkubator {
  margin-top: var(--flb-space-md);
  padding: var(--flb-space-sm);
  background: var(--flb-color-surface);
}
.flb-inkubator h3 {
  font-size: var(--flb-fs-tile);
  line-height: var(--flb-lh-tile);
}

/* ---------- kontakty – recept TLAČÍTKO „btn-corners" ---------- */

.flb-kontakt {
  margin: var(--flb-space-sm) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--flb-space-md);
}
.flb-kontakt > li { text-align: center; min-width: 0; }

/* Nejrozeznávatelnější prvek brandu. [FLB] .btn-corners: obal má padding 0 42px,
   span uvnitř nese linky nahoře a dole (padding 9 12) a svorky sedí na
   hranách OBALU. Na hoveru se padding obalu stáhne na 27 px a span se o těch
   15 px roztáhne (9 27) – svorky se přisunou k linkám a po stranách vyrostou
   pahýly, takže se všechno spojí do jednoho obdélníku. Jediná choreografie,
   kterou brand má. Tady je obal = <a>, span = vnitřní <b>. */
.flb-kontakt a {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-block: var(--flb-space-3xs);
  padding: 0 var(--flb-btn-inset);
  color: var(--flb-color-accent);
  text-decoration: none;
  transition: padding var(--flb-duration) var(--flb-ease);
}
.flb-kontakt a > b {
  display: block;
  padding: var(--flb-btn-pad-y) var(--flb-btn-pad-x);
  border-block: var(--flb-border-w-accent) solid currentColor;
  font-size: var(--flb-fs-h3);
  line-height: var(--flb-btn-lh);
  font-weight: var(--flb-fw-bold);
  white-space: nowrap;   /* svorky mají pevnou výšku 69 px – label se nesmí zlomit */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: padding var(--flb-duration) var(--flb-ease);
}
.flb-kontakt a > b::first-letter { text-transform: uppercase; }   /* [FLU] .btn-corners span:first-letter */
/* Svorky – [FLB] .btn-corners span:before/after: 27×69, left:0 / right:0 obalu */
.flb-kontakt a::before,
.flb-kontakt a::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--flb-btn-arm-w);
  height: var(--flb-btn-arm-h);
  background-image: var(--flb-asset-btn-corners);
  background-repeat: no-repeat;
  pointer-events: none;
}
.flb-kontakt a::before { left: 0; background-position: left top; }
.flb-kontakt a::after  { right: 0; background-position: right top; }
/* Pahýly – [FLB] .btn-corners:before/after: 6×0 → 6×15 na hoveru, top 27 */
.flb-kontakt a > b::before,
.flb-kontakt a > b::after {
  content: "";
  position: absolute;
  top: calc(var(--flb-btn-arm-h) / 2 - var(--flb-btn-stub) / 2);
  width: var(--flb-border-w-accent);
  height: 0;
  background: currentColor;
  transition: height var(--flb-duration) var(--flb-ease);
}
.flb-kontakt a > b::before { left: 0; }
.flb-kontakt a > b::after  { right: 0; }
.flb-kontakt a:hover { padding-inline: var(--flb-btn-inset-hover); }
.flb-kontakt a:hover > b { padding-inline: var(--flb-btn-inset-hover); }
.flb-kontakt a:hover > b::before,
.flb-kontakt a:hover > b::after { height: var(--flb-btn-stub); }

/* Negativní varianta tlačítka na tmavé/červené ploše [FLU] .theme-dark .btn-corners */
.flb-sekce--upozorneni .flb-kontakt a,
.flb-sekce--klicova .flb-kontakt a { color: var(--flb-color-text-inverse); }
.flb-sekce--upozorneni .flb-kontakt a::before,
.flb-sekce--upozorneni .flb-kontakt a::after,
.flb-sekce--klicova .flb-kontakt a::before,
.flb-sekce--klicova .flb-kontakt a::after {
  background-image: var(--flb-asset-btn-corners-inverse);
}
.flb-kontakt span {
  display: block;
  margin: var(--flb-space-2xs) auto 0;
  max-width: var(--flb-container-text);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
}

/* Sekce #kontakt = [FLU] section-contact .in.dot-r-g: červená plocha, lead centrovaný */
#kontakt .flb-wrap {
  padding: var(--flb-space-lg) var(--flb-space-sm) var(--flb-space-xl);
  background: var(--flb-color-accent) var(--flb-asset-dot-red) repeat;
  color: var(--flb-color-text-inverse);
  text-align: center;
}
#kontakt h2 { color: var(--flb-color-text-inverse); }
#kontakt > .flb-wrap > p:not(.flb-aktualizovano) {
  margin-inline: auto;
  font-size: var(--flb-fs-body-lg);
  line-height: var(--flb-lh-body-lg);
  font-weight: var(--flb-fw-bold);
}
#kontakt .flb-kontakt a { color: var(--flb-color-text-inverse); }
#kontakt .flb-kontakt a::before,
#kontakt .flb-kontakt a::after { background-image: var(--flb-asset-btn-corners-inverse); }
#kontakt :focus-visible { outline-color: var(--flb-color-text-inverse); }
/* Blok drží p {max-width:750px}; text-align:center z .flb-wrap vystředí jen text
   UVNITŘ něj, ne blok samotný — bez margin-inline zůstane u levého okraje wrapu
   a drobné písmo sedí vlevo od středu sekce. Pravidlo pro lead výš tuhle třídu
   vyjímá kvůli TYPOGRAFII (velikost, tučnost), ne kvůli rozvržení. */
#kontakt .flb-aktualizovano {
  margin-top: var(--flb-space-md);
  margin-inline: auto;
}

/* ---------- fotky ze stavby (sekce #aktuality) ---------- */

/* Stejný rytmus jako .flb-dlazdice: mobil jeden sloupec, od 62.5rem tři vedle
   sebe. Poměr stran je geometrie komponenty (výjimka O-10 v hlavičce), ne
   brandová hodnota. Čtverec drží řadu v klidu bez ohledu na to, jestli přijde
   fotka na výšku nebo na šířku; soubory v img/ jsou proto čtvercové už z ořezu
   a object-fit je jen pojistka pro fotku, která by čtverec nedodržela. */
.flb-stavba {
  display: grid;
  gap: var(--flb-space-2xs);
  margin: var(--flb-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.flb-stavba img {
  display: block;
  width: 100%;
  /* height:auto je POVINNÉ, ne kosmetika: atributy width/height v HTML se mapují
     na prezentační hint height:1000px, a dokud je výška určená, aspect-ratio se
     IGNORUJE (platí jen když je jeden rozměr auto). Bez tohohle řádku vyjde box
     370×1000 a object-fit z fotky vyřízne svislý pruh. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--flb-color-surface);   /* než se fotka načte, plocha nepodskočí */
}
.flb-stavba figcaption {
  padding-top: var(--flb-space-3xs);
  color: var(--flb-color-text-muted);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
}

/* ---------- FAQ (blok J) – recept FAQ ACCORDION ---------- */

/* [FLU] .section-faq: otázky jsou BÍLÉ bary na rastrované ploše, padding
   20/20/20/30, mezera 8px, nadpis 18/700, ikona 20×11 vpravo. */
.flb-faq {
  display: grid;
  gap: var(--flb-space-2xs);
  max-width: var(--flb-container);
  margin-inline: auto;
}
.flb-faq > details { background: var(--flb-color-bg); }
.flb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flb-space-sm);
  min-height: 2.75rem;
  padding: var(--flb-space-sm) var(--flb-space-sm) var(--flb-space-sm) var(--flb-space-md);
  font-size: var(--flb-fs-h3);
  line-height: var(--flb-lh-h3);
  font-weight: var(--flb-fw-bold);
  color: var(--flb-color-text);
  cursor: pointer;
  list-style: none;
}
.flb-faq summary:hover { text-decoration: underline; }
.flb-faq summary::-webkit-details-marker { display: none; }
.flb-faq summary::after {
  content: "";
  flex: none;
  width: var(--flb-faq-icon-w);
  height: var(--flb-faq-icon-h);
  background: var(--flb-asset-faq-open) center / contain no-repeat;
}
.flb-faq details[open] > summary::after { background-image: var(--flb-asset-faq-close); }
.flb-faq .flb-odpoved {
  padding: 0 var(--flb-space-sm) var(--flb-space-sm) var(--flb-space-md);
  color: var(--flb-color-text-muted);
  font-size: var(--flb-fs-sm);
  line-height: var(--flb-lh-sm);
}

/* ---------- patička ---------- */

/* [FLU] footer: #383D3E plocha, centrovaná, text #9C9C9E 13px, značka v negativu */
.flb-paticka {
  padding-block: var(--flb-space-xl);
  background: var(--flb-color-surface-dark);
  color: var(--flb-color-text-on-dark-muted);
  font-size: var(--flb-fs-xs);
  line-height: var(--flb-lh-xs);
  text-align: center;
}
.flb-paticka .flb-wrap {
  display: grid;
  gap: var(--flb-space-2xs);
  justify-items: center;
}
.flb-paticka .flb-wrap::before {
  content: "";
  display: block;
  width: calc(var(--flb-logo-h) * 3.05);
  height: var(--flb-logo-h);
  margin-bottom: var(--flb-space-sm);
  background: var(--flb-asset-logo-inverse) center / contain no-repeat;
  opacity: .5;                            /* [FLU] footer a.link-home {opacity:0.5} */
}
.flb-paticka p { margin-bottom: 0; }
.flb-paticka a { color: var(--flb-color-text-on-dark-muted); font-weight: var(--flb-fw-bold); text-decoration: none; }
.flb-paticka a:hover { color: var(--flb-color-text-inverse); }
.flb-paticka :focus-visible { outline-color: var(--flb-color-text-inverse); }

/* =========================================================================
   62.5rem = 1000 px – artboard 1c: desktopové rozvržení a desktopový pár
   typografie.
   ========================================================================= */

@media (min-width: 62.5rem) {
  body {
    font-size: var(--flb-fs-base);
    line-height: var(--flb-lh-base);
  }
  h1 {
    font-size: var(--flb-fs-display);
    line-height: var(--flb-lh-display);
  }
  h2 {
    font-size: var(--flb-fs-h2);
    line-height: var(--flb-lh-h2);
  }

  .flb-sekce { margin-block: var(--flb-space-xl); }
  .flb-sekce--odlisena .flb-wrap,
  .flb-sekce--klicova .flb-wrap,
  .flb-sekce--upozorneni .flb-wrap {
    padding: var(--flb-space-md) var(--flb-space-xl) var(--flb-space-lg);   /* [FLU] .row {padding:30px 60px 40px} */
  }
  #kontakt .flb-wrap { padding: var(--flb-space-xl) var(--flb-space-xl) var(--flb-space-2xl); }

  /* Hlavička [FLU] .desktop {padding:38px 0} + logo 64px */
  .flb-hlavicka .flb-wrap { padding-block: var(--flb-space-lg); }
  .flb-znacka {
    width: calc(var(--flb-logo-h-lg) * 3.05);
    height: var(--flb-logo-h-lg);
  }

  /* Hero [FLU] 1000–1199 px: fotka přes celou plochu pod překryvem, text
     zarovnaný vlevo v 5/12 s min-height 600. Svorky a červená plocha až od
     1200 px ([FLU] @media (max-width:1199px) .image-layer {clip-path:none}). */
  .flb-hero .flb-wrap { padding-block: var(--flb-space-xl); }
  .flb-hero-text {
    position: relative;
    z-index: 1;
    width: var(--flb-hero-text-col);
    min-height: var(--flb-hero-min-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  .flb-hero-text p { margin-inline: 0; }
  /* Perex nešíří než nadpis – od 1200 px za ním začínají svorky fotky, takže
     text musí zalomit dřív než sloupec 5/12. */
  .flb-hero-text > * { max-width: var(--flb-hero-text-max); }
  .flb-hero .flb-perex {
    font-size: var(--flb-fs-lead);
    line-height: var(--flb-lh-lead);
  }

  .flb-aktualizovano,
  .flb-dlazdice span,
  .flb-mezera,
  .flb-mezera b,
  .flb-osa-stav,
  .flb-kontakt span,
  .flb-tabulka,
  .flb-paticka {
    font-size: var(--flb-fs-sm);
    line-height: var(--flb-lh-sm);
  }
  .flb-osa-kdy {
    font-size: var(--flb-fs-base);
    line-height: var(--flb-lh-base);
  }
  .flb-dlazdice b {
    font-size: var(--flb-fs-tile);
    line-height: var(--flb-lh-tile);
  }

  .flb-dlazdice { grid-template-columns: repeat(4, 1fr); }
  .flb-stavba { grid-template-columns: repeat(3, 1fr); }
  .flb-vize { grid-template-columns: repeat(2, 1fr); }

  .flb-rozcestnik {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--flb-space-md);
  }

  .flb-seznam > div {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 2.2fr;   /* poměr sloupců = geometrie (O-10) */
    column-gap: var(--flb-space-md);
    align-items: baseline;
    padding-block: var(--flb-space-xs);
  }
  .flb-seznam dt { margin-bottom: 0; }
  .flb-sekce--upozorneni .flb-seznam > div { padding: var(--flb-space-xs) var(--flb-space-md); }

  .flb-osa > li {
    grid-template-columns: var(--flb-corner-thickness) 1fr;
    column-gap: var(--flb-space-md);
    padding-block: var(--flb-space-xs) var(--flb-space-lg);
  }
  .flb-osa > li::before { left: calc((var(--flb-corner-thickness) - var(--flb-rule-w-strong)) / 2); }
  .flb-osa > li::after {
    width: var(--flb-corner-thickness);
    height: var(--flb-corner-thickness);
    margin-top: calc((var(--flb-lh-base) - var(--flb-corner-thickness)) / 2);
  }
  .flb-osa > li.flb-osa--interval::after { height: auto; margin-top: 0; margin-bottom: calc(-1 * var(--flb-space-lg)); }
  .flb-osa-stav { line-height: var(--flb-lh-base); }

  /* Tři tlačítka vedle sebe: sloupce sdílí šířku rovně (1fr), ne podle obsahu –
     jinak nejdelší label vytlačí sousedy z karty. */
  .flb-kontakt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--flb-space-md); }
  /* #kontakt nese dva kanály (mail, Discord). Trojsloupcová mřížka by je
     nechala viset u levého okraje – proto dva sloupce v šířce textu a mřížka
     vystředěná ve wrapu. Přibude-li třetí kanál, vrátí se sem repeat(3, …). */
  #kontakt .flb-kontakt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--flb-container-text);
    margin-inline: auto;
  }
  /* Jediné tlačítko bloku (inkubátor) drží celou šířku sloupce; zarovnání
     zůstává na středu jako u ostatních kontaktů (Jan 18. 9. 2026) – dřív tu
     byl override na text-align: left, kvůli kterému viselo u levého okraje. */
  #kurzy .flb-kontakt { grid-template-columns: 1fr; }

  .flb-inkubator { padding: var(--flb-space-md); }
}

/* =========================================================================
   80rem = 1280 px – artboard 1a: nejvyšší vrstva rytmu.
   ========================================================================= */

/* 75rem = 1200 px – [FLU] @media(min-width:1200px): teprve tady se objeví
   červená .bg-layer a fotka vyříznutá svorkami; plocha pod textem je zpátky
   tmavý rastr, fotka jen ve vrstvě vpravo. */
@media (min-width: 75rem) {
  .flb-hero { background: var(--flb-color-surface-dark) var(--flb-asset-dot-dark) repeat; }
  .flb-hero .flb-wrap { max-width: none; position: relative; z-index: 1; }
  /* Text končí před první svorkou fotky: vrstva má 55 % šířky a zářezy
     začínají 20 px za její levou hranou. Sloupec = 45 % − levý okraj − mezera,
     pevný strop --flb-hero-text-max už není potřeba (a na 1200–1400 px lžal). */
  .flb-hero-text {
    margin-left: max(var(--flb-container-pad), calc((100% - var(--flb-container-wide)) / 2));
    width: calc(100% - var(--flb-hero-image-col) - max(var(--flb-container-pad), (100% - var(--flb-container-wide)) / 2) - var(--flb-space-md));
    padding-right: 0;
  }
  .flb-hero-text > * { max-width: none; }
  /* .bg-layer – červená plocha [FLU] {right:0;width:calc(55% - 320px)} */
  .flb-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(var(--flb-hero-image-col) - var(--flb-hero-notch));
    background: var(--flb-color-accent);
  }
  /* .image-layer – [FLU] fotka 55 % vyříznutá clip-path se čtyřmi svorkami
     na ose 320 px od levé hrany; geometrie 1:1 z předlohy (O-10). */
  .flb-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--flb-hero-image-col);
    background: var(--flb-color-surface-dark-deep) var(--flb-asset-hero-photo) center / cover no-repeat;
    clip-path: polygon(
      320px 0%, 100% 0%, 100% 100%, 320px 100%, 320px 90%,
      320px calc(50% - 60px), 20px calc(50% - 60px), 20px calc(50% - 300px), 260px calc(50% - 300px), 260px calc(50% - 230px), 90px calc(50% - 230px), 90px calc(50% - 60px), 320px calc(50% - 60px),
      320px calc(50% - 60px), 620px calc(50% - 60px), 620px calc(50% - 300px), 380px calc(50% - 300px), 380px calc(50% - 230px), 550px calc(50% - 230px), 550px calc(50% - 60px), 320px calc(50% - 60px),
      320px calc(50% + 60px), 20px calc(50% + 60px), 20px calc(50% + 300px), 260px calc(50% + 300px), 260px calc(50% + 230px), 90px calc(50% + 230px), 90px calc(50% + 60px), 320px calc(50% + 60px),
      320px calc(50% + 60px), 380px calc(50% + 60px), 380px calc(50% + 300px), 620px calc(50% + 300px), 620px calc(50% + 60px), 550px calc(50% + 60px), 550px calc(50% + 230px), 380px calc(50% + 230px), 380px calc(50% + 60px), 320px calc(50% + 60px));
  }
}

@media (min-width: 80rem) {
  .flb-sekce { margin-block: var(--flb-space-2xl); }
  .flb-paticka { padding-block: var(--flb-space-xl); }
}

/* ---------- ohled na uživatele, kteří nechtějí pohyb ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Režim vynucených barev: kdyby logo nedojelo, jméno značky musí být vidět. */
@media (forced-colors: active) {
  .flb-znacka {
    width: auto;
    height: auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: var(--flb-space-3xs) var(--flb-space-xs);
    border: var(--flb-rule-w-strong) solid var(--flb-color-accent);
    background: none;
    color: var(--flb-color-accent-dark);
    font-size: var(--flb-fs-label);
    font-weight: var(--flb-fw-bold);
    letter-spacing: var(--flb-ls-label);
    text-indent: 0;
    text-transform: uppercase;
  }
}

/* ---------- tisk ---------- */

@media print {
  .flb-skip, .flb-rozcestnik, .flb-hlavicka-kotva { display: none; }
  .flb-hero,
  .flb-sekce--odlisena .flb-wrap,
  .flb-sekce--klicova .flb-wrap,
  .flb-sekce--upozorneni .flb-wrap,
  #kontakt .flb-wrap,
  .flb-paticka {
    background: var(--flb-color-bg);
    background-image: none;
    color: var(--flb-color-text);
  }
  .flb-sekce--foto .flb-wrap { background: var(--flb-color-bg); }
  .flb-hero::before, .flb-hero::after { display: none; }
  .flb-hero h1, .flb-hero .flb-aktualizovano,
  .flb-sekce--klicova h2, .flb-sekce--klicova h3, .flb-sekce--klicova a,
  .flb-sekce--upozorneni h2, .flb-sekce--upozorneni h3, .flb-sekce--upozorneni a,
  #kontakt h2, #kontakt .flb-kontakt a,
  .flb-paticka a { color: var(--flb-color-text); }
  .flb-sekce--klicova .flb-mezera,
  .flb-sekce--upozorneni .flb-mezera { border-top-color: var(--flb-color-border); }
  .flb-sekce--upozorneni .flb-seznam > div { border-bottom: var(--flb-border-w) solid var(--flb-color-border-rule); }
  .flb-faq > details { border: var(--flb-border-w) solid var(--flb-color-border-strong); }
  .flb-paticka { border-top: var(--flb-border-w) solid var(--flb-color-border); }
  .flb-paticka .flb-wrap::before { background-image: var(--flb-asset-logo); opacity: 1; }
}