/*
  DECOLED.com — design system stylesheet
  Single file, sections below. Mobile-first (360px base), enhanced at 768px and 1200px.
  Tokens only from BRAND_TRUTH.md: gold #c4a148 family, grey #8d8e8e family, black #111010.
  No blue, no amber #E9A94C. Font: New Atten only (self-hosted OTF), system-ui fallback.
*/

/* ============================================================
   1. FONTS (@font-face — self-hosted OTF, no CDN)
   ============================================================ */
@font-face {
  font-family: "New Atten";
  src: url("/static/fonts/New_Atten_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "New Atten";
  src: url("/static/fonts/New_Atten_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "New Atten";
  src: url("/static/fonts/New_Atten_ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
  /* -- brand colour, from BRAND_TRUTH.md, do not invent new hues -- */
  --c-black: #111010;
  --c-black-alt: #1d1d1b;
  --c-gold: #c4a148;
  --c-gold-70: #d6bd7f;
  --c-gold-50: #e2d0a3;
  --c-gold-30: #ede3c8;
  --c-grey: #8d8e8e;
  --c-grey-70: #afb0b0;
  --c-grey-50: #c6c7c7;
  --c-grey-30: #dddddd;
  --c-cream: #f5f1e6;
  --c-white: #ffffff;

  /* -- semantic roles -- */
  --color-bg: var(--c-black);
  --color-bg-alt: var(--c-black-alt);
  --color-bg-light: var(--c-cream);
  --color-heading: var(--c-gold);
  --color-heading-muted: var(--c-gold-70);
  --color-subheading: var(--c-grey-70);
  --color-body: var(--c-cream);
  --color-body-on-light: var(--c-black);
  --color-muted: var(--c-grey-70);
  --color-border: rgba(196, 161, 72, 0.28);
  --color-border-strong: var(--c-gold);
  --color-overlay: rgba(17, 16, 16, 0.62);
  --color-focus: var(--c-gold-50);

  /* -- typography -- */
  --font-body: "New Atten", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lh-tight: 1.1;
  --lh-normal: 1.55;
  --ls-heading: 0.01em;
  --ls-caps: 0.08em;

  --fs-root: 16px;
  --fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  /* floor raised from 0.8125rem: at 375 px this clamps to its minimum, and the minimum is what
     the legal table and the branch addresses are set in. 13 px is not reading size. */
  --fs-small: clamp(0.875rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.85rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h4: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  --fs-kicker: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --fs-counter: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  /* -- spacing scale (fluid) -- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --space-l: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3.6vw, 5rem);
  --space-2xl: clamp(4rem, 2.8rem + 5.4vw, 7.5rem);
  --space-section: clamp(3.5rem, 2.6rem + 4vw, 6.5rem);

  /* -- layout -- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);
  --header-h: 76px;
  --header-h-scrolled: 60px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --border-w: 1px;
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.35);
  --transition-fast: 160ms ease;
  --transition-normal: 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-slow: 520ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --z-header: 100;
  --z-offcanvas: 110;
  --z-lightbox: 120;
  --z-cookie: 130;
}

@media (min-width: 768px) {
  :root {
    --header-h: 92px;
    --header-h-scrolled: 68px;
  }
}

/* ============================================================
   3. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Safety net: inline icon svgs (blocks.html icon() macro) must never render at
   their raw viewBox intrinsic size when a component forgets to size them;
   every component below overrides this at higher specificity. */
svg[viewBox] { width: 1.5em; height: 1.5em; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* ============================================================
   4. BASE TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-body);
  background: var(--color-bg);
  font-weight: 400;
}
/* NO text-transform here, and that is the whole point. This one declaration shouted all 214 headings
   on the site, including sentences that were never meant to shout: "3. Komu údaje předáváme",
   "Kontaktieren Sie uns", and the name of a colleague, "Lukas Liska".
   Measured on the supplier's site, which is still live at www.decoled.com: there the capitals sit in
   the TEXT, not in a stylesheet, and only on short section labels - "OBCHODNÍ CENTRA", "SVĚTELNÉ
   PARKY" - while sentence-shaped headings render normally. Our content inherited that faithfully:
   75 headings carry capitals in content/, 76 are written in sentence case.
   So the brand look survives without this line, and only the sentences stop shouting. Capitals are a
   decision about one heading, taken by whoever writes it - never a blanket rule over every h1-h4. */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--color-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
/* compound words (hu BEVASARLOKOZPONTOK) overflowed the band by 40 px at 360 px, measured 2026-09-30 */
h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; }
.subheading, .kicker, [data-role="subheading"] {
  text-transform: lowercase;
  color: var(--color-subheading);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-heading-muted);
  margin-bottom: var(--space-2xs);
}
/* THE MEASURE BELONGS TO THE COLUMN, NOT TO THE PARAGRAPH.
   This used to be p { max-width: 62ch }, which capped paragraphs while headings, lists and
   everything else around them ran to the full container. The result is the ragged edge the CTO kept
   pointing at: a heading spanning 1280 px with a paragraph stopping at ~700 px under it and a void
   on the right - on the privacy policy, on every text page, in every language.
   Capping .prose instead gives one line length to the whole column, so a heading ends where its
   paragraph ends. Tables are their own block type here (the privacy page is text, table, text,
   table, text), so they keep the full width and lose nothing. */
p { max-width: none; }
/* 70rem = 1120 px, which is the predecessor's text width: its Bootstrap .container is max-width
   1140 px minus 2x15 padding, and it puts no measure cap on paragraphs at all - text fills the
   column. Measured on the live www.decoled.com, which is still the supplier's site. Our container is
   1280, so this leaves a small even margin instead of the empty right half. */
.prose, .text-block > p { max-width: 70rem; }
.text-block--center .prose, .text-block--center > p { margin-inline: auto; }
p.no-measure, .prose .no-measure { max-width: none; }
a { text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }
strong, b { font-weight: 700; color: var(--color-heading-muted); }

/* visible focus states everywhere */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
a:focus-visible, button:focus-visible { outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-s);
  z-index: 200;
  background: var(--c-gold);
  color: var(--c-black);
  font-weight: 700;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-s); }

/* ============================================================
   5. LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-section);
}
.section--tight { padding-block: var(--space-l); }
.section--alt { background: var(--color-bg-alt); }
.section--light {
  background: var(--color-bg-light);
  color: var(--color-body-on-light);
}
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--c-gold); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
.section-head .subheading { margin: 0; }

.grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  /* Three columns from 768 px left the card 217 px wide and 163 px of it for text. The same
     rule repeated at 1200 px below suggests three were always meant to start there. */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* generic 12-col row grouping for blocks sharing a "cols" hint (page.html) */
.block-row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .block-row { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .block-row__item { grid-column: span 12; }
  .block-row__item[style*="--item-cols: 1"]  { grid-column: span 1; }
  .block-row__item[style*="--item-cols: 2"]  { grid-column: span 2; }
  .block-row__item[style*="--item-cols: 3"]  { grid-column: span 3; }
  .block-row__item[style*="--item-cols: 4"]  { grid-column: span 4; }
  .block-row__item[style*="--item-cols: 5"]  { grid-column: span 5; }
  .block-row__item[style*="--item-cols: 6"]  { grid-column: span 6; }
  .block-row__item[style*="--item-cols: 7"]  { grid-column: span 7; }
  .block-row__item[style*="--item-cols: 8"]  { grid-column: span 8; }
  .block-row__item[style*="--item-cols: 9"]  { grid-column: span 9; }
  .block-row__item[style*="--item-cols: 10"] { grid-column: span 10; }
  .block-row__item[style*="--item-cols: 11"] { grid-column: span 11; }
  /* A block left alone on a row used to sit flush left with the rest of the row empty - a picture
     of four columns left eight columns of nothing beside it, which reads as a hole rather than a
     layout. Measured 2. 10. 2026: six such rows in Czech alone (contacts, the story page twice,
     careers, a reference). A lone block now takes the whole row. */
  .block-row__item:only-child { grid-column: 1 / -1; }
  /* ...except that stretching a portrait photograph across twelve columns is its own problem, so
     a picture alone on a row keeps a sane width and sits in the middle. */
  .block-row__item:only-child .image-block img {
    max-width: min(100%, 34rem);
    margin-inline: auto;
    display: block;
  }
}

/* ============================================================
   6. HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(17, 16, 16, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border-w) solid var(--color-border);
  transition: height var(--transition-normal);
}
.site-header[data-scrolled="true"] { height: var(--header-h-scrolled); }
/* The header used a wider frame than the content grid, so the logo started 80 px (at 1440 px)
   to 120 px (at 1920 px and above) left of every block on the page - the one vertical line a
   reader checks without noticing. The frame stays wide enough for six menu items and six
   languages; only the left edge is pulled onto the content grid. */
.site-header__inner {
  width: 100%;
  max-width: 1520px;            /* header gets a wider frame than content: logo + 6 items + 6 languages */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img, .site-header__logo svg { height: 32px; width: auto; }
@media (min-width: 768px) {
  .site-header__logo img, .site-header__logo svg { height: 38px; }
/* Header row breakpoint. Was 1280 px, which handed the burger menu to a 1272 px window -
   an ordinary laptop. site.js initHeaderFit still collapses the row when it really does not
   fit, so this number only needs to be low enough to stop deciding in its place. */
}
@media (min-width: 1100px) {
  .site-header__logo img, .site-header__logo svg { height: auto; width: 160px; }
}

.nav-primary { display: none; }
.nav-primary__link .nav-primary__ext-icon, .offcanvas .nav-primary__ext-icon { width: 0.75em; height: 0.75em; margin-left: 0.3em; vertical-align: middle; }
@media (min-width: 1100px) {
  .nav-primary {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
    /* never narrower than its own items: centring an overflowing flex row pushed items over the logo */
    min-width: max-content;
    margin-left: auto;
    gap: clamp(0.9rem, 0.1rem + 0.9vw, 1.6rem);
  }
  .nav-primary__link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.78rem, 0.5rem + 0.3vw, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--c-grey-70);
    padding-block: var(--space-3xs);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
  .nav-primary__link:hover,
  .nav-primary__link[aria-current="page"] {
    color: var(--c-gold);
    border-color: var(--c-gold);
  }
}

/* "About us" group: opens on hover, keyboard focus and click (JS sets aria-expanded) */
.nav-primary__group { position: relative; display: none; }
@media (min-width: 1100px) {
  .nav-primary__group { display: block; }
  .nav-primary__toggle { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; gap: 0.4em; }
  .nav-primary__toggle[data-active="true"] { color: var(--c-gold); border-color: var(--c-gold); }
  .nav-primary__caret {
    width: 0.45em; height: 0.45em; margin-top: -0.2em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--transition-fast);
  }
  .nav-primary__menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
    min-width: 12rem; padding: var(--space-2xs) 0;
    background: var(--c-black-alt); border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-s); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), transform var(--transition-fast);
  }
  /* invisible bridge so the menu does not close while the pointer travels to it */
  .nav-primary__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-primary__group:hover .nav-primary__menu,
  .nav-primary__group:focus-within .nav-primary__menu,
  .nav-primary__toggle[aria-expanded="true"] + .nav-primary__menu { opacity: 1; visibility: visible; transform: translate(-50%, 10px); }
  .nav-primary__group:hover .nav-primary__caret,
  .nav-primary__toggle[aria-expanded="true"] .nav-primary__caret { transform: rotate(-135deg); margin-top: 0.2em; }
  .nav-primary__sublink {
    display: block; padding: var(--space-2xs) var(--space-s);
    color: var(--c-grey-70); text-decoration: none; white-space: nowrap;
    font-size: clamp(0.78rem, 0.5rem + 0.3vw, 0.875rem); text-transform: uppercase; letter-spacing: 0.03em;
  }
  .nav-primary__sublink:hover, .nav-primary__sublink:focus-visible { color: var(--c-gold); background: rgba(196, 161, 72, 0.08); }
  .nav-primary__sublink[aria-current="page"] { color: var(--c-gold); }
}
.offcanvas__group { display: flex; flex-direction: column; }
.offcanvas__group-label {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--color-subheading); padding-top: var(--space-2xs);
}
.offcanvas__link--sub { padding-left: var(--space-s); }
.offcanvas__link { display: flex; align-items: center; gap: 0.4em; }

.lang-switch { display: none; }
@media (min-width: 1100px) {
  .lang-switch {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-3xs);
    align-items: center;
    border-left: var(--border-w) solid var(--color-border);
    padding-left: var(--space-s);
    margin-left: var(--space-s);
  }
  .lang-switch__link {
    font-size: var(--fs-small);
    text-decoration: none;
    color: var(--c-grey-70);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-s);
  }
  .lang-switch__link[aria-current="true"] { color: var(--c-gold); font-weight: 700; }
  .lang-switch__link:hover { color: var(--c-white); background: rgba(196, 161, 72, 0.12); }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--c-gold-70);
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-s);
}
@media (min-width: 1100px) { .menu-toggle { display: none; } }
.menu-toggle__bars { width: 20px; height: 14px; position: relative; }
.menu-toggle__bars span {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* off-canvas mobile menu */
.offcanvas {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  height: 100dvh;
  background: var(--c-black-alt);
  border-left: var(--border-w) solid var(--color-border);
  z-index: var(--z-offcanvas);
  padding: var(--space-l) var(--space-m);
  transform: translateX(100%);
  /* transform alone leaves the panel focusable: measured 2026-09-30, 16 tab stops on every page */
  visibility: hidden;
  transition: transform var(--transition-normal), visibility 0s var(--transition-normal);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
/* While the mobile menu is open the cookie bar must get out of its way. The bar sits at z-index 130
   and the menu at 110, so on a phone the bar covered the bottom of the menu - the B2B and B2C shop
   links and the language switcher, which are the last items in the panel and the easiest to not
   notice are missing. Lowered only while the menu is open, so the bar is still above everything
   else and the visitor can still answer it after closing the menu. */
body:has(.offcanvas[data-open="true"]) .cookie-banner { z-index: calc(var(--z-offcanvas) - 1); }
.offcanvas[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform var(--transition-normal), visibility 0s; }
@media (min-width: 1100px) { .offcanvas { display: none; } }
/* header fit guard (site.js initHeaderFit): desktop row does not fit -> off-canvas menu */
@media (min-width: 1100px) {
  html[data-nav-compact="true"] .nav-primary,
  html[data-nav-compact="true"] .lang-switch { display: none; }
  html[data-nav-compact="true"] .menu-toggle { display: inline-flex; }
  html[data-nav-compact="true"] .offcanvas { display: flex; }
}
.offcanvas__head { display: flex; justify-content: space-between; align-items: center; }
.offcanvas__close {
  color: var(--c-gold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-s);
  padding: var(--space-2xs) var(--space-xs);
}
.offcanvas__nav { display: flex; flex-direction: column; gap: var(--space-s); }
.offcanvas__link {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  color: var(--c-cream);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}
.offcanvas__link[aria-current="page"] { color: var(--c-gold); }
.offcanvas__langs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.offcanvas__langs a {
  text-decoration: none;
  font-size: var(--fs-small);
  color: var(--c-grey-70);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: var(--space-3xs) var(--space-xs);
}
.offcanvas__langs a[aria-current="true"] { color: var(--c-gold); border-color: var(--c-gold); }
.offcanvas-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 16, 16, 0.6);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.offcanvas-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
body[data-scroll-lock="true"] { overflow: hidden; }

/* ============================================================
   7. HERO / CAROUSEL
   ============================================================ */
.hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 92vh;
  overflow: hidden;
  background: var(--c-black);
}
@media (min-width: 768px) { .hero-carousel { aspect-ratio: 16 / 10; } }
@media (min-width: 1200px) { .hero-carousel { aspect-ratio: 21 / 9; } }

.hero-carousel__track { position: relative; width: 100%; height: 100%; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow);
}
.hero-slide[data-active="true"] { opacity: 1; visibility: visible; }
.hero-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Over the photo, under the scrim. Starts invisible and fades in when it actually plays, so a
   browser that never starts it shows the still and nobody sees a black rectangle waiting. */
.hero-slide__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  opacity: 0; transition: opacity 0.8s ease;
}
.hero-slide__video.is-playing { opacity: 1; }
.hero-slide__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,16,16,0.15) 0%, rgba(17,16,16,0.35) 55%, rgba(17,16,16,0.9) 100%);
}
.hero-slide__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* align the caption with the content container edge on wide screens */
  padding: var(--space-l) max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))) var(--space-xl);
}
.hero-slide__content > * { max-width: 46rem; }

.hero-slide__name { font-size: var(--fs-h1); margin: 0 0 var(--space-xs); }
.hero-slide__descr { color: var(--c-cream); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); }
.hero-slide__descr p { margin: 0 0 var(--space-2xs); }

.hero-carousel__nav {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 16, 16, 0.55);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--c-gold);
}
.hero-carousel__nav svg { width: 20px; height: 20px; }
.hero-carousel__nav:hover { background: rgba(17, 16, 16, 0.8); border-color: var(--c-gold); }
.hero-carousel__nav--prev { left: var(--space-s); }
.hero-carousel__nav--next { right: var(--space-s); }
.hero-carousel__dots {
  position: absolute; z-index: 5; bottom: var(--space-s); left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-2xs);
}
/* The dot stays 9 px; the BUTTON around it gets a finger-sized area through padding and a
   background-clip, so the target is 29 px (44 with the coarse-pointer rule below) while the design
   is unchanged. Same principle as the consent checkbox: a minimum size is a rule about the area you
   can hit, not about how big the thing looks. */
.hero-carousel__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(245, 241, 230, 0.4);
  border: 10px solid transparent;
  background-clip: content-box;
  box-sizing: content-box;
}
.hero-carousel__dot[aria-current="true"] { background: var(--c-gold); }
.hero-carousel--single .hero-carousel__nav,
.hero-carousel--single .hero-carousel__dots { display: none; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 1px solid var(--c-gold);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--c-gold); color: var(--c-black); }
.btn--solid:hover { background: var(--c-gold-70); }
.btn--outline { background: transparent; color: var(--c-gold); }
.btn--outline:hover { background: rgba(196, 161, 72, 0.12); }

/* ============================================================
   8. COUNTERS
   ============================================================ */
.counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  text-align: center;
}
@media (min-width: 768px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter__icon { display: inline-flex; width: 44px; height: 44px; margin: 0 auto var(--space-2xs); color: var(--c-gold); }
.counter__icon svg { width: 100%; height: 100%; }
.counter__value {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-counter);
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter__label {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-subheading);
  font-size: var(--fs-small);
}

/* ============================================================
   9. TEXT BLOCKS (prose + bg image band)
   ============================================================ */
.prose > * + * { margin-top: var(--space-s); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-l); }
/* The heading rule above fires on a FIRST child too, so a block that opens with a heading started
   2-3 rem lower than a block that opens with a paragraph - the same section rhythm, offset at random
   across 155 pages. That is the "rozházené formátování" a reader notices without being able to name
   it. The block's own padding owns the gap above its first line; its contents must not add to it. */
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-3xs); }
.prose table { margin-top: var(--space-s); font-size: var(--fs-small); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2xs) var(--space-xs); text-align: left; }
.prose a { color: var(--c-gold-70); }

.text-block { }
.text-block--center { text-align: center; }
.text-block--center .prose { margin-inline: auto; }
.text-block--center p { margin-inline: auto; }

.text-band {
  position: relative;
  padding: var(--space-2xl) var(--container-pad);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  overflow: hidden;
}
.text-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,16,16,0.55) 0%, rgba(17,16,16,0.82) 70%, rgba(17,16,16,0.94) 100%);
  z-index: -1;
}
.text-band__inner { max-width: 760px; margin-inline: auto; text-align: center; }
/* background loop under the dark gradient (::before is z -1); fades in on the first played frame */
.text-band__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity 0.8s ease;
}
.text-band__video.is-playing { opacity: 1; }
.text-band .actions { justify-content: center; }
/* p has a global 62ch cap; without auto margins it sits at the left edge of a wider centered
   container and its text looks shifted (54 px at 1920 px, CTO screenshot 2026-09-29) */
.text-band p, .text-center p { margin-inline: auto; }

/* ============================================================
   10. FEATURES
   ============================================================ */
.features { }
.feature-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  height: 100%;
}
.feature-card__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  color: var(--c-gold);
  margin-bottom: var(--space-s);
}
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }
.feature-card p { color: var(--color-muted); margin: 0; }

/* ============================================================
   11. GALLERY + LIGHTBOX
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-s); } }
@media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-s);
  border: 0;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-normal);
}
.gallery__item:hover img { transform: scale(1.05); }

.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%;
  background: rgba(17, 16, 16, 0.96);
  color: var(--c-cream);
}
.lightbox::backdrop { background: rgba(17, 16, 16, 0.96); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__figure { position: relative; max-width: 92vw; max-height: 86dvh; margin: 0; }
.lightbox__figure img { max-width: 92vw; max-height: 78dvh; width: auto; height: auto; margin-inline: auto; }
.lightbox__figure figcaption { text-align: center; color: var(--color-muted); margin-top: var(--space-xs); font-size: var(--fs-small); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  color: var(--c-gold);
  background: rgba(17,16,16,0.6);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 20px; height: 20px; }
.lightbox__close { top: var(--space-s); right: var(--space-s); }
.lightbox__prev { left: var(--space-s); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-s); top: 50%; transform: translateY(-50%); }

/* ============================================================
   12. IMAGE BLOCK
   ============================================================ */
.image-block { }
.image-block figure { margin: 0; }
.image-block img { border-radius: var(--radius-m); width: 100%; }
.image-block figcaption { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--fs-small); }
.image-block a { display: block; }

/* ============================================================
   13. LOGOS WALL
   ============================================================ */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  align-items: center;
}
@media (min-width: 640px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(6, 1fr); } }
.logos__item {
  filter: grayscale(1) opacity(0.6);
  transition: filter var(--transition-fast);
}
.logos__item:hover, .logos__item:focus-within { filter: grayscale(0) opacity(1); }
.logos__item img { width: 100%; height: auto; }

/* ============================================================
   14. AUDIO
   ============================================================ */
.audio-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}
.audio-block h4 { margin-bottom: var(--space-s); }
.audio-block audio { width: 100%; }
.audio-block audio::-webkit-media-controls-panel { background: var(--color-bg-alt); }

/* ============================================================
   15. LIST CARDS
   ============================================================ */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 640px) { .card-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .card-list { grid-template-columns: repeat(3, 1fr); } }
.card-list__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.card-list__item:hover { transform: translateY(-3px); border-color: var(--c-gold); }
.card-list__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-black); }
.card-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-list__body { padding: var(--space-s) var(--space-m) var(--space-m); }
.card-list__body h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3xs); }
.card-list__body p { color: var(--color-muted); font-size: var(--fs-small); margin: 0; }
.card-list__more { color: var(--c-gold-70); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-top: var(--space-xs); display: inline-block; }

/* ============================================================
   16. FORMS (inquiry / newsletter)
   ============================================================ */
.form-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l) var(--space-m);
}
.field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-s); }
/* No text-transform: the labels are already written correctly per language, and forcing
   lowercase turned the German form into "vor- und nachname" - German capitalises nouns. */
.field label { font-size: var(--fs-small); color: var(--color-subheading); }
.field input:not([type="checkbox"]), .field textarea, .field select {
  background: var(--c-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.75em 0.9em;
  color: var(--c-cream);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-gold); }
.field--checkbox { flex-direction: row; align-items: flex-start; gap: var(--space-2xs); }
/* a native checkbox renders 13x13 px; the consent box is required, so it must reach 24 px (WCAG 2.5.8) */
.field--checkbox input[type="checkbox"] { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--c-gold); }
.field--checkbox label { text-transform: none; }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: var(--space-s); font-size: var(--fs-small); }
.form-msg[data-state="success"] { color: var(--c-gold-70); }
.form-msg[data-state="error"] { color: var(--c-grey-30); }
.form-msg:empty { display: none; }

.newsletter-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .newsletter-block__row { display: flex; gap: var(--space-s); }
  .newsletter-block__row .field { flex: 1; margin-bottom: 0; }
}

/* ============================================================
   17. VIDEO (original YouTube player, privacy-enhanced domain)
   ============================================================ */
.video-block {
  margin: 0 auto;
  width: 100%;
  max-width: 1040px;               /* a video is not a hero: keep it readable, never edge to edge */
}
/* A photo band with no text is a strip of image, not a container waiting for words. Without this
   all six homepages rendered it as a text band whose whole height was padding - the empty gap
   between the video and the client logos that the CTO saw. */
.text-band--photo { min-height: clamp(14rem, 26vw, 24rem); }
.text-band--photo .text-band__inner { display: none; }

.video-block__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--c-black-alt);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  outline: 1px solid rgba(196, 161, 72, 0.18);
}
.video-block__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-block__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
}
.video-block__title { color: var(--c-cream); }
.video-block__more {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--c-gold); text-decoration: none; white-space: nowrap;
}
.video-block__more:hover { text-decoration: underline; }
.video-block__more .video-block__more-icon { width: 0.8em; height: 0.8em; }

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-black-alt);
  border-top: 1px solid var(--color-border);
}
.site-footer__catalog {
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--color-border);
}
.site-footer__catalog-row {
  display: flex; flex-direction: column; gap: var(--space-m);
  align-items: flex-start; justify-content: space-between;
}
@media (min-width: 768px) {
  .site-footer__catalog-row { flex-direction: row; align-items: center; }
}
.site-footer__catalog h2 { margin-bottom: 0; max-width: 40ch; }
.site-footer__main {
  padding-block: var(--space-xl);
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__main { grid-template-columns: 1.2fr 1fr 1fr; }
}
.site-footer address { font-style: normal; color: var(--color-muted); }
.site-footer address a { color: var(--color-muted); }
.site-footer h2,
.site-footer h3 {
  color: var(--c-gold-70);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-small);
  margin-bottom: var(--space-s);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--space-2xs); }
.site-footer__links a { color: var(--color-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--c-gold); }
.footer-cookie-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--color-muted); text-decoration: none;
}
.footer-cookie-link:hover { color: var(--c-gold); }
.site-footer__social { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.site-footer__social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--c-grey-70);
}
.site-footer__social a:hover { color: var(--c-gold); border-color: var(--c-gold); }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-m);
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: space-between;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

/* ============================================================
   19. BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding-block: var(--space-s);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs); align-items: center; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-gold); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-3xs); color: var(--color-border); }
.breadcrumb li[aria-current="page"] { color: var(--c-gold-70); }

/* An H1 belongs to the content under it, not to the breadcrumb over it. Measured on
   reference.html at 1440 px: 16 px above, 147 px below - the smaller gap was the wrong one. */
.page-title { margin-block: var(--space-l) var(--space-m); }
/* pages without breadcrumb (press, podcast, career) had the H1 glued to the header: 0 px, 12 pages, 2026-09-29 */
.breadcrumb ~ .page-title { margin-top: 0; }

/* ============================================================
   20. UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ============================================================
   21. PRINT
   ============================================================ */
@media print {
  .site-header, .offcanvas, .offcanvas-backdrop, .hero-carousel__nav, .hero-carousel__dots,
  .video-block__facade, .skip-link, .cookie-banner { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  a { text-decoration: underline; }
}

/* ============================================================
   22. COOKIE CONSENT (own banner + settings dialog, no CDN/CMP)
   ============================================================ */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-cookie, 130);
  background: var(--c-black-alt);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-m) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (min-width: 1024px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-l); }
}
.cookie-banner__text { margin: 0; color: var(--c-cream); font-size: var(--fs-small); max-width: 70ch; }
.cookie-banner__text a { color: var(--c-gold-70); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex-shrink: 0; }
.cookie-banner__actions .btn { border-width: 1px; }

.cookie-dialog {
  z-index: var(--z-cookie, 130);
  max-width: 560px;
  width: min(92vw, 560px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  background: var(--color-bg-alt);
  color: var(--c-cream);
}
.cookie-dialog::backdrop { background: rgba(17, 16, 16, 0.72); }
.cookie-dialog[open] { display: block; }
.cookie-dialog__form { padding: var(--space-l) var(--space-m); }
.cookie-dialog__form h2 { margin-top: 0; }
.cookie-dialog__category {
  padding-block: var(--space-s);
  border-top: 1px solid var(--color-border);
}
.cookie-dialog__category:first-of-type { border-top: 0; }
.cookie-dialog__category-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
}
.cookie-dialog__category-head label { font-weight: 700; }
.cookie-dialog__category p { color: var(--color-muted); font-size: var(--fs-small); margin: var(--space-3xs) 0 0; }
.cookie-dialog__always {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-grey-50);
}
.cookie-dialog__actions {
  display: flex; justify-content: flex-end; gap: var(--space-s); margin-top: var(--space-m);
}

/* Turnstile widget slot (rendered lazily) */
.turnstile-slot { min-height: 0; margin: var(--space-xs) 0; }
.turnstile-slot[data-rendered] { min-height: 65px; }
/* The Turnstile widget has a hard minimum of 300 px and the form was narrower than that on a phone,
   so the box that proves you are human hung out over the edge of the form that needs proving.
   Arithmetic at 375 px: container padding 2x23.5 leaves 328, form padding 2x24 leaves 280 - twenty
   short. Narrowing the form's own padding buys it back down to about 360 px wide; below that even
   zero padding is not enough (at 320 px the container itself leaves 280), so the widget scales.
   Two rules because they fix two different shortfalls, not one twice. */
@media (max-width: 480px) {
  .form-block { padding-inline: var(--space-2xs); }
}
@media (max-width: 380px) {
  .turnstile-slot { transform: scale(0.88); transform-origin: left top; }
  .turnstile-slot[data-rendered] { min-height: 58px; }
}

/* ============================================================
   PRESS ARCHIVE ("Napsali o nás")
   ============================================================ */
.press__filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin-bottom: var(--space-l); }
.press__chip {
  font: inherit; font-size: var(--fs-small); color: var(--c-cream); background: transparent; cursor: pointer;
  border: var(--border-w) solid var(--color-border); border-radius: 999px; padding: 0.35em 0.9em;
}
.press__chip span { color: var(--c-grey-70); margin-left: 0.3em; }
.press__chip[aria-pressed="true"] { border-color: var(--c-gold); color: var(--c-gold); }
.press__select { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-small); color: var(--c-grey-70); margin-left: var(--space-xs); }
.press__select select { font: inherit; color: var(--c-cream); background: var(--c-black-alt); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-s); padding: 0.3em 0.5em; }
.press__country { margin-bottom: var(--space-xl); }
.press__country-title { display: flex; align-items: baseline; gap: var(--space-xs); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2xs); }
.press__count { font-size: var(--fs-small); color: var(--c-grey-70); font-weight: 400; text-transform: none; letter-spacing: 0; }
.press__list { list-style: none; margin: 0; padding: 0; }
.press__item { display: grid; gap: var(--space-3xs) var(--space-m); padding: var(--space-xs) 0; border-bottom: 1px solid rgba(196, 161, 72, 0.12); }
@media (min-width: 768px) { .press__item { grid-template-columns: 11rem 1fr; } }
.press__meta { display: flex; gap: var(--space-xs); align-items: baseline; font-size: var(--fs-small); color: var(--c-grey-70); }
.press__type { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; color: #d6bd7f; }
.press__body { display: flex; flex-direction: column; gap: 0.15em; }
/* The headline is the thing the visitor came to open; the outlet is a label on it. The old
   order made the label bold and cream and left all 74 links grey and without an underline. */
.press__outlet { font-weight: 400; color: var(--c-grey-70); font-size: var(--fs-small); }
.press__title { color: var(--c-cream); font-weight: 700; text-decoration: none; }
a.press__title { text-decoration: underline; text-decoration-color: rgba(196, 161, 72, 0.5); text-underline-offset: 0.2em; }
a.press__title:hover { color: var(--c-gold); text-decoration: underline; }
.press__title .press__ext { width: 0.75em; height: 0.75em; margin-left: 0.3em; vertical-align: baseline; }
.press__item[hidden], .press__country[hidden] { display: none; }
.press__title .press__ext { display: inline-block; }
.press__body a.press__title { display: inline; }

/* touch devices: every control reaches the 44 px comfort size (WCAG 2.5.8 asks 24, Apple/Google ask 44) */
@media (pointer: coarse) {
  select, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea { font-size: 1rem; min-height: 44px; }
  /* the box stays its own size; the LABEL next to it carries the touch area, which is how a
     checkbox is actually tapped */
  .field--checkbox label { min-height: 44px; display: flex; align-items: center; gap: var(--space-2xs); }
  .menu-toggle, .offcanvas__close, .lang-switch__link, .offcanvas__langs a { min-height: 44px; }
  .hero-carousel__dot { border-width: 17px; }
  .site-footer__links a, .site-footer__social a, .breadcrumb a, .press__chip, .video-block__more {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* data table (entity register): a phone cannot show 4 columns, so the table scrolls sideways.
   tabindex on the wrapper is required, otherwise a keyboard user cannot reach the hidden columns. */
/* The wrapping .section already supplies the rhythm; a margin of its own summed with that
   padding to 147 px here against 99 px elsewhere, so the same wrapper produced two spacings. */
.table-block { margin-block: 0; }
/* Without this the global h2{margin:0} reset glues the section heading straight onto the
   table frame, while .cards-block > h2 has 48 px two blocks further down. */
.table-block > h2 { margin-bottom: var(--space-l); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-s); }
.table-scroll:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.table-block table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--fs-small); }
.table-block caption { text-align: left; padding: var(--space-s); color: var(--color-muted); }
.table-block th, .table-block td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.table-block thead th { color: var(--c-gold); text-transform: uppercase; letter-spacing: var(--ls-heading); white-space: nowrap; }
.table-block tbody th { color: var(--c-cream); font-weight: 700; white-space: nowrap; }
.table-block tbody tr:last-child th, .table-block tbody tr:last-child td { border-bottom: 0; }
.table-block__note { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--space-2xs); }
.site-footer__reg { color: var(--color-muted); }

/* card grid: branches and people used to be text columns of unequal height in a 12-col row,
   which read as a data dump. Cards give every item the same weight and one alignment. */
.cards-block { margin-block: 0; }
.cards-block > h2 { margin-bottom: var(--space-l); }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--branch { grid-template-columns: repeat(4, 1fr); } }
.card {
  display: flex;
  flex-direction: column;
  background: var(--c-black-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.card__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-3xs); }
.card__title { margin: 0; font-size: var(--fs-h4); }
/* Branch cards put a country name here ("Nemecko", "Francie"); lowercasing a proper noun
   is wrong in every language the site speaks. */
.card__subtitle { margin: 0; color: var(--color-subheading); font-size: var(--fs-small); }
/* addresses are read, not skimmed: grey-70 is 7.8:1 on the card background, muted only 4.9:1 */
.card__text { margin-top: var(--space-2xs); color: var(--c-grey-70); font-size: var(--fs-small); }
.card__text p { margin: 0 0 0.35em; max-width: none; }
.card__text a { color: var(--c-gold-70); }
/* branch card: the flag is a small mark, not a picture */
.cards--branch .card__media { padding: var(--space-m) var(--space-m) 0; }
.cards--branch .card__media img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* person card: portrait beside the text, not above it - a full-width portrait made the section
   1161 px tall on a 2560 px screen (measured 2026-09-30) and dwarfed everything around it */
.cards--person { max-width: 56rem; }
.cards--person .card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (min-width: 620px) {
  .cards--person .card { flex-direction: row; align-items: stretch; }
  .cards--person .card__media { flex: 0 0 9.5rem; }
  .cards--person .card__media img { height: 100%; aspect-ratio: auto; }
  .cards--person .card__body { justify-content: center; }
}

/* click-to-load facade: no YouTube thumbnail on purpose - loading one would leak the IP exactly the
   way the iframe did. Dark panel, gold play mark, title and one line about what a click does. */
.video-block__facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-m);
  /* The still of the video sits under this as .video-block__thumb, downloaded at build time and
     served from our own origin - so the panel looks like a player again without YouTube learning
     the visitor's IP before the click. The gradient stays on top, now only dark enough to keep the
     play button and the title readable over an arbitrary frame. */
  background:
    radial-gradient(118% 88% at 50% 38%, rgba(196, 161, 72, 0.22) 0%, rgba(17, 16, 16, 0.30) 44%, rgba(17, 16, 16, 0.62) 100%),
    linear-gradient(162deg, rgba(38, 32, 15, 0.45) 0%, rgba(29, 29, 27, 0.55) 48%, rgba(17, 16, 16, 0.70) 100%);
  border: 0;
  color: var(--c-cream);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition-normal);
}
/* Under the gradient, filling the 16:9 frame. z-index 0 keeps it below the play button and title,
   which are in the normal flow of the same button. */
.video-block__thumb {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-block__facade:hover,
.video-block__facade:focus-visible {
  background:
    radial-gradient(118% 88% at 50% 38%, rgba(196, 161, 72, 0.34) 0%, rgba(196, 161, 72, 0.10) 44%, transparent 72%),
    linear-gradient(162deg, #2d2612 0%, var(--c-black-alt) 48%, var(--c-black) 100%);
}
.video-block__facade:hover .video-block__play,
.video-block__facade:focus-visible .video-block__play { color: var(--c-gold); transform: scale(1.06); }
.video-block__play {
  color: var(--c-gold-70);
  line-height: 0;
  transition: color var(--transition-normal), transform var(--transition-normal);
}
/* the SVG carries width/height attributes; CSS has to win over them or it renders at 68x48 */
.video-block__play svg { width: clamp(3.5rem, 8vw, 4.25rem); height: auto; display: block; }
.video-block__facade-text { display: flex; flex-direction: column; gap: var(--space-3xs); }
.video-block__facade-play { color: var(--c-gold); text-transform: uppercase; letter-spacing: var(--ls-heading); font-weight: 700; }
/* The title is the panel's focal point now that it is no longer repeated in the caption below. */
.video-block__facade-title {
  color: var(--c-cream);
  font-size: clamp(1.0625rem, 0.92rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
}
/* The privacy note has to be readable but must not compete with the title. */
.video-block__facade-note {
  color: var(--c-grey-70);
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.875rem);
  max-width: 32rem;
  opacity: 0.8;
  line-height: 1.45;
}
/* With the duplicate title gone the caption holds only the YouTube link, which belongs on the right. */
.video-block__caption { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .video-block__facade:hover .video-block__play,
  .video-block__facade:focus-visible .video-block__play { transform: none; }
}

/* catalogue on request: the newsletter form is gated until Ecomail has double opt-in (T-227) */
.site-footer__catalog-note {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 1.0625rem;
}
.form-note {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.85;
}

/* ============================================================
   RYTMUS SEKCI
   ============================================================ */
/* Two sections in a row sit on the same black, so 2x --space-section (198 px at 1440 px) reads as
   a gap rather than a break. Half the rhythm on each side of the seam keeps the breathing room
   without the hole. Measured across the built pages 2. 10. 2026. */
.section + .section { padding-top: calc(var(--space-section) / 2); }
.section:has(+ .section) { padding-bottom: calc(var(--space-section) / 2); }
/* The gap UNDER the page title came from the next block's padding, not from the H1's own margin, so
   it depended on which block the editor happened to put first: 80 px when that block was text
   (section--tight, 48 px padding) and 131 px when it was a gallery or a card list (section, 99 px).
   Measured on the built site: 71 pages at 80, 48 pages at 131 - and the split cuts THROUGH a single
   page type, so it was never a design decision. Czech kind="reference": 7 pages at 80, 5 at 131.
   One value for every page, the one most of them already had. Must sit after .section + .section
   above: both selectors weigh the same, so source order decides. */
.page-title + .section { padding-top: var(--space-l); }

/* REMOVED, and this is why. The rule here pulled the logo onto the content grid with
   padding-left: max(--space-m, (100vw - 1280px) / 2). On a 1920 px screen that is 320 px of padding
   taken out of a 1520 px header row, leaving about 1176 px for a logo, six menu items and six
   languages - which does not fit. initHeaderFit then did exactly what it is for and collapsed the
   row to the burger, so from 1360 px upwards the site had a MOBILE MENU ON A DESKTOP. The wider
   the screen, the worse: the padding grows with the viewport.
   Its own comment said "initHeaderFit switches to the burger if a row ever stops fitting" - true,
   and nobody checked whether the rule made it stop fitting ALWAYS. A fallback that always fires is
   not a fallback, it is the new behaviour.
   Aligning the logo with the content grid is worth less than having a menu. */