/*
Theme Name: Tabletování
Description: Blokové téma pro tabletovani.cz (Mega Pro Nutrition, s.r.o.) - postavené podle schváleného prototypu v repozitáři (prototype/).
Author: Luboš Hilgert
Version: 0.2.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: tabletovani
Domain Path: /languages
*/

/* =========================================================================
   Mapování --tbl-* tokenů na WP presety z theme.json
   ---------------------------------------------------------------------
   Jediný zdroj pravdy pro design tokeny je theme.json (settings.color.palette,
   settings.typography.fontSizes/fontFamilies, settings.spacing.spacingSizes) -
   generuje proměnné --wp--preset--*. Prototypový CSS pod touto sekcí ale
   stojí na --tbl-* (beze změny), takže se sem jen namapuje na wp presety,
   aby editor i front čerpaly ze stejného místa. Tokeny bez protějšku
   v theme.json (stíny, přechody, --tbl-header-h, --tbl-lh-*, --tbl-radius-*,
   --tbl-maxw, --tbl-pad-x) zůstávají jako literální hodnoty z tokens.css.
   ========================================================================= */
:root{
  /* --- Barvy ------------------------------------------------------------ */
  --tbl-green:var(--wp--preset--color--green);
  --tbl-green-dark:var(--wp--preset--color--green-dark);
  --tbl-green-soft:var(--wp--preset--color--green-soft);
  --tbl-green-ink:var(--wp--preset--color--green-ink);
  --tbl-green-badge:var(--wp--preset--color--green-badge);

  --tbl-bg:var(--wp--preset--color--bg);
  --tbl-bg-alt:var(--wp--preset--color--bg-alt);
  /* --tbl-card má v návrhu stejnou hodnotu jako --tbl-bg-alt (#fff) -
     samostatný slug v paletě by byl zbytečný duplikát. */
  --tbl-card:var(--wp--preset--color--bg-alt);

  --tbl-ink:var(--wp--preset--color--ink);
  --tbl-ink-soft:var(--wp--preset--color--ink-soft);
  --tbl-line:var(--wp--preset--color--line);

  --tbl-on-green:var(--wp--preset--color--on-green);

  /* --- Typografie --------------------------------------------------------
     Font a velikostní škála (7 kroků) čerpají z theme.json presetů.
     Řezy (400/700) a řádkování nemají v theme.json obdobu -> literál. */
  --tbl-font:var(--wp--preset--font-family--barlow);

  --tbl-fs-hero:var(--wp--preset--font-size--hero);
  /* Pozor: WP generuje název CSS proměnné z "kebab-case" verze slugu (stejná
     logika jako lodash kebabCase) - slug "h2"/"h3"/"h4" tak dostane pomlčku
     před číslicí (h-2/h-3/h-4), i když v theme.json zůstává slug "h2" beze
     změny (kvůli tomu je i editoru/JSON zachovaný přesně dle plánu). Ověřeno
     přímo přes wp_get_global_stylesheet() na tomto WP. */
  --tbl-fs-h2:var(--wp--preset--font-size--h-2);
  --tbl-fs-h3:var(--wp--preset--font-size--h-3);
  --tbl-fs-h4:var(--wp--preset--font-size--h-4);
  --tbl-fs-lead:var(--wp--preset--font-size--lead);
  --tbl-fs-body:var(--wp--preset--font-size--body);
  --tbl-fs-small:var(--wp--preset--font-size--small);

  --tbl-fw-normal:400;
  --tbl-fw-bold:700;

  --tbl-lh-tight:1.12;
  --tbl-lh-normal:1.6;

  /* --- Spacing ------------------------------------------------------------
     section/section-lg/gap čerpají z theme.json presetů; pad-x jako
     "kořenový padding" (useRootPaddingAwareAlignments) není spacingSize
     preset, zůstává literál stejně jako v tokens.css. */
  --tbl-space-section:var(--wp--preset--spacing--section);
  --tbl-space-section-lg:var(--wp--preset--spacing--section-lg);
  --tbl-gap:var(--wp--preset--spacing--gap);
  --tbl-pad-x:clamp(20px,5vw,48px);

  /* --- Tvar --------------------------------------------------------------
     Bez protějšku v theme.json (radius/maxw/header-h nejsou WP presety) -
     literální hodnoty přímo z tokens.css. */
  --tbl-radius:14px;
  --tbl-radius-sm:10px;
  --tbl-radius-pill:999px;
  --tbl-maxw:1200px;
  --tbl-header-h:76px;

  /* --- Stíny --------------------------------------------------------------- */
  --tbl-shadow-card:0 10px 30px rgba(20,30,15,0.08);
  --tbl-shadow-soft:0 4px 14px rgba(20,30,15,0.06);
  --tbl-shadow-btn:0 6px 16px rgba(60,143,41,0.28);

  /* --- Přechody ------------------------------------------------------------- */
  --tbl-transition:0.22s ease;
}

/* =========================================================================
   tabletovani.cz - prototyp (layout + komponenty)
   Konvence: všechny třídy s prefixem .tbl-, pojmenované podle budoucích
   Gutenberg patternů, aby bylo mapování prototyp -> pattern triviální.
   Načítá se po tokens.css (custom properties).
   ========================================================================= */

/* ---------- Reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
/* Prohlížeč dává b/strong "bolder", což se od našich 700 posune až na 900 -
   tedy řez, který návrh nemá a Barlow ho ani nenačítá. Ukotvit na 700. */
b,strong{font-weight:var(--tbl-fw-bold)}
:focus-visible{outline:3px solid var(--tbl-green);outline-offset:3px;border-radius:4px}

/* ---------- Base ----------------------------------------------------- */
body{
  font-family:var(--tbl-font);
  font-size:var(--tbl-fs-body);
  line-height:var(--tbl-lh-normal);
  color:var(--tbl-ink);
  background:var(--tbl-bg-alt);
  -webkit-font-smoothing:antialiased;
}
/* respektuj uživatele, kteří nechtějí pohyb */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

.tbl-container{
  width:100%;
  max-width:var(--tbl-maxw);
  margin-inline:auto;
  padding-inline:var(--tbl-pad-x);
}
.tbl-section{padding-block:var(--tbl-space-section)}
/* Dvě sousední sekce se stejným pozadím by jinak sečetly spodní + horní
   padding (= 2x rytmus). V návrhu je mezi bloky jen jedna mezera, proto
   horní padding navazující sekce ruším. Mezi sekcemi s jiným pozadím
   (hero, šedý CTA, zelený kontakt) se naopak sčítat mají - předěl. */
.tbl-section--white + .tbl-section--white,
.tbl-section--grey + .tbl-section--grey{padding-block-start:0}
/* pod hero je v návrhu výrazně víc vzduchu než mezi běžnými bloky */
.tbl-hero + .tbl-section{padding-block-start:var(--tbl-space-section-lg)}
/* kotvy nezajedou pod fixní header (plynulý scroll na #id) */
[id]{scroll-margin-top:calc(var(--tbl-header-h) + 10px)}
.tbl-section--grey{background:var(--tbl-bg)}
.tbl-section--white{background:var(--tbl-bg-alt)}

/* nadpisy */
.tbl-h2{
  font-size:var(--tbl-fs-h2);
  line-height:var(--tbl-lh-tight);
  font-weight:var(--tbl-fw-bold);
  letter-spacing:-0.01em;
}
.tbl-h3{font-size:var(--tbl-fs-h3);line-height:1.2;font-weight:var(--tbl-fw-bold)}
.tbl-lead{font-size:var(--tbl-fs-body);color:var(--tbl-ink-soft)}
.tbl-accent{color:var(--tbl-green)}      /* zelený akcent (slovo / tečka) */

/* ---------- Ikony ---------------------------------------------------- */
/* Ikony vyextrahované z grafického návrhu (web_PNG.png) jako alfa-masky.
   Obarvují se přes currentColor -> stejná maska může být zelená i bílá. */
.tbl-ico{
  display:inline-block;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
          mask-repeat:no-repeat;        mask-position:center;        mask-size:contain;
}
/* Vlastní nahraná ikona v původních barvách (bloky icon i stat, přepínač
   "Obarvit do zelené" vypnutý) je <img class="tbl-ico"> - zdědí velikost
   z per-wrapper .tbl-ico pravidel, ale bez masky a obarvení. */
img.tbl-ico{background:none;-webkit-mask:none;mask:none;object-fit:contain;display:block}

/* ---------- Tlačítka -------------------------------------------------
   Jádrový blok core/button vykresluje uživatelskou className na obalový
   <div class="wp-block-button">, ne na vnitřní <a>. Vzhled tlačítka proto
   nese vždy skutečný interaktivní prvek: buď holé .tbl-btn (v šabloně /
   template partu), nebo vnitřní .wp-block-button__link u bloku core/button.
   Obalový .wp-block-button je JEN layout - proto ho z vizuálu vylučujeme
   (:not(.wp-block-button)), jinak by rámeček i padding padly dvakrát a
   vznikl by dvojitý okraj. Jedna sada hodnot, dva platné cíle. */
.tbl-btn:not(.wp-block-button),
.wp-block-button.tbl-btn > .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.75em 1.5em;
  border-radius:var(--tbl-radius-pill);
  border:2px solid transparent;
  font-weight:var(--tbl-fw-normal);font-size:var(--tbl-fs-lead);line-height:1;
  cursor:pointer;
  transition:background var(--tbl-transition),color var(--tbl-transition),
             border-color var(--tbl-transition),transform var(--tbl-transition),
             box-shadow var(--tbl-transition);
}
.tbl-btn:not(.wp-block-button) .tbl-btn__arrow,
.wp-block-button.tbl-btn > .wp-block-button__link .tbl-btn__arrow{transition:transform var(--tbl-transition)}
.tbl-btn:not(.wp-block-button):hover .tbl-btn__arrow,
.wp-block-button.tbl-btn > .wp-block-button__link:hover .tbl-btn__arrow{transform:translateX(3px)}

.tbl-btn--primary:not(.wp-block-button),
.wp-block-button.tbl-btn--primary > .wp-block-button__link{background:var(--tbl-green);color:var(--tbl-on-green);box-shadow:var(--tbl-shadow-btn)}
.tbl-btn--primary:not(.wp-block-button):hover,
.wp-block-button.tbl-btn--primary > .wp-block-button__link:hover{background:var(--tbl-green-dark);transform:translateY(-2px)}

.tbl-btn--outline:not(.wp-block-button),
.wp-block-button.tbl-btn--outline > .wp-block-button__link{background:transparent;border-color:currentColor;color:var(--tbl-green)}
.tbl-btn--outline:not(.wp-block-button):hover,
.wp-block-button.tbl-btn--outline > .wp-block-button__link:hover{background:var(--tbl-green);border-color:var(--tbl-green);color:var(--tbl-on-green);transform:translateY(-2px)}

/* varianta na tmavém/obrázkovém pozadí */
.tbl-btn--on-dark:not(.wp-block-button),
.wp-block-button.tbl-btn--on-dark > .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.8)}
.tbl-btn--on-dark:not(.wp-block-button):hover,
.wp-block-button.tbl-btn--on-dark > .wp-block-button__link:hover{background:#fff;color:var(--tbl-ink);border-color:#fff}

.tbl-btn--dark:not(.wp-block-button),
.wp-block-button.tbl-btn--dark > .wp-block-button__link{background:var(--tbl-ink);color:#fff}
.tbl-btn--dark:not(.wp-block-button):hover,
.wp-block-button.tbl-btn--dark > .wp-block-button__link:hover{background:#000;transform:translateY(-2px)}

/* ---------- Header / nav (sekce 0) ----------------------------------- */
.tbl-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--tbl-header-h);
  display:flex;align-items:center;
  transition:background var(--tbl-transition),box-shadow var(--tbl-transition),color var(--tbl-transition);
  color:#fff;                       /* výchozí stav = nad hero (transparentní) */
}
.tbl-header .tbl-container{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.tbl-header.is-solid{                /* po scrollu = bílý solidní */
  background:#fff;color:var(--tbl-ink);box-shadow:var(--tbl-shadow-soft);
}
.tbl-logo{display:flex;align-items:center;gap:.5ch;font-weight:var(--tbl-fw-bold);font-size:var(--tbl-fs-lead);letter-spacing:.02em}
/* Logo = "TABLETOVANI.CZ": název dědí barvu hlavičky (bílý nad hero, tmavý po
   scrollu), doménová koncovka je zeleným akcentem. Koncovka je <span> UVNITŘ
   <b>, ne vedle něj - flex gap na .tbl-logo by jinak mezi text a ".CZ" vložil
   mezeru. */
.tbl-logo b{color:inherit}
.tbl-logo b span{color:var(--tbl-green)}

.tbl-nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.tbl-nav__list{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.tbl-nav__link{
  font-size:var(--tbl-fs-body);font-weight:var(--tbl-fw-bold);letter-spacing:.04em;text-transform:uppercase;
  padding:.4em 0;position:relative;color:inherit;transition:color var(--tbl-transition);
}
.tbl-nav__link:hover,.tbl-nav__link.is-active{color:var(--tbl-green)}
.tbl-nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--tbl-green);transition:width var(--tbl-transition);
}
.tbl-nav__link:hover::after,.tbl-nav__link.is-active::after{width:100%}

/* přepínač jazyka (Polylang) - dropdown: trigger s aktuálním jazykem + panel */
.tbl-lang{position:relative;display:inline-flex;font-size:var(--tbl-fs-small);font-weight:var(--tbl-fw-bold)}
.tbl-lang__toggle{
  display:inline-flex;align-items:center;gap:.5ch;
  border:0;background:transparent;cursor:pointer;color:inherit;font:inherit;
  letter-spacing:.04em;padding:.35em .2em;transition:color var(--tbl-transition);
}
.tbl-lang__toggle:hover,.tbl-lang__toggle:focus-visible{color:var(--tbl-green)}
.tbl-lang__toggle > svg:not(.tbl-lang__caret){width:auto;height:14px;border-radius:2px;display:block}
.tbl-lang__caret{width:10px;height:6px;flex:none;transition:transform var(--tbl-transition)}
.tbl-lang__toggle[aria-expanded="true"] .tbl-lang__caret{transform:rotate(180deg)}

.tbl-lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:20;
  margin:0;padding:6px;list-style:none;min-width:158px;
  background:#fff;color:var(--tbl-ink);
  border-radius:var(--tbl-radius-sm);box-shadow:var(--tbl-shadow-card);
}
.tbl-lang__menu[hidden]{display:none}
.tbl-lang__item{
  display:flex;align-items:center;gap:.6ch;padding:9px 12px;
  border-radius:8px;color:inherit;opacity:.75;transition:var(--tbl-transition);
}
.tbl-lang__item:hover,.tbl-lang__item:focus-visible{opacity:1;color:var(--tbl-green);background:var(--tbl-green-soft)}
.tbl-lang__item.is-active{opacity:1;color:var(--tbl-green)}
.tbl-lang__item img,.tbl-lang__item svg{width:auto;height:16px;border-radius:2px;display:block;flex:none}

/* hamburger */
.tbl-burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:10px;color:inherit;
}
.tbl-burger span{display:block;height:2px;background:currentColor;border-radius:2px;transition:var(--tbl-transition)}
.tbl-burger span+span{margin-top:5px}
.tbl-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tbl-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tbl-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero (sekce 1) ------------------------------------------- */
/* Výška hero = celá obrazovka bez pruhu hlavičky. Hlavička je fixed a nad hero
   průhledná (netlačí obsah), takže odečtením --tbl-header-h zůstane pod herem
   vidět začátek další sekce - to je záměr. Základ je vh (fallback pro starší
   prohlížeče), svh ho přebije tam, kde je podporované: na mobilu se počítá
   s VYSUNUTOU lištou prohlížeče, takže se hero po skrolu nepřekreslí. */
.tbl-hero{
  position:relative;min-height:calc(100vh - var(--tbl-header-h));
  display:flex;align-items:center;
  color:#fff;overflow:hidden;
  background:#0c0e0f;
}
@supports (height:100svh){
  .tbl-hero,.tbl-hero.wp-block-cover{min-height:calc(100svh - var(--tbl-header-h))}
}
/* Hero je core/cover: přebijeme jen jeho výchozí padding a min-height (430px).
   Obrázek na pozadí i směrové ztmavení (kvůli čitelnosti textu) renderuje cover
   sám - gradient je "overlay" bloku (customGradient v post_content). Cover řadí
   v DOM obrázek -> overlay span -> obsah, takže se ztmavení maluje POD textem a
   nikdy přes něj (proto tu není žádný vlastní ::after gradient). */
.tbl-hero.wp-block-cover{padding:0;min-height:calc(100vh - var(--tbl-header-h))}
.tbl-hero__inner{position:relative;z-index:2;max-width:640px;padding-block:var(--tbl-header-h)}
.tbl-hero__title{
  font-size:var(--tbl-fs-hero);line-height:1.04;font-weight:var(--tbl-fw-bold);letter-spacing:-0.02em;
  margin-bottom:.5em;
}
.tbl-hero__lead{font-size:var(--tbl-fs-h3);max-width:34ch;margin-bottom:2em;color:rgba(255,255,255,.9)}
.tbl-hero__actions{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- Intro + badge řádek (sekce 2) ---------------------------- */
.tbl-intro__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.tbl-intro__text .tbl-h2{margin-bottom:.6em}

.tbl-badges{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.tbl-badge{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6em;
  padding:8px clamp(8px,1.5vw,18px);position:relative;
}
.tbl-badge+.tbl-badge::before{ /* svislý oddělovač mezi badge */
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--tbl-line);
}
.tbl-badge__icon{color:var(--tbl-green)}
.tbl-badge__icon .tbl-ico{width:44px;height:44px}
.tbl-badge__label{font-size:var(--tbl-fs-small);line-height:1.3}
.tbl-badge__label strong{display:block;font-weight:var(--tbl-fw-bold);color:var(--tbl-ink)}
.tbl-badge__label span{color:var(--tbl-ink-soft)}

/* ---------- Procesní karty (sekce 3) --------------------------------- */
.tbl-process{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tbl-gap)}
.tbl-process-card{
  background:var(--tbl-card);border-radius:var(--tbl-radius);overflow:hidden;
  box-shadow:var(--tbl-shadow-card);display:flex;flex-direction:column;
  transition:transform var(--tbl-transition),box-shadow var(--tbl-transition);
}
.tbl-process-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,30,15,.14)}
.tbl-process-card__media{aspect-ratio:16/10;overflow:hidden}
.tbl-process-card__media img{width:100%;height:100%;object-fit:cover}
.tbl-process-card__body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.tbl-process-card__head{display:flex;align-items:center;gap:12px}
.tbl-process-card__num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--tbl-green);color:#fff;font-weight:var(--tbl-fw-bold);
  display:grid;place-items:center;font-size:var(--tbl-fs-body);
}
.tbl-process-card__head .tbl-h3{flex:1}
.tbl-process-card__icon{
  color:var(--tbl-green);flex:0 0 auto;
  width:46px;height:46px;border-radius:10px;background:var(--tbl-green-soft);
  display:grid;place-items:center;
}
.tbl-process-card__icon .tbl-ico{width:28px;height:28px}
.tbl-process-card__desc{color:var(--tbl-ink-soft);font-size:var(--tbl-fs-small)}
/* Fajfka = znak "ü" z Wingdings (U+F0FC), ne rovnoměrný tah Feather stylu.
   Vytažená jako vektor z fontu vloženého ve web design2.pdf, takže tvar je
   1:1 z návrhu, ne obkreslený. Poměr stran 1387:1317 sedí na naměřených 13:12
   v PNG. Velikost v návrhu = 0,71x výška verzálky, proto em místo px.
   Ve WP tématu je lepší dát ji do sprite/ikonového setu než do každého ::before. */
:root{
  --tbl-fajfka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1387 1317'%3E%3Cpath fill='%233c8f29' d='M1352 0 1387 50Q1173 211 911 546Q649 881 511 1172L437 1222Q345 1286 312 1317Q299 1270 255 1163L227 1098Q167 958 115.5 891Q64 824 0 802Q108 688 198 688Q275 688 369 897L400 967Q569 682 834 413Q1099 144 1352 0Z'/%3E%3C/svg%3E");
}
.tbl-checklist{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.tbl-checklist li{display:flex;gap:8px;font-size:var(--tbl-fs-small);color:var(--tbl-ink)}
.tbl-checklist li::before{
  content:"";flex:0 0 auto;width:.62em;height:.62em;margin-top:.34em;
  background:var(--tbl-fajfka) no-repeat center/contain;
}

/* ---------- Stat pruh + CTA (sekce 4+5, sjednocené jako v návrhu) ----- */
/* Dva zaoblené boxy: světle zelený (statistiky) nahoře, zelený (CTA) pod
   ním o kousek zasunutý -> spojený tvar, zelená vykukuje v místě zaoblení. */
.tbl-stats-cta{position:relative}

/* budoucí VLASTNÍ DYNAMICKÝ BLOK: číslo + popisek */
.tbl-stats{
  background:var(--tbl-green-soft);border-radius:var(--tbl-radius);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(24px,3vw,36px) clamp(16px,2vw,28px) clamp(34px,3.5vw,44px);
  position:relative;z-index:2;
}
.tbl-stat{display:flex;align-items:center;gap:14px;padding:8px clamp(10px,1.6vw,22px);position:relative}
.tbl-stat+.tbl-stat::before{content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:rgba(60,143,41,.22)}
.tbl-stat__icon{color:var(--tbl-green-ink);flex:0 0 auto}
.tbl-stat__icon .tbl-ico{width:44px;height:44px}
.tbl-stat__num{font-size:var(--tbl-fs-body);font-weight:var(--tbl-fw-bold);color:var(--tbl-green-ink);line-height:1.05}
.tbl-stat__label{font-size:var(--tbl-fs-small);color:var(--tbl-green-ink);opacity:.85;line-height:1.25}

/* Pozadí není plochá zelená - návrh má zelenou s jemnou vlnitou texturou
   (soustředné linky, zesilují doprava). Vytažené z PDF, kde Photoshop uložil
   vrstvy zvlášť, takže je to podklad bez textu; zapečená ikona přemazána -
   prototyp si ji kreslí sám přes masku. Zelená pod tím je fallback. */
.tbl-cta-band{
  position:relative;overflow:hidden;z-index:1;
  margin-top:calc(-1 * var(--tbl-radius));            /* zasunutí pod stat box */
  background:var(--tbl-green) url("assets/img/cta-band-bg.jpg") center/cover no-repeat;
  color:var(--tbl-on-green);
  border-radius:var(--tbl-radius);
  display:flex;align-items:center;gap:clamp(18px,3vw,36px);
  padding:calc(clamp(26px,3.5vw,42px) + var(--tbl-radius)) clamp(24px,4vw,56px) clamp(26px,3.5vw,42px);
}
.tbl-cta-band__icon{flex:0 0 auto;color:#fff;z-index:1}
.tbl-cta-band__icon .tbl-ico{width:56px;height:56px}
.tbl-cta-band__text{flex:1;z-index:1}
.tbl-cta-band__text .tbl-h3{font-size:var(--tbl-fs-h3);margin-bottom:.25em}
.tbl-cta-band__text p{opacity:.92;font-size:var(--tbl-fs-body)}
.tbl-cta-band .tbl-btn{flex:0 0 auto;z-index:1}

/* ---------- Technologie icon-list (sekce 6) -------------------------- */
.tbl-tech{display:flex;flex-direction:column;gap:18px}
.tbl-tech-row{
  display:grid;grid-template-columns:300px auto 1fr;align-items:center;gap:clamp(20px,3vw,40px);
  grid-template-areas:"media icon body";
  background:var(--tbl-card);border-radius:var(--tbl-radius);
  box-shadow:var(--tbl-shadow-soft);padding:18px;overflow:hidden;
  transition:box-shadow var(--tbl-transition),transform var(--tbl-transition);
}
.tbl-tech-row:hover{box-shadow:var(--tbl-shadow-card);transform:translateY(-3px)}
.tbl-tech-row__media{grid-area:media;border-radius:var(--tbl-radius-sm);overflow:hidden;aspect-ratio:16/9}
.tbl-tech-row__media img{width:100%;height:100%;object-fit:cover}
.tbl-tech-row__icon{
  grid-area:icon;
  width:70px;height:70px;border-radius:12px;background:var(--tbl-green-soft);
  display:grid;place-items:center;color:var(--tbl-green);flex:0 0 auto;
}
.tbl-tech-row__icon .tbl-ico{width:40px;height:40px}
.tbl-tech-row__body{grid-area:body}
.tbl-tech-row__body .tbl-h3{margin-bottom:.3em}
.tbl-tech-row__body p{color:var(--tbl-ink-soft);font-size:var(--tbl-fs-lead)}

/* ---------- Tvary tablet (sekce 7) ----------------------------------- */
/* budoucí VLASTNÍ DYNAMICKÝ BLOK: obrázek + název + rozměry */
.tbl-shapes__head{display:flex;align-items:center;gap:20px;margin-bottom:clamp(28px,4vw,48px)}
.tbl-shapes__head::before,.tbl-shapes__head::after{content:"";height:1px;background:var(--tbl-line);flex:1}
.tbl-shapes__title{
  font-size:var(--tbl-fs-h2);font-weight:var(--tbl-fw-bold);letter-spacing:.06em;
  color:var(--tbl-green);text-transform:uppercase;text-align:center;
}
.tbl-shapes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tbl-gap)}
.tbl-shape{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.tbl-shape__img{height:150px;display:grid;place-items:center}
/* rendery jsou vyříznuté z návrhu na bílém pozadí -> multiply splyne se sekcí a schová okraj výřezu */
.tbl-shape__img img{max-height:150px;width:auto;mix-blend-mode:multiply}
.tbl-shape__name{font-size:var(--tbl-fs-h3);font-weight:var(--tbl-fw-bold);letter-spacing:.06em;text-transform:uppercase}
.tbl-shape__dims{color:var(--tbl-ink-soft);font-size:var(--tbl-fs-lead)}

/* ---------- CTA na obrázku (sekce 8) --------------------------------- */
.tbl-cta-split{
  position:relative;overflow:hidden;border-radius:0;
  background:linear-gradient(180deg,#eef2ee,#e4ebe3);
  min-height:340px;display:flex;align-items:center;
}
.tbl-cta-split__bg{
  position:absolute;inset:0 0 0 auto;width:52%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
          mask-image:linear-gradient(90deg,transparent,#000 22%);
}
.tbl-cta-split__inner{position:relative;z-index:1;display:flex;align-items:center;gap:26px;max-width:640px;padding-block:40px}
.tbl-cta-split__icon{flex:0 0 auto;color:var(--tbl-green)}
.tbl-cta-split__icon .tbl-ico{width:64px;height:64px}
.tbl-cta-split__divider{width:2px;align-self:stretch;background:var(--tbl-green);opacity:.5}
.tbl-cta-split__text .tbl-h2{margin-bottom:.4em}
.tbl-cta-split__text p{color:var(--tbl-ink-soft);margin-bottom:1.4em}

/* ---------- Know-how 3 sloupce (sekce 9) ----------------------------- */
.tbl-knowhow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.tbl-knowhow-card__title{color:var(--tbl-green);font-size:var(--tbl-fs-h4);font-weight:var(--tbl-fw-bold);line-height:1.2;margin-bottom:.5em}
.tbl-knowhow-card__desc{color:var(--tbl-ink-soft);font-size:var(--tbl-fs-small);margin-bottom:22px}
.tbl-knowhow-card__media{position:relative;border-radius:var(--tbl-radius);overflow:visible;margin-bottom:28px}
.tbl-knowhow-card__media img{border-radius:var(--tbl-radius);aspect-ratio:16/10;object-fit:cover;width:100%}
/* Odznak není vycentrovaný pod fotkou - v návrhu sedí u jejího levého okraje
   a je vycentrovaný přesně na spodní hranu fotky (střed kruhu = hrana).
   Rozměry odečtené z návrhu: kruh 130px na fotce široké 502px -> tady 88/339. */
.tbl-knowhow-card__badge{
  --tbl-badge:88px;
  position:absolute;left:14px;bottom:calc(var(--tbl-badge) / -2);
  width:var(--tbl-badge);height:var(--tbl-badge);
  border-radius:50%;background:var(--tbl-green-badge);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(67,117,74,.35);border:4px solid #fff;
}
.tbl-knowhow-card__badge .tbl-ico{width:56px;height:56px}

/* ---------- Badge řádek světle zelený (sekce 10) --------------------- */
.tbl-badges-band{
  background:var(--tbl-green-soft);border-radius:var(--tbl-radius);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(18px,2.4vw,28px) clamp(14px,2vw,24px);
}
.tbl-badges-band .tbl-badge{flex-direction:row;text-align:left;gap:14px;align-items:center}
.tbl-badges-band .tbl-badge__icon{
  width:60px;height:60px;border-radius:50%;background:var(--tbl-green-badge);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
}
.tbl-badges-band .tbl-badge__icon .tbl-ico{width:38px;height:38px}
.tbl-badges-band .tbl-badge+.tbl-badge::before{background:rgba(60,143,41,.22)}
.tbl-badges-band .tbl-badge__label{font-weight:var(--tbl-fw-bold);font-size:var(--tbl-fs-body)}

/* ---------- Video: vlastní play overlay ------------------------------ */
/* Platí pro každý blok core/video (ne jen sekci 11). Overlay vkládá
   assets/js/video-overlay.js - bez JS zůstane nativní lišta prohlížeče, proto
   tady nejsou žádná pravidla, která by ovládání videa schovávala „natvrdo". */
.wp-block-video.tbl-video--overlay{position:relative;line-height:0}
.tbl-video-play{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;cursor:pointer;color:#fff;
  display:grid;place-items:center;
  border-radius:inherit;                /* kopíruje zaoblení figury (sekce 11) */
  background:rgba(8,10,11,.28);         /* jemné ztmavení posteru pod tlačítkem */
  transition:background var(--tbl-transition);
}
.tbl-video-play:hover,.tbl-video-play:focus-visible{background:rgba(8,10,11,.42)}
.tbl-video-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.tbl-video-play__icon{
  width:clamp(58px,7vw,78px);aspect-ratio:1;border-radius:50%;
  background:var(--tbl-green);box-shadow:var(--tbl-shadow-btn);
  display:grid;place-items:center;
  transition:transform var(--tbl-transition),background var(--tbl-transition);
}
.tbl-video-play:hover .tbl-video-play__icon,
.tbl-video-play:focus-visible .tbl-video-play__icon{transform:scale(1.06);background:var(--tbl-green-dark)}
.tbl-video-play__icon svg{width:38%;height:auto;fill:currentColor;display:block}
/* Po spuštění je na řadě nativní ovládání - overlay pryč (ne jen průhledný,
   ať nebere kliknutí na lištu přehrávače). */
.tbl-video--overlay.is-playing .tbl-video-play{display:none}

/* ---------- Media & text (sekce 11-13) ------------------------------- */
.tbl-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.tbl-media--reverse .tbl-media__figure{order:-1}
/* z-index:0 tu musí být: dělá ze figure stacking kontext, takže .tbl-dots
   (z-index:-1) skončí za fotkou, ale PŘED bílým pozadím sekce. Bez toho
   propadnou tečky až za pozadí sekce a nejsou vidět vůbec. */
.tbl-media__figure{position:relative;z-index:0}
/* Slot bere obrázek i video (sekce 11 = core/video) - obojí se chová stejně:
   přes celou šířku sloupce, zaoblení a stín jako fotka v návrhu. */
.tbl-media__figure img,
.tbl-media__figure video{border-radius:var(--tbl-radius);width:100%;object-fit:cover;box-shadow:var(--tbl-shadow-soft)}
/* Spodní roh fotky na straně textu je v návrhu ostrý - je to ten roh, u kterého
   vykukují tečky, takže rastr teček na něj navazuje. Ostatní rohy zaoblené. */
.tbl-media__figure img,
.tbl-media__figure video{border-bottom-left-radius:0}
.tbl-media--reverse .tbl-media__figure img,
.tbl-media--reverse .tbl-media__figure video{
  border-bottom-left-radius:var(--tbl-radius);border-bottom-right-radius:0;
}
.tbl-media__body .tbl-h2{margin-bottom:.6em}
.tbl-media__body p{color:var(--tbl-ink-soft);margin-bottom:1em}
.tbl-media__body p:last-child{margin-bottom:0}
/* Tečkovaný dekor. Odečteno z návrhu: rastr 8 sloupců x 7 řad, rozteč 25,3
   vodorovně a 23,5 svisle (není čtvercová!), průměr tečky 5,5. Přepočet x0,726
   -> rozteč 18,36 / 17,06, tečka 4. Pole leží ZA fotkou a ven vykukuje jen roh,
   proto ten tvar "L" - vždy u spodního rohu fotky na té straně, kde je text.

   background-position ukotvuju na "bottom", ne default "top": rastr se pak sází
   od spodní hrany a poslední řada padne přesně tam, kam má. Při sázení shora
   závisí na výšce boxu a poslední řada skončí půlkou za fotkou.
   Rozměry = celý počet dlaždic (8x18,36 / 7x17,06), aby nevznikla řada navíc. */
.tbl-dots{
  position:absolute;width:147px;height:119px;z-index:-1;
  background-image:radial-gradient(var(--tbl-green) 2px,transparent 2px);
  background-size:18.36px 17.06px;
}
/* bottom:-19px = půl rozteče (8,53) + 10,7px, o co má poslední řada přesahovat
   pod hranu fotky. Ta jedna řada pod fotkou je v návrhu jediná viditelná zdola. */
.tbl-dots--bl{left:-57px;bottom:-19px;background-position:left bottom}
.tbl-dots--br{right:-57px;bottom:-19px;background-position:right bottom}

.tbl-feature-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.tbl-feature-list li{display:flex;gap:6px}
.tbl-feature-list li::before{
  content:"";flex:0 0 auto;width:.58em;height:.58em;margin-top:.36em;
  background:var(--tbl-fajfka) no-repeat center/contain;
}
.tbl-feature-list strong{display:block;color:var(--tbl-ink)}
.tbl-feature-list span{color:var(--tbl-ink-soft);font-size:var(--tbl-fs-body)}

/* ---------- Poptávkový formulář + kontakty (sekce 14) ---------------- */
/* V návrhu je to zaoblený zelený box vsazený do bílé sekce - stejná šířka
   i rádius jako stat pruh a badge řádek, ne barva přes celou šířku okna. */
.tbl-contact{
  background:var(--tbl-green);color:var(--tbl-on-green);
  border-radius:var(--tbl-radius);
  padding:clamp(26px,3vw,40px) clamp(22px,5vw,72px);
}
.tbl-contact__head{margin-bottom:clamp(24px,3vw,36px)}
/* Tenhle nadpis je v návrhu záměrně menší než ostatní h2 (verzálka 26px proti
   43px u "Od receptury") - je ve velikosti h3. Podnadpis je naopak větší než
   běžný text a jde přes celou šířku boxu na jeden řádek. */
.tbl-contact__head .tbl-h2{color:#fff;margin-bottom:.3em;font-size:var(--tbl-fs-h3)}
.tbl-contact__head p{color:#fff;font-size:var(--tbl-fs-lead)}
.tbl-contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}

/* formulář (v prototypu jen HTML atrapa; ve WP -> CF7 / Gravity Forms) */
.tbl-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tbl-form__field{display:flex;flex-direction:column}
.tbl-form__field--full{grid-column:1 / -1}
.tbl-form label{font-size:var(--tbl-fs-small);margin-bottom:6px;opacity:.9}
.tbl-form input,.tbl-form textarea{
  width:100%;border:0;border-radius:var(--tbl-radius-sm);
  background:#fff;color:var(--tbl-ink);padding:14px 16px;
}
.tbl-form input::placeholder,.tbl-form textarea::placeholder{color:#9a9a9a}
.tbl-form textarea{min-height:150px;resize:vertical}
.tbl-form__actions{grid-column:1 / -1;display:flex;justify-content:flex-end}

/* kontaktní sloupec */
.tbl-contacts{display:grid;gap:20px}
.tbl-contacts__persons{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tbl-person__role{font-size:var(--tbl-fs-small);opacity:.85;margin-bottom:.3em}
.tbl-person__name{font-weight:var(--tbl-fw-bold);font-size:var(--tbl-fs-body)}
.tbl-person__title{font-size:var(--tbl-fs-small);opacity:.85}
.tbl-person a{text-decoration:underline;text-underline-offset:2px}
.tbl-contacts__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.tbl-address__label{font-size:var(--tbl-fs-small);opacity:.85;margin-bottom:.3em}
.tbl-address strong{display:block;font-weight:var(--tbl-fw-bold);margin-bottom:.2em}
.tbl-address p{font-size:var(--tbl-fs-small);line-height:1.5;opacity:.95}
/* Certifikát: bílá karta a v ní obrázek (core/image, aby ho klient vyměnil
   za reálný scan přes „Nahradit"). Zelený rámeček i popisky, které tu dřív
   dělal markup, jsou teď součástí placeholder obrázku - karta sama nemá co
   stylovat kromě podložky. */
.tbl-cert{
  background:#fff;border-radius:var(--tbl-radius-sm);
  padding:16px;max-width:220px;
}
.tbl-cert .wp-block-image{margin:0}
.tbl-cert img{width:100%}

/* ---------- Footer (sekce 15) ---------------------------------------- */
.tbl-footer{background:var(--tbl-ink);color:rgba(255,255,255,.75);font-size:var(--tbl-fs-small)}
.tbl-footer .tbl-container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding-block:26px;
}
.tbl-footer__links{display:flex;flex-wrap:wrap;gap:18px}
.tbl-footer a:hover{color:#fff;text-decoration:underline}

/* ========================================================================
   WP bridge: core/image (figure obal) v media slotech sekcí
   ------------------------------------------------------------------------
   Prototyp měl v media slotech <img> přímo; Gutenberg blok core/image ho
   obaluje do <figure class="wp-block-image"> (kvůli klientské editaci -
   „Nahradit"). Tenhle můstek srovná figure na chování původního <img>:
   vynuluje výchozí margin figure a u slotů s pevným poměrem (process/tech)
   nechá figure+img vyplnit box. Slot .tbl-*__media img / .tbl-media__figure
   img pravidla z prototypu platí na vnořený <img> beze změny.
   ======================================================================== */
.tbl-process-card__media .wp-block-image,
.tbl-tech-row__media .wp-block-image{margin:0;height:100%}
.tbl-process-card__media .wp-block-image img,
.tbl-tech-row__media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.tbl-knowhow-card__media .wp-block-image,
.tbl-media__figure .wp-block-image,
.tbl-media__figure .wp-block-video{margin:0;display:block}
/* core/video renderuje <figure><video> - stejně jako u obrázku srovnáme figure
   a video na blokový prvek přes celou šířku slotu (jinak nechá video inline
   mezeru pod sebou a poster se natáhne na intrinsic rozměr souboru). */
.tbl-media__figure .wp-block-video video{display:block;height:auto}
/* Zaoblení má i figure, ne jen video - play overlay ho dědí (border-radius:
   inherit), takže ztmavení nepřečnívá přes zakulacené rohy. */
.tbl-media__figure .wp-block-video{border-radius:var(--tbl-radius);border-bottom-left-radius:0}
.tbl-media--reverse .tbl-media__figure .wp-block-video{
  border-bottom-left-radius:var(--tbl-radius);border-bottom-right-radius:0;
}
/* core/button je vnořené v core/buttons (wrapper); u flex CTA pruhů srovnáme
   wrapper na chování původního <a> (jeden flex prvek vedle ikony a textu). */
.tbl-cta-band .wp-block-buttons,
.tbl-cta-split__text .wp-block-buttons{flex:0 0 auto;margin:0}
/* Sekce 8: obrázek pozadí je core/image (figure) místo prototypového <img>.
   Třída .tbl-cta-split__bg nese figure (pozici/šířku/masku z prototypu drží
   existující pravidlo), vnitřní <img> figuru vyplní. */
.tbl-cta-split__bg.wp-block-image{margin:0}
.tbl-cta-split__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* Contact Form 7 (sekce 14): plugin balí každý input do <span
   class="wpcf7-form-control-wrap"> a formulář do .wpcf7 > form.wpcf7-form.
   Srovnáme na strukturu .tbl-form z prototypu (grid polí + input přes šířku). */
.tbl-form .wpcf7-form-control-wrap{display:block;width:100%}
.tbl-contact__grid .wpcf7,
.tbl-contact__grid .wpcf7-form{margin:0}
.tbl-form .wpcf7-spinner{margin:0 0 0 12px}
/* Honeypot + časová past (viz tabletovani_cf7_add_traps() ve functions.php).
   Schované odsunutím mimo plátno, ne display:none/visibility:hidden - ty boti
   umí detekovat a pole přeskočit. Pro odečítač je blok aria-hidden. */
.tbl-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ========================================================================
   Responzivita (návrh je jen desktop - breakpointy řeším sám)
   ======================================================================== */
@media (max-width:1024px){
  .tbl-tech-row{grid-template-columns:240px auto 1fr}
  .tbl-process{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .tbl-process-card{flex-direction:row}
  .tbl-process-card__media{flex:0 0 40%;aspect-ratio:auto}
}
@media (max-width:900px){
  /* mobilní navigace */
  .tbl-burger{display:block}
  .tbl-nav{
    position:fixed;inset:var(--tbl-header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;color:var(--tbl-ink);
    box-shadow:var(--tbl-shadow-card);
    max-height:0;overflow:hidden;transition:max-height var(--tbl-transition);
  }
  .tbl-nav.is-open{max-height:80vh}
  .tbl-nav__list{flex-direction:column;align-items:stretch;gap:8px;width:100%;padding-block:12px}
  .tbl-nav__link{padding:16px var(--tbl-pad-x);color:var(--tbl-ink)}
  .tbl-nav__link::after{display:none}
  /* v rozbaleném hamburger menu je místa dost -> dropdown se rozbalí v toku
     (position:static), aby ho overflow nav-panelu neořízl */
  .tbl-lang{display:block;padding:8px var(--tbl-pad-x) 16px}
  .tbl-lang__toggle{width:100%;justify-content:flex-start;padding:12px 0}
  .tbl-lang__caret{margin-left:auto}
  .tbl-lang__menu{position:static;min-width:0;margin-top:6px;padding:0;background:transparent;color:inherit;box-shadow:none}
  .tbl-lang__item{padding:12px 8px}

  .tbl-intro__grid{grid-template-columns:1fr}
  .tbl-media,.tbl-media--reverse{grid-template-columns:1fr}
  .tbl-media--reverse .tbl-media__figure{order:0}
  .tbl-knowhow{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .tbl-shapes__grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:36px}
  .tbl-contact__grid{grid-template-columns:1fr}
  .tbl-cta-band{flex-direction:column;text-align:center}
  .tbl-cta-band__text{text-align:center}
  .tbl-cta-split__bg{width:100%;opacity:.28;-webkit-mask-image:none;mask-image:none}
  /* dekorativní tečky přečnívají přes okraj figure -> na mobilu (figure přes celou šířku) by dělaly vodorovný scroll */
  .tbl-dots{display:none}
}
@media (max-width:680px){
  /* technologie: obrázek přes celou šířku nahoře, pod ním ikona + text (jinak se text smáčkne na nulu) */
  .tbl-tech-row{
    grid-template-columns:70px 1fr;gap:16px 18px;align-items:center;
    grid-template-areas:"media media" "icon body";
  }
  .tbl-tech-row__media{aspect-ratio:16/9}
  .tbl-badges{grid-template-columns:repeat(2,1fr);gap:20px 0}
  .tbl-stats,.tbl-badges-band{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .tbl-stat:nth-child(odd)::before,.tbl-badge:nth-child(odd)::before{display:none}
  .tbl-badges-band .tbl-badge:nth-child(odd)::before{display:none}
  .tbl-form{grid-template-columns:1fr}
  .tbl-contacts__persons,.tbl-contacts__cols{grid-template-columns:1fr}
  .tbl-process-card{flex-direction:column}
  .tbl-process-card__media{flex:none;aspect-ratio:16/10}
  .tbl-cta-split__inner{flex-direction:column;align-items:flex-start;gap:16px}
  .tbl-cta-split__divider{display:none}
}
@media (max-width:420px){
  /* Odznaky v intru zůstávají i na nejužších displejích v mřížce 2x2 (dva řádky
     po dvou) - popisky jsou krátké a čtyři pod sebou by sekci zbytečně natáhly.
     Svislý oddělovač proto smí zůstat jen u druhého odznaku v řádku. */
  .tbl-stats,.tbl-badges-band{grid-template-columns:1fr}
  .tbl-stat::before,.tbl-badges-band .tbl-badge::before{display:none !important}
  .tbl-badges .tbl-badge:nth-child(odd)::before{display:none}
  .tbl-hero__actions{flex-direction:column;align-items:stretch}
  /* tlačítka na plnou šířku a na střed: šířku drží wrapper (core/button),
     vzhled a centrování vnitřní odkaz */
  .tbl-hero__actions .wp-block-button.tbl-btn{width:100%}
  .tbl-hero__actions .tbl-btn:not(.wp-block-button),
  .tbl-hero__actions .wp-block-button.tbl-btn > .wp-block-button__link{width:100%;justify-content:center}
}