/* ==========================================================================
   LOPP – Linka okamžité psychické podpory
   style.css – design systém + komponenty (mobile-first)
   ========================================================================== */

/* ITC Avant Garde Gothic Pro (Monotype) – primární písmo dle brand manuálu, hostováno lokálně.
   Řezy: Extra Light 200, Book 400, Medium 500, Demi 600, Bold 700 (800 → Bold). */
@font-face { font-family: 'ITC Avant Garde Gothic Pro'; font-style: normal; font-weight: 200; font-display: swap;
  src: url(fonts/avantgarde-200.woff2) format('woff2');
  unicode-range: U+0000-024F, U+02BB-02DD, U+0300-0329, U+1E00-1EFF, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ITC Avant Garde Gothic Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/avantgarde-400.woff2) format('woff2');
  unicode-range: U+0000-024F, U+02BB-02DD, U+0300-0329, U+1E00-1EFF, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ITC Avant Garde Gothic Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/avantgarde-500.woff2) format('woff2');
  unicode-range: U+0000-024F, U+02BB-02DD, U+0300-0329, U+1E00-1EFF, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ITC Avant Garde Gothic Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/avantgarde-600.woff2) format('woff2');
  unicode-range: U+0000-024F, U+02BB-02DD, U+0300-0329, U+1E00-1EFF, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ITC Avant Garde Gothic Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/avantgarde-700.woff2) format('woff2');
  unicode-range: U+0000-024F, U+02BB-02DD, U+0300-0329, U+1E00-1EFF, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Poppins (SIL OFL) – záložní písmo dle brand manuálu */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Poppins nemá cyrilici – pro ukrajinskou stránku zůstává Manrope (cyrilice) */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* --------------------------------------------------------------------------
   1. DESIGN TOKENY
   -------------------------------------------------------------------------- */
:root {
  /* Barvy – paleta webu: jen #2F6B4F, #3F3F39, #FB4D3B, #FFFBF4 a bílá.
     Jemné odstíny níže jsou jen tyto barvy s průhledností / smíchané mezi sebou. */
  --brand-green: #2f6b4f;
  --brand-ink: #3f3f39;
  --brand-coral: #fb4d3b;
  --brand-cream: #fffbf4;
  --brand-white: #ffffff;

  --color-primary: var(--brand-green);         /* hero, nadpisy, plochy */
  --color-primary-strong: var(--brand-ink);    /* horní lišta, čísla, patička */
  --color-secondary: var(--brand-green);
  --color-secondary-soft: color-mix(in srgb, var(--brand-green) 10%, var(--brand-white)); /* ikony, plochy */
  --color-accent: var(--brand-coral);          /* CTA */
  --color-accent-hover: color-mix(in srgb, var(--brand-coral) 85%, var(--brand-ink));
  --color-accent-soft: color-mix(in srgb, var(--brand-coral) 12%, var(--brand-white));

  /* Barvy – neutrální */
  --color-background: var(--brand-cream);
  --color-surface: var(--brand-white);
  --color-tint: var(--brand-white);            /* střídání sekcí: krémová ↔ bílá */
  --color-text: var(--brand-ink);
  --color-muted: color-mix(in srgb, var(--brand-ink) 82%, var(--brand-white));
  --color-border: color-mix(in srgb, var(--brand-ink) 14%, var(--brand-cream));
  --color-on-dark: var(--brand-white);
  --color-on-dark-muted: rgb(255 255 255 / 0.82);
  --color-highlight: var(--brand-cream);       /* zvýraznění na tmavém pozadí */

  /* Spacing – 4px základ, 8px grid */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  /* Typografie – modulární škála 1.25 */
  --font-base: "ITC Avant Garde Gothic Pro", "Poppins", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --h6: 1rem;
  --h5: 1.25rem;
  --h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --h3: clamp(1.125rem, 1.05rem + 0.5vw, 1.4rem);
  --h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --h1: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* Tvary a stíny */
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(47 107 79 / 0.04), 0 8px 24px rgb(47 107 79 / 0.05);
  --shadow-lift: 0 2px 4px rgb(47 107 79 / 0.05), 0 16px 32px rgb(47 107 79 / 0.08);

  /* Layout */
  --container-width: 85%;
  --container-max: 80rem;
  --text-max: 65ch;
  --header-height: 4.5rem;

  /* Pohyb */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.35s;
}

/* Breakpointy (mobile-first): 40em · 48em tablet · 64em desktop · 160em 4K */

/* --------------------------------------------------------------------------
   2. RESET A ZÁKLAD
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-9));
}

/* 4K – vše je v rem, celé rozhraní se proporčně zvětší */
@media (min-width: 160em) {
  html { font-size: 137.5%; }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* pojistka: stránka nikdy neujíždí do strany */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--lh-heading);
  font-weight: 500;   /* Avant Garde Medium – lehčí nadpisy dle brand manuálu */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--h1); line-height: var(--lh-tight); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

p {
  margin: 0;
  max-width: var(--text-max);
  text-wrap: pretty;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure { margin: 0; }

a { color: inherit; }

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

img { height: auto; }

address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8));
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
}

.narrow { max-width: 50rem; }

.section {
  padding-block: var(--space-8);
}

.section--tinted { background: var(--color-tint); }

.section--dark {
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
  color: var(--color-on-dark);
}

.section--dark .section__title { color: var(--color-on-dark); }
.section--dark .section__lead { color: var(--color-on-dark-muted); }

.section--flush-top { padding-top: 0; }

@media (min-width: 64em) {
  .section { padding-block: var(--space-9); }
  .section--flush-top { padding-top: 0; }
}

/* Dvousloupcový layout */
.split {
  display: grid;
  gap: var(--space-7);
}

.split > * { min-width: 0; }

@media (min-width: 64em) {
  .split {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: start;
  }

  .split--center {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Kompaktní pás nabídky: text vlevo, akce vpravo */
.split--offer { gap: var(--space-5); }
.split--offer .btn-row { margin-top: 0; }
.split--offer .split__full { grid-column: 1 / -1; margin-top: 0; }

@media (min-width: 64em) {
  .split--offer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5) var(--space-8);
    align-items: center;
  }

  .split--offer > div:first-child { max-width: 46rem; }
  .split--offer .split__aside { justify-self: end; }
  .split--offer .btn-row { flex-direction: column; align-items: stretch; }
}

.duo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* dlouhé texty nikdy nerozšíří stránku */
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .duo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* Obsahově široké karty (inzeráty s dlouhým e-mailem): vedle sebe až od desktopu */
@media (min-width: 48em) and (max-width: 63.99em) {
  .duo-grid--wide { grid-template-columns: minmax(0, 1fr); }
}

.center-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   4. TYPOGRAFICKÉ KOMPONENTY
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.eyebrow::before {
  content: "";
  width: var(--space-5);
  height: 2px;
  background: currentColor;
}

.eyebrow--light { color: var(--color-on-dark-muted); }

.section__header { margin-bottom: var(--space-7); }

.section__header--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.section__title { color: var(--color-primary); }

.section__lead {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-muted);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease);
}
.link:hover { color: var(--color-primary); }

/* Samostatný odkaz (ne v textu): větší plocha pro klepnutí */
:is(div, header, footer, section) > .link { min-height: 2.75rem; }
.link .fa-solid { transition: transform var(--duration) var(--ease); }
.link:hover .fa-arrow-right { transform: translateX(4px); }
p .link, li .link { display: inline; }

.section--dark .link { color: var(--color-highlight); }

.fine-print {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.fine-print--center {
  justify-content: center;
  margin-inline: auto;
  text-align: center;
}

/* Krátké doplňující řádky – přes celou šířku, ne podle délky odstavce */
.fine-print--center,
.split--offer .split__full,
.steps-note { max-width: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.12);
  font-size: var(--text-sm);
  font-weight: 700;
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.check-list li {
  position: relative;
  padding-left: var(--space-6);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1em;
  height: 1em;
  background-color: var(--color-secondary);
  -webkit-mask: var(--fa-s-check) center / contain no-repeat;
  mask: var(--fa-s-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   5. TLAČÍTKA
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  white-space: nowrap;   /* text tlačítka nikdy nezalamovat */
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 500;   /* Avant Garde Medium – jako nadpisy */
  font-size: var(--text-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-on-dark);
  box-shadow: 0 8px 24px rgb(251 77 59 / 0.28);
}
.btn--accent:hover { background: var(--color-accent-hover); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-dark);
}
.btn--primary:hover { background: var(--color-secondary); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: var(--color-on-dark); }

.btn--outline-light {
  background: transparent;
  color: var(--color-on-dark);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55);
}
.btn--outline-light:hover { background: rgb(255 255 255 / 0.12); }

.btn--sm {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-4);
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
}

@media (min-width: 30em) {
  .btn--lg { padding-inline: var(--space-6); font-size: var(--text-md); }
}

.btn:hover .fa-phone { animation: ring 0.6s var(--ease); }

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg); }
  50% { transform: rotate(12deg); }
  75% { transform: rotate(-6deg); }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.btn-row--center { justify-content: center; }

/* Mobil: tlačítka v obsahu vždy na střed (texty zůstávají zarovnané vlevo) */
@media (max-width: 47.99em) {
  .btn-row,
  .hero__actions,
  .cta-box__actions { justify-content: center; gap: var(--space-2); }

  /* Zalomené pod sebe (třídu dává script.js): stejná šířka podle nejširšího */
  :is(.btn-row, .hero__actions, .cta-box__actions).is-stacked {
    display: grid;
    justify-content: center;
  }

  :is(.btn-row, .hero__actions, .cta-box__actions).is-stacked .btn { width: 100%; }

  /* Kompaktní tlačítka v řadě, ať se dvě vejdou vedle sebe */
  :is(.btn-row, .hero__actions, .cta-box__actions) .btn {
    gap: var(--space-2);
    padding-inline: var(--space-4);
    font-size: 0.9375rem;
  }

  main :where(div, header, section, article):not(.btn-row, .hero__actions, .cta-box__actions, .center-actions) > .btn:not(.btn--sm, .price-card__btn, .price-calc__btn) {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   6. KARTA A IKONY
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 48em) {
  .card { padding: var(--space-6); }
}

.icon-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--text-lg);
}

.icon-circle--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   7. HLAVIČKA, HORNÍ LIŠTA A NAVIGACE
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-primary);
  color: var(--color-on-dark);
  transition: box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.site-header.is-scrolled {
  background: rgb(47 107 79 / 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgb(63 63 57 / 0.18);
}

/* Horní lišta s nabídkou */
.topbar {
  background: var(--color-primary-strong);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-size: var(--text-sm);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}

.topbar__text {
  max-width: none;
  font-weight: 600;
  line-height: 1.4;
}

.topbar__long,
.topbar__number { display: none; }

/* Mobil: celý text na střed a pod ním dvě stejně široká tlačítka */
@media (max-width: 47.99em) {
  .topbar {
    max-height: 10rem;
    overflow: hidden;
    transition: max-height var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }

  .topbar .topbar__inner {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-2) var(--space-3);
    text-align: center;
  }

  .topbar .topbar__text {
    font-size: var(--text-xs);
    text-wrap: balance;
  }

  .topbar__long { display: inline; }

  .topbar .topbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .topbar .topbar__actions .btn {
    min-height: 2.5rem;
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  /* Mobil: v tlačítku jen ikona a číslo, slovo „Volat“ se nevejde */
  .topbar__number { display: inline; }
  .topbar__call-label { display: none; }

  /* po odscrollování se lišta schová, zůstane jen hlavička s logem */
  .site-header.is-scrolled .topbar {
    max-height: 0;
    border-color: transparent;
  }

  :root { --header-height: 4rem; }
}

/* Velmi úzké displeje: místo čísla zpět jen „Volat“ */
@media (max-width: 21.5em) {
  .topbar__number { display: none; }
  .topbar__call-label { display: inline; }
}

/* Nejmenší telefony (≤ 360 px): vše se musí vejít, nic se neořízne */
@media (max-width: 22.5em) {
  .btn__prefix { display: none; }   /* „+420 “ v dlouhých tlačítkách s číslem */
  .btn__extra { display: none; }    /* zbytné slovo v dlouhém textu tlačítka */
  .contact-list li:has(.copy-btn) { flex-wrap: wrap; }
}

/* Dlouhé odkazy (adresy webu) se zalomí */
.link { max-width: 100%; overflow-wrap: anywhere; }

/* Tablet a výš: „Volat (číslo)“ */
@media (min-width: 48em) {
  .topbar__number::before { content: "("; }
  .topbar__number::after { content: ")"; }
}

.topbar__actions {
  display: flex;
  gap: var(--space-2);
}

@media (min-width: 48em) {
  .topbar__number { display: inline; }
}

@media (min-width: 64em) {
  .topbar__long { display: inline; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;        /* logo se v hlavičce nesmí smrsknout */
  min-height: 2.75rem;   /* pohodlné klepnutí na mobilu */
  color: inherit;
  text-decoration: none;
}

.brand__logo {
  width: clamp(11rem, 9rem + 6vw, 14rem);
  height: auto;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: calc(-1 * var(--space-3));
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
}

/* Mobilní menu – vysouvací panel */
.nav {
  position: absolute;
  inset: 100% 0 auto 0;
  display: grid;
  gap: var(--space-5);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: var(--space-5) 7.5% var(--space-6);
  background: var(--color-primary);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 24px 32px rgb(63 63 57 / 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--space-2)));
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
}

.nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__list { display: grid; }

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: none;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  color: var(--color-on-dark);
  cursor: pointer;
}

.nav__link[aria-current="page"] { color: var(--color-highlight); }

.nav__dropdown-toggle .fa-chevron-down {
  font-size: 0.7em;
  transition: transform var(--duration) var(--ease);
}

.nav__dropdown-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* Mobil: podmenu „O nás“ se rozbaluje klepnutím, odsazené */
.nav__submenu { padding-left: var(--space-4); }

@media (max-width: 63.99em) {
  .nav__dropdown:not(.is-open) .nav__submenu { display: none; }
}

.nav__cta { justify-self: start; }

/* Přepínač jazyků – vlajky v „pilulce“ */
.lang-switch {
  display: inline-flex;
  justify-self: start;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.lang-switch__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-on-dark-muted);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.lang-switch__link:hover { color: var(--color-on-dark); background: rgb(255 255 255 / 0.1); }

.lang-switch__link[aria-current="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
}

.flag {
  width: 1.375rem;
  height: auto;
  aspect-ratio: 3 / 2;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(63 63 57 / 0.12);
  overflow: hidden;
}

@media (min-width: 64em) {
  .nav-toggle { display: none; }

  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .nav__link {
    position: relative;
    width: auto;
    padding: var(--space-2) 0;
    border: 0;
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .nav__list > li > .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
  }

  .nav__list > li > .nav__link:hover::after,
  .nav__list > li > .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__link[aria-current="page"] { color: var(--color-on-dark); }

  /* Rozbalovací podmenu */
  .nav__dropdown { position: relative; }

  .nav__submenu {
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    min-width: 15rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--space-2)));
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
  }

  .nav__dropdown.is-open .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__submenu .nav__link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
  }

  .nav__submenu .nav__link:hover,
  .nav__submenu .nav__link[aria-current="page"] { background: var(--color-secondary-soft); color: var(--color-primary); }

  /* na desktopu je CTA v horní liště */
  .nav__cta { display: none; }
}

/* Menší notebooky (1024–1279 px): menu se musí vejít vedle loga */
@media (min-width: 64em) and (max-width: 79.99em) {
  .site-header__inner { gap: var(--space-4); }
  .brand__logo { width: 11rem; }
  .nav,
  .nav__list { gap: var(--space-3); }
  /* jen vlajky, kód jazyka zůstává pro čtečky */
  .lang-switch__link { padding: var(--space-1) var(--space-2); }
  .lang-switch__code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   8. HERO (úvodní stránka)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-8);
  color: var(--color-on-dark);
  background:
    radial-gradient(120% 80% at 80% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-7);
}

.hero__inner > * { min-width: 0; }

.hero__title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  color: var(--color-on-dark);
}

.hero__title-line { display: block; color: var(--color-highlight); }

.hero__lead {
  margin-top: var(--space-5);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  color: var(--color-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.14);
  backdrop-filter: blur(6px);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pill .fa-check { color: var(--color-highlight); }

/* Karta „Kdo vám to zvedne“ */
.hero-card {
  color: var(--color-text);
  align-self: center;
}

.hero-card__text { text-align: center; }

@media (max-width: 47.99em) {
  .hero-card { padding: var(--space-5) var(--space-4); }
}

.hero-card__title {
  font-size: var(--h5);
  color: var(--color-primary);
}

.role-list {
  display: grid;
  grid-template-columns: repeat(3, auto); /* vždy jedna řada, sloupce podle délky slov */
  justify-content: space-around;
  gap: var(--space-4) var(--space-2);
  margin-block: var(--space-5);
}

.role {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}

.role .icon-circle {
  width: clamp(3.25rem, 15vw, 4rem);
  height: clamp(3.25rem, 15vw, 4rem);
  font-size: clamp(1.25rem, 5.5vw, 1.5rem);
}

.role__label {
  font-size: clamp(0.6875rem, 3.25vw, var(--text-xs));
  white-space: nowrap;   /* slova v popiscích nikdy nedělit */
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-muted);
}

.hero-card__phone {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}

.hero-card__phone:hover { background: var(--color-secondary-soft); }

.hero-card__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (min-width: 64em) {
  .hero { padding-block: var(--space-9); }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(22rem, 4fr);   /* karta dost široká na 3 role vedle sebe */
    gap: var(--space-8);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   9. ÚVOD PODSTRÁNEK + DROBEČKOVÁ NAVIGACE
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-8);
  color: var(--color-on-dark);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
}

.page-hero > .container { position: relative; }

.page-hero__inner {
  display: grid;
  gap: var(--space-7);
}

.page-hero__inner > * { min-width: 0; }

.page-hero__title {
  max-width: 22ch;
  color: var(--color-on-dark);
}

/* Delší nadpisy (např. cyrilice) – menší, ať se vejdou na max. 3 řádky */
.page-hero__title--sm {
  max-width: 26ch;
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
}

.page-hero__lead {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-on-dark-muted);
}

.page-hero__lead strong { color: var(--color-on-dark); }

.page-hero__lead + .btn,
.page-hero__lead + .btn-row,
.badge + .btn { margin-top: var(--space-6); }

/* Fotka v úvodu podstránky = celé pozadí sekce, text na tmavém přechodu */
.page-hero--split > .container { position: static; }

.page-hero--split .page-hero__inner > :not(.page-hero__media) {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.page-hero__media--portrait img { object-position: 70% 15%; }

.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(47 107 79 / 0.78) 0%, rgb(47 107 79 / 0.9) 100%);
}

@media (min-width: 64em) {
  .page-hero { padding-block: var(--space-8) var(--space-9); }

  .page-hero--split { padding-block: var(--space-9); }

  /* Desktop: fotka jen v pravé polovině, vlevo zůstává zelené pozadí */
  .page-hero--split .page-hero__inner > :not(.page-hero__media) { max-width: 50%; }

  .page-hero__media {
    left: auto;
    width: 55%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }

  .page-hero__media::after { display: none; }

  /* Portrét na výšku: užší pruh zarovnaný k pravému okraji obsahu,
     aby byla vidět celá hlava a ramena */
  .page-hero__media--portrait {
    right: calc((100% - min(var(--container-width), var(--container-max))) / 2);
    width: auto;
    aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  }

  .page-hero__media--portrait img { object-position: 50% 20%; }

  /* Postava na levém okraji fotky: zobrazit levou část a zkrátit přechod,
     aby postava sedla víc doprava a nemizela v zelené */
  .page-hero__media--subject-left img { object-position: 0% 30%; }

  .page-hero__media--subject-left {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
}

.breadcrumb { margin-bottom: var(--space-5); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  opacity: 0.5;
}

.breadcrumb a {
  color: var(--color-on-dark);
  text-underline-offset: 3px;
}

.breadcrumb [aria-current="page"] {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. NABÍDKA, VIDEO, FOTO
   -------------------------------------------------------------------------- */
.photo-frame img,
.video-facade img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-lg);
}

/* Portrét na výšku (fotky z týmu) – neořezávat hlavu */
.photo-frame--portrait {
  width: min(100%, 26rem);
  justify-self: center;
}

.photo-frame--portrait img {
  aspect-ratio: 4 / 5;
  object-position: 50% 0%;
}

.video-facade {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  background: var(--color-primary);
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(47 107 79 / 0.75) 100%);
  pointer-events: none;
}

.video-facade__play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px rgb(251 77 59 / 0.25);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.video-facade__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 16px rgb(251 77 59 / 0.2);
}

.video-facade__caption {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  z-index: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-dark);
}

.video-facade iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

.video-facade.is-playing::after,
.video-facade.is-playing .video-facade__caption { display: none; }

/* --------------------------------------------------------------------------
   11. TÉMATA (fotokarty 2 × 2) A DAR
   -------------------------------------------------------------------------- */
.topic-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
}

.topic {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.topic:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.topic__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 22%; /* fotky na výšku: výřez s obličejem */
  transition: transform 0.8s var(--ease);
}

.topic__img--top { object-position: 50% 6%; }

.topic:hover .topic__img { transform: scale(1.03); }

.topic__body {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--color-muted);
}

@media (min-width: 48em) {
  .topic__body { padding: var(--space-6); }
}

.topic__title {
  font-size: var(--h5);
  color: var(--color-primary);
}

.gift {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
  color: var(--color-on-dark-muted);
}

.gift__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
}

.gift__title {
  margin-bottom: var(--space-2);
  font-size: var(--h5);
  color: var(--color-on-dark);
}

.gift .btn--primary {
  background: var(--color-surface);
  color: var(--color-primary);
  justify-self: start;
}

.gift .btn--primary:hover { background: var(--color-secondary-soft); }

.gift--light {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.gift--light .gift__title { color: var(--color-primary); }

.gift--light .btn--primary {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.gift--light .btn--primary:hover { background: var(--color-secondary); }

/* Menší telefony: užší okraje, ať se vejde i dlouhé tlačítko */
@media (max-width: 25em) {
  .gift { padding: var(--space-5) var(--space-4); }
}

@media (min-width: 64em) {
  .gift {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   12. CENÍK – 4 balíčky (mobil 1, tablet 2 × 2, desktop v jedné řadě)
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 75em) {
  .price-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Platba po hovoru – 3 karty */
@media (min-width: 64em) {
  .price-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-secondary);
}

/* Hlavní je délka hovoru, cena je doplňková */
.price-card__time {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-secondary);
}

.price-card__minutes {
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.price-card__unit {
  font-size: var(--text-lg);
  font-weight: 500;
}

.price-card__title {
  font-size: var(--text-lg);
  color: var(--color-secondary);
}

.price-card__price {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  font-size: var(--text-base);
  font-weight: 800;
  white-space: nowrap;
  color: var(--color-primary);
}

.price-card__text {
  flex: 1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.price-card__btn {
  width: 100%;
  margin-top: var(--space-3);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Kalkulačka ceny – posuvník délky hovoru */
.price-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  background: var(--color-secondary-soft);
  border-color: transparent;
}

@media (min-width: 48em) {
  .price-calc {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
    padding: var(--space-6);
  }
}

.price-calc__control,
.price-calc__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.price-calc__control { justify-content: center; }

.price-calc__title {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.price-calc__label {
  font-size: var(--text-base);
  color: var(--color-muted);
}

.price-calc__label strong { color: var(--color-primary); }

.price-calc__range {
  --fill: 27%;
  width: 100%;
  height: 0.5rem;
  margin-block: var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-primary) var(--fill), var(--color-border) var(--fill));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.price-calc__range::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: var(--shadow-soft);
  -webkit-appearance: none;
}

.price-calc__range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: var(--shadow-soft);
}

.price-calc__caption {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.price-calc__price {
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.price-calc__note {
  margin-top: calc(-1 * var(--space-1));
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

.price-calc__other {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.price-calc__other strong { color: var(--color-primary); }

.price-calc__btn { align-self: flex-start; margin-top: var(--space-2); }

/* Mobil: užší vnořené okraje, tlačítko s číslem se vejde do karty */
@media (max-width: 47.99em) {
  .price-calc,
  .price-calc__result { padding: var(--space-4); }
}

@media (max-width: 29.99em) {
  .price-calc__btn .btn__prefix { display: none; }
}

@media (max-width: 22.5em) {
  .price-calc__btn .fa-phone { display: none; }
}

/* --------------------------------------------------------------------------
   13. ČASOVÁ OSA (5 kroků) A PROCES
   -------------------------------------------------------------------------- */
.timeline {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
  }
}

.timeline__step {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: var(--color-on-dark-muted);
  transition: background-color var(--duration) var(--ease);
}

.timeline__step:hover { background: rgb(255 255 255 / 0.1); }

.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.timeline__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-on-dark);
}

.timeline__icon {
  font-size: 1.5rem;
  color: var(--color-highlight);
  opacity: 0.8;
}

.timeline__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-on-dark);
}

.timeline__step p { font-size: 0.9375rem; }

.timeline__step a {
  color: var(--color-on-dark);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* šipka mezi kroky na desktopu */
@media (min-width: 64em) {
  .timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    right: calc(-1 * var(--space-5) / 2 - 0.4rem);
    z-index: 1;
    width: 0.5rem;
    height: 0.8rem;
    background-color: var(--color-highlight);
    -webkit-mask: var(--fa-s-chevron-right) center / contain no-repeat;
    mask: var(--fa-s-chevron-right) center / contain no-repeat;
  }
}

.steps-footer {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
}

.steps-footer .btn-row { margin-top: 0; }

.steps-note {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--color-on-dark-muted);
}

.steps-note strong { color: var(--color-on-dark); }
.steps-note .fa-gift { color: var(--color-highlight); }

/* Mobil/tablet: tlačítka pod textem na střed */
.steps-footer .btn-row { justify-content: center; }

.steps-footer { justify-items: center; text-align: center; }
.steps-note { justify-content: center; }

/* Krátká verze textu tlačítka jen na mobilu */
.btn__short { display: none; }

/* Mobil: dvojice tlačítek vždy vedle sebe – kompaktní tlačítka, u volání jen
   ikona a číslo (slovo „Zavolat“ a předvolba se schovají), ostatní ikony pryč */
@media (max-width: 47.99em) {
  :is(.btn-row, .cta-box__actions):has(> .btn + .btn) {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  :is(.btn-row, .cta-box__actions):has(> .btn + .btn) > .btn {
    flex: 1 1 0;   /* stejně široká, delší text si vezme víc místa */
    width: auto;
    gap: 0.375rem;
    padding-inline: var(--space-3);
    font-size: 0.875rem;
  }

  :is(.btn-row, .cta-box__actions):has(> .btn + .btn) :is(.btn__word, .btn__prefix) { display: none; }
  :is(.btn-row, .cta-box__actions):has(> .btn + .btn) .btn > i:not(.fa-phone) { display: none; }
  .btn__full { display: none; }
  .btn__short { display: inline; }

  /* Tři tlačítka: první přes celou šířku, dvě pod ním vedle sebe */
  :is(.btn-row, .cta-box__actions):has(> .btn:nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  :is(.btn-row, .cta-box__actions):has(> .btn:nth-child(3)) > .btn:first-child { grid-column: 1 / -1; }
}

/* Prvek jen pro tablet a desktop */
@media (max-width: 47.99em) {
  .hide-mobile { display: none !important; }
}

/* Mobil: úvodní tlačítka vedle sebe (číslo je v horní liště i v kartě níž) */
@media (max-width: 47.99em) {
  .hero__btn-num { display: none; }
  .hero__actions,
  .hero__actions.is-stacked { display: flex; flex-wrap: nowrap; }
  .hero__actions .btn,
  .hero__actions.is-stacked .btn { flex: 1 1 0; width: auto; }   /* co nejvíc stejně široká */

  /* Karta s telefonem: menší ikona a okraje, ať je otevírací doba na jednom řádku */
  .hero-card__phone { gap: var(--space-3); padding: var(--space-3); }
  .hero-card__phone .phone-card__icon { width: 3rem; height: 3rem; }
}

/* Nejužší telefony (320 px): menší písmo, ať jsou dvojice tlačítek pořád vedle sebe */
@media (max-width: 22.5em) {
  .hero__actions .btn { padding-inline: var(--space-3); font-size: 0.875rem; gap: 0.375rem; }
  :is(.btn-row, .cta-box__actions):has(> .btn + .btn) > .btn { padding-inline: var(--space-2); font-size: 0.8125rem; }
}

/* Mobil: ikona nad textem, text celý na střed (ikona vedle by text odsadila) */
@media (max-width: 47.99em) {
  .steps-note { flex-direction: column; align-items: center; gap: var(--space-2); }
}

.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.process__step > * { min-width: 0; }

@media (min-width: 48em) {
  .process:not(.process--vertical) { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .process:not(.process--vertical) { grid-template-columns: repeat(4, 1fr); }
}

.process__step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.process__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: 800;
}

.process--vertical { margin-top: var(--space-5); }

.process--vertical .process__step { box-shadow: none; }

/* --------------------------------------------------------------------------
   14. CITACE, ZAKLADATEL, VÝHODY
   -------------------------------------------------------------------------- */
.quote-block {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.quote-block__people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* druhý portrét lehce posunutý – živější kompozice */
.quote-block__people .portrait:nth-child(2) { margin-top: var(--space-7); }

.portrait {
  display: grid;
  gap: var(--space-3);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.portrait figcaption {
  display: grid;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.portrait strong { color: var(--color-primary); }

@media (min-width: 64em) {
  .quote-block { grid-template-columns: 4fr 7fr; gap: var(--space-8); }
}

.quote {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-md);
  font-style: italic;
}

.quote__author {
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-muted);
}

.founder {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.founder__photo img {
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 4 / 5;
  object-position: 50% 20%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.founder__photo--tall img {
  aspect-ratio: 2 / 3;
  object-position: top;
}

.founder__role {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--color-secondary);
}

.section--dark .founder__role { color: var(--color-highlight); }

.founder p + p,
.founder .section__lead + p { margin-top: var(--space-4); }

.founder .btn,
.founder .btn-row { margin-top: var(--space-6); }

/* Slovo zakladatele – delší text rozdělený do bloků */
.quote--card {
  padding: var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft, 0 1px 3px color-mix(in srgb, var(--brand-ink) 8%, transparent));
}

.founder__story { margin-top: var(--space-6); }

.founder__story .founder__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.founder__milestones {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.founder__milestones li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.founder__milestones .icon-circle { width: 2.75rem; height: 2.75rem; font-size: var(--text-base); }
.founder__milestones p { margin: 0; padding-top: var(--space-1); }

.founder__more {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.founder__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-weight: 800;
  color: var(--color-primary);
  list-style: none;
  cursor: pointer;
}

.founder__more summary::-webkit-details-marker { display: none; }
.founder__more summary .fa-chevron-down { transition: transform var(--duration) var(--ease); }
.founder__more[open] summary .fa-chevron-down { transform: rotate(180deg); }
.founder__more-body { padding-bottom: var(--space-5); }

.founder__story .founder__belief {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-strong);
}

.founder__belief .icon-circle { background: var(--color-surface); }

.founder__story .founder__signature {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-5);
}

.founder__signature strong { color: var(--color-primary); }
.founder__signature span { font-size: var(--text-sm); color: var(--color-muted); }

@media (min-width: 64em) {
  .founder { grid-template-columns: 4fr 7fr; gap: var(--space-8); }
  .founder--reverse { grid-template-columns: 7fr 4fr; }
  .founder--reverse .founder__photo { order: 2; justify-self: end; }
  /* dlouhý text vedle fotky – fotka jede při scrollu s textem */
  .founder:has(.founder__story) .founder__photo {
    position: sticky;
    top: 10rem; /* pod hlavičkou včetně horní lišty */
  }
}

.feature-list {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.feature-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.feature-list__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.feature-list p { color: var(--color-muted); }

/* Feature karty (2 × 2) */
.feature-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40em) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 64em) {
  .feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.feature {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.feature__title {
  margin-top: var(--space-2);
  font-size: var(--h5);
  color: var(--color-primary);
}

.feature__text { color: var(--color-muted); }

.feature .check-list { margin-block: var(--space-2) 0; }

/* Pruh výhod pod úvodem podstránky: ikona v kroužku + nadpis + podtitul */
.stats {
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
  padding-block: var(--space-6);
}

.stats__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 30em) {
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
}

@media (min-width: 75em) {
  .stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .stat { gap: var(--space-3); padding-inline: var(--space-4); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat + .stat { border-left: 1px solid rgb(255 255 255 / 0.12); }
  .stat__icon { width: 2.75rem; height: 2.75rem; }
}

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

.stat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--color-highlight);
  font-size: var(--text-lg);
}

.stat__body {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.stat__title {
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-on-dark);
}

.stat__label {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-on-dark-muted);
}

/* --------------------------------------------------------------------------
   15. TÝM
   -------------------------------------------------------------------------- */
.team-group {
  margin: var(--space-7) 0 var(--space-5);
  font-size: var(--h5);
  color: var(--color-primary);
}

.team-group:first-of-type { margin-top: 0; }

.team-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

.person {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  padding: 0 0 var(--space-6);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.person:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.person > :not(.person__photo) { margin-inline: var(--space-5); }

@media (min-width: 48em) {
  .person > :not(.person__photo) { margin-inline: var(--space-6); }
}

.person__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-4);
  object-fit: cover;
  object-position: 50% 15%;
  transition: transform 0.8s var(--ease);
}

.person:hover .person__photo { transform: scale(1.03); }

.person__name {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.person__role {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary);
}

.person__bio {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   16. REFERENCE
   -------------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

.testimonial {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
}

.testimonial blockquote {
  margin: 0;
  color: var(--color-text);
}

.testimonial__mark {
  font-size: var(--h3);
  color: var(--color-accent);
}

.testimonial__author {
  font-weight: 700;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   17. ČLÁNKY – KARTY
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.post-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-5);
}

.post-card__meta {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.post-card__title {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.post-card__link { text-decoration: none; }

/* celá karta je klikací */
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.post-card__text {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-secondary);
}

.post-card__more .fa-arrow-right { transition: transform var(--duration) var(--ease); }
.post-card:hover .post-card__more .fa-arrow-right { transform: translateX(4px); }

@media (min-width: 64em) {
  .post-card--featured {
    grid-column: 1 / -1;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto;
  }

  .post-card--featured .post-card__img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
  .post-card--featured .post-card__body { padding: var(--space-7); align-content: center; grid-template-rows: none; }
  .post-card--featured .post-card__title { font-size: var(--h3); }
}

/* --------------------------------------------------------------------------
   18. ČLÁNEK – DETAIL
   -------------------------------------------------------------------------- */
.page-hero--article { padding-bottom: var(--space-9); }

.page-hero--article .page-hero__title { max-width: 30ch; }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

.article__layout {
  max-width: 48rem;
  padding-bottom: var(--space-8);
}

.article__figure {
  position: relative;
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-7);
}

.article__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* Formátovaný text (články, právní texty) */
.prose {
  font-size: var(--text-md);
  line-height: 1.75;
}

.prose > * + * { margin-top: var(--space-4); }

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--h3);
  color: var(--color-primary);
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--h5);
  color: var(--color-primary);
}

.prose h4 { margin-top: var(--space-5); font-size: var(--text-md); }

.prose a {
  color: var(--color-secondary);
  font-weight: 600;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.prose ul,
.prose ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-left: var(--space-5);
}

/* Dlouhé URL adresy (zdroje v článcích) se zalomí, místo aby roztáhly stránku */
.prose li,
.prose p { overflow-wrap: anywhere; }

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--color-accent); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-tint);
  font-style: italic;
}

.prose blockquote > * + * { margin-top: var(--space-3); }

.prose strong { color: var(--color-primary); }

.prose--compact { font-size: var(--text-base); margin-top: var(--space-5); }

.prose--legal { font-size: var(--text-base); }
.prose--legal h2 { font-size: var(--h4); }

.legal { max-width: 52rem; }

/* Obsah právních stránek: mobil = rozbalovací karta nahoře, desktop = panel vlevo */
.toc {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 800;
  color: var(--color-primary);
  list-style: none;
  cursor: pointer;
}

.toc__title::-webkit-details-marker { display: none; }
.toc__title .fa-chevron-down { transition: transform var(--duration) var(--ease); }
.toc[open] .toc__title .fa-chevron-down { transform: rotate(180deg); }

.toc__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-3) var(--space-4);
  list-style: none;
}

.toc__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.toc__link:hover { color: var(--color-primary); background: var(--color-secondary-soft); }

.toc__link.is-active {
  border-left-color: var(--color-accent);
  background: var(--color-secondary-soft);
  font-weight: 700;
  color: var(--color-primary);
}

@media (min-width: 64em) {
  .legal:has(.toc) {
    display: grid;
    grid-template-columns: 19rem minmax(0, 52rem);
    gap: var(--space-8);
    align-items: start;
    max-width: 75rem;
  }

  .toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    max-height: calc(100vh - var(--header-height) - var(--space-7));
    overflow-y: auto;
    scrollbar-width: none;   /* bez viditelného posuvníku, kolečkem se posunout dá */
    margin: 0;
    border: 0;
    background: none;
  }

  .toc::-webkit-scrollbar { display: none; }

  /* Na desktopu je obsah vždy rozbalený, nadpis neslouží jako přepínač */
  .toc__title { padding: 0 var(--space-3) var(--space-3); pointer-events: none; }
  .toc__title .fa-chevron-down { display: none; }
  .toc__list { gap: 0; padding: 0; }
  .toc__link { padding: 0.3125rem var(--space-3); font-size: 0.8125rem; }
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table-wrap th,
.table-wrap td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { color: var(--color-muted); font-weight: 700; }

/* Výzva v článku */
.cta-box {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
  color: var(--color-on-dark-muted);
}

.cta-box__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
}

.cta-box__title {
  margin-bottom: var(--space-2);
  font-size: var(--h4);
  color: var(--color-on-dark);
}

.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cta-box .btn--ghost {
  color: var(--color-on-dark);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55);
}

.cta-box .btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

/* --------------------------------------------------------------------------
   19. ACCORDION (FAQ) – nad 3 položky ve dvou sloupcích
   -------------------------------------------------------------------------- */
.accordion {
  display: grid;
  gap: var(--space-3);
}

/* Dva nezávislé sloupce – rozbalená otázka neodsouvá druhý sloupec */
@media (min-width: 64em) {
  .accordion {
    display: block;
    columns: 2;
    column-gap: var(--space-5);
  }

  .accordion__item {
    break-inside: avoid;
    margin-bottom: var(--space-3);
  }
}

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.accordion__item.is-open {
  box-shadow: var(--shadow-soft);
  border-color: var(--color-secondary);
}

.accordion__heading { font-size: var(--text-base); }

.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
  cursor: pointer;
}

.accordion__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

/* Šipka dolů → nahoru při otevření */
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.accordion__panel {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-muted);
}

.accordion__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   20. DROBNÉ BLOKY: upozornění, kontakt, plakáty, partneři, média, vložené aplikace
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-secondary-soft);
}

.notice > div { min-width: 0; }
.notice > div > * + * { margin-top: var(--space-3); }
.notice a { overflow-wrap: anywhere; }

.notice__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
}

.notice__title {
  font-size: var(--h5);
  color: var(--color-primary);
}

.notice--warn { background: var(--color-accent-soft); }
.notice--warn .notice__icon { color: var(--color-accent); }

/* Kontakt e-mailem (místo formuláře) */
.mail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: start;
}

.mail-card__title {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.mail-card__list {
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--color-muted);
}

.mail-card .btn {
  align-self: flex-start;
  margin-top: var(--space-3);
}

.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
}

.contact-strip__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
}

.contact-strip__mail {
  font-size: var(--h5);
  font-weight: 800;
  color: var(--color-on-dark);
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
}

.contact-strip__mail--dark { color: var(--color-primary); }

/* LOPPEDU – workshopy */
.workshop-list {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.workshop {
  display: grid;
  gap: var(--space-5);
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

@media (min-width: 64em) {
  .workshop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-7);
  }
}

.workshop__main,
.workshop__side {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.workshop__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-weight: 800;
}

.workshop__title {
  font-size: var(--h4);
  color: var(--color-primary);
}

.workshop__sub {
  font-weight: 700;
  color: var(--color-secondary);
}

.workshop__text { color: var(--color-muted); }

.workshop__who {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-secondary-soft);
}

.workshop__label {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.workshop .check-list { margin: 0; }

.workshop__format {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.workshop__format .fa-clock { color: var(--color-accent); }

/* Tabulka formátů – na mobilu každý řádek jako karta */
.format-table th[scope="row"] { color: var(--color-primary); font-weight: 800; }

@media (max-width: 47.99em) {
  .format-table { border: 0; background: none; overflow: visible; }
  .format-table table,
  .format-table tbody,
  .format-table tr,
  .format-table th,
  .format-table td { display: block; }
  .format-table thead { display: none; }
  .format-table tbody { display: grid; gap: var(--space-3); }
  .format-table tr {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .format-table th,
  .format-table td { padding: 0; border: 0; }
  .format-table th[scope="row"] { margin-bottom: var(--space-2); font-size: var(--text-base); }
  .format-table td { padding-block: var(--space-1); }
  .format-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--color-text);
  }
}

.format-cta { margin-top: var(--space-6); }

.format-more__title {
  margin: var(--space-7) 0 var(--space-5);
  font-size: var(--h4);
  color: var(--color-primary);
}

@media (min-width: 48em) {
  .format-more { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-7); }
}

/* Upoutávka LOPPEDU na úvodní stránce */
.edu-teaser .gift__icon { background: var(--color-accent); }

/* Textové náborové inzeráty (SK + EN) */
.job-ad {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.job-ad__title {
  font-size: var(--h4);
  color: var(--color-primary);
}

.job-ad__note {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-weight: 700;
  color: var(--color-accent);
}

.job-ad__lead { color: var(--color-muted); }

.job-ad__subtitle {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.job-ad .check-list { margin: 0; }

.job-ad__contact {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* E-mail + tlačítko „zkopírovat“ s tooltipem */
.copy-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* E-mail se nikdy nezalomí uprostřed; na úzkém mobilu skočí tlačítko pod něj */
.copy-mail .contact-strip__mail {
  font-size: clamp(1rem, 0.85rem + 0.75vw, var(--h5));
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 29.99em) {
  .copy-mail .contact-strip__mail .fa-envelope { display: none; }
}

.copy-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.copy-btn:hover,
.copy-btn:focus-visible { background: var(--color-secondary-soft); border-color: var(--color-secondary); }

.copy-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: 0;   /* zarovnáno k pravému okraji tlačítka, ať nepřeteče z obrazovky */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: 0 4px;
  transition: opacity var(--duration) var(--ease), translate var(--duration) var(--ease);
}

.copy-btn:hover::after,
.copy-btn:focus-visible::after,
.copy-btn.is-copied::after { opacity: 1; translate: 0 0; }

.copy-btn.is-copied { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.copy-btn.is-copied::after { content: attr(data-tip-done); }

.job-ad__tagline {
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--color-muted);
}

/* Galerie plakátů – lightbox (vytváří script.js) */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-7) var(--space-4) var(--space-5);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox[open] { display: grid; place-items: center; animation: modal-in 0.35s var(--ease); }

.lightbox::backdrop {
  background: rgb(63 63 57 / 0.9);
  backdrop-filter: blur(6px);
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* Celý plakát vždy na obrazovku: výška okna minus prostor pro tlačítka a popisek */
.lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 32px 80px rgb(63 63 57 / 0.45);
}

.lightbox__caption {
  font-weight: 700;
  color: var(--color-on-dark);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.lightbox__btn:hover { background: rgb(255 255 255 / 0.24); }
.lightbox__btn:focus-visible { outline: 3px solid var(--color-on-dark); outline-offset: 2px; }

.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__prev,
.lightbox__next { top: 50%; translate: 0 -50%; }
.lightbox__prev { left: var(--space-3); }
.lightbox__next { right: var(--space-3); }
.lightbox__prev i { scale: -1 1; }
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next { display: none; }

/* Mobil: šipky dole vedle popisku, ať nezakrývají plakát */
@media (max-width: 47.99em) {
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: var(--space-3); translate: none; }
}

@media (min-width: 64em) {
  .lightbox { padding: var(--space-6) var(--space-9); }
  .lightbox__prev { left: var(--space-6); }
  .lightbox__next { right: var(--space-6); }
}

.partner-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40em) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (min-width: 64em) {
  .partner-grid { grid-template-columns: repeat(4, 1fr); }
}

.partner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-primary);
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.partner:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

.partner .fa-solid {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
}

.media-list {
  display: grid;
  gap: var(--space-5);
}

/* Karta výstupu: obrázek nahoře, text pod ním, klikací celá karta */
.media-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.media-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.media-item__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.media-item:hover .media-item__img { transform: scale(1.03); }
.media-item__img--podcast { object-position: 50% 35%; }

.media-item__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
}

.media-item__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.media-item__title {
  font-size: var(--h4);
  color: var(--color-primary);
}

.media-item__body > p:not(.media-item__date) { color: var(--color-muted); }

.media-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
}

/* Roztažený odkaz – kliknout jde kamkoli na kartu */
.media-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.media-item:has(.media-item__link) .media-item__body { position: static; }

.media-item__link:focus-visible { outline: none; }
.media-item:focus-within { outline: 3px solid var(--color-secondary); outline-offset: 3px; }

.media-item__link .fa-arrow-up-right-from-square {
  font-size: 0.8em;
  transition: transform var(--duration) var(--ease);
}

.media-item:hover .media-item__link { text-decoration: underline; text-underline-offset: 0.2em; }
.media-item:hover .media-item__link .fa-arrow-up-right-from-square { transform: translate(2px, -2px); }

@media (min-width: 48em) {
  .media-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}


/* Karta s videem: přehrávač místo obrázku, karta jako celek neklikací */
.media-item__video {
  border-radius: 0;
  box-shadow: none;
}

.media-item__video img,
.media-item__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 0;
}

.media-item--video .media-item__link::after { content: none; }
.media-item--video:hover { transform: none; }
.media-item--video:hover .media-item__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .media-item, .media-item__img { transition: none; }
  .media-item:hover, .media-item:hover .media-item__img { transform: none; }
}

.embed {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  background: var(--color-secondary);
}

.embed iframe {
  width: 100%;
  border: 0;
}

/* Aplikace dobití kreditu (cizí doména) nemůže výšku nahlásit sama –
   výšky odpovídají obsahu včetně QR kódu po vyplnění čísla, s rezervou */
.embed--app iframe { height: 147rem; }        /* mobil  ~2 240 px */
.embed--voucher iframe { height: 40rem; }

@media (min-width: 40em) {
  .embed--app iframe { height: 126rem; }      /* tablet ~1 930 px */
}

@media (min-width: 64em) {
  .embed--app iframe { height: 118rem; }      /* malý desktop ~1 800 px */
}

@media (min-width: 90em) {
  .embed--app iframe { height: 104rem; }      /* desktop ~1 570 px */
}

/* Telefonní karta */
.phone-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  text-decoration: none;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.phone-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.phone-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
}

.phone-card__number {
  display: block;
  font-size: var(--h4);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.phone-card__hours {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);   /* v širší kartě na jednom řádku, v úzké pod sebou */
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.phone-card__hours > span { white-space: nowrap; }
.phone-card__hours strong { color: var(--color-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   21. CTA PÁS – text vlevo, fotka vpravo
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  color: var(--color-on-dark);
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(255 255 255 / 0.07) 0%, transparent 60%),
    var(--color-primary);
}

.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.cta-band__inner > * { min-width: 0; }

.cta-band__title {
  max-width: 20ch;
  font-size: var(--h2);
}

.cta-band__text {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-on-dark-muted);
}

.cta-band__text a { color: var(--color-on-dark); }

.cta-band__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 35% 25%;   /* tvář a telefon */
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgb(63 63 57 / 0.3);
}

@media (min-width: 64em) {
  .cta-band { padding-block: var(--space-9); }
  .cta-band__inner { grid-template-columns: 6fr 5fr; gap: var(--space-8); }
  .cta-band__inner:not(:has(.cta-band__photo)) { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------------------------
   22. KONTAKT A FORMULÁŘ
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.contact-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.contact-list .fa-solid,
.contact-list .fa-regular {
  width: 1.25rem;
  color: var(--color-secondary);
}

/* Řádek s e-mailem a tlačítkem „zkopírovat“ */
.contact-list li:has(.copy-btn) { align-items: center; }
.contact-list li:has(.copy-btn) .link { white-space: nowrap; }
.contact-list .copy-btn .fa-regular { width: auto; color: inherit; }

/* Mobil: obálku nahradí tlačítko, ať je e-mail i tlačítko na jednom řádku */
@media (max-width: 29.99em) {
  .contact-list li:has(.copy-btn) { gap: var(--space-2); }
  .contact-list li:has(.copy-btn) > .fa-envelope { display: none; }
}

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .form__row { grid-template-columns: repeat(2, 1fr); }
}

.form__field {
  display: grid;
  gap: var(--space-2);
}

.form__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}

.form__optional {
  font-weight: 500;
  color: var(--color-muted);
}

.form__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  font: inherit;
  color: var(--color-text);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form__input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgb(47 107 79 / 0.15);
}

.form__textarea { resize: vertical; }

/* Honeypot – mimo obrazovku (ne display:none, některé boty ho přeskočí) */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.form .btn { justify-self: start; }

.form__status {
  font-weight: 600;
  color: var(--color-secondary);
}

.form__status:empty { display: none; }
.form__status.is-error { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   23. PATIČKA
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-primary-strong);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

.site-footer a {
  color: var(--color-on-dark);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}


/* Sociální sítě v patičce */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--color-on-dark);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.social-links svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.site-footer .social-links a:hover {
  background: var(--color-accent);
  color: var(--color-on-dark);
  transform: translateY(-2px);
}

.site-footer a:hover { color: var(--color-highlight); }

.emergency {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-7);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.04);
  color: var(--color-on-dark);
  font-size: var(--text-base);
}

.emergency p { max-width: none; }

@media (min-width: 80em) {
  .emergency { align-items: center; font-size: var(--text-sm); }
  .emergency p { white-space: nowrap; }
}

.emergency .fa-triangle-exclamation {
  margin-top: var(--space-1);
  color: var(--color-on-dark);
}

.emergency a {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 48em) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .footer-grid { grid-template-columns: 4fr 3fr 3fr 4fr; gap: var(--space-6); }
}

.footer-text {
  margin-top: var(--space-5);
  line-height: var(--lh-body);
}

.footer-phone {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
}

.footer-phone .fa-phone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  font-size: var(--text-base);
}

.footer-phone small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-dark-muted);
}

.footer-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.footer-title--spaced { margin-top: var(--space-6); }

.footer-links {
  display: grid;
  gap: var(--space-2);
}

.footer-links--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.footer-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-on-dark);
  cursor: pointer;
  text-align: left;
}

.footer-linkbtn:hover { color: var(--color-highlight); }

.footer-address { line-height: 1.8; }
.footer-address a { display: inline-block; padding-block: var(--space-2); margin-block: calc(-1 * var(--space-1)); }

.footer-small {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

/* --------------------------------------------------------------------------
   24. PLOVOUCÍ TELEFON + OKNO „ULOŽTE SI ČÍSLO“
   -------------------------------------------------------------------------- */
.call-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(251 77 59 / 0.4);
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

/* jemné „pulzování“ upozorní na tlačítko */
.call-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(251 77 59 / 0.45);
  animation: fab-pulse 2.6s var(--ease) infinite;
}

.call-fab:hover { transform: scale(1.06); background: var(--color-accent-hover); }
.call-fab:hover .fa-phone { animation: ring 0.6s var(--ease); }

@keyframes fab-pulse {
  70%, 100% { box-shadow: 0 0 0 16px rgb(251 77 59 / 0); }
}

@media (min-width: 48em) {
  .call-fab { right: var(--space-6); bottom: var(--space-6); }
}

.call-modal {
  width: min(100% - 2rem, 32rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);   /* mobil: výška bez lišt prohlížeče */
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 32px 80px rgb(63 63 57 / 0.35);
  overflow: hidden;   /* posuvník je uvnitř a ořízne se zaoblenými rohy */
}

.call-modal:focus { outline: none; }

.call-modal__scroll {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Decentní posuvník v oknech: tenký, zaoblený, bez šedé dráhy u zaoblených rohů */
.call-modal__scroll,
.cookie-bar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

@supports not (scrollbar-color: auto) {   /* Safari */
  .call-modal__scroll::-webkit-scrollbar,
  .cookie-bar::-webkit-scrollbar { width: 14px; }
  .call-modal__scroll::-webkit-scrollbar-track,
  .cookie-bar::-webkit-scrollbar-track { background: transparent; margin-block: var(--radius-lg); }
  .call-modal__scroll::-webkit-scrollbar-thumb,
  .cookie-bar::-webkit-scrollbar-thumb {
    border: 5px solid transparent;
    border-radius: 999px;
    background: var(--color-border) padding-box;
  }
  .call-modal__scroll::-webkit-scrollbar-thumb:hover,
  .cookie-bar::-webkit-scrollbar-thumb:hover { background-color: var(--color-muted); }
}

/* Otevřené okno: stránka pod ním se neposouvá */
html:has(.call-modal[open]) { overflow: hidden; }

.call-modal[open] { animation: modal-in 0.35s var(--ease); }

.call-modal::backdrop {
  background: rgb(47 107 79 / 0.6);
  backdrop-filter: blur(4px);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(var(--space-4)) scale(0.98); }
}

/* Křížek zůstává nahoře i při posouvání obsahu (záporný spodní okraj = nezabírá místo) */
.call-modal__close {
  position: sticky;
  top: var(--space-3);
  z-index: 1;
  margin: var(--space-3) var(--space-3) calc(-2.75rem - var(--space-3)) auto;
  box-shadow: 0 2px 10px rgb(63 63 57 / 0.15);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-muted);
  font-size: var(--text-lg);
  cursor: pointer;
}

.call-modal__close:hover { background: var(--color-secondary-soft); color: var(--color-primary); }

.call-modal__head {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6) var(--space-5);
  text-align: center;
}

.call-modal__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-lg);
}

.call-modal__title {
  font-size: var(--h4);
  color: var(--color-primary);
}

.call-modal__number {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-background);
  font-size: var(--h2);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-primary);
  text-decoration: none;
}

.call-modal__body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  font-size: 0.9375rem;
}

.call-modal__body hr {
  width: 100%;
  margin: var(--space-2) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.call-modal__subtitle {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.call-modal__list {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-5);
  list-style: disc;
}

.call-modal__list li::marker { color: var(--color-accent); }

.call-modal__quote {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-tint);
  font-style: italic;
  color: var(--color-muted);
}

.call-modal__actions {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

@media (min-width: 30em) {
  .call-modal__actions { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------------------------
   25. COOKIE LIŠTA
   -------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 85;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 24px 64px rgb(47 107 79 / 0.28);
  border: 1px solid var(--color-border);
  animation: cookie-in 0.5s var(--ease);
}

.cookie-bar[hidden] { display: none; }

@keyframes cookie-in {
  from { opacity: 0; transform: translateY(var(--space-5)); }
}

@media (min-width: 48em) {
  /* na desktopu uprostřed obrazovky */
  .cookie-bar { inset: 0; margin: auto; height: fit-content; padding: var(--space-6); }
}

.cookie-bar__inner {
  display: grid;
  gap: var(--space-5);
}

.cookie-bar__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.cookie-bar__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
}

.cookie-bar__title {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.cookie-bar__text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.cookie-bar__text a { color: var(--color-secondary); font-weight: 600; }

.cookie-bar__settings {
  display: grid;
  gap: var(--space-2);
}

.cookie-bar__settings[hidden] { display: none; }

.cookie-opt {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  font-size: var(--text-sm);
  cursor: pointer;
}

.cookie-opt input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  accent-color: var(--color-secondary);
}

.cookie-opt strong { color: var(--color-primary); }

.cookie-opt small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.cookie-bar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* „Jen nezbytné“ a „Přijmout vše“ stejně velké */
  gap: var(--space-3);
}

.cookie-bar__actions .btn { min-height: 3rem; padding-inline: var(--space-4); }

.cookie-bar__save { grid-column: 1 / -1; }

.cookie-bar__link {
  grid-column: 1 / -1;
  justify-self: center;
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cookie-bar__link:hover { color: var(--color-primary); }

.cookie-bar__actions [hidden] { display: none; }

/* --------------------------------------------------------------------------
   26. 404 STRÁNKA
   -------------------------------------------------------------------------- */
.error-page {
  display: grid;
  align-items: center;
  min-height: 70vh;
  padding-block: var(--space-8);
}

/* Vlevo text a CTA, vpravo dechové cvičení */
.error-page__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.error-page__content {
  display: grid;
  gap: var(--space-4);
}

.error-page__content .btn-row { margin-top: var(--space-2); }

@media (min-width: 64em) {
  .error-page__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--space-8);
  }
}

.error-page__icon {
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  color: var(--color-secondary);
}

.error-page__sk {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Dechové cvičení (dýchání do čtverce 4-4-4-4) */
.breath {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: center;
}

.breath__title {
  font-size: var(--h5);
  color: var(--color-primary);
}

.breath .eyebrow { margin-bottom: calc(-1 * var(--space-2)); }

.breath__text {
  color: var(--color-muted);
}

/* Čtverec: bod obíhá po stranách (každá strana = jedna fáze), výplň se při nádechu zvětší */
.breath__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 11rem;
  aspect-ratio: 1;
  margin-block: var(--space-4);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-sm);
}

.breath__fill {
  position: absolute;
  inset: var(--space-2);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--color-secondary-soft);
  transform: scale(0.45);
  transition: transform 4s ease-in-out;
}

.breath[data-phase="in"] .breath__fill,
.breath[data-phase="hold-in"] .breath__fill { transform: scale(1); }

.breath__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  translate: -50% -50%;
}

.breath[data-phase] .breath__dot { transition: left 4s linear, top 4s linear; }
.breath[data-phase="in"] .breath__dot { left: 100%; top: 0; }
.breath[data-phase="hold-in"] .breath__dot { left: 100%; top: 100%; }
.breath[data-phase="out"] .breath__dot { left: 0; top: 100%; }
.breath[data-phase="hold-out"] .breath__dot { left: 0; top: 0; }

.breath__count {
  position: relative;
  font-size: var(--h3);
  font-weight: 600;
  color: var(--color-primary);
}

/* Pevná výška = místo pro velký pokyn, ať karta po spuštění neposkočí */
.breath__label {
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

/* Během cvičení: pokyn výrazně */
.breath[data-phase] .breath__label {
  font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem);
  font-weight: 800;
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .breath__fill,
  .breath[data-phase] .breath__dot { transition: none; }
}

/* --------------------------------------------------------------------------
   27. SCROLL ANIMACE
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-5));
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}