/* ============================================================
   COLORIUM.CZ — hlavní styl
   Barvy a typografie odpovídají původnímu webu (Astra + Elementor),
   jen sjednocené do jedné sady proměnných a jedné sady breakpointů.
   ============================================================ */

:root {
  color-scheme: only light;   /* web má jen světlou podobu, prohlížeč ať ji nepřebarvuje */
  /* --- značka --- */
  --c-primary:        #BE0D5A;   /* magenta — akcenty, dividery, filtry */
  --c-btn:            #BE0D5A;   /* magenta tlačítek — shodná se značkou */
  --c-primary-dark:   #A30A4D;
  --c-primary-light:  #FF006F;
  --c-primary-tint:   #FDECF1;

  --c-secondary:      #00A0C0;   /* cyan */
  --c-secondary-dark: #007292;
  --c-secondary-light:#00D4FF;
  --c-secondary-tint: #E9F8F9;
  --c-secondary-deep: #00384E;

  /* --- neutrály --- */
  --c-text:         #454F5E;
  --c-text-strong:  #0F172A;
  --c-text-muted:   #7A7A7A;   /* popisky pod nadpisy */
  --c-table-row:    #E3F7FF;   /* pozadí buněk v ceníkových tabulkách */
  --c-bg:           #FFFFFF;
  --c-bg-alt:       #F7F7F7;
  --c-bg-dark:      #181823;
  --c-border:       #EAEAEA;
  --c-danger:       #DF0808;

  /* --- gradienty --- */
  --grad-brand:   linear-gradient(90deg, var(--c-primary) 20%, var(--c-secondary) 80%);
  --grad-primary: linear-gradient(90deg, var(--c-primary-dark) 0%, var(--c-primary-light) 100%);

  /* --- typografie --- */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-display: 'Forum', Georgia, serif;

  --fs-h1: clamp(2rem, 1rem + 4.5vw, 4rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
  --fs-h3: 1.25rem;
  --fs-h4: clamp(1.5rem, 1.1rem + 1.8vw, 2.1875rem);
  --fs-body: 1rem;

  /* --- layout --- */
  --container: 1300px;
  --gutter: 0px;
  --section-py: clamp(3rem, 2rem + 4vw, 6rem);

  /* --- tvary --- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 6px rgba(0,0,0,.12);
  --shadow-md: 0 2px 10px rgba(0,0,0,.10);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.15);

  --t-fast: .2s ease;
  --t-base: .3s ease-in-out;

  --hdr-h: 92px;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--c-secondary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary); }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; }

h1, h2, h3, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
h1 { font-size: var(--fs-h1); line-height: 1.4; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; color: var(--c-text); }

:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }
::selection { background: var(--c-primary); color: #fff; }

/* ============================================================
   POMOCNÉ TŘÍDY
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-py); }
.section--tint { background: var(--c-primary-tint); }
.section--alt  { background: var(--c-bg-alt); }
/* jemný přechod z bílé do světle modré (sekce Techniky) */
.section--grad { background: linear-gradient(180deg, #FFFFFF 0%, var(--c-secondary-tint) 100%); }

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

/* nadpis sekce + oddělovač */
.sec-head { text-align: center; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sec-head h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -2px;
  color: #000;
  margin-bottom: 20px;
}
/* Oddělovač: plná růžová linka 3 px / 88 px — žádný gradient (jako v originálu) */
.sec-head .divider {
  display: block;
  width: 88px; height: 0;
  border-top: 3px solid var(--c-primary);
  margin: 0 auto;
}
.text-cyan    { color: var(--c-secondary); }
.text-magenta { color: var(--c-primary); }

/* ============================================================
   TLAČÍTKA
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 19px 40px 17px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
.btn--primary { background: var(--c-btn); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }

.btn--secondary { background: var(--c-secondary); color: #fff; }
.btn--secondary:hover { background: var(--c-secondary-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--c-text); border: 1.5px solid var(--c-border); }
.btn--ghost:hover { background: var(--c-bg-alt); color: var(--c-text); border-color: var(--c-text-muted); }

.btn--outline { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }

.btn--lg { padding: 19px 40px 17px; font-size: 17px; }
/* tlačítka uvnitř obsahu jsou v originálu menší a bez prostrkání */
.btn--sm { padding: 15px 30px; font-size: 14px; font-weight: 400; letter-spacing: normal; }

/* ============================================================
   OZNAMOVACÍ LIŠTA
   ============================================================ */
.announce {
  background: var(--c-secondary);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}
.announce__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: .625rem 20px;
}

/* ============================================================
   HLAVIČKA
   ============================================================ */
/* Oznamovací lišta + hlavička drží nahoře jako jeden celek.
   Nad hero je hlavička průhledná s bílým logem; po odscrollování zbělá
   a logo se prohodí za barevné (stejně jako v originálu). */
.hdr-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
}

.hdr {
  background: transparent;
  transition: background var(--t-base), box-shadow var(--t-base);
}
.hdr-wrap.is-stuck .hdr {
  background: #fff;
  box-shadow: var(--shadow-md);
}

/* Hero/page-hero se zasouvá pod průhlednou hlavičku.
   Odsazení shora řeší až responzivní část — obě sekce mají níž v souboru
   vlastní zkrácený zápis `padding`, který by tady zapsaný padding-top stejně
   přebil. Na širokém displeji je hero vysoké a nadpis vyjde pod menu sám. */
.hero, .page-hero { margin-top: calc(-1 * var(--hdr-h)); }

/* přepínání log */
.hdr__logo { position: relative; display: block; }
.hdr__logo img { width: 170px; height: auto; transition: opacity var(--t-base); }
.hdr__logo-white { position: absolute; inset: 0; }
.hdr__logo-color { opacity: 0; }
.hdr-wrap.is-stuck .hdr__logo-color { opacity: 1; }
.hdr-wrap.is-stuck .hdr__logo-white { opacity: 0; }

/* barvy navigace v průhledném stavu */
.hdr__nav > a, .hdr__drop-btn, .hdr__social a { transition: color var(--t-base); }
@media (min-width: 1101px) {
  .hdr:not(.is-solid) .hdr__nav > a,
  .hdr:not(.is-solid) .hdr__drop-btn,
  .hdr:not(.is-solid) .hdr__social a { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .hdr-wrap.is-stuck .hdr__nav > a,
  .hdr-wrap.is-stuck .hdr__drop-btn,
  .hdr-wrap.is-stuck .hdr__social a { color: var(--c-text-strong); text-shadow: none; }
  .hdr-wrap.is-stuck .hdr__nav > a:hover,
  .hdr-wrap.is-stuck .hdr__drop-btn:hover { color: var(--c-primary); }
}
.hdr__burger span { transition: background var(--t-base); }
.hdr-wrap:not(.is-stuck) .hdr__burger span { background: #fff; }

.hdr__inner {
  max-width: 1640px;
  margin-inline: auto;
  padding: .75rem 20px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hdr__logo { flex: 0 0 auto; }
.hdr__logo img { width: 170px; height: auto; }

.hdr__nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
}
/* Menu se celé na jeden řádek vejde až kolem 1640 px. V pásmu pod tím
   stáhneme mezery, ať se láme nanejvýš na dva řádky, ne na tři. */
@media (min-width: 1101px) and (max-width: 1640px) {
  .hdr__nav { gap: .25rem .7rem; }
  .hdr__inner { gap: 1rem; }
}
.hdr__nav > a,
.hdr__drop-btn {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-strong);
  padding: .35rem 0;
  position: relative;
  white-space: nowrap;
}
.hdr__nav > a::after,
.hdr__drop-btn::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--c-primary);
  transition: width var(--t-base);
}
.hdr__nav > a:hover::after,
.hdr__nav > a.is-active::after,
.hdr__drop:hover .hdr__drop-btn::after { width: 100%; }
.hdr__nav > a:hover, .hdr__drop-btn:hover { color: var(--c-primary); }
.hdr__nav > a.is-active { color: var(--c-primary); }

/* dropdown */
.hdr__drop { position: relative; }
.hdr__drop-btn { display: inline-flex; align-items: center; gap: .35rem; }
.hdr__drop-btn svg { transition: transform var(--t-fast); }
.hdr__drop-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.hdr__drop:hover .hdr__drop-menu,
.hdr__drop:focus-within .hdr__drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr__drop:hover .hdr__drop-btn svg { transform: rotate(180deg); }
.hdr__drop-menu a {
  display: block;
  padding: .6rem .85rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--c-text-strong);
}
.hdr__drop-menu a:hover, .hdr__drop-menu a.is-active { background: var(--c-primary-tint); color: var(--c-primary); }

.hdr__right { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; }
.hdr__cta { padding: .8rem 1.5rem; }
/* nad hero: průhledné s bílým orámováním; po odscrollování se vybarví */
@media (min-width: 1101px) {
  .hdr-wrap:not(.is-stuck) .hdr__cta {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff;
  }
  .hdr-wrap:not(.is-stuck) .hdr__cta:hover {
    background: #fff;
    color: var(--c-primary);
  }
}
.hdr__social { display: flex; gap: .6rem; }
.hdr__social a { color: var(--c-text-strong); display: flex; }
.hdr__social a:hover { color: var(--c-primary); }
/* Nad hero je hlavička průhledná — ikonky i hamburger musí být bílé.
   Platí ve všech šířkách, na mobilu leží nad fotkou stejně jako na desktopu. */
.hdr-wrap:not(.is-stuck) .hdr__social a { color: #fff; }

.hdr__burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hdr__burger span { display: block; width: 24px; height: 2px; background: var(--c-text-strong); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 98;
}

/* ============================================================
   PATIČKA
   ============================================================ */
.ftr { position: relative; color: #fff; overflow: hidden; }
.ftr__bg {
  position: absolute; inset: 0;
  background: url('/assets/img/bg-blur.jpg') center/cover no-repeat, var(--c-bg-dark);
  z-index: 0;
}
/* originál nemá ztmavení — rozostřené pozadí zůstává syté */

.ftr__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .8fr;
  gap: 2.5rem;
}
.ftr__logo { width: 180px; margin-bottom: 1.25rem; }
.ftr__company { font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.9); }

.ftr__head { font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: 1.15rem; }
.ftr__list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.ftr__list a { color: rgba(255,255,255,.92); font-size: .875rem; font-weight: 600; }
.ftr__list a:hover { color: #fff; text-decoration: underline; }
.ftr__list--icons li { display: flex; align-items: center; gap: .6rem; }
.ftr__list--icons svg { flex: 0 0 auto; opacity: .9; }

.ftr__social { display: flex; gap: .75rem; }
.ftr__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: #fff;
  transition: background var(--t-base), border-color var(--t-base);
}
.ftr__social a:hover { background: var(--c-primary); border-color: var(--c-primary); }

.ftr__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.22); }
.ftr__bottom-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.ftr__copy { font-size: .8125rem; color: rgba(255,255,255,.9); }
.ftr__copy a { color: #fff; }
.ftr__sep { opacity: .5; margin-inline: .35rem; }
.ftr__badge { width: 150px; opacity: .95; }

/* ============================================================
   COOKIE LIŠTA
   ============================================================ */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
}
.cookie__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.15rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.cookie__text { flex: 1 1 320px; font-size: .875rem; line-height: 1.6; }
.cookie__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.cookie__actions .btn { padding: .8rem 1.5rem; }

/* ============================================================
   RESPONZIVITA
   ============================================================ */
/* Obsah má na desktopu 1300 px bez postranního odsazení (jako originál);
   pod touto šířkou přidáme okraje, ať text nelepí na kraj displeje. */
@media (max-width: 1340px) { :root { --gutter: 20px; } }
@media (max-width: 767px)  { :root { --gutter: 16px; } }

/* Hlavička zůstává vždycky na jednom řádku — jakmile se navigace přestane
   vejít, schová se do hamburgeru. Dřív se lámala do druhého řádku, hlavička
   povyrostla a hero text jí lezl pod nohy. */
@media (max-width: 1100px) {
  .hdr__burger { display: flex; }
  /* Navigace je vysunutá mimo tok, takže skupinu vpravo musíme k pravému
     kraji dotlačit sami. Záporný okraj vyruší vnitřní odsazení hamburgeru —
     jeho čárky pak stojí přesně tam, kde vlevo začíná logo. */
  .hdr__right { margin-left: auto; gap: .75rem; }
  .hdr__burger { margin-right: -.5rem; }

  .hdr__nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 99;
    width: min(320px, 85vw);
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-base);
    box-shadow: var(--shadow-lg);
  }
  .hdr__nav.is-open { transform: translateX(0); }
  .hdr__nav > a, .hdr__drop-btn { padding: .9rem 0; border-bottom: 1px solid var(--c-border); width: 100%; }
  .hdr__nav > a::after, .hdr__drop-btn::after { display: none; }

  .hdr__drop { width: 100%; }
  .hdr__drop-btn { justify-content: space-between; }
  .hdr__drop-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0 0 0 .75rem;
    max-height: 0; overflow: hidden;
    transition: max-height var(--t-base);
  }
  .hdr__drop.is-open .hdr__drop-menu { max-height: 200px; }
  .hdr__drop.is-open .hdr__drop-btn svg { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  .ftr__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Na mobilu se do jednoho řádku musí vejít logo, tlačítko, dvě ikonky
   a hamburger — proto se všechno postupně zmenšuje. */
@media (max-width: 640px) {
  .hdr__inner { padding-inline: var(--gutter); gap: .5rem; }
  .hdr__logo img { width: 120px; }
  .hdr__cta { padding: .6rem .9rem; font-size: .8125rem; }
  .hdr__right { gap: .6rem; }
  .hdr__social { gap: .45rem; }
  .hdr__social svg { width: 18px; height: 18px; }
  .ftr__inner { grid-template-columns: 1fr; }
  .ftr__bottom-inner { flex-direction: column; text-align: center; }
  .cookie__inner { flex-direction: column; align-items: stretch; }
  .cookie__actions .btn { flex: 1 1 auto; }
}

/* Pod 430 px se „Rezervovat termín" zkrátí na „Rezervovat" — jinak se logo,
   tlačítko, ikonky a hamburger do jednoho řádku nevejdou. */
@media (max-width: 430px) {
  .hdr__cta-word { display: none; }
}

@media (max-width: 360px) {
  .hdr__logo img { width: 100px; }
  .hdr__cta { padding: .55rem .75rem; font-size: .75rem; }
  .hdr__inner { gap: .4rem; }
  .hdr__right { gap: .45rem; }
  .hdr__social { gap: .35rem; }
  .hdr__social svg { width: 17px; height: 17px; }
}

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


/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */
.hero {
  position: relative;
  background: url('/assets/img/hero-bg-full.jpg') center bottom / cover no-repeat;
  min-height: clamp(420px, 38vw, 640px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(3rem, 4vw, 5rem) var(--gutter) clamp(5rem, 9vw, 9rem);
  overflow: hidden;
}
/* Ztmavení pozadí, ať bílé texty a menu líp vyniknou:
   1) lehké rovnoměrné ztmavení celé plochy (černá 10 %)
   2) gradient shora — tmavší pod hlavičkou, dolů mizí do ztracena.
   Leží pod textem (z-index 2) i vlnou (z-index 1), takže vlna zůstane bílá. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 32%),
    rgba(0,0,0,.10);
}
.hero__inner { position: relative; z-index: 2; max-width: 1500px; width: 100%; }
/* Ostrá vektorová vlna přes spodek hero — navazuje na bílou sekci pod ním. */
.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(60px, 11vw, 200px);
  display: block; z-index: 1;
}
/* na desktopu se nadpis ani podtitul nelámou */
@media (min-width: 1100px) {
  .hero__title-lg, .hero__sub { white-space: nowrap; }
}
.hero__title { display: grid; gap: .25rem; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
/* -0.032em = na desktopu stejné jako původní -3px při 94px, ale na malých
   displejích se stahuje s písmem, takže se nadpis nemačká. */
.hero__title { font-size: inherit; letter-spacing: -0.032em; }
.hero__title-sm { font-size: clamp(1.75rem, 1rem + 2.4vw, 50px); font-weight: 600; line-height: 1.4; }
.hero__title-lg { font-size: clamp(2.25rem, 1rem + 5.6vw, 94px); font-weight: 600; line-height: 1.4; }
.hero__sub {
  margin: 1rem 0 2rem;
  color: #fff;
  font-size: clamp(.875rem, .6rem + .9vw, 25px);
  font-weight: 400;
  line-height: 1.35;
  /* na mobilu by 7px rozhodilo podtitul na dva řádky s obřími mezerami */
  letter-spacing: clamp(2px, .55vw, 7px);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ============================================================
   INTRO + VIDEO
   ============================================================ */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.intro__text h2 {
  font-size: clamp(1.5rem, .9rem + 2.6vw, 40px);
  font-weight: 600;   /* záměrně tučnější než originál (ten má 400) */
  line-height: 1.3;
  letter-spacing: -2px;
  color: var(--c-text-strong);
  margin-bottom: 1.75rem;
}

.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   JAK TO FUNGUJE — 4 kroky
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { text-align: left; }
.step__img { width: 100%; aspect-ratio: 750 / 550; object-fit: cover; border-radius: 10px; margin-bottom: 1.15rem; }
.step__title { font-size: 26px; font-weight: 600; line-height: 1.3; color: #000; margin-bottom: 9px; }
.step__desc { font-size: 16px; line-height: 1.7; letter-spacing: -.1px; color: var(--c-text-muted); }

/* ============================================================
   O NÁS — cyan pruh
   ============================================================ */
.onas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-secondary);
  color: #fff;
  padding-block: var(--section-py);
}
/* Překryv jako v Elementoru: obrázek přes modrou, režim prolnutí Překrytí, krytí 0,14 */
.onas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/img/bg-full.jpg') center center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .14;
  pointer-events: none;
}
.onas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.onas h2 { color: #fff; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 40px); line-height: 1.3; letter-spacing: -2px; text-align: left; margin-bottom: 1.15rem; }
.onas__label { font-size: 12px; font-weight: 400; line-height: 1.7; color: #fff; text-transform: uppercase; margin-bottom: .35rem; }
.onas p { color: rgba(255,255,255,.95); margin-bottom: 1.75rem; max-width: 46ch; }
.onas .btn--primary:hover { background: #fff; color: var(--c-primary); }
.onas__media img { width: 100%; max-width: 436px; margin-inline: auto; border-radius: 15px; }

/* ============================================================
   TECHNIKY
   ============================================================ */
.tech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tech__card { text-align: center; }
.tech__img { width: 100%; aspect-ratio: 500 / 350; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
.tech__title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--c-text-strong); margin-bottom: 9px; }
.tech__en { color: var(--c-text-strong); font-weight: 600; }
.tech__title .text-cyan    { color: var(--c-secondary); }
.tech__title .text-magenta { color: var(--c-primary); }
.tech__desc { font-size: 16px; line-height: 1.7; letter-spacing: -.1px; color: var(--c-text-muted); }

/* ============================================================
   CENÍK
   ============================================================ */
.sec-head h2.cenik__h {
  font-size: clamp(2rem, 1.3rem + 3vw, 52px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--c-text-strong);
}
.sec-head .cenik__lead {
  margin-top: 1rem;
  font-size: clamp(1rem, .8rem + .9vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}

.price-block { margin-bottom: 2rem; }
.price-block__head {
  background: linear-gradient(90deg, #A30A4D 0%, #FF006F 100%);
  color: #fff;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 40px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  padding: 10px 15px;
  border-radius: 20px 20px 0 0;
  margin-bottom: 4px;
}
.price-block__head--cyan { background: linear-gradient(90deg, #007292 0%, #00D4FF 100%); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ============================================================
   CENÍKOVÉ TABULKY — přesně dle zdrojového CSS originálu
   .price-table--rent  = pronájem studia (cyan gradient, modré řádky)
   .price-table--price = ceny obrazů / ostatní (magenta gradient, růžové řádky)
   ============================================================ */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #eaeaea;
}
.price-table th, .price-table td { border: 1px solid #eaeaea; }

/* hlavička — gradient je na <thead>, buňky jsou průhledné */
.price-table thead th {
  color: #fff;
  font-weight: 700;
  line-height: 27.2px;
  text-align: left;
  padding: 15px 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  white-space: nowrap;
}
.price-table thead th:last-child { border-right: 0; }

.price-table tbody td {
  padding: 5px 10px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- pronájem studia: 50/50, hodnoty vpravo, modré řádky --- */
.price-table--rent thead { background: linear-gradient(90deg, #007292 0%, #00D4FF 100%); }
.price-table--rent thead th:first-child,
.price-table--rent tbody td:first-child { width: 50%; text-align: left; font-weight: 800; }
.price-table--rent thead th:last-child,
.price-table--rent tbody td:last-child  { width: 50%; text-align: right; }
.price-table--rent tbody tr:nth-child(odd) td  { background: #e3f7ff; }
.price-table--rent tbody tr:nth-child(even) td { background: #fff; }

/* --- ceny obrazů a ostatní: magenta gradient, růžové řádky --- */
.price-table--price thead { background: linear-gradient(90deg, #A30A4D 0%, #FF006F 100%); background-color: #BE0D5A; }
.price-table--price thead th { padding: 8px 10px; white-space: normal; word-break: break-word; line-height: 19.2px; }
.price-table--price tbody td { padding: 5px; text-align: right; }
.price-table--price tbody td:first-child { text-align: left; font-weight: 800; background: #fff; }
.price-table--price tbody tr:nth-child(odd) td { background: #fdecf1; }
.price-table--price tbody tr:nth-child(odd) td:first-child { background: #fdecf1; }

/* dvousloupcové varianty (Ostatní, Postavička) drží 50/50 */
.price-table--half thead th:first-child,
.price-table--half tbody td:first-child { width: 50%; }
.price-table--half thead th:last-child,
.price-table--half tbody td:last-child  { width: 50%; text-align: right; }

/* --- široká tabulka rozměrů --- */
.price-table--wide { table-layout: fixed; }
.price-table--wide .sticky-col { position: sticky; left: 0; z-index: 2; }
@media (min-width: 861px) {
  .price-table--wide .sticky-col { background: transparent; }
  .table-scroll { overflow-x: hidden; }
}
@media (max-width: 860px) {
  .price-table--wide thead th.sticky-col { background: #ae0951; }
  .table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: #9ca3af #e5e7eb;
  }
  .table-scroll::-webkit-scrollbar { height: 8px; }
  .table-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 8px; }
  .table-scroll::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 8px; }
}
@media (max-width: 1024px) {
  .price-table--price thead th { padding: 14px 12px; font-size: .95rem; }
  .price-table--price tbody td { padding: 12px; font-size: .95rem; }
}
@media (max-width: 768px) {
  .price-table--rent thead th, .price-table--rent tbody td { white-space: normal; word-break: break-word; }
  /* Popisy dob pronájmu jsou dlouhé, cena je krátká — první sloupec proto
     dostane víc místa, ať se dělicí čára nelepí doleva. Aby se tím záhlaví
     nerozlámalo na půl obrazovky, jde závorka na vlastní menší řádek. */
  .price-table--rent thead th:first-child, .price-table--rent tbody td:first-child { width: 62%; }
  .price-table--rent thead th:last-child,  .price-table--rent tbody td:last-child  { width: 38%; }
  .price-table--rent .th-pozn { display: block; font-size: .78rem; font-weight: 600; line-height: 1.3; margin-top: 3px; }
  .price-table--rent tbody td { padding: 10px 8px; font-size: .95rem; }
}
@media (max-width: 640px) {
  .price-table--wide { min-width: 880px; }
  .price-table--price thead th { padding: 12px 10px; font-size: .9rem; }
  .price-table--price tbody td { padding: 10px; font-size: .9rem; }
}

.price-note { padding: .85rem 0; font-size: .8125rem; color: var(--c-text-muted); font-style: italic; }
.cenik__foto { width: 100%; margin-top: 1rem; }

/* ============================================================
   REZERVACE
   ============================================================ */
.rez-info {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  max-width: 1000px;
  display: grid;
  gap: .35rem;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}
.rezervace { background-image: linear-gradient(180deg, rgba(0,123,173,.15) 30%, #FFFFFF 60%); }
.reservanto { max-width: 1300px; margin-inline: auto; }
/* Reservanto si do tohoto divu vloží iframe s height:100 %. Procenta se ale
   z min-height nedopočítají — iframe by spadl na výchozích 150 px. Proto
   pevná výška, stejně jako to měl původní web. */
.reservanto-iframe { height: 600px; }
.reservanto-iframe iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ============================================================
   DARUJTE ZÁŽITEK
   ============================================================ */
.darujte__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.darujte h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -2px;
  color: #000;
  margin-bottom: 1rem;
}
.darujte p { margin-bottom: 1rem; }
.darujte .btn { margin-top: .75rem; }
.darujte__media img { width: 100%; }

/* ============================================================
   GALERIE
   ============================================================ */
.gal__filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  margin-bottom: 2rem;
}
.gal__filters .gal__filter { margin: 0 10px 10px 0; }
.gal__filter {
  padding: 8px 20px;
  border-radius: 3px;
  background: #C9C9C9;
  border: 0;
  font-size: 14px;
  font-weight: 400;
  color: #555;
  transition: background var(--t-base), color var(--t-base);
}
.gal__filter:hover { background: #BDBDBD; color: #333; }
.gal__filter.is-active { background: var(--c-primary); color: #fff; }

.gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.gal__item { margin: 0; }
.gal__link img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gal__link { display: block; overflow: hidden; background: var(--c-bg-alt); }
.gal__link img { width: 100%; transition: transform .45s ease; }
.gal__link:hover img { transform: scale(1.04); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.9);
  display: grid; place-items: center;
  padding: 3rem 1rem;
}
/* display:grid výše by přebil atribut hidden — proto explicitně */
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; border-radius: var(--r-sm); }
.lightbox__close, .lightbox__nav {
  position: absolute;
  color: #fff; background: rgba(255,255,255,.12);
  border-radius: 50%; display: grid; place-items: center;
  transition: background var(--t-fast);
}
.lightbox__close { top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; font-size: 2rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.4rem; line-height: 1; }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.28); }

/* ============================================================
   KONTAKT
   ============================================================ */
/* Kontakty — jedna karta na pobočku. Mapa nahoře, pod ní údaje.
   Karta si bere barvu pobočky (Třinec modrá, Frýdek růžová), takže dvě
   vedle sebe drží stejný přechod jako zbytek webu. Když je veřejná jen
   jedna pobočka, karta se zúží a postaví doprostřed. */
.kontakt { padding-bottom: var(--section-py); }
.kontakt__grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.kontakt__grid:has(> :only-child) { max-width: 680px; margin-inline: auto; }

.kontakt__pobocka {
  background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
}
.kontakt__map { height: clamp(220px, 26vw, 300px); background: var(--c-bg-alt); }
.kontakt__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Spodek karty je v barvě pobočky, text proto bílý. Popisky jsou lehce
   průhledné, ať nekonkurují samotnému údaji. */
/* bílá linka odděluje mapu od údajů */
.kontakt__telo {
  padding: 1.5rem 1.6rem 1.75rem; flex: 1;
  background: var(--barva-tmava, var(--barva)); color: #fff;
  border-top: 5px solid #fff;
}
.kontakt__nazev {
  margin: 0 0 1.1rem; font-size: clamp(1.25rem, .9rem + 1vw, 1.6rem);
  color: #fff; line-height: 1.2;
}
.kontakt__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kontakt__seznam li { display: flex; align-items: flex-start; gap: .8rem; }
.kontakt__seznam svg { flex: 0 0 auto; color: rgba(255,255,255,.85); margin-top: 2px; }
.kontakt__popis {
  display: block; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: .1rem;
}
.kontakt__seznam a { color: #fff; font-size: 1.0625rem; text-decoration: none; }
.kontakt__seznam a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 480px) {
  .kontakt__telo { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
.container--narrow { max-width: 860px; }
.faq { max-width: none; }
.faq { display: grid; gap: 5px; }
.faq__item { background: transparent; overflow: hidden; }

.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 20px;
  background: var(--c-bg-alt);
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-secondary);
}
.faq__q:hover { background: var(--c-primary); color: #fff; }
.faq__q:hover .faq__icon::before,
.faq__q:hover .faq__icon::after { background: #fff; }
.faq__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 16px; height: 2px; background: var(--c-primary);
  transform: translateY(-50%); transition: transform var(--t-base), opacity var(--t-base);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: translateY(-50%) rotate(0); opacity: 0; }

.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.faq__a-inner { padding: 20px; background: var(--c-bg-alt); font-size: 16px; line-height: 1.7; color: var(--c-text); }

/* ============================================================
   RESPONZIVITA — homepage
   ============================================================ */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tech  { grid-template-columns: repeat(2, 1fr); }
  .gal__grid { columns: 3; }
}

@media (max-width: 860px) {
  .intro__grid,
  .onas__grid,
  .darujte__grid { grid-template-columns: 1fr; }
  .onas__media { order: -1; }
  .onas p { max-width: none; }
  .kontakt__boxes { grid-template-columns: 1fr; margin-top: -2rem; }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .tech  { grid-template-columns: 1fr; }
  .gal__grid { columns: 2; column-gap: 12px; }
  .gal__item { margin-bottom: 12px; }
  .price-table th, .price-table td { padding: .65rem .9rem; }
  .rez-info { text-align: left; padding: 1.15rem; }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.9rem; }
}


/* ============================================================
   PODSTRÁNKY — společné komponenty
   ============================================================ */
.page-hero {
  background: url('/assets/img/bg-podstranky.jpg') center/cover no-repeat;
  min-height: clamp(300px, 26vw, 390px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 4vw, 4.5rem) var(--gutter);
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 1rem + 6.4vw, 117px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
/* delší nadpis (Termíny vyzvedávání…) — menší, ať se na desktopu vejde na řádek */
.page-hero--kompakt h1 { font-size: clamp(1.6rem, .9rem + 3.1vw, 60px); }

.collage { width: 100%; border-radius: var(--r-md); margin-bottom: clamp(2rem, 3vw, 3rem); }

/* barevné informační bloky */
.infobox {
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  margin-bottom: 2rem;
}
.infobox--cyan { background: var(--c-secondary-tint); }
.infobox--pink { background: var(--c-primary-tint); }
.infobox > h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  padding-bottom: .85rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.infobox h3 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
.infobox h3:first-of-type { margin-top: 0; }
.infobox p { font-size: .9375rem; margin-bottom: .75rem; }
.infobox p:last-child { margin-bottom: 0; }
.infobox ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .4rem; }
.infobox li { font-size: .9375rem; }

.page-h2 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 700;
  color: var(--c-text-strong);
  margin: clamp(2rem, 3vw, 3rem) 0 1.5rem;
}
.page-h3 { font-size: 1.125rem; margin: 2rem 0 1rem; }

/* datové tabulky na podstránkách */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; }
.data-table th, .data-table td {
  padding: .8rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.data-table thead th { color: #fff; font-weight: 700; }
.data-table--cyan thead th    { background: var(--c-secondary); }
.data-table--magenta thead th { background: var(--c-primary); }
.data-table tbody tr:nth-child(even) { background: var(--c-bg-alt); }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table--compact th, .data-table--compact td { padding: .6rem .8rem; font-size: .8125rem; }
.data-table td:not(:first-child), .data-table--compact th:not(:first-child) { white-space: nowrap; }

/* první sloupec drží při horizontálním scrollu */
.data-table--sticky tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--c-bg-alt);
  font-weight: 700;
  border-right: 1px solid var(--c-border);
}
.data-table--sticky thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--c-primary);
}

.table-note { font-size: .8125rem; margin-top: .85rem; color: var(--c-text-muted); }
.check-line { font-size: .9375rem; margin-bottom: .5rem; }

.contact-line {
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  font-weight: 600;
  color: var(--c-text-strong);
  margin-top: clamp(2rem, 3vw, 3rem);
}
.contact-line a { color: var(--c-primary); font-weight: 700; }
.contact-line a:hover { text-decoration: underline; }

/* textové stránky (VOP, GDPR) */
.doc { max-width: 860px; }
.doc h2 { font-size: 1.25rem; margin: 2rem 0 .85rem; color: var(--c-text-strong); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.0625rem; margin: 1.5rem 0 .6rem; }
.doc p { margin-bottom: 1rem; font-size: .9375rem; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.35rem; display: grid; gap: .35rem; }
.doc li { font-size: .9375rem; }

@media (max-width: 640px) {
  .data-table th, .data-table td { padding: .6rem .8rem; }
  .infobox { padding: 1.25rem; }
}


/* ============================================================
   STRÁNKA POUKAZŮ — prostý text s emoji nadpisy (jako originál)
   ============================================================ */
.pk-top {
  display: grid;
  /* Poukaz je to, co má zaujmout. Sekce je proto širší než zbytek stránky
     (1300 px) — obrázek se tím zvětší, aniž by se cokoli jiného zúžilo. */
  max-width: 1560px;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pk-top__media img { width: 100%; height: auto; }
/* Na užších monitorech vrátíme textu víc místa, ať se řádek s částkou,
   počtem a tlačítkem nezalamuje. Velký poukaz má smysl až tam, kde je
   místa dost. */
@media (max-width: 1200px) {
  .pk-top { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
}

.pk-h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -2px;
  color: #000;
  margin-bottom: 1.25rem;
}

/* malé tučné nadpisy s emoji */
.pk-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
  margin: 1.75rem 0 .5rem;
}
.pk-label:first-of-type { margin-top: 0; }
.pk-label__note { font-weight: 400; }

.pk-list { margin: 0 0 1rem; padding-left: 1.35rem; display: grid; gap: .2rem; }
.pk-list li { font-size: 15px; line-height: 1.6; }
.pk-list--num { list-style: decimal; }

.pk-info p { font-size: 15px; margin-bottom: .6rem; }
.pk-small { font-size: 14px; color: var(--c-text-muted); }
.pk-note { font-size: 15px; margin: 1.25rem 0 1.75rem; }
.pk-sep { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0 1.5rem; }

/* spodní informační blok: plynulý přechod z modré do bílé (stejně jako sekce Rezervace) */
.pk-info { background-image: linear-gradient(180deg, rgba(0,123,173,.15) 30%, #FFFFFF 60%); }
.container--pk { max-width: 1300px; }

/* jednoduchý objednávkový formulář */
/* Nákupní blok na stránce Poukazy.
   Je oddělený od informací nad ním — má vlastní kartu, ať je jasné, kde
   končí čtení a začíná objednávání. Uvnitř dvě části pod sebou: výběr
   pobočky (dlaždice vedle sebe) a hodnota poukazu s počtem a tlačítkem
   na jednom řádku. */
.pk-form {
  margin-top: 2rem;
  padding: 1.5rem 1.6rem 1.65rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.pk-form__blok + .pk-form__blok {
  margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--c-border);
}
.pk-form__label {
  display: block; margin-bottom: .6rem;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.pk-form__radek { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* tlačítko dobere zbytek řádku, ať je zarovnané s dlaždicemi poboček nad ním */
.pk-form__radek .pk-submit { flex: 1 1 auto; }
.pk-form input[type="number"] {
  height: 46px;
  padding: 0 .85rem;
  border: 1px solid #d5d8dc;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  width: 170px;
}
.pk-form input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(190,13,90,.12); }
.pk-qty { width: 74px !important; text-align: center; }
.pk-submit {
  height: 46px;
  padding: 0 1.6rem;
  background: var(--c-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  transition: background var(--t-base);
}
.pk-submit:hover { background: var(--c-primary-dark); }
@media (max-width: 480px) {
  .pk-form { padding: 1.25rem 1.15rem 1.4rem; }
  .pk-form__radek input[type="number"]:not(.pk-qty) { flex: 1 1 130px; width: auto; }
  .pk-submit { flex: 1 1 100%; }
}

/* kontaktní pruh bez mapy */
.kontakt--plain { padding-top: 0; }
.kontakt--plain .kontakt__boxes { margin-top: 0; }

@media (max-width: 860px) {
  .pk-top { grid-template-columns: 1fr; }
  .pk-top__media { order: -1; max-width: 460px; }
}

/* ============================================================
   TERMÍNY VYZVEDÁVÁNÍ
   ============================================================ */
.terminy__uvod { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 700; color: var(--c-text-strong); margin-bottom: 1rem; }
.terminy__sep { border: 0; border-top: 2px solid var(--c-primary); margin: 1rem 0; }
.terminy__warn { font-size: .9375rem; margin-bottom: 1.25rem; color: var(--c-text-strong); }
.terminy__list { margin: 0; }
.terminy__list dt { font-weight: 700; color: var(--c-text-strong); margin-top: .55rem; }
.terminy__list dt:first-child { margin-top: 0; }
.terminy__list dd { margin: .05rem 0 0 0; font-size: .9375rem; line-height: 1.5; }
.terminy__list dd.is-closed { color: var(--c-text-muted); }

@media (max-width: 860px) {
  .pk-intro, .pk-order, .pk-cards { grid-template-columns: 1fr; }
  .pk-intro__media { order: -1; max-width: 460px; }
}


/* ============================================================
   PODSTRÁNKY — Teambuilding / Školy (rozvržení dle originálu)
   ============================================================ */
.page-h2--sm { font-size: clamp(1.5rem, 1rem + 2vw, 34px); margin-top: 0; }
.pg-lead { font-size: 15px; line-height: 1.7; margin-bottom: 1.5rem; }
.pg-sep { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }

/* jeden světle modrý blok obsahující varianty i tabulku */
.pg-box {
  background: var(--c-secondary-tint);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.pg-box h3 { font-size: 20px; font-weight: 600; color: var(--c-text-strong); margin: 1.5rem 0 .5rem; }
.pg-box h3:first-child { margin-top: 0; }
.pg-box p { font-size: 15px; line-height: 1.7; margin-bottom: 1.25rem; }
.pg-box .table-scroll { margin-top: 1.5rem; }

/* tabulka technik: plná cyan hlavička, střídání bílá / světle šedá */
.price-table--tech thead { background: var(--c-secondary); }
.price-table--tech thead th { padding: 12px 15px; }
.price-table--tech tbody td { padding: 12px 15px; font-weight: 400; white-space: normal; }
.price-table--tech tbody td:first-child { font-weight: 400; white-space: nowrap; }
.price-table--tech tbody tr:nth-child(odd) td  { background: #fff; }
.price-table--tech tbody tr:nth-child(even) td { background: var(--c-bg-alt); }

/* --- Školy a školky: koláž vlevo, video (Shorts) vpravo --- */
.sk-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.sk-media__collage { width: 100%; height: 100%; object-fit: cover; }
.sk-media__video { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.sk-media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* varianty barevných bloků a nadpisů uvnitř */
.pg-box--pink { background: var(--c-primary-tint); }
.pg-box__title { font-size: 24px; font-weight: 600; margin-bottom: 1rem; }
.pg-box h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--c-text-strong); margin: 1.25rem 0 .4rem; }
.pg-box h4:first-of-type { margin-top: 0; }
.pg-list { margin: 0; padding-left: 1.35rem; display: grid; gap: .2rem; }
.pg-list li { font-size: 15px; line-height: 1.6; }
.pg-subhead { font-size: 17px; font-weight: 600; margin: 0 0 1rem; }

@media (max-width: 860px) {
  .sk-media { grid-template-columns: 1fr; }
  .sk-media__video { max-width: 300px; margin-inline: auto; }
}


/* ============================================================
   KOŠÍK / POKLADNA / DĚKOVACÍ STRÁNKA
   ============================================================ */

.zprava { padding: 1rem 1.25rem; border-radius: var(--r-sm); margin-bottom: 1.5rem; font-size: 15px; }
.zprava--ok    { background: var(--c-secondary-tint); border-left: 4px solid var(--c-secondary); }
.zprava--chyba { background: #FDECEC; border-left: 4px solid var(--c-danger); color: #8B1A1A; }

.kos-prazdny { font-size: 17px; margin-bottom: 1.5rem; }

.kos-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kos-table th, .kos-table td { padding: 14px 12px; border-bottom: 1px solid var(--c-border); text-align: left; }
.kos-table thead th { font-weight: 700; color: var(--c-text-strong); }
.kos-qty { width: 72px; padding: .45rem .5rem; border: 1px solid #d5d8dc; border-radius: 3px; font-size: 15px; }
.kos-remove { width: 40px; text-align: right; }
.kos-x { font-size: 22px; line-height: 1; color: var(--c-text-muted); padding: 0 .25rem; }
.kos-x:hover { color: var(--c-danger); }
.kos-akce { margin: 1rem 0 2rem; }

.kos-souhrn { border: 1px solid var(--c-border); padding: 1.5rem; max-width: 420px; margin-left: auto; }
.kos-souhrn h2 { font-size: 20px; margin-bottom: 1rem; }
.kos-souhrn__table { width: 100%; font-size: 15px; margin-bottom: 1.25rem; }
.kos-souhrn__table th { text-align: left; font-weight: 400; padding: .4rem 0; }
.kos-souhrn__table td { text-align: right; padding: .4rem 0; }
.kos-souhrn__total th, .kos-souhrn__total td { font-weight: 700; border-top: 1px solid var(--c-border); padding-top: .75rem; }
.kos-souhrn .btn { width: 100%; }

/* --- pokladna --- */
.pok { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.pok h2 { font-size: 22px; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--c-border); }
.pok__form h2:not(:first-child) { margin-top: 2.5rem; }
.pok__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pok__field { margin-bottom: 1.15rem; }
.pok__field label { display: block; font-size: 14px; font-weight: 600; color: var(--c-text-strong); margin-bottom: .35rem; }
.pok__field input, .pok__field select, .pok__field textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d5d8dc; border-radius: 3px;
  font-size: 15px; background: #fff;
}
.pok__field input:focus, .pok__field select:focus, .pok__field textarea:focus { outline: none; border-color: var(--c-primary); }
.req { color: var(--c-danger); }
.err { display: block; margin-top: .3rem; font-size: 13px; color: var(--c-danger); }

.pok__souhrn { border: 1px solid var(--c-border); padding: 1.5rem; }
.pok__items { width: 100%; font-size: 15px; margin-bottom: 1.5rem; }
.pok__items th, .pok__items td { padding: .6rem 0; text-align: left; border-bottom: 1px solid var(--c-border); }
.pok__items td:last-child, .pok__items th:last-child { text-align: right; }
.pok__items small { color: var(--c-text-muted); }
.pok__qty { color: var(--c-text-muted); }
.pok__total th, .pok__total td { font-weight: 700; border-bottom: 0; }

.pok__platba { margin-bottom: 1.25rem; }
.pok__radio { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; font-size: 15px; cursor: pointer; }
.pok__platba-info { background: var(--c-bg-alt); padding: 1rem; font-size: 14px; line-height: 1.6; margin-bottom: .75rem; }
/* náhled poukazu u položky v košíku a pokladně — jen fotka, bez rámečku */
.kos-produkt, .pok__produkt { display: flex; align-items: center; gap: .7rem; }
.kos-produkt img, .pok__produkt img { flex: 0 0 auto; width: 56px; height: auto; border-radius: 3px; }
.pok__produkt img { width: 48px; }

/* firemní údaje — rozbalí se po zaškrtnutí „Nakupuji na firmu" */
.pok__firma { margin-top: .25rem; }

.pok__check { display: flex; gap: .6rem; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.pok__platba-info .pok__check { border: 1px solid var(--c-primary); padding: .85rem; background: #fff; margin-top: .85rem; }
.pok__terminy { margin-top: 1rem; border-top: 1px dashed var(--c-primary); padding-top: 1rem; }
.pok__terminy-head { font-weight: 700; margin-bottom: .5rem; }
.pok__terminy-note { margin-top: 1rem; font-size: 12px; color: var(--c-text-muted); }
.pok__terminy .terminy__uvod { font-size: 15px; }
.pok__terminy .terminy__list dd { font-size: 14px; }

.pok__souhlas { margin: 1.25rem 0; }
.pok__souhlas.is-err { color: var(--c-danger); }
.pok__gdpr { font-size: 13px; line-height: 1.6; color: var(--c-text-muted); margin-bottom: 1.25rem; }
.pok__submit { width: 100%; }

/* --- děkovací stránka --- */
.dek-lead { font-size: 17px; margin-bottom: 1.5rem; }
.dek-shrnuti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--c-border); padding-bottom: 1.25rem; }
.dek-shrnuti li { display: grid; gap: .2rem; }
.dek-shrnuti span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.dek-info { background: var(--c-bg-alt); padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 15px; }
/* termíny vyzvednutí na děkovací stránce (jen u osobního odběru) */
.dek-terminy { margin-bottom: 2rem; padding: 1.5rem 1.75rem; background: var(--c-secondary-tint);
               border-left: 4px solid var(--c-secondary); border-radius: 0 8px 8px 0; }
.dek-terminy .terminy__uvod { font-size: 1.05rem; }
.dek-terminy__odkaz { margin: 1rem 0 0; font-size: 14px; color: #555; }
.dek-h2 { font-size: 20px; margin: 2rem 0 1rem; }
.dek-platba { border: 1px solid var(--c-border); padding: 1.5rem; display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.dek-platba__table { flex: 1 1 320px; font-size: 15px; }
.dek-platba__table th { text-align: left; font-weight: 600; padding: .5rem 0; }
.dek-platba__table td { text-align: right; padding: .5rem 0; font-weight: 700; }
/* QR musí zůstat černý na bílém, jinak ho bankovní aplikace nenačte —
   proto vlastní bílý podklad i tam, kde si prohlížeč stránku ztmaví */
.dek-qr { text-align: center; margin: 0; }
.dek-qr img, .rez-platba__qr img { background: #fff; padding: 10px; border-radius: 10px; }
.dek-qr figcaption { font-size: 12px; color: var(--c-text-muted); margin-top: .4rem; }
.dek-table { width: 100%; font-size: 15px; border-collapse: collapse; }
.dek-table th, .dek-table td { padding: .7rem 0; border-bottom: 1px solid var(--c-border); text-align: left; }
.dek-table td:last-child, .dek-table th:last-child { text-align: right; }
.dek-adresa { font-style: normal; font-size: 15px; line-height: 1.7; }
.dek-test { margin-top: 2rem; padding: .85rem 1rem; background: #FFF8E5; border: 1px solid #FFE1A3; font-size: 14px; }

@media (max-width: 860px) {
  .pok { grid-template-columns: 1fr; }
  .pok__row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .kos-table thead { display: none; }
  .kos-table tr { display: block; border-bottom: 1px solid var(--c-border); padding: .5rem 0; }
  .kos-table td { display: flex; justify-content: space-between; border: 0; padding: .4rem 0; }
  .kos-table td::before { content: attr(data-label); font-weight: 600; color: var(--c-text-strong); }
  .kos-souhrn { max-width: none; }
}

/* rozbalovací panely platebních metod */
.pok__panel { background: var(--c-bg-alt); padding: 1rem; font-size: 14px; line-height: 1.6; margin-bottom: .75rem; }
.pok__panel[hidden] { display: none; }
.pok__panel > p:first-child { margin-bottom: 0; }
.pok__odber { margin-top: .85rem; }
.pok__odber .pok__check { border: 1px solid var(--c-primary); padding: .85rem; background: #fff; }
.pok__odber .pok__terminy { border: 1px solid var(--c-primary); border-top: 0; background: #fff; padding: 0 .85rem .85rem; margin-top: 0; }
.pok__terminy[hidden] { display: none; }

/* ============================================================
   ODSAZENÍ HERO POD HLAVIČKOU

   Musí být až tady, na konci souboru. `.hero` i `.page-hero` mají výš
   zkrácený zápis `padding`, který jakýkoli dřívější `padding-top` přebije —
   ať už je v media query nebo ne. Proto se to řeší až za nimi.

   Neřídí se šířkou okna, ale skutečnou výškou hlavičky (--hdr-h dopočítá JS).
   Hlavička roste podle toho, na kolik řádků se zlomí menu — na širokém
   displeji 70 px, kolem 1300 px už 105 px. Proto `max()`: platí větší
   z původního odsazení a výšky hlavičky + kousek. Na nejširších displejích
   je rozdíl pár pixelů, v úzkém pásmu to odsune nadpis pod menu.
   ============================================================ */
.hero      { padding-top: max(clamp(3rem, 4vw, 5rem), calc(var(--hdr-h) + 1.25rem)); }
.page-hero { padding-top: max(clamp(2.5rem, 4vw, 4.5rem), calc(var(--hdr-h) + 1.25rem)); }

/* Po odscrollování hlavička zbělá — ikonky sítí musí ztmavnout spolu
   s hamburgerem, jinak by na mobilu zmizely (bílá na bílé). Explicitně
   až tady, ať to nezáleží na pořadí dřívějších pravidel. */
.hdr-wrap.is-stuck .hdr__social a { color: var(--c-text-strong); }
.hdr-wrap.is-stuck .hdr__social a:hover { color: var(--c-primary); }

/* ============================================================
   TELEFONY: HLAVIČKA VŽDYCKY PODBARVENÁ

   Na malém displeji je průhledná hlavička nad fotkou nečitelná a hero
   text se pod ni schovává. Do 900 px je proto rovnou v bílém stavu
   s barevným logem, i když je návštěvník úplně nahoře — na desktopu
   zůstává přechod při odscrollování beze změny.

   Selektory drží tvar `.hdr-wrap:not(.is-stuck) …`, aby měly stejnou
   specificitu jako pravidla, která přebíjejí. Rozhoduje pořadí v souboru.
   ============================================================ */
@media (max-width: 900px) {
  .hdr-wrap:not(.is-stuck) .hdr { background: #fff; box-shadow: var(--shadow-md); }
  .hdr-wrap:not(.is-stuck) .hdr__logo-color { opacity: 1; }
  .hdr-wrap:not(.is-stuck) .hdr__logo-white  { opacity: 0; }
  .hdr-wrap:not(.is-stuck) .hdr__burger span { background: var(--c-text-strong); }
  .hdr-wrap:not(.is-stuck) .hdr__social a    { color: var(--c-text-strong); }

  /* Hlavička už není průhledná, takže se pod ni hero nemá zasouvat —
     fotka i nadpis začínají až pod ní. */
  .hero, .page-hero { margin-top: 0; }
  .hero      { padding-top: clamp(2rem, 7vw, 3.5rem); }
  .page-hero { padding-top: clamp(1.75rem, 6vw, 3rem); }
}

/* ============================================================
   ZAVÍRÁNÍ MOBILNÍHO MENU

   Vysunutý panel (z-index 99) překrýval hamburger, takže po otevření
   nebylo na co kliknout. Hamburger proto dáme nad panel — jeho čárky se
   při otevření přetočí do křížku. Panel je bílý, takže musí být tmavé.
   ============================================================ */
.hdr__burger { position: relative; z-index: 101; }
.hdr-wrap .hdr__burger[aria-expanded="true"] span { background: var(--c-text-strong); }

/* Pruh na vývojové kopii (dev.colorium.cz). Na ostrém webu se nevykreslí. */
.dev-pruh {
  background: #c81e1e; color: #fff; text-align: center;
  padding: 7px 16px; font-size: 13px; font-weight: 700; line-height: 1.35;
}

/* ============================================================
   VÝBĚR POBOČKY V POKLADNĚ
   Zobrazí se jen když jsou veřejné aspoň dvě pobočky.
   ============================================================ */
.pok__pobocky-popis { margin: 0 0 .75rem; font-size: 14px; color: var(--c-text-muted); }
.pok__pobocky { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
.pok__pobocka {
  position: relative; display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.1rem; border: 2px solid var(--c-border); border-radius: 10px;
  background: #fff; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.pok__pobocka:hover { border-color: var(--barva); }
.pok__pobocka input { position: absolute; opacity: 0; pointer-events: none; }
.pok__pobocka-nazev { font-weight: 700; font-size: 1.05rem; color: var(--c-text-strong); }
.pok__pobocka-adresa { font-size: 13px; color: var(--c-text-muted); }
.pok__pobocka:has(input:checked) { border-color: var(--barva); background: color-mix(in srgb, var(--barva) 7%, #fff); }
.pok__pobocka:has(input:checked) .pok__pobocka-nazev { color: var(--barva); }
.pok__pobocka:has(input:focus-visible) { outline: 2px solid var(--barva); outline-offset: 2px; }

/* Patička u dvou poboček — každá firma i kontakt má svůj blok s nadpisem. */
.ftr__company + .ftr__company { margin-top: .9rem; }
.ftr__company-pobocka,
.ftr__kontakt-pobocka {
  display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: .2rem;
}
.ftr__kontakt-pobocka { margin-top: 1rem; }
.ftr__kontakt-pobocka:first-of-type { margin-top: 0; }

/* Termíny rozdělené po pobočkách — vedle sebe, ať se nemusí scrollovat.
   Na užších displejích spadnou pod sebe a oddělí je linka. */
.terminy-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
@media (max-width: 767px) {
  .terminy-pobocka + .terminy-pobocka { padding-top: 2rem; border-top: 1px solid var(--c-border); }
}
.terminy-pobocka__nazev { color: var(--barva); margin-bottom: 1rem; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); }

/* Seznam provozovatelů v obchodních podmínkách. */
.vop-pobocky { margin: .5rem 0 1rem 1.25rem; }
.vop-pobocky li { margin-bottom: .5rem; }

/* Výběr pobočky u hodnoty poukazu (stránka Poukazy). */
.pk-pobocky { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pk-pobocka {
  display: flex; flex-direction: column; gap: .1rem; cursor: pointer;
  padding: .8rem .9rem; border: 2px solid var(--c-border); border-radius: 10px; background: #fff;
}
.pk-pobocka input { position: absolute; opacity: 0; pointer-events: none; }
.pk-pobocka:hover { border-color: var(--barva); }
.pk-pobocka__nazev { font-weight: 700; color: var(--c-text-strong); }
.pk-pobocka__adresa { font-size: 12px; color: var(--c-text-muted); }
.pk-pobocka:has(input:checked) { border-color: var(--barva); background: color-mix(in srgb, var(--barva) 7%, #fff); }
.pk-pobocka:has(input:checked) .pk-pobocka__nazev { color: var(--barva); }
/* rozdělaný košík = pobočka je daná, dlaždice jen ukazují stav */
.pk-pobocky.je-zamceno .pk-pobocka { cursor: default; opacity: .55; }
.pk-pobocky.je-zamceno .pk-pobocka:has(input:checked) { opacity: 1; }
.pk-pobocky__pozn { margin: .6rem 0 0; font-size: 13px; color: var(--c-text-muted); }

/* Připomenutí pobočky v pokladně. */
.pok__pobocka-info {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-bottom: 1.5rem; border-radius: 10px;
  background: color-mix(in srgb, var(--barva) 8%, #fff); border-left: 4px solid var(--barva);
}
.pok__pobocka-info strong { color: var(--barva); font-size: 1.05rem; }
.pok__pobocka-info__popis,
.pok__pobocka-info__adresa { font-size: 13px; color: var(--c-text-muted); }
.pok__pobocka-info a { margin-left: auto; font-size: 13px; }

/* ============================================================
   ZJEDNODUŠENÉ KONTAKTY NA POBOČKY
   Drobný blok pod obsahem stránky — bez map, jen údaje. Plnou verzi
   s mapami má homepage.
   ============================================================ */
.kont-pobocky { margin-top: 2.5rem; }
.kont-pobocky__nadpis { font-size: 1.15rem; margin-bottom: 1rem; }
.kont-pobocky__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kont-pobocka {
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--barva);
  color: #fff;
  border-radius: 12px;
}
.kont-pobocka__nazev {
  margin: 0 0 .45rem; font-weight: 700; color: #fff; font-size: 1.125rem;
}
.kont-pobocka ul { list-style: none; margin: 0; padding: 0; }
.kont-pobocka li { font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.92); }
.kont-pobocka a { color: #fff; text-decoration: none; }
.kont-pobocka a:hover { text-decoration: underline; }

/* ============================================================
   REZERVACE — veřejný formulář a stránka rezervace
   ============================================================ */

.rez-karta {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 1.6rem 1.7rem 1.8rem;
  margin-bottom: 1.4rem;
}
.rez-h2 { margin: 0 0 .35rem; font-size: 1.25rem; color: var(--c-text-strong); }
.rez-h3 { margin: 1.6rem 0 .7rem; font-size: 1.0625rem; color: var(--c-text-strong); }
.rez-pozn { margin: 0 0 1.1rem; font-size: .9375rem; color: var(--c-text-muted); }
.rez-pozn--stred { text-align: center; margin: 1.2rem 0 0; }
.rez-nepovinne { font-weight: 400; color: var(--c-text-muted); }

.rez-chyba {
  background: #fdecec; border-left: 4px solid var(--c-danger);
  border-radius: 0 10px 10px 0; padding: .9rem 1.2rem; margin-bottom: 1.3rem;
}
.rez-chyba p { margin: .2rem 0; font-size: .9375rem; color: #8a1010; }

/* --- dlaždice (pobočka, délka) --- */
.rez-dlazdice { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rez-dlazdice__polozka {
  display: flex; flex-direction: column; gap: .2rem; text-align: center;
  padding: 1.15rem 1rem; border: 2px solid var(--c-border); border-radius: 12px;
  text-decoration: none; color: var(--c-text); transition: border-color .15s, transform .15s;
}
.rez-dlazdice__polozka:hover { border-color: var(--c-primary); transform: translateY(-2px); }
.rez-dlazdice__polozka strong { font-size: 1.0625rem; color: var(--c-text-strong); }
.rez-dlazdice__polozka span { font-size: .875rem; color: var(--c-text-muted); }
.rez-dlazdice__polozka--pobocka { background: var(--barva); border-color: var(--barva); }
.rez-dlazdice__polozka--pobocka strong,
.rez-dlazdice__polozka--pobocka span { color: #fff; }
.rez-dlazdice__polozka--pobocka:hover { border-color: var(--barva); filter: brightness(1.07); }

/* --- drobečky s vybranými kroky --- */
.rez-kroky { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.rez-kroky__polozka {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-bg-alt); border-radius: 999px; padding: .35rem .85rem;
  font-size: .875rem; color: var(--c-text-strong);
}
.rez-kroky__polozka a { font-size: .8125rem; color: var(--c-primary); text-decoration: underline; }

/* --- nabídka služeb --- */
.rez-sluzby { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.3rem; }
.rez-sluzba {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 1.15rem; border: 1px solid var(--c-border); border-radius: 11px;
  text-decoration: none; color: var(--c-text); background: #fff;
  transition: border-color .15s, background .15s;
}
.rez-sluzba:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }
.rez-sluzba__hlavni { display: flex; flex-direction: column; gap: .15rem; }
.rez-sluzba__hlavni strong { font-size: 1.0625rem; color: var(--c-text-strong); }
.rez-sluzba__popis { font-size: .875rem; color: var(--c-text-muted); }
.rez-sluzba__cena { text-align: right; display: flex; flex-direction: column; gap: .1rem; flex: 0 0 auto; }
.rez-sluzba__cena strong { font-size: 1.0625rem; color: var(--c-primary); white-space: nowrap; }
.rez-sluzba__cena span { font-size: .75rem; color: var(--c-text-muted); }

/* --- kalendář --- */
.rez-kalendar { display: grid; gap: 1.8rem; grid-template-columns: minmax(260px, 320px) 1fr; align-items: start; }

.rez-mesic-hlava {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .8rem; font-size: 1.0625rem; color: var(--c-text-strong);
}
.rez-mesic-hlava strong { text-transform: capitalize; }
.rez-sipka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  color: var(--c-secondary-dark); text-decoration: none; background: var(--c-secondary-tint);
}
.rez-sipka:hover { background: var(--c-secondary); color: #fff; }
.rez-sipka.is-off { opacity: .3; background: var(--c-bg-alt); color: var(--c-text-muted); }

.rez-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.rez-mrizka__hlava {
  text-align: center; font-size: .75rem; color: var(--c-text-muted);
  text-transform: uppercase; padding-bottom: .3rem;
}
.rez-dencal {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 50%; font-size: .9375rem; font-weight: 600;
  color: var(--c-text-strong); text-decoration: none; border: 1px solid var(--c-border);
}
.rez-dencal:hover { border-color: var(--c-secondary); background: var(--c-secondary-tint); }
.rez-dencal.is-off { color: #c3cbd4; border-color: transparent; font-weight: 400; }
.rez-dencal.is-vybrany { background: var(--c-secondary); border-color: var(--c-secondary); color: #fff; }

.rez-casy__den { margin: 0 0 .9rem; font-weight: 700; color: var(--c-text-strong); }
.rez-casy__nadpis { margin: .9rem 0 .45rem; font-size: .8125rem; color: var(--c-text-muted); }
.rez-casy__nadpis:first-of-type { margin-top: 0; }

/* --- časy --- */
.rez-casy { display: flex; flex-wrap: wrap; gap: .5rem; }
.rez-cas {
  min-width: 74px; text-align: center; padding: .6rem .8rem;
  border: 1px solid var(--c-border); border-radius: 9px;
  text-decoration: none; color: var(--c-text-strong); font-weight: 600; font-size: .9375rem;
}
.rez-cas:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }

/* --- souhrn a formulář --- */
.rez-souhrn {
  background: var(--c-bg-alt); border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 1.4rem;
}
.rez-souhrn div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; font-size: .9375rem; border-bottom: 1px solid #e6e9ec;
}
.rez-souhrn div:last-child { border-bottom: 0; }
.rez-souhrn span { color: var(--c-text-muted); }
.rez-souhrn strong { color: var(--c-text-strong); text-align: right; }

.rez-pole { margin-bottom: 1rem; }
.rez-pole label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9375rem; }
.rez-pole input, .rez-pole textarea {
  width: 100%; border: 1px solid #ccd3da; border-radius: 8px;
  padding: .65rem .8rem; font-size: 1rem; font-family: inherit; color: var(--c-text);
}
.rez-pole input:focus, .rez-pole textarea:focus { outline: none; border-color: var(--c-primary); }
.rez-pole--dve { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.rez-pole--dve label { margin-bottom: .3rem; }

.rez-souhlas { display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0; font-size: .875rem; }
.rez-souhlas input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.rez-souhlas a { color: var(--c-primary); }

.rez-zaloha-info {
  background: var(--c-secondary-tint); border-left: 4px solid var(--c-secondary);
  border-radius: 0 10px 10px 0; padding: .85rem 1.1rem; font-size: .875rem; margin-bottom: 1.3rem;
}
.rez-storno-info {
  background: var(--c-bg-alt); border-radius: 10px;
  padding: .9rem 1.1rem; font-size: .9375rem; margin-top: 1.2rem;
}
.rez-storno-info a { color: var(--c-primary); }

.rez-odeslat {
  display: inline-block; width: 100%; border: 0; border-radius: 9px;
  background: var(--c-btn); color: #fff; font-size: 1.0625rem; font-weight: 700;
  padding: .95rem 1.2rem; cursor: pointer; text-align: center; text-decoration: none;
}
.rez-odeslat:hover { background: var(--c-primary-dark); }
.rez-odeslat--odkaz { margin-top: 1.2rem; }
.rez-odkaz-zpet { color: var(--c-primary); }

/* --- stav rezervace a platba --- */
.rez-stav { border-radius: 10px; padding: .95rem 1.15rem; margin-bottom: 1.3rem; font-size: .9375rem; }
.rez-stav--ok      { background: #e8f7ee; border-left: 4px solid #2e9e5b; }
.rez-stav--ceka    { background: var(--c-secondary-tint); border-left: 4px solid var(--c-secondary); }
.rez-stav--zrusena { background: var(--c-bg-alt); border-left: 4px solid #b8c0c9; }
.rez-stav__dodatek { margin: .45rem 0 0; font-size: .875rem; color: var(--c-text-muted); }

/* odpočet času na zaplacení zálohy; posledních 5 minut zčervená */
.rez-odpocet { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.rez-odpocet span { font-weight: 600; color: var(--c-text-strong); }
.rez-odpocet strong {
  font-size: 2rem; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--c-secondary-dark);
}
.rez-stav--malo { background: #fdeef4; border-left-color: var(--c-primary); }
.rez-stav--malo .rez-odpocet strong { color: var(--c-primary); }

/* „hlídáme platbu" pod QR kódem */
.rez-hlidame { display: flex; gap: .6rem; align-items: baseline; margin: 0 0 1rem; font-size: .875rem; color: var(--c-text-muted); }
.rez-hlidame__tecka {
  flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--c-secondary); animation: rez-puls 1.6s ease-in-out infinite;
}
@keyframes rez-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .rez-hlidame__tecka { animation: none; } }

.rez-platba { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.1rem; }
.rez-platba__qr { text-align: center; }
.rez-platba__qr img { display: block; border: 1px solid var(--c-border); border-radius: 10px; }
.rez-platba__qr span { display: block; margin-top: .4rem; font-size: .75rem; color: var(--c-text-muted); }
.rez-platba__udaje { flex: 1 1 240px; }
.rez-platba__udaje div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid #eef0f2; font-size: .9375rem;
}
.rez-platba__udaje span { color: var(--c-text-muted); }
.rez-platba__udaje strong { color: var(--c-text-strong); }

@media (max-width: 700px) {
  .rez-karta { padding: 1.2rem 1.1rem 1.4rem; }
  .rez-kalendar { grid-template-columns: 1fr; gap: 1.4rem; }
  .rez-sluzba { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .rez-sluzba__cena { text-align: left; flex-direction: row; align-items: baseline; gap: .5rem; }
  .rez-pole--dve { grid-template-columns: 1fr; }
  .rez-platba { gap: 1.1rem; justify-content: center; }
}

/* --- samoobsluha zákazníka (přesun, zrušení) --- */
.rez-samoobsluha { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.rez-samoobsluha .rez-odeslat { width: auto; flex: 1 1 220px; margin-top: 0; }
.rez-zrusit-odkaz { color: var(--c-text-muted); font-size: .9375rem; text-decoration: underline; }
.rez-zrusit-odkaz:hover { color: var(--c-danger); }
.rez-odeslat--zrusit { background: var(--c-danger); }
.rez-odeslat--zrusit:hover { background: #b70606; }

/* ============================================================
   REZERVAČNÍ OKNO — partials/rez-okno.php
   Sedí do sekce .rezervace stejně jako okno Reservanta: stejná
   šířka, barevná hlavička, pod ní kroky, obsah a patička.
   ============================================================ */

.ro-okno {
  max-width: 1300px; margin-inline: auto;
  background: #fff; border: 1px solid #d5e4eb; border-radius: 16px; overflow: hidden;
  scroll-margin-top: calc(var(--hdr-h, 80px) + 1rem);   /* kotva #rez-okno nesmí zajet pod hlavičku */
}

/* hlavička — barvy Coloria */
.ro-hlava {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.7rem; background: var(--grad-brand); color: #fff;
}
.ro-hlava__nazev { font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ro-hlava__pobocka {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--c-text-strong); border-radius: 999px;
  padding: .35rem .95rem; font-size: .875rem; font-weight: 700;
}
.ro-hlava__pobocka::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--barva); }

/* kroky */
.ro-kroky { display: flex; background: #eef6f9; border-bottom: 1px solid #dbe8ee; }
.ro-krok {
  position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem .5rem; font-size: .9375rem; color: #8b98a4; text-decoration: none;
}
.ro-krok + .ro-krok { border-left: 1px solid #dbe8ee; }
.ro-krok__cislo {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700; background: #d9e5ec; color: #6c7b89;
}
.ro-krok.je-hotovy { color: var(--c-secondary-dark); }
.ro-krok.je-hotovy .ro-krok__cislo { background: var(--c-secondary); color: #fff; }
a.ro-krok.je-hotovy:hover { background: #e3f1f6; }
.ro-krok.je-ted { color: var(--c-primary); font-weight: 700; background: #fff; }
.ro-krok.je-ted .ro-krok__cislo { background: var(--c-primary); color: #fff; }
.ro-krok.je-ted::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-primary);
}

/* obsah — lehce tónovaný, ať karty uvnitř nesplývají */
.ro-telo { padding: 1.9rem 1.7rem 2.1rem; background: #f5fafc; }
.ro-nadpis { margin: 0 0 .3rem; font-size: 1.375rem; font-weight: 600; color: var(--c-text-strong); }
.ro-pozn { margin: 0 0 1.3rem; font-size: .9375rem; color: var(--c-text-muted); }
.ro-pozn--pod { margin: 1.1rem 0 0; font-size: .875rem; }
.ro-pozn--nad { margin: 0 0 1.1rem; font-size: .875rem; }
/* poznámka pod nabídkou (platba v hotovosti) — ať ji zákazník nepřehlédne */
.ro-pozn--dulezite {
  padding: .75rem 1rem; border-radius: 10px; border-left: 4px solid var(--c-primary);
  background: #fdeef4; color: var(--c-text-strong); font-weight: 600; font-size: .9375rem;
}

/* pobočky — v klidu světlé, po najetí se vybarví barvou pobočky */
.ro-pobocky { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ro-pobocka {
  /* Tmavší odstín barvy pobočky. Plná třinecká modrá má s bílým textem
     kontrast jen 3,1:1; ztmavená o pětinu 4,8:1, frýdecká růžová 8,8:1. */
  --tmava: color-mix(in srgb, var(--barva) 78%, #000);
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.5rem 1.6rem; border-radius: 14px; text-decoration: none;
  background: #fff; border: 2px solid color-mix(in srgb, var(--barva) 30%, #fff);
  color: var(--c-text);
  transition: background .18s, border-color .18s, transform .18s;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .ro-pobocka { --tmava: var(--barva); border-color: var(--barva); }
}
.ro-pobocka__nazev { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--tmava); }
.ro-pobocka__adresa { font-size: .9375rem; color: var(--c-text-muted); }
.ro-pobocka__dal {
  align-self: flex-start; margin-top: 1rem; padding: .45rem .95rem; border-radius: 8px;
  background: color-mix(in srgb, var(--barva) 12%, #fff); color: var(--tmava);
  font-size: .875rem; font-weight: 700;
}
/* Po najetí (a při ovládání klávesnicí) se dlaždice vybarví. Barvy textů jsou
   tu vypsané výslovně: obecné a:hover barví odkazy do růžové a na frýdecké
   růžové by pak text zmizel. */
.ro-pobocka:hover, .ro-pobocka:focus-visible {
  background: var(--tmava); border-color: var(--tmava); color: #fff; transform: translateY(-2px);
}
.ro-pobocka:hover .ro-pobocka__nazev,  .ro-pobocka:focus-visible .ro-pobocka__nazev  { color: #fff; }
.ro-pobocka:hover .ro-pobocka__adresa, .ro-pobocka:focus-visible .ro-pobocka__adresa { color: rgba(255,255,255,.88); }
.ro-pobocka:hover .ro-pobocka__dal,    .ro-pobocka:focus-visible .ro-pobocka__dal    { background: rgba(255,255,255,.2); color: #fff; }

/* služby — řádky jako u Reservanta, jen v barvách Coloria */
.ro-sluzby { display: flex; flex-direction: column; gap: .6rem; }
.ro-sluzba {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;
  padding: 1rem 1.3rem; background: #fff; border: 1px solid #dbe6ec; border-radius: 12px;
  text-decoration: none; color: var(--c-text); transition: border-color .15s, background .15s;
}
.ro-sluzba:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }
.ro-sluzba__ikona {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  background: var(--c-secondary-tint); color: var(--c-secondary-dark); font-size: 1.125rem; font-weight: 700;
}
.ro-sluzba__ikona small { font-size: .75rem; font-weight: 600; }
.ro-sluzba:hover .ro-sluzba__ikona { background: var(--c-primary); color: #fff; }
.ro-sluzba__popis { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ro-sluzba__popis strong { font-size: 1.0625rem; color: var(--c-text-strong); }
.ro-sluzba__popis span { font-size: .875rem; color: var(--c-text-muted); }
.ro-sluzba__cena { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.ro-sluzba__cena strong { font-size: 1.125rem; color: var(--c-primary); white-space: nowrap; }
.ro-sluzba__cena span { font-size: .75rem; color: var(--c-text-muted); }
.ro-sluzba__cena .ro-sluzba__bez { font-weight: 700; color: var(--c-text-strong); }

/* kalendář uvnitř okna — měsíc a časy jako dvě bílé karty */
.ro-telo .rez-kalendar { margin-top: 1.1rem; }
.ro-telo .rez-kalendar__mesic,
.ro-telo .rez-kalendar__casy {
  background: #fff; border: 1px solid #dbe6ec; border-radius: 12px; padding: 1.2rem 1.25rem;
}
.ro-telo .rez-kalendar__casy { min-height: 100%; }

/* údaje — formulář a vedle shrnutí */
.ro-udaje { display: grid; grid-template-columns: 1fr 340px; gap: 1.6rem; align-items: start; }
.ro-udaje__formular .ro-nadpis { margin-bottom: 1rem; }
.ro-udaje .rez-pole input, .ro-udaje .rez-pole textarea { background: #fff; }
.ro-souhrn {
  background: #fff; border: 1px solid #dbe6ec; border-radius: 12px; padding: 1.3rem 1.35rem;
  position: sticky; top: calc(var(--hdr-h, 80px) + 1rem);
}
.ro-souhrn h4 { margin: 0 0 .8rem; font-size: 1rem; color: var(--c-text-strong); }
.ro-souhrn dl { margin: 0; display: grid; gap: .15rem; }
.ro-souhrn dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); margin-top: .55rem; }
.ro-souhrn dd { margin: 0; font-size: .9375rem; color: var(--c-text-strong); font-weight: 600; }
.ro-souhrn__zaloha {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.1rem 0 .6rem; padding: .8rem 1rem; border-radius: 10px; background: var(--c-primary-tint);
}
.ro-souhrn__zaloha span { font-size: .875rem; color: var(--c-primary-dark); }
.ro-souhrn__zaloha strong { font-size: 1.25rem; color: var(--c-primary); }
.ro-souhrn p { margin: 0; font-size: .8125rem; color: var(--c-text-muted); }

/* patička */
.ro-pata {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.7rem; background: #eef6f9; border-top: 1px solid #dbe8ee;
  font-size: .875rem; color: var(--c-text);
}
.ro-pata__vyber { min-width: 0; }
.ro-zpet {
  flex: 0 0 auto; padding: .5rem 1.05rem; border-radius: 8px; text-decoration: none; font-weight: 700;
  background: #fff; border: 1px solid #cddbe3; color: var(--c-text-strong);
}
.ro-zpet:hover { border-color: var(--c-primary); color: var(--c-primary); }

@media (max-width: 900px) {
  .ro-udaje { grid-template-columns: 1fr; }
  .ro-souhrn { position: static; order: -1; }   /* na mobilu shrnutí nahoru, ať člověk ví, co vyplňuje */
}
@media (max-width: 700px) {
  .ro-hlava { padding: .95rem 1.1rem; }
  .ro-hlava__nazev { font-size: 1.0625rem; }
  .ro-krok__text { display: none; }                /* na úzkém displeji jen čísla… */
  .ro-krok.je-ted .ro-krok__text { display: inline; } /* …a název toho kroku, kde se je */
  .ro-telo { padding: 1.3rem 1rem 1.5rem; }
  .ro-sluzba { grid-template-columns: auto 1fr; gap: .85rem; padding: .9rem 1rem; }
  .ro-sluzba__ikona { width: 44px; height: 44px; font-size: 1rem; }
  .ro-sluzba__cena { grid-column: 2; flex-direction: row; align-items: baseline; gap: .5rem; }
  .ro-pata { padding: .85rem 1rem; }
}

/* Během načítání dalšího kroku (assets/js/rez-okno.js). Ztmaví se až se
   zpožděním — rychlé načtení tak vůbec nebliká, pomalé je poznat. */
.ro-okno.is-nacita { cursor: progress; }
.ro-okno.is-nacita .ro-telo { opacity: .5; pointer-events: none; transition: opacity .15s .12s; }

/* Souhlas s novinkami (rezervace, pokladna) — těsně pod souhlasem s podmínkami */
.rez-souhlas--novinky { margin-top: -.5rem; }
.rez-gdpr { margin: 0 0 1.2rem; font-size: .8125rem; color: var(--c-text-muted); }
.rez-gdpr a { color: var(--c-primary); }
.pok__novinky { margin-top: .6rem; }
.pok__novinky small { color: var(--c-text-muted); }

/* Rezervační okno — větší skupina a nabídka telefonu místo poznámky */
.ro-velka-skupina {
  margin: .5rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: #fff6e5; border-left: 3px solid #e0a100; font-size: .875rem; color: #5c4400;
}
.ro-velka-skupina a { color: var(--c-primary); font-weight: 700; white-space: nowrap; }
.ro-dotaz {
  margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: 10px;
  background: var(--c-secondary-tint); font-size: .9375rem; color: var(--c-text);
}
.ro-dotaz strong { color: var(--c-text-strong); }
.ro-dotaz a { color: var(--c-primary); font-weight: 700; white-space: nowrap; }