/* ========================================
   HORAL — style.css
   Grafická větev design-v4.
   Art direction vychází ze značkového SoMe toolkitu
   (složka inspiration): velká Cakra typografie,
   boxované nadpisy, modrá jako akcent na bílé ploše,
   pivní hora, chmel, klas a pečeť Horala.

   Struktura: fonty → design tokeny → reset → utility →
   typografické motivy → tlačítka → header → sekce → patička
======================================== */

/* ========================================
   FONTY
======================================== */
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Cakra";
  src: url("assets/fonts/Cakra-Normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ========================================
   DESIGN TOKENY

   Modrá škála je odečtená přímo ze značkového
   gradientu (assets/elements/horal_gradient.png):
   #024385 nahoře → #77B6E2 dole. Boxovaná modrá
   #1061A4 odpovídá barvě rámečků ve SoMe toolkitu.
======================================== */
:root {
  /* Značková modrá škála */
  --color-blue-900: #012f62;
  --color-blue-800: #024385;
  --color-blue-700: #1061a4;
  --color-blue-500: #2f8fcb;
  --color-blue-300: #77b6e2;
  --color-blue-100: #dfecf8;
  --color-blue-50: #f2f7fc;
  --color-white: #ffffff;

  /* Tmavá modročerná pro texty a tmavé plochy */
  --color-ink: #0b1b2e;
  --color-ink-dark: #061423;

  /* Značkový gradient — headliny, panely, CTA plochy.
     Světlé konce gradientů v textu jsou záměrně staženy tak, aby
     i nejsvětlejší část nadpisu držela kontrast podle WCAG AA pro
     velký text (min. 3:1) — plná --color-blue-300 by na bílé
     ploše spadla na cca 2,2:1. */
  --gradient-brand: linear-gradient(160deg, var(--color-blue-800) 0%, var(--color-blue-700) 45%, var(--color-blue-500) 100%);
  --gradient-text: linear-gradient(105deg, var(--color-blue-900) 0%, var(--color-blue-700) 45%, var(--color-blue-500) 100%);
  --gradient-text-light: linear-gradient(105deg, #ffffff 0%, #ffffff 45%, #b8dcf5 100%);

  /* Zlatá je jediný teplý akcent v jinak modro-bílé paletě —
     používá se pro oddělovače v claim pásu. */
  --color-gold: #a8841a;
  --color-gold-cta: #c9a227;

  /* Neutrální škála */
  --color-bg: var(--color-white);
  --color-bg-soft: #f6f8fb;
  --color-bg-tint: var(--color-blue-50);
  --color-border: #dde5ee;
  --color-text: var(--color-ink);
  --color-text-muted: #4b5b70;
  --color-text-muted-2: #55657a;
  --color-text-faint: #8496ab;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #cfe0f0;
  --color-text-on-dark-faint: #8fadcc;
  --color-border-on-dark: rgba(255, 255, 255, 0.18);

  /* Typografie */
  --font-heading: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cakra", "Switzer", sans-serif;
  /* Zpětně kompatibilní alias pro starší pravidla */
  --font-accent: var(--font-display);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* Display škála (Cakra) */
  --fs-display-sm: clamp(2rem, 5vw, 3.25rem);
  --fs-display: clamp(2.5rem, 6.5vw, 5rem);
  --fs-display-lg: clamp(3rem, 9vw, 7rem);
  --fs-display-xl: clamp(3.5rem, 11vw, 8.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Rozestupy */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;

  /* Šířky kontejneru */
  --container-width: 1240px;
  --container-padding: var(--space-5);

  /* Široké odsazení pro hlavičku a hero — obsah tam nedrží
     --container-width, ale sahá skoro k okrajům obrazovky, aby
     lícoval s claimem v hero. Spodní mez chrání úzké displeje,
     ať text nelepí na hranu. */
  --container-padding-wide: max(2.5vw, 18px);

  /* Radiusy — design-v4 je záměrně hranatý, boxový */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* Stíny */
  --shadow-sm: 0 4px 16px rgba(11, 27, 46, 0.06);
  --shadow-md: 0 14px 40px rgba(11, 27, 46, 0.09);
  --shadow-lg: 0 28px 70px rgba(11, 27, 46, 0.16);
  --shadow-blue: 0 18px 44px rgba(16, 97, 164, 0.22);

  /* Přechody */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;

  /* Vrstvy */
  --z-header: 100;
  --z-overlay: 200;

  --header-height: 76px;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: var(--lh-tight);
}

@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;
  }
}

/* ========================================
   UTILITY
======================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-blue-700);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: var(--space-4);
}

section[id] {
  scroll-margin-top: var(--header-height);
}

/* Focus stavy — viditelné pro klávesnici v celém webu */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-blue-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Tmavé sekce potřebují světlý focus ring, ať je vidět */
.b2b a:focus-visible,
.b2b button:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible {
  outline-color: var(--color-white);
}

/* ========================================
   TYPOGRAFICKÉ MOTIVY

   Tři stavební kameny art direction převzaté
   ze SoMe toolkitu:
   .display  — velká Cakra typografie
   .boxed    — text v barevném rámečku, po řádcích
   .tag      — drobný boxovaný štítek místo eyebrow
======================================== */

/* ---- Display: velká Cakra typografie ----

   DŮLEŽITÉ: Cakra je stylizovaný display font — jeho číslice se
   snadno zamění (1 připomíná 4, 0 připomíná O). Používá se proto
   výhradně na slovní nadpisy. Všechno, kde jsou čísla (parametry
   piv, fakta o zrání, claim pás), zůstává ve Switzeru. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-blue-800);
  overflow-wrap: break-word;
}

/* Gradient v textu — modrý přechod z brand manuálu.
   background-clip: text nemá plný fallback ve starších
   prohlížečích, proto zůstává barva textu jako podklad. */
.display--gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.display--light {
  color: var(--color-white);
}

.display--light-gradient {
  background: var(--gradient-text-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient se kreslí jen do padding boxu, takže české háčky a čárky
   sahající nad line box by se u těsného řádkování oříznuly. Horní
   padding jim udělá místo, záporný spodní margin vyrovná výšku zpět.

   .hero-line--display je dnes v plné bílé, ne v gradientu — odsazení
   si nechává kvůli kompozici: drží mezeru mezi logem Horal a claimem. */
.display--gradient,
.display--light-gradient,
.section-title.display,
.hero-line--display {
  padding-top: 0.24em;
  margin-bottom: -0.08em;
}

/* ---- Serifový nadpis: sekční nadpis v Cinzelu ----
   Alternativa k .display tam, kde má nadpis působit klidněji
   než dekorativní Cakra (Naše piva, Kde koupíte Horal, B2B
   spolupráce, FAQ). Nepoužívá se
   s třídou .display — nahrazuje ji, takže sem nepřechází ani
   gradient, ani verzálky.

   Cinzel sází malá písmena jako kapitálky, proto stejně jako
   u ostatních nadpisů drží kladné prostrkání, ne záporné. */
.heading-serif {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-display-sm);
  line-height: 1.12;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

/* ---- Boxed: text v barevném rámečku ----
   box-decoration-break: clone dá každému zalomenému
   řádku vlastní rámeček s vlastním okrajem — přesně
   ten „ragged" efekt naskládaných boxů z toolkitu.
   Text musí být inline, ne block. */
.boxed {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.1em 0.32em 0.16em;
  /* Vyrovnává vertikální padding, ať boxované řádky
     nedrží od sebe zbytečný odstup. */
  line-height: 1.28;
}

.boxed--blue {
  background: var(--color-blue-700);
  color: var(--color-white);
}

.boxed--white {
  background: var(--color-white);
  color: var(--color-blue-700);
}

.boxed--ink {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Boxovaný text uvnitř masky pro řádkové odhalení potřebuje
   uvnitř ořezu trochu vzduchu, jinak by se rámečky ořízly. */
.hero-mask,
.about-mask {
  padding-block: 0.12em;
  margin-block: -0.12em;
}

/* Štítek uvnitř masky musí zůstat inline-block, jinak by ho
   bloková .mask-inner roztáhla na celou šířku sloupce. */
.about-mask-inner.tag {
  display: inline-block;
}

/* ---- Tag: drobný boxovaný štítek ---- */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.35em 0.75em;
  margin-bottom: var(--space-4);
}

.tag--blue {
  background: var(--color-blue-700);
  color: var(--color-white);
}

.tag--white {
  background: var(--color-white);
  color: var(--color-blue-700);
}

.tag--ink {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---- Společné sekční prvky ---- */
.section-title {
  color: var(--color-blue-800);
  margin-bottom: var(--space-3);
}

/* Sekční nadpis v Cakra dostává gradient plošně —
   .display sám o sobě zůstává plnobarevný pro případy,
   kde je gradient nežádoucí (tmavé pozadí). */
.section-title.display {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Starší eyebrow zůstává kvůli podstránkám GDPR a cookies */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue-700);
  margin-bottom: var(--space-3);
}

.section-lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.section-header {
  margin-bottom: var(--space-9);
}

.section-header.center {
  text-align: center;
  margin-inline: auto;
}

.section-header.center .section-lead {
  margin-inline: auto;
}

/* ========================================
   TLAČÍTKA
   Hranatá, boxová — stejný jazyk jako .tag a .boxed.
======================================== */
/* Ostře hranatá, verzálková, s výrazným prostrkáním — stejný jazyk
   jako štítky a boxované nadpisy ve zbytku webu. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1.05rem 2rem;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.button:hover {
  transform: translateY(-2px);
}

/* Primární CTA — sytá tmavá modř, ať drží váhu i na bílé ploše */
.button-primary {
  background: var(--color-blue-900);
  color: var(--color-white);
}

.button-primary:hover {
  background: var(--color-blue-800);
  box-shadow: var(--shadow-blue);
}

/* Sekundární CTA — bílý box s tenkým modrým rámečkem, druhá
   polarita téhož motivu */
.button-secondary {
  background: var(--color-white);
  color: var(--color-blue-900);
  border: 1.5px solid var(--color-blue-700);
}

.button-secondary:hover {
  background: var(--color-blue-900);
  border-color: var(--color-blue-900);
  color: var(--color-white);
}

/* Na modrém a tmavém pozadí se polarita otáčí — bílý box,
   modrý text (druhá varianta rámečkového motivu). */
.hero .button-primary,
.b2b .button-primary {
  background: var(--color-white);
  color: var(--color-blue-800);
}

.hero .button-primary:hover,
.b2b .button-primary:hover {
  background: var(--color-blue-100);
  color: var(--color-blue-900);
}

.button-outline-light {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.75);
}

.button-outline-light:hover {
  background: var(--color-white);
  color: var(--color-blue-800);
  border-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
  }
}

/* ========================================
   HEADER & NAVIGACE
======================================== */
/* Hlavička a hero sahají k okrajům obrazovky, ne na
   --container-width — lícují tak s claimem v hero. */
.site-header .container,
.hero .container {
  max-width: none;
  padding-inline: var(--container-padding-wide);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-logo {
  display: flex;
  align-items: center;
  height: 40px;
}

.header-logo img {
  height: 100%;
  width: auto;
}

.nav-desktop {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Verzálky s výrazným prostrkáním, ve značkové modři — navigace
   drží stejný typografický jazyk jako tlačítka a štítky. */
.nav-link {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue-700);
  position: relative;
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}

/* Podtržení dojíždí zleva doprava — drobná ozvěna
   rámečkového motivu, jen v tenké lince. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 3px;
  background: var(--color-blue-700);
  transition: right var(--transition-base);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-blue-900);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header-cta {
  display: none;
  padding: 1rem 1.9rem;
}

/* Hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-white);
  z-index: var(--z-overlay);
  padding: var(--space-8) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.nav-mobile[data-open="true"] {
  transform: translateX(0);
}

.nav-mobile .nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

/* Mobilní menu sází položky v Cakře — ta je široká sama o sobě,
   takže prostrkání z desktopové navigace se tu vrací na minimum. */
.nav-mobile .nav-link {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blue-800);
}

.nav-mobile .header-cta {
  display: inline-flex;
  margin-top: var(--space-7);
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: block;
  }
  .nav-toggle,
  .nav-mobile {
    display: none;
  }
  .header-cta {
    display: inline-flex;
  }
}

/* ========================================
   HERO
   Značkový modrý gradient, obří Cakra claim,
   pivní splash u spodní vlnité hrany.
======================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--space-9);
  padding-bottom: var(--space-10);
  /* Záložní výplň za vlnitým clip-path .hero-bg — bez ní by
     v prohlubních vlny prosvítalo bílé pozadí stránky. */
  background: var(--color-blue-800);
}

@media (min-width: 1024px) {
  .hero {
    min-height: 90svh;
    padding-bottom: var(--space-11);
  }
}

@media (min-width: 1024px) and (min-height: 700px) {
  .hero {
    min-height: 95svh;
  }
}

/* Nízké desktopové a notebookové viewporty — hero smí zabrat celou
   výšku obrazovky a odsazení se zmenší, ať zbyde víc místa nad i
   pod vizuálem. */
@media (min-width: 1024px) and (max-height: 920px) {
  .hero {
    min-height: calc(100svh + 100px);
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .hero-content {
    transform: translateY(-90px);
  }
}

@media (min-width: 1024px) and (min-height: 921px) {
  .hero-content {
    transform: translateY(-90px);
  }
}

/* Značkový modrý gradient. Spodní hrana je rovná — dřívější vlnitý
   clip-path byl odstraněn, sekce navazuje na claim pás přímým řezem. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 78% 8%, rgba(119, 182, 226, 0.45), transparent 62%),
    linear-gradient(168deg, var(--color-blue-800) 0%, var(--color-blue-700) 48%, var(--color-blue-900) 100%);
}

/* Ztmavující scrim NAD splash obrázkem — drží čitelnost textu
   i tam, kde by jinak seděl přímo na jasném pivu a pěně. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(1, 23, 50, 0.62) 0%, rgba(1, 23, 50, 0.3) 34%, transparent 60%);
}

@media (min-width: 1024px) {
  .hero-scrim {
    background: linear-gradient(100deg, rgba(1, 23, 50, 0.5) 0%, rgba(1, 23, 50, 0.22) 42%, transparent 64%);
  }
}

/* Pečeť Horala — velký značkový podtisk v pravém horním rohu.
   z-index 0 ji drží pod rozlitým pivem (z-index 1), takže plechovka
   jde přes ni, ne naopak. Vidět je jen tam, kde je splash průhledný.
   Záporné odsazení ji vysune za horní a pravou hranu sekce, kde ji
   overflow: hidden ořízne — pečeť tak vyrůstá z rohu. */
.hero-seal {
  position: absolute;
  z-index: 0;
  top: -60px;
  right: -60px;
  width: clamp(320px, 40vw, 540px);
  height: auto;
  opacity: 0.15;
  pointer-events: none;
}

/* Na úzkých displejích by pečeť při odsazení 60 px přetekla přes
   levý okraj — menší velikost i odsazení ji udrží v ploše. */
@media (max-width: 600px) {
  .hero-seal {
    top: 24px;
    right: 24px;
    width: 240px;
  }
}

/* ========================================
   BUBLINKY V HERO
   Převzato z větve design-v3 (jediná přenesená část jejího hera).

   Ořezané fotografie pivních kapek. Stoupají od spodní hrany vzhůru;
   startují pod sekcí, takže se vynořují zpod hladiny rozlitého piva.

   Osmnáct kusů v rozmezí 6 až 18 px. Drobné a početné vypadají jako
   pivo ve sklenici — velké a řídké jako plovoucí koule.

   Každá bublinka má vlastní výšku dráhy (--rise) i šířku bočního kmitu
   (--sway), takže nemíří všechny do stejné výšky a nevlní se ve stejném
   rytmu: jedna dojde nad claim, jiná zanikne v půli cesty. Rozdílná
   zpoždění (0 až 15 s) brání tomu, aby stoupaly v zástupu.

   Leží nad scrimem (z-index 2) a pod textem (z-index 3). Pod scrimem by
   je jeho ztmavující gradient stáhl do šeda — rgba(1,23,50,0.5) vezme
   zlaté fotce zhruba polovinu jasu.

   Výška se řídí proměnnou, šířka se dopočítá z poměru stran fotky
   (width: auto), takže se nic nedeformuje.
======================================== */
.hero-bubble {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  height: var(--size);
  width: auto;
  pointer-events: none;
  z-index: 2;
  /* Cílová viditelnost bublinek. Nejde nastavit prostým opacity na
     elementu — animace hero-bubble-rise průhlednost sama řídí a
     přebila by ji. Proměnnou proto přebírají přímo její keyframes,
     takže se viditelnost ladí na jednom místě tady. */
  --bubble-opacity: 0.6;
  opacity: 0;
  /* Jemná zlatá záře odlepí bublinku od tmavě modrého pozadí a spojí ji
     opticky s rozlitým pivem pod ní. */
  filter: drop-shadow(0 0 4px rgba(252, 222, 135, 0.45));
  animation: hero-bubble-rise var(--duration) var(--delay) linear infinite;
}

/*                   velikost       pozice zleva  výška dráhy    boční kmit  rychlost        zpoždění */
.hero-bubble--1  { --size: 14px; --x: 4%;  --rise: -78svh; --sway: 9px;  --duration: 13s;   --delay: 0s; }
.hero-bubble--2  { --size: 9px;  --x: 11%; --rise: -55svh; --sway: 6px;  --duration: 18s;   --delay: 5.2s; }
.hero-bubble--3  { --size: 17px; --x: 18%; --rise: -88svh; --sway: 12px; --duration: 11s;   --delay: 2.4s; }
.hero-bubble--4  { --size: 7px;  --x: 25%; --rise: -46svh; --sway: 4px;  --duration: 21s;   --delay: 9.8s; }
.hero-bubble--5  { --size: 12px; --x: 31%; --rise: -70svh; --sway: 8px;  --duration: 15s;   --delay: 3.1s; }
.hero-bubble--6  { --size: 15px; --x: 38%; --rise: -82svh; --sway: 11px; --duration: 12.5s; --delay: 7.6s; }
.hero-bubble--7  { --size: 8px;  --x: 44%; --rise: -52svh; --sway: 5px;  --duration: 19s;   --delay: 1.3s; }
.hero-bubble--8  { --size: 11px; --x: 51%; --rise: -66svh; --sway: 7px;  --duration: 16s;   --delay: 12.4s; }
.hero-bubble--9  { --size: 16px; --x: 57%; --rise: -85svh; --sway: 13px; --duration: 11.5s; --delay: 4.7s; }
.hero-bubble--10 { --size: 6px;  --x: 63%; --rise: -42svh; --sway: 3px;  --duration: 22s;   --delay: 8.2s; }
.hero-bubble--11 { --size: 13px; --x: 69%; --rise: -74svh; --sway: 9px;  --duration: 14s;   --delay: 0.8s; }
.hero-bubble--12 { --size: 10px; --x: 75%; --rise: -60svh; --sway: 6px;  --duration: 17.5s; --delay: 10.6s; }
.hero-bubble--13 { --size: 18px; --x: 81%; --rise: -90svh; --sway: 14px; --duration: 10.5s; --delay: 6.3s; }
.hero-bubble--14 { --size: 7px;  --x: 87%; --rise: -48svh; --sway: 4px;  --duration: 20s;   --delay: 2.9s; }
.hero-bubble--15 { --size: 12px; --x: 93%; --rise: -68svh; --sway: 8px;  --duration: 15.5s; --delay: 14.1s; }
.hero-bubble--16 { --size: 9px;  --x: 8%;  --rise: -58svh; --sway: 5px;  --duration: 18.5s; --delay: 11.7s; }
.hero-bubble--17 { --size: 15px; --x: 47%; --rise: -80svh; --sway: 10px; --duration: 12s;   --delay: 15.3s; }
.hero-bubble--18 { --size: 10px; --x: 66%; --rise: -63svh; --sway: 6px;  --duration: 16.5s; --delay: 13.2s; }

/* Na mobilu je hero úzké a nízké — plných osmnáct by na něm působilo
   přeplácaně. Zbylých jedenáct drží stejný rytmus. */
@media (max-width: 767.98px) {
  .hero-bubble--2,
  .hero-bubble--5,
  .hero-bubble--8,
  .hero-bubble--11,
  .hero-bubble--14,
  .hero-bubble--16,
  .hero-bubble--18 {
    display: none;
  }
}

/* Dráha se počítá z --rise a --sway, takže jedny keyframes obslouží
   celou skupinu, každý kus po vlastní křivce. Nesouměrné násobky kmitu
   (1 → −0,8 → 0,9 → −0,3) dělají vlnění nepravidelným místo
   pravidelného kyvadla. */
@keyframes hero-bubble-rise {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  9% {
    opacity: var(--bubble-opacity);
  }
  25% {
    transform: translate(calc(var(--sway) * 1), calc(var(--rise) * 0.25)) scale(0.75);
  }
  50% {
    transform: translate(calc(var(--sway) * -0.8), calc(var(--rise) * 0.5)) scale(1);
  }
  75% {
    transform: translate(calc(var(--sway) * 0.9), calc(var(--rise) * 0.75)) scale(1.1);
  }
  /* Mizení je krátké a až na konci dráhy. Pozvolné blednutí přes
     čtvrtinu cesty nechává na modrém pozadí dlouho viset polopůhlednou
     bublinu, která vypadá jako šedý flek, ne jako pivo. */
  91% {
    /* Mírně pod vrcholem, aby bublinka před zánikem přirozeně slábla. */
    opacity: calc(var(--bubble-opacity) * 0.9);
  }
  100% {
    transform: translate(calc(var(--sway) * -0.3), var(--rise)) scale(1.2);
    opacity: 0;
  }
}

.hero-inner {
  /* Záměrně bez position/z-index — .hero-splash-wrap uvnitř potřebuje
     najít nejbližšího pozicovaného předka až v .hero. */
  display: grid;
  gap: var(--space-8);
  width: 100%;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero-content {
    text-align: left;
    margin-inline: 0;
    max-width: none;
  }
}

/* Maska pro odhalení textu po řádcích — .hero-mask ořízne obsah,
   .hero-mask-inner se posouvá zevnitř nahoru (řídí GSAP v script.js). */
.hero-mask {
  display: block;
  overflow: hidden;
}

.hero-mask-inner {
  display: block;
}

/* Nad claimem stojí ještě logo Horal, které potřebuje
   od hlavičky dost vzduchu. */
.hero-claim {
  margin-top: 90px;
  margin-bottom: var(--space-6);
}

.hero-line {
  display: block;
  color: var(--color-white);
}

/* Logo Horal nahrazuje textový claim „Horal." v hero. */
.hero-claim-logo {
  display: block;
  width: auto;
  height: clamp(1.5rem, 2.6vw, 2.3rem);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .hero-claim-logo {
    margin-left: 0;
  }
}

/* Hlavní claim — obří Cakra, gradient z bílé do světle modré.
   Přesně kompozice z 9x16 formátu SoMe toolkitu. */
.hero-line--display {
  font-family: var(--font-display);
  font-weight: 400;
  /* Claim je dvouřádkový a vedle plechovky potřebuje vzduch,
     spodní mez drží čitelnost na malých displejích. */
  font-size: max(3.25rem, 10.5vw);
  /* Řádkování nesmí klesnout pod 1,08: čárka za „MŮŽEŠ," sahá 0,19em
     pod účaří a háček nad „Í" na druhém řádku 0,88em nad ně, takže
     při těsnějším řádkování se oba znaky překrývaly. 1,14 nechává
     mezi nimi vzduch i při nejmenší velikosti písma na mobilu. */
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-top: var(--space-5);
  /* Plná bílá bez přechodu — na modré ploše drží claim nejsilnější
     kontrast a nekonkuruje barevnosti splashe pod ním. */
  color: var(--color-white);
}

.hero-lead {
  color: var(--color-text-on-dark);
  font-size: var(--fs-md);
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .hero-lead {
    margin-inline: 0;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-actions {
    justify-content: flex-start;
  }
}

/* Rozlité pivo s plechovkou — jeden hotový obrázek, ukotvený na celou
   šířku dole. Plechovka je v obrázku přirozeně napravo od středu. */
.hero-splash-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 0;
}

@media (min-width: 1024px) {
  .hero-splash-wrap {
    position: absolute;
    inset: auto 0 0 0;
  }
}

/* Pod 1024 px není splash absolutní, ale stojí v toku — dědí tím
   spodní odsazení sekce a vznášel by se v modré ploše s mezerou
   pod sebou. Nulové odsazení ho položí až na hranu sekce, kde
   navazuje claim pás. */
@media (max-width: 1023.98px) {
  .hero {
    padding-bottom: 0;
  }
}

/* Splash sedí uvnitř .container jako druhá buňka gridu, takže dědí
   i jeho boční odsazení. Záporný margin ho vytáhne zpátky ke krajům
   obrazovky. */
@media (max-width: 1023.98px) {
  .hero-splash-wrap {
    width: auto;
    margin-inline: calc(var(--container-padding-wide) * -1);
  }
}

.hero-splash {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
}

/* Bez animace by bublinky zůstaly viset na spodní hraně hero bez
   zjevného důvodu — a protože nic nesdělují, je čistší je vůbec
   nezobrazit. (Samotné `animation: none` by je navíc nechalo na
   výchozím opacity: 0, tedy neviditelné, ale pořád v layoutu.) */
@media (prefers-reduced-motion: reduce) {
  .hero-bubble {
    display: none;
  }
}

/* Převrácené „N" v claimu je grafický prvek značky ze SoMe toolkitu.
   Řeší se přímo v textu cyrilským znakem И (U+0418), pro který má
   Cakra hotový glyf — proto k němu není potřeba žádné CSS. */

/* ========================================
   CLAIM PÁS
   Běžící (marquee) pás mezi hero a O Horalovi.
======================================== */
.claim-strip {
  position: relative;
  height: 58px;
  background: var(--color-blue-700);
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .claim-strip {
    height: 76px;
  }
}

.claim-marquee {
  width: 100%;
  overflow: hidden;
}

/* Track obsahuje dvě identické skupiny vedle sebe. Animace posune
   track přesně o šířku jedné skupiny (-50 %), takže se smyčka
   zopakuje bez trhnutí. Každá skupina obsahuje frázi 3× za sebou,
   ať je track vždy širší než jakýkoliv běžný viewport. */
.claim-marquee-track {
  display: flex;
  width: max-content;
  animation: claim-marquee-scroll 34s linear infinite;
}

.claim-marquee-group {
  display: flex;
  flex-shrink: 0;
}

/* Switzer, ne Cakra — pás obsahuje číslo („AŽ 50 DNÍ ZRÁNÍ"). */
.claim-marquee-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .claim-marquee-set {
    font-size: 1.1875rem;
  }
}

/* Zlatý oddělovač — jediný teplý akcent v jinak modro-bílé paletě,
   drží pás v rytmu bez toho, aby soupeřil s textem. */
.claim-marquee-dot {
  color: var(--color-gold-cta);
  margin-inline: 22px;
}

@keyframes claim-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .claim-marquee-track {
    animation: none;
  }
}

/* ========================================
   O HORALOVI
   Bílá plocha, boxovaný nadpis, dvouvrstvý vizuál
   skály a pivní hory.
======================================== */
.about {
  position: relative;
  padding-block: var(--space-11);
  overflow: hidden;
  background: var(--color-white);
}

/* Velmi jemná modrá textura v pozadí sekce — jen náznak plochy,
   ať bílá nepůsobí prázdně. */
.about::before {
  content: "";
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(119, 182, 226, 0.13), transparent 70%);
  pointer-events: none;
}

.about-inner {
  display: grid;
  gap: var(--space-8);
  position: relative;
  z-index: 2;
  grid-template-areas:
    "text"
    "visual";
}

@media (min-width: 1024px) {
  .about-inner {
    grid-template-columns: 45fr 55fr;
    grid-template-areas: "text visual";
    align-items: center;
    gap: var(--space-9) var(--space-10);
  }
}

/* Maska pro odhalení eyebrow a nadpisu po řádcích
   (viz initAboutReveal v script.js). */
.about-mask {
  display: block;
  overflow: hidden;
}

.about-mask-inner {
  display: block;
}

.about-text {
  grid-area: text;
}

.about-eyebrow {
  display: block;
}

.about-eyebrow .tag {
  margin-bottom: 0;
}

/* Boxovaný nadpis — každý řádek vlastní modrý rámeček. */
/* Řádkování drží rozestup mezi rámečky. Nadpis je rozdělený do dvou
   masek (kvůli odhalení po řádcích) a druhá se navíc sama zalomí —
   rozestup proto musí být stejný mezi maskami i uvnitř nich. Odsazení
   masky, které se u boxovaného textu jinde stará o to, aby ho ořez
   nezasáhl, by tady mezi maskami přidalo 7 px navíc, takže se ruší;
   při tomhle řádkování se rámeček do masky vejde i bez něj. */
.about-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-white);
  margin-block: var(--space-5) var(--space-6);
}

.about-title .about-mask {
  padding-block: 0;
  margin-block: 0;
}

/* Optické vycentrování textu v rámečku. Rámeček se u inline elementu
   kreslí podle metrik písma, ne podle skutečné výšky písmen: nad
   verzálkami zbývá jen prostor po akcentech, pod nimi celý prostor
   po dolních dotažnicích, které Cakra ve verzálkách nemá. Text proto
   vychází vysoko a odsazení ho posouvá dolů.

   Součet obou hodnot zůstává 0,26em jako u obecného .boxed, takže se
   nemění výška rámečku ani rozestup mezi řádky. */
.about-title .boxed {
  padding-top: 0.185em;
  padding-bottom: 0.075em;
}

.about-title-line {
  /* Rámeček se má obtáhnout jen kolem textu, ne kolem celé šířky
     sloupce — proto blokový řádek s textem jako inline obsahem. */
  text-align: left;
}

.about-lead {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  max-width: 46ch;
}

/* ---- Vizuál: skála → hora z piva ----
   Obě vrstvy leží přesně přes sebe ve společném wrapperu se
   sdíleným aspect-ratio; object-fit: contain zajistí, že se ani
   jedna nedeformuje ani neořízne. */
.about-visual {
  grid-area: visual;
  position: relative;
  display: flex;
  align-items: center;
}

/* Poměr stran musí sedět s obrázky (obě vrstvy mají 1451 × 1084).
   Při nesouladu by je object-fit: contain zmenšil a nechal kolem
   nich prázdné pruhy. */
.about-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1451 / 1084;
}

.about-visual-base,
.about-visual-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-visual-base {
  z-index: 1;
}

.about-visual-reveal {
  z-index: 2;
  /* Výchozí (bez JS/GSAP nebo při prefers-reduced-motion) = celá
     vidět. Masku pro měkké odhalení odspodu nastavuje script.js
     (initAboutReveal) inline, jen na dobu vstupní animace. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Motivy chmele a klasu byly ze sekce odstraněny — vizuál skály
   a pivní hory tu stojí sám. Chmel zůstává jen jako podtisk sekce
   Kde koupíte (viz .where-to-buy-motif). */

/* ========================================
   PRODUKTY
   Čtyři velké střídavé bloky. Obrazová část je
   modrý gradientový panel se značkovým motivem
   v pozadí — barvu nese obal, ne plocha stránky.
======================================== */
.products {
  position: relative;
  padding-block: var(--space-11);
  background: var(--color-bg-soft);
  overflow: hidden;
}

/* Nadpis sedí těsně nad produktovými kartami.
   Na mobilu je karta pod nadpisem celou šířkou a plechovka
   nepřesahuje, proto tu musí zůstat kladná mezera. */
.products .section-header {
  margin-bottom: var(--space-3);
}

/* Od tabletu je plechovka vedle textu a přesahuje nad kartu —
   optickou mezeru pod nadpisem drží ona, ne horní hrana karty,
   takže smí být záporná. */
@media (min-width: 900px) {
  .products .section-header {
    margin-bottom: -14px;
  }
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 1180px;
  margin-inline: auto;
}

.product-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

@media (min-width: 900px) {
  .product-card {
    flex-direction: row;
    align-items: stretch;
  }
  .product-card.is-reverse {
    flex-direction: row-reverse;
  }
}

/* ---- Obrazový panel: světlý značkový podklad ---- */
.product-card-image {
  position: relative;
  flex: none;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
}

@media (min-width: 900px) {
  .product-card-image {
    width: 38%;
    min-height: 480px;
  }
}

/* Podkladová grafika panelu — hotové značkové vizuály převzaté
   z verze design-v3: světle modrý klas nebo chmel u vnějšího okraje
   s přechodem do bílé směrem k textu.

   Každý produkt má vlastní soubor včetně zrcadlové verze pro bloky
   2 a 4 (motiv je v nich u pravého okraje). Neotáčí se transformem —
   ten by převrátil i světlo a stíny uvnitř motivu.

   Poměr stran grafiky (1400 × 728) je širší než panel, takže se
   ořezává. Ukotvení u vnějšího okraje karty drží motiv v záběru,
   ořezává se světlá část, kde stejně nic není. */
.product-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  /* Poslední třetina panelu se vytrácí do bílé. Světlý konec grafiky
     má odstín 253, textová část karty čistou bílou — bez ztracení by
     mezi nimi vznikla slabá svislá hrana. Zároveň to pojistí ořez:
     výřez se s výškou karty posouvá a bez ztracení by se motiv mohl
     na hraně useknout. */
  -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%);
  mask-image: linear-gradient(to right, #000 68%, transparent 100%);
}

/* U zrcadlených bloků je panel vpravo, takže se do bílé vytrácí
   opačná strana. */
.product-card.is-reverse .product-card-image::before {
  background-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 68%, transparent 100%);
  mask-image: linear-gradient(to left, #000 68%, transparent 100%);
}

.product-card:nth-child(1) .product-card-image::before {
  background-image: url("assets/images/optimized/card-bg-premium.jpg");
}

.product-card:nth-child(2) .product-card-image::before {
  background-image: url("assets/images/optimized/card-bg-ipa.jpg");
}

.product-card:nth-child(3) .product-card-image::before {
  background-image: url("assets/images/optimized/card-bg-ale.jpg");
}

.product-card:nth-child(4) .product-card-image::before {
  background-image: url("assets/images/optimized/card-bg-bock.jpg");
}

/* Krátký stín kolem plechovky. Na světlém podkladu by tmavé
   ztmavení pod ní působilo špinavě, proto ho nese přímo obrázek.
   Delší stín by se rozlil pod spodní hranu panelu a plechovka by
   vypadala, že z něj vystupuje i dolů — vystupovat má jen nahoře. */
.product-card-image img {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(22, 35, 63, 0.2));
}

@media (max-width: 899.98px) {
  .product-card-image img {
    max-height: 280px;
  }
}

/* ---- Plechovka přesahuje z modrého panelu ----
   Karta i panel musí pustit obsah ven (overflow), takže zaoblení
   rohů přebírá panel sám a značkový motiv v jeho pozadí dostane
   stejný rádius, aby přes hranu nepřetekl. */
@media (min-width: 900px) {
  .product-card,
  .product-card .product-card-image {
    overflow: visible;
  }

  /* Zaoblují se jen rohy na vnějším okraji karty — u sudých bloků
     stojí panel vpravo, takže se rádius zrcadlí. */
  .product-card .product-card-image {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .product-card.is-reverse .product-card-image {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .product-card .product-card-image::before {
    border-radius: inherit;
    overflow: hidden;
  }

  /* Rozestup mezi bloky musí pojmout přesah plechovky (120 px),
     jinak by zasahovala do textu předchozího bloku. */
  .product-list {
    gap: 10rem;
  }

  /* První blok potřebuje stejný odstup i shora, ať plechovka
     nenarazí do nadpisu sekce. */
  .product-list > .product-card:first-child {
    margin-top: var(--space-11);
  }

  /* Plechovka je vyjmutá z toku panelu. V toku by ho totiž svou
     výškou roztahovala — panel se přizpůsobuje obsahu a procentní
     výška obrázku by se zase odvíjela od něj. Takhle si panel drží
     výšku podle textu a plechovka může přerůst přes jeho horní hranu. */
  .product-card .product-card-image img {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: none;
    max-height: none;
    height: calc(100% + 120px);
  }
}

/* ---- Textová část ---- */
.product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-7) var(--space-6) var(--space-8);
}

@media (min-width: 900px) {
  .product-body {
    text-align: left;
    justify-content: center;
    padding: var(--space-9) var(--space-8);
  }
}

.product-body .tag {
  align-self: center;
  margin-bottom: var(--space-3);
}

@media (min-width: 900px) {
  .product-body .tag {
    align-self: flex-start;
  }
}

/* Cinzel — stejně jako ostatní nadpisy úrovně h3 na webu */
.product-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-blue-800);
  margin-bottom: var(--space-3);
}

.product-desc {
  color: var(--color-text-muted-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 62ch;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .product-desc {
    margin-inline: 0;
  }
}

/* Parametry jako čtyři jasné sloupce s výraznou hodnotou */
.product-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-blue-100);
  max-width: 460px;
  margin-inline: auto;
}

@media (min-width: 560px) {
  .product-benefits {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  .product-benefits {
    margin-inline: 0;
    max-width: 520px;
  }
}

.product-benefit-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Cinzel, ne Cakra — parametry piv musí být jednoznačně čitelné,
   u Cakry by se 1 pletla se 4 a 0 s O. */
.product-benefit-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  /* Cinzel sází malá písmena jako kapitálky, takže při stejném
     stupni působí drobněji než Switzer — o něco větší, aby hodnota
     nesplývala s popiskem nad sebou. */
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--color-blue-700);
  margin-top: var(--space-1);
}

/* ----------------------------------------
   Pořadí obsahu karty na mobilu a tabletu

   Požadované pořadí je:
   štítek → název → obrázek → popis → parametry

   V HTML je obrázek sourozencem celého .product-body,
   takže ho mezi jeho děti nejde vložit samotnou
   vlastností order. Proto se .product-body pod 900 px
   chová jako průhledný obal (display: contents) — jeho
   děti se stanou přímými položkami mřížky karty a dají
   se seřadit. Desktopové rozložení zůstává nedotčené.
---------------------------------------- */
@media (max-width: 899.98px) {
  .product-card {
    display: grid;
    gap: 0;
    text-align: center;
    padding: 0;
  }

  .product-body {
    display: contents;
  }

  .product-card .tag {
    order: 1;
    justify-self: center;
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
  }

  .product-card .product-name {
    order: 2;
    padding-inline: var(--space-5);
    margin-bottom: var(--space-6);
  }

  .product-card-image {
    order: 3;
  }

  .product-card .product-desc {
    order: 4;
    padding-inline: var(--space-5);
    margin-top: var(--space-6);
  }

  .product-card .product-benefits {
    order: 5;
    margin-bottom: var(--space-7);
  }
}

/* ========================================
   CHVÍLI ZPOMAL (MANIFEST)
======================================== */
/* Fotografie z hor přes celou šířku sekce, na ní samotný claim. */
.manifest {
  position: relative;
  background-color: var(--color-white);
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.manifest .container {
  display: flex;
  flex-direction: column;
}

/* Batoh s plechovkou je na snímku vlevo, otevřené údolí vpravo —
   výřez ukotvený na 32 % udrží obojí v záběru. Fotka je hodně
   široká (2057 × 764), takže čím vyšší sekce, tím víc se po
   stranách ořízne; proto spíš nižší pás než vysoký blok. */
.manifest--photo {
  background-image: url("assets/images/pivohoral-taska-hory.jpg");
  background-position: 32% center;
  padding-block: var(--space-9);
  /* Výška navázaná na poměr fotky (2055 : 765, tedy 37,2 % šířky).
     Při nižší sekci cover ořezával svisle a přišly o špičky hor.
     Strop 640 px drží pás rozumně vysoký i na širokém monitoru. */
  min-height: clamp(480px, 37.2vw, 640px);
}

/* Velmi jemné krémové krytí jen v pravé části, kde leží claim.
   Zbytek fotky se ho vůbec netýká — hory, batoh i západ slunce
   zůstávají nedotčené. */
.manifest-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(255, 251, 242, 0.4) 0%,
    rgba(255, 251, 242, 0.34) 22%,
    rgba(255, 251, 242, 0.2) 38%,
    rgba(255, 251, 242, 0.07) 50%,
    rgba(255, 251, 242, 0) 62%
  );
}

/* Claim sedí v pravé polovině, kde je snímek otevřený, a lícuje
   pravým okrajem — oba boxované řádky tak končí ve stejné svislici.
   Šířku drží obsah (max-content), ne pevná hodnota, aby delší řádek
   nikdy nezalomil box na dva. */
.manifest-photo-text {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  text-align: right;
}

/* Bílý text v modrých boxech — barvu i podklad nese .boxed--blue
   na jednotlivých řádcích, stejně jako nadpis v sekci O Horalovi.

   Řádky jsou položky flexu, ne inline text se zalomením: jen tak jde
   mezera mezi boxy nastavit napevno (gap), nezávisle na řádkování. */
.slowdown-signature {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  /* Spodní mez je stažená níž než zbytek škály — delší řádek by se
     jinak na úzkých displejích nevešel do kontejneru a box by se
     zalomil na dva. */
  font-size: clamp(2.3rem, 8vw, 4.5rem);
}

/* Oba boxy musí být stejně vysoké a písmena v nich opticky na středu.
   Cakra sází verzálky, takže pod účařím zůstává prázdný prostor pro
   dolní dotažnice — symetrický padding by text vytlačil nad střed.
   Hodnoty jsou doměřené na řádku bez diakritiky („HORAL."), který
   ukazuje čistou výšku verzálek. Na druhém řádku sahá diakritika
   výš, což je správně: zarovnané mají být verzálky, ne háčky. */
.manifest-photo-text .boxed {
  display: block;
  padding: 0.22em 0.3em 0.1em;
  line-height: 1;
}

/* Na mobilu není volná plocha po stranách — závoj proto pokrývá
   celou šířku. Zarovnání claimu doprava zůstává stejné jako na
   desktopu, boxy se do kontejneru vejdou i na úzkých displejích. */
@media (max-width: 767.98px) {
  .manifest--photo {
    /* Bez minimální výšky vyjde pás sotva 190 px a z fotky nezbude
       skoro nic. Výřez ukotvený víc doprava drží claim nad světlým
       údolím, ne nad tmavým batohem. */
    min-height: 340px;
    background-position: 62% center;
  }

  .manifest-photo-scrim {
    background: linear-gradient(
      to bottom,
      rgba(255, 251, 242, 0.58) 0%,
      rgba(255, 251, 242, 0.54) 100%
    );
  }
}

/* ========================================
   KDE KOUPÍTE
======================================== */
.where-to-buy {
  position: relative;
  padding-block: var(--space-11);
  background: var(--color-bg-tint);
  overflow: hidden;
}

/* Velký chmel jako podtisk levé části plochy. Vysunutý za levý
   i spodní okraj sekce (overflow: hidden ho ořízne), aby co největší
   část ležela mimo bílé karty a byla vidět. Nízké krytí drží motiv
   v pozadí — karty a text nad ním zůstávají plně čitelné.

   Původní motif-chmel.png je tmavě modrý (rgb 0, 63, 129) a při
   nízkém krytí z něj vycházel šedomodrý flek. Sekce proto používá
   přebarvenou kopii motif-chmel-blue.png — stejný tvar i alfa, jen
   silueta ve značkové --color-blue-300.

   Krytí je jediné číslo, kterým se motiv ladí. Výsledné tóny na
   pozadí sekce (--color-blue-50):
     0,25 → rgb(211, 231, 246)   sotva znatelný
     0,35 → rgb(199, 224, 243)   podtisk, drží se vzadu
     0,50 → rgb(181, 215, 239)   výrazný, začne soupeřit s kartami */
.where-to-buy-motif {
  position: absolute;
  left: -60px;
  bottom: -70px;
  width: clamp(360px, 48vw, 630px);
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Na úzkých displejích menší, ať z něj po oříznutí zbyde čitelný
   tvar a nezaplní celou plochu pod kartami. */
@media (max-width: 600px) {
  .where-to-buy-motif {
    left: -50px;
    bottom: -50px;
    width: 300px;
  }
}

.retailer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .retailer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.retailer-card {
  background: var(--color-white);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 134px;
}

/* ---- Loga prodejců v původních firemních barvách ----
   Vkládají se jako běžný obrázek, bez barevných filtrů a masek.

   Loga mají hodně rozdílné poměry stran (od 3,7:1 po 1:1), takže
   každé dostane vlastní výšku. Cílem je stejná optická plocha, ne
   stejný rozměr. */
/* Rozměry jsou horní mez, ne pevná hodnota — na úzkých kartách se
   logo zmenší, místo aby přeteklo přes okraj. */
.retailer-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.retailer-logo--tesco {
  max-height: 46px;
}

.retailer-logo--albert {
  max-height: 62px;
}

.retailer-logo--kosik {
  max-height: 46px;
}

.retailer-logo--makro {
  max-height: 46px;
}

/* Barevné JIP je čtvercové (text GASTROMAGAZÍN pod oválem, ne vedle
   něj), takže při stejné výšce jako ostatní působí drobně. */
.retailer-logo--jip {
  max-height: 86px;
}

.retailer-logo--orlen {
  max-height: 68px;
}

.where-to-buy-note {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: var(--space-7);
  font-size: var(--fs-sm);
  color: var(--color-text-muted-2);
}

/* ========================================
   B2B
   Druhý brandový modrý blok webu.
======================================== */
.b2b {
  position: relative;
  padding-block: var(--space-11);
  background: var(--gradient-brand);
  color: var(--color-white);
  overflow: hidden;
}

/* Pečeť jako klidný vodoznak — celá v ploše sekce, ne useknutá
   hranou, ať nepůsobí jako chyba ořezu. */
.b2b-seal {
  position: absolute;
  right: 46%;
  bottom: var(--space-6);
  width: clamp(120px, 14vw, 200px);
  height: auto;
  opacity: 0.14;
  pointer-events: none;
}

@media (max-width: 899.98px) {
  .b2b-seal {
    right: var(--space-5);
    bottom: auto;
    top: var(--space-5);
    width: 84px;
  }
}

.b2b-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .b2b-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
  }
}

.b2b-title {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Nadpis na modrém pozadí je v Cinzelu (.heading-serif) a plné bílé —
   gradient z .display by tu zanikl. */

.b2b-lead {
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

/* Informační štítky — bez vzhledu tlačítka nebo filtru. */
.b2b-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.b2b-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.35);
  padding: 0.35em 0.8em;
}

.b2b-card {
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
}

.b2b-card dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-top: var(--space-5);
}

.b2b-card dt:first-child {
  margin-top: 0;
}

.b2b-card dd {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-ink);
}

.b2b-card a:not(.button) {
  color: var(--color-blue-700);
  text-decoration: none;
}

.b2b-card a:not(.button):hover {
  text-decoration: underline;
}

.b2b-actions {
  margin-top: var(--space-7);
}

/* Grid položky se ve výchozím stavu nesmrsknou pod šířku svého obsahu.
   Bez tohoto se karta roztáhla podle nejširšího prvku uvnitř a přetekla
   přes okraj sekce, kde ji ořízl overflow: hidden. */
.b2b-inner > * {
  min-width: 0;
}

/* Karta je bílá — CTA uvnitř proto zůstává plné modré,
   ne obrácená varianta pro modré pozadí sekce. */
.b2b-card .button-primary {
  background: var(--color-blue-900);
  color: var(--color-white);
  width: 100%;
  /* .button má globálně white-space: nowrap. Tenhle popisek je delší
     než karta na mobilu, takže tady zalomení povolíme — nezlomitelná
     mezera přitom drží „o spolupráci" pohromadě. */
  white-space: normal;
  text-align: center;
}

.b2b-card .button-primary:hover {
  background: var(--color-blue-800);
  color: var(--color-white);
}

/* ========================================
   FAQ
======================================== */
.faq {
  padding-block: var(--space-11);
  background: var(--color-white);
}

.faq-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-10);
  }
}

/* FAQ nadpis stojí v užším sloupci než sekce se zarovnaným
   nadpisem na střed — proto větší spodní mezera. Velikost
   drží .heading-serif. */
.faq-intro .section-title {
  margin-bottom: var(--space-5);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* Cinzel — otázka je obsahem nadpisu h3, drží stejné písmo jako
   ostatní nadpisy téhle úrovně. */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  /* Cinzel sází malá písmena jako kapitálky, takže při stejné
     velikosti působí drobněji než Switzer — o stupeň větší. */
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.faq-question:hover,
.faq-question[aria-expanded="true"] {
  color: var(--color-blue-700);
}

/* Ikona plus/minus je samotný znak bez plochy a rámečku — vyplněný
   box působil jako ovládací prvek formuláře. Dotykovou plochu drží
   padding tlačítka, ne ikona. */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-base);
}

.faq-question:hover .faq-icon,
.faq-question[aria-expanded="true"] .faq-icon {
  color: var(--color-blue-700);
}

.faq-answer {
  overflow: hidden;
  height: 0;
  /* Sbalená odpověď je skrytá i pro tabulátor — odkazy uvnitř
     nesmí být fokusovatelné. Visibility se přepne až po dojetí
     animace výšky, aby text při zavírání nezmizel skokem. */
  visibility: hidden;
  transition: height var(--transition-base) ease,
    visibility 0s linear var(--transition-base);
}

.faq-item h3:has(.faq-question[aria-expanded="true"]) + .faq-answer {
  visibility: visible;
  transition: height var(--transition-base) ease, visibility 0s;
}

/* Odpověď lícuje levým okrajem s otázkou — žádné odsazení, linka,
   pozadí ani rámeček. Hierarchii drží jen typografie: text je o
   stupeň menší a světlejší než otázka. */
.faq-answer-inner {
  padding: 0 0 var(--space-6);
  color: var(--color-text-muted-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
  max-width: 680px;
}

.faq-answer-inner a {
  color: var(--color-blue-700);
  font-weight: 600;
}

/* ========================================
   PATIČKA
======================================== */
/* Značkový svislý přechod z assets/elements/horal_gradient.png.
   Předloha jde od #003F81 až po #77B6E2, tady je ale zastavená
   na #1974B8: na světlejších tónech přestává být bílý text
   čitelný (na plném konci má kontrast jen 1,8:1). Tenhle konec
   drží 5,1:1, tedy WCAG AA i pro drobný text v patě. */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #003f81 0%, #0c599c 45%, #1974b8 100%);
  color: var(--color-white);
  padding-block: var(--space-10) var(--space-6);
  overflow: hidden;
}

.footer-top {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr;
  }
}

.footer-brand {
  position: relative;
}

.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: var(--space-4);
}

.footer-claim {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-white);
}

/* Nadpisy sloupců v Cinzelu — jediné místo, kde se na webu objevuje,
   a drží patičku o stupeň slavnostnější než zbytek stránky. */
.footer-heading {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}

.footer-list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

/* Na modrém podkladu drží texty světlejší tón než na původní tmavé
   patičce — jinak by spadly pod hranici čitelnosti. */
.footer-list a {
  text-decoration: none;
  color: var(--color-blue-100);
  transition: color var(--transition-fast);
}

.footer-list a:hover {
  color: var(--color-white);
}

.footer-contact {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--color-blue-100);
}

.footer-contact a {
  color: var(--color-blue-100);
  transition: color var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--color-white);
}

/* Sítě stojí pod claimem ve značkovém sloupci, ne u právních odkazů */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: var(--color-white);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

/* Na modrém podkladu se polarita otáčí — bílá výplň, modrá ikona */
.footer-social a:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-blue-700);
}

/* Pata leží na nejsvětlejším místě přechodu, kde už tlumený odstín
   nestačí na kontrast — drobný text tu proto zůstává bílý a od
   ostatního obsahu se odlišuje jen velikostí. */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-white);
}

/* Nenápadný právní odkaz v patě — drží se v druhém plánu,
   podtržení se objeví až při hoveru a focusu. */
.footer-legal-link a {
  /* Svislé odsazení zvedá dotykovou plochu na 24 px podle WCAG 2.2 */
  display: inline-block;
  padding-block: 4px;
  color: var(--color-blue-100);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-link a:hover,
.footer-legal-link a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

/* ========================================
   JEDNODUCHÁ STRÁNKA (GDPR, Cookies)
======================================== */
.legal-page {
  padding-block: var(--space-10);
}

.legal-page .container {
  max-width: 820px;
}

.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-blue-800);
  font-size: var(--fs-display-sm);
  margin-bottom: var(--space-6);
}

.legal-page h2 {
  color: var(--color-blue-800);
  font-size: var(--fs-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* Podnadpisy uvnitř delších právních sekcí (např. část o cookies) */
.legal-page h3 {
  color: var(--color-blue-800);
  font-size: var(--fs-md);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-page p,
.legal-page li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.legal-page ul {
  list-style: disc;
  padding-left: var(--space-6);
}

.legal-placeholder {
  background: var(--color-bg-soft);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

.legal-back-link {
  display: inline-block;
  margin-bottom: var(--space-6);
  color: var(--color-blue-700);
  font-weight: 600;
}

/* Tlačítko, které znovu otevře nastavení cookies.
   Je to <button>, protože nikam nevede — jen otevře dialog lišty.
   Vizuálně ale musí splynout s okolním textem jako odkaz. */
.legal-cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-blue-700);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.legal-cookie-settings:hover {
  color: var(--color-blue-800);
}