/* =========================================================
   Půjčovna lodí Nisa — shared stylesheet, 1:1 dle Figmy
   ========================================================= */

/* ---------- icon system: inline SVG via [data-icon] (#2803 — drop .fig-ico mask) ----------
   Mask přístup (fill: currentColor + mask-image: url(SVG)) byl rozbitý pro stroke-only
   lucide ikony — alfa kanál stroke SVG je nulový → ikona zmizí. Nový pattern:
   - main.js ICONS{} obsahuje inline <svg> markup; fillIcons() inject-uje do [data-icon].
   - Velikost + barvu řídí rodič: width/height + color (svg používá stroke=currentColor
     pro outline + fill=currentColor pro filled siluety insta/fb).
   - assets/icon-*.svg jsou už nepoužívané (mask URL zmizely). */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] > svg { width: 100%; height: 100%; }

/* ---------- 1. tokens ----------
   #2900 — px→rem refactor. Base unit: 1rem = 16px (browser default + body).
   Konvertováno: font-size, padding, margin, gap, width/height, inset, radius,
   clamp() min/max. Ponecháno v px: border-width (1/2px hairlines), box-shadow,
   text-shadow, transform translate, letter-spacing, @media breakpointy, SVG vnitřek. */
:root {
  --c-text:       rgb(38,38,38);
  --c-text-2:     rgb(45,41,50);
  --c-text-soft:  rgb(112,112,112);
  --c-bg:         #ffffff;
  --c-bg-alt:     rgb(239,239,239);
  --c-bg-card:    rgb(243,240,237);
  --c-line:       rgb(219,219,219);
  --c-line-soft:  rgb(231,231,231);

  --c-orange-1:   rgb(250,160,28);
  --c-orange-2:   #FA7C1C;
  --c-accent:     rgb(255,211,88);

  --c-blue-1:     rgb(0,89,206);
  --c-blue-2:     rgb(0,65,150);

  --c-dark:       rgb(10,10,10);

  --radius:       1.375rem;   /* 22px */
  --radius-pill:  999px;

  --content:      86.25rem;   /* 1380px */
  --pad-x:        2rem;       /* 32px */

  --font: "Open Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; }
.p-normal{
  background-image:  url(wave.gif);

}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;            /* 16px baseline */
  line-height: 1.55;
  color: var(--c-text);
  background-size: 100% auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center ;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--c-orange-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-orange-2); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-style: italic; font-weight: 800; line-height: 1; color: var(--c-text); letter-spacing: -.005em; }

/* ---------- 3. utilities ----------
   #2900 — .wrap padding aktivní (jednotný gutter všech sekcí přes --pad-x).
   .wrap-no-padding modifier resetuje padding na 0 — single source pravda pro
   všechny edge-to-edge výjimky (hero, topbar, nav, wavy-band, bannery, …).
   Místo přidávání ad-hoc selectorů sem stačí přidat class do markupu. */
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--pad-x); position: relative; }
.wrap-no-padding { padding: 0; }

.accent { color: var(--c-orange-2); }

/* ---------- 4. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 9.25rem;         /* 148px */
  height: 2.375rem;           /* 38px */
  padding: 0 1.375rem;        /* 0 22px */
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-text);
  font-weight: 800;
  font-style: italic;
  font-size: 1rem;            /* 16px */
  line-height: 1;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
/* #2672 (Decision #482 Honza): hover MUSÍ změnit barvu pozadí (NE shadow).
   Box-shadow odebrán — zachován jen background swap + drobný translate pro tactile feedback. */
.btn:hover { background: rgb(253,201,68); transform: translateY(-1px); color: var(--c-text); }
.btn:active { transform: translateY(0); }
.btn--lg { height: 3.25rem; min-width: 12.625rem; padding: 0 2rem; font-size: 1.125rem; } /* 52px / 202px / 32px / 18px */

/* ---------- 5. topbar ---------- */
.topbar,.mobile-infobar {
  background: var(--c-bg-alt);
  font-size: 0.875rem;        /* 14px */
  color: var(--c-text);
  position: relative;
  z-index: 60;
}

.mobile-infobar{
display:none;
}

.mobile-infobar div{
    padding:1rem;
}

.topbar-inner {
  display: flex; align-items: center; gap: 2rem;   /* 32px */
  height: 2.625rem;            /* 42px */
}
.topbar .note, .mobile-infobar .note{ font-style: italic; color: var(--c-text); margin-right: auto; }
.topbar a,.mobile-infobar a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; } /* 8px */
.topbar a.email, .mobile-infobar a.email { color: var(--c-orange-2); font-style: italic; }
.topbar svg, .topbar [data-icon], .mobile-infobar svg, .mobile-infobar [data-icon] { width: 1rem; height: 1rem; color: var(--c-text); display: inline-flex; } /* 16px */
.mobile-infobar a {
    display:block !important; 
    padding-bottom:0 !important; 
    padding-left:0 !important; 
}
.mobile-infobar a span{
     margin-right:1em !important; 
   
}
.mobile-infobar .note {
    display:block !important;
    padding:1em 0;
     
}



/* ---------- 6. nav ---------- */
/* #2803 (ZADANI §4): default state transparentní (přes hero); po scrollu (is-scrolled)
   bílé pozadí + jemný stín. Sticky stav drží na horním okraji. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav.is-scrolled { background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06); border-color: var(--c-line-soft); }
.nav-inner {
  display: flex; align-items: center; gap: 1.75rem;  /* 28px */
  height: 6rem;                                       /* 96px */
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 9.9375rem; height: 3.1875rem; } /* 159×51px */
.brand-logo img { width: 100%; height: 100%; display: block; }

/* #2900 — header layout: logo vlevo, zbytek (nav + btn + burger) zarovnán zprava.
   margin-left:auto na <nav> wrapperu (flex child .nav-inner) odsadí celou pravou
   skupinu. Předchozí margin-left:auto na .nav-list neměl efekt — .nav-list je
   uvnitř <nav>, takže margin v ní neovlivňoval .nav-inner flex layout. */
.nav-inner > nav { margin-left: auto; }

.nav-list {
  display: flex; align-items: center; gap: 2rem;   /* 32px */
  font-size: 1.0625rem;                             /* 17px */
}
.nav-list a {
  display: inline-flex; align-items: center; gap: 0.5rem;  /* 8px */
  padding: 2.25rem 0;                                       /* 36px */
  border-bottom: 2px solid transparent;
  color: var(--c-text);
}
.nav-list a:hover { border-bottom-color: var(--c-orange-2); }

/* #2672 — .has-sub menu item s dropdown submenu. Chevron pseudo-element
   přesunut na child <a> (PHP renderuje <li class="has-sub"><a>label</a><ul class="submenu">…</ul></li>).
   :hover na <li> reveal submenu; submenu pozicováno absolutně pod link. */
.nav-list li.has-sub { position: relative; }
.nav-list li.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 0.5rem; height: 0.5rem;                  /* 8px */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px,-3px);
  margin-left: 2px;
}
.nav-list .submenu {
    display: none;
    position: absolute;
    top: 90%;
    left: -1.5rem;
    min-width: 12.5rem;
    margin: 0;
    padding: 0.5rem 0 0.5rem 0.75rem;
    list-style: none;
    background: #fff;
    /* border: 1px solid var(--c-line-soft); */
    border-radius: 0 0 0.5rem 0.5rem;
     box-shadow: 0 12px 30px rgba(0, 0, 0, .10); /**/
     clip-path: inset(0 -40px -40px -40px);
    z-index: 60;
}
.nav-list .submenu li { display: block; }
.nav-list .submenu a {
  display: block;
  padding: 0.625rem 1.125rem 0.625rem 1.625rem;                     /* 10px 18px */
  font-size: 0.9375rem;                           /* 15px */
  border-bottom: 0;
  white-space: nowrap;
  color: var(--c-text);
}
.nav-list .submenu a:hover { background: var(--c-bg-alt); border-bottom: 0; font-style:italic }
.nav-list li.has-sub:hover > .submenu,
.nav-list li.has-sub:focus-within > .submenu { display: block; }

.nav .btn { margin-left: 0.5rem; }                /* 8px */

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;                /* 44×44 hit area */
  align-items: center; justify-content: center;
  margin-left: auto;
  /* #2357 P0-1: flex-shrink:0 chrání 44×44 hit area v úzké nav-inner flexboxu
     (jinak parent flex zmenšil button na 0px → unclickable). */
  flex-shrink: 0;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.nav-toggle [data-icon] { display: inline-flex; width: 1.625rem; height: 1.625rem; } /* 26px */
.nav-toggle svg { width: 1.625rem; height: 1.625rem; color: var(--c-text); }

/* ---------- 7. HERO ----------
   #2900: hero-bg sahá nahoru pod transparentní sticky nav (extend o -6rem =
   nav height 96px), aby se obrázek prosvítal skrz nav místo bílé body bg.
   isolation:isolate ODSTRANĚNO — držela by hero-bg (z-index:-1) uvnitř .hero
   stacking contextu pod nav layerem; bez ní jde z-index:-1 až do body root
   contextu (skutečně za sticky nav s z-index:50). Topbar má solid gray bg,
   takže hero-bg netřeba extendovat až k topbar — jen pod nav. */
.hero {
  position: relative;
  margin-bottom: 0;
}
body:before {
content:" ";
  position: absolute;
  inset: -7rem -10vw auto -10vw;  /*                 -112px top → extend pod nav (96px) + 1px border + safety margin do topbar (zakryté gray bg) */
 /*   height: 42.125rem;                             35.125rem + 7rem = 674px */
height: 42.125rem; 
  z-index: -1;
  overflow: hidden;
  background-image: url(pozadi.webp);
  background-size:auto 42.125rem;
  background-position: top right;
 /* filter: blur(28px) saturate(.88); 
  transform: scale(1.15);*/
  width: 100vw;
  max-width: 100vw;
    left: 0;
    right: 0;
    top: 0;

}

.p-normal:before{
opacity: .45;
}

/* LCP optimalizace (R2): .hero-bg::before/::after odstraněny — žádný element s class
   hero-bg na stránce neexistuje (legacy blurred-bg pattern; přesunutý do body:before
   výše s pozadi.webp). Background-url(hero.jpg) v dead rule by PageSpeed mohl interpretovat
   jako preload candidate a stahovat 306 KB JPEG navíc k hero <img>. */

.hero-wrap { padding-top: 1.125rem; }              /* 18px */

.hero-card {
  position: relative;
  width: 100%;
  height: 28.75rem;                                /* 460px */
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1a1a;                             /* fallback dokud nedoběhne bg image */
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
}
/* LCP optimalizace: hero bg přesunutý z .hero-card::before na reálný <img class="hero-img">
   v homepage.php — preload-scanner objeví hero ihned, nečeká na styles.css parse.
   ::after gradient overlay zůstává (čitelnost textu na fotce). Scale-on-hover je teď na .hero-img. */
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform .5s ease;
}
.hero-card:hover .hero-img { transform: scale(1.06); }
.hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 100%);
  z-index: 0;
}
.hero-body {
  position: absolute; inset: 0;
  padding: 4.9375rem 6.375rem;                     /* 79px 102px */
  display: flex;
  flex-direction: column;
  color: #fff;
  z-index: 1;
}
/* #2803 (ZADANI §2): odstraněn text-shadow z h1 + .lead — Figma návrh nepočítá
   se stínem (počítá s odladěnou fotkou). Čitelnost řeší .hero-card::after
   ztmavovací gradient. */
.hero-body h1 {
  color: #fff;
  font-size: clamp(3.5rem, 7vw, 6.25rem);          /* 56–100px */
  line-height: 1;
  max-width: 57.5rem;                              /* 920px */
}
.hero-body .lead {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);      /* 20–26px */
  font-style: normal; font-weight: 400;
  margin: 0.875rem 0 1.625rem;                     /* 14px 0 26px */
}
.hero-body .btn { align-self: flex-start; }

/* ---------- 8. intro + rezv card (overlapping) ----------
   #2900: padding-right: 5em odsazuje pravý sloupec (rezv aside) od pravého
   okraje wrapu per Figma návrh — rezv karta není flush s pravým okrajem.
   Padding na gridu (ne margin na intro-side), protože pravý sloupec má fixní
   šířku 519px = šířka intro-side; margin-right by způsobil overflow doleva. */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32.4375rem;  /* 519px */
  gap: 0 3.75rem;                                    /* 60px */
  padding-right: 5rem;
  align-items: start;
}
.intro {
  padding-top: 3.4375rem;                            /* 55px */
  max-width: 45rem;                                  /* 720px */
}
/* #2826 (ZADANI §5): intro nadpis 54px ExtraBold Italic desktop, 40px mobile.
   Bump z clamp(34,3.6vw,50) → clamp(40,3.6vw,54) per Figma raw data. */
.intro h2 {
  font-size: clamp(2.5rem, 3.6vw, 3.375rem);         /* 40–54px */
  line-height: 1.05;
  /* #2396 N1: 14ch byla příliš úzká pro "Zažijte 3 země EU" (17 chars) — wrap před EU.
     18ch udrží 1. řádek na jednom + zachová <br> wrap pro "za jeden den" = 2 řádky @1920. */
  max-width: 18ch;
  margin-bottom: 1.75rem;                            /* 28px */
}
.intro h2 .accent { color: var(--c-orange-2); font-style: italic; font-weight: 800; }
.intro p {
  font-size: 1.0625rem;  /* 17px */
  line-height: 1.65rem;                                          /* 28px */
  letter-spacing: .02em;
  max-width: 40rem;                                              /* 640px */
  margin: 0 0 0.875rem;                                          /* 14px */
}
.intro strong { font-weight: 800; font-style: italic; }
.intro em { font-style: italic; }

/* #2409 D3: intro-side obsahuje už jen rezv widget (intro-photos přesunuty do plně-šířkové
   .intro-photos-strip pod intro section). Pre-#2409 #2396 P1-2 stack 2-fotky byl drift. */
.intro-side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;                                                  /* 28px */
  justify-self: end;
  width: 32.4375rem;                                             /* 519px */
}
.intro-side .rezv { width: 100%; justify-self: stretch; }

/* #2409 D3: plně-šířková řada 3 fotek pod intro paragraph (match reference 3v_HP_desktop.png). */
.intro-photos-strip {
  margin-top: 3.5rem;                                            /* 56px */
}
.intro-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;                                                 /* 22px */
}
.intro-photo {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  text-decoration: none;
}
.intro-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.intro-photo:hover img { transform: scale(1.04); }
.intro-photo-caption {
  position: absolute;
  left: 0.875rem; right: 0.875rem; bottom: 0.75rem;              /* 14px 14px 12px */
  color: #fff;
  font-weight: 800; font-style: italic;
  font-size: 1.0625rem; line-height: 1.2;                        /* 17px */
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

.rezv {
  width: 32.4375rem;                                             /* 519px */
  margin-top: -3rem;                                             /* -48px (overlap hero) */
  background: var(--c-bg-card);
  border-radius: var(--radius);
  padding: 1.75rem 1.875rem 1.625rem;                            /* 28px 30px 26px */
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
  position: relative;
  z-index: 3;
  justify-self: end;
}

.sloupce .rezv {
  margin-top: 0rem;                                             /* -48px (overlap hero) */
justify-self: anchor-center;
}

.sloupce  .card.is-hours {
    height: auto;
    min-height: 22rem;
}

.sloupce .rezv-form .rezv-field{
    margin: 2.3em 0;
}

/* #2803 (ZADANI §3) + #2900 update: heading segmenty —
   - "Vyberte si svoji" (bez třídy) = Regular 400 (default .rezv h3) — Honza correction
   - "TRASU" (.hl) = ExtraBold 800 oranžová
   - " a " (.pln) = Regular 400 (#262626)
   - "REZERVUJTE" (.reg) = ExtraBold 800 (#262626) */
.rezv h3 {
  font-size: 1.5rem;                                             /* 24px */
  font-style: italic; font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1.5rem;                                            /* 24px */
  color: var(--c-text);
}
.rezv h3 em,
.rezv h3 .hl  { color: var(--c-orange-2); font-weight: 800; font-style: italic; }
.rezv h3 .reg { font-weight: 800; font-style: italic; color: var(--c-text); }
.rezv h3 .pln { font-weight: 400; font-style: italic; color: var(--c-text); }

.rezv .field {
  display: flex; align-items: center; gap: 0.625rem;             /* 10px */
  margin-bottom: 1.375rem;                                       /* 22px */
}
.rezv .pin { width: 1.75rem; height: 1.75rem; color: var(--c-text); flex-shrink: 0; display: inline-flex; } /* 28px */
.rezv .pin svg { width: 100%; height: 100%; }
.rezv .field label {
  font-style: italic; font-weight: 800; font-size: 0.9375rem;    /* 15px */
  color: rgb(52,35,19); width: 3.5rem; text-align: right;        /* 56px */
}
.rezv .field select {
  flex: 1; height: 2.375rem;                                     /* 38px */
  padding: 0 2.25rem 0 1.125rem;                                 /* 0 36px 0 18px */
  border-radius: 2.375rem;                                       /* 38px */
  border: 1px solid var(--c-line);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.875rem center;
  font-style: italic; font-size: 0.9375rem; color: var(--c-text);
  appearance: none; -webkit-appearance: none;
}

.rezv-cta {
  /* #2357 P0-2/P0-4: auto-flow grid (původně 5 fixní sloupce) — compact varianta bez pictogramů.
     Pictogramy v `.picto` jsou auto-sized 40px, button stretch přes 1fr. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.5rem, max-content)) 1fr repeat(auto-fit, minmax(2.5rem, max-content)); /* 40px */
  grid-auto-flow: column;
  gap: 1rem;                                                     /* 16px */
  align-items: center;
  margin: 1rem 0 1.5rem;                                         /* 16px 0 24px */
}
.rezv.is-compact .rezv-cta { grid-template-columns: 1fr; }
.rezv-cta .picto { color: var(--c-orange-2); display: inline-flex; width: 2.5rem; height: 2.5rem; } /* 40px */
.rezv-cta .picto svg, .rezv-cta .picto .fig-ico { width: 2.5rem; height: 2.5rem; }
/* #3009: SVG ikony v rezv-cta mají viewBox 24×24 ale renderují na 40×40 → scale 1.67×
   → stroke-width="2" se vizuálně vykreslí ~3.3px. vector-effect: non-scaling-stroke
   zachová stroke na 2 CSS px nezávisle na transformaci/scale. Aplikuje se na všechny
   stroked elementy uvnitř .picto SVG (path, circle, rect). */
.rezv-cta .picto svg * { vector-effect: non-scaling-stroke; }
.rezv-cta .btn { width: 100%; min-width: 0; }

/* #2357 P0-2/P0-4: .rezv-form wrapper (anchor list → form+select refactor). Submit ploše posílá GET ?trasa=… */
.rezv-form { margin: 0 0 1rem; }                                 /* 16px */
.rezv-form .rezv-field {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; align-items: center; /* 28px / 12px */
  background: rgb(228,227,227);
  padding: 0.625rem 1.125rem;                                    /* 10px 18px */
  border-radius: 3rem;                                           /* 48px */
  margin-bottom: 1rem;                                           /* 16px */
}
.rezv-form .rezv-field .pin { width: 1.75rem; height: 1.75rem; color: var(--c-text); flex-shrink: 0; display: inline-flex; }
.rezv-form .rezv-field .pin svg { width: 100%; height: 100%; }
.rezv-form .rezv-field select {
  width: 100%;
  height: 2.375rem;                                              /* 38px */
  padding: 0 2.25rem 0 1.125rem;                                 /* 0 36px 0 18px */
  border-radius: 2.375rem;                                       /* 38px */
  border: 1px solid var(--c-line);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.875rem center;
  font-style: italic; font-size: 0.9375rem; color: var(--c-text);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.rezv-form .rezv-cta { margin: 0; }
.rezv.is-compact { width: 100%; max-width: 28.75rem; margin-top: 0; padding: 1.375rem 1.5rem; } /* 460 / 22 / 24px */
.rezv.is-compact h3 { font-size: 1.25rem; margin-bottom: 0.875rem; } /* 20px / 14px */

/* #2900: bílé pozadí roztažené na plnou šířku rodičovské .rezv až k dolnímu
   okraji (vč. zaoblených rohů). Trick: negativní margin (-30px sides matching
   .rezv padding 1.875rem, -26px bottom matching .rezv padding-bottom 1.625rem)
   posílá box za inner content edge až k outer edge. Internal padding kompenzuje
   pozici obsahu — text drží stejnou polohu jako předtím. */
.rezv-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1.5rem;                                          /* 6px 24px */
  align-items: center;
  font-size: 0.9375rem;                                          /* 15px */
  padding: 1.125rem 1.875rem 1.625rem;                           /* 18px 30px 26px — vnitřní offset zachovává pozici textu */
  margin: 0 -1.875rem -1.625rem;                                 /* extend za .rezv padding až k outer edge */
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  background: #fff;
}
/* #2900: default Regular 400 — "Kontaktujte nás:" má být normal. Bold drží <strong>
   uvnitř (jen "Potřebujete poradit?"). */
.rezv-contact .label { font-style: italic; font-weight: 400; font-size: 1.0625rem; line-height: 1.3; } /* 17px */
.rezv-contact .label strong { font-weight: 800; font-style: italic; }
.rezv-contact .lines { display: flex; flex-direction: column; gap: 0.375rem; } /* 6px */
.rezv-contact a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; } /* 8px */
.rezv-contact a.email { color: var(--c-orange-2); }
.rezv-contact svg, .rezv-contact [data-icon] { width: 1rem; height: 1rem; color: var(--c-text); flex-shrink: 0; display: inline-flex; } /* 16px */

/* ---------- 9. wavy gray band ---------- */
.wavy-band {
  position: relative;
  margin-top: 4rem;                                              /* 64px */
  padding: 3.75rem 0 5rem;                                       /* 60px 0 80px */
  isolation: isolate;
}
/* #2900: full-viewport width + asymetrické vertikální extendnutí (cca 5x výška
   vlny per Honza+vlna.png — gray sahá nad cards-4 + dominantně dolů do text-split
   oblasti, kde má vlna nejvýraznější ohnutí dle reference).
   - left: 50% + margin-left: -50vw + width: 100vw → spans celou viewport šířku
   - top: -10rem (160px nahoru), bottom: -50rem (800px dolů) → ::before vertikálně
     ~1602px = 2.5x .wavy-band; wave amplitude vizuálně několikanásobně větší. */
.wavy-band::before {
  content: "";
  position: absolute;
  top: -10rem; bottom: -50rem;
  left: 50%; right: auto;
  width: 100vw;
  margin-left: -50vw;
  background: var(--c-bg-alt);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2200 700' preserveAspectRatio='none'><path d='M 0 150 C 620 340 1200 280 2200 150 L 2200 440 C 1500 540 800 620 0 600 Z' fill='black'/></svg>")
    no-repeat center / 100% 100%;
          mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2200 700' preserveAspectRatio='none'><path d='M 0 150 C 620 340 1200 280 2200 150 L 2200 440 C 1500 540 800 620 0 600 Z' fill='black'/></svg>")
    no-repeat center / 100% 100%;
  z-index: -1;
}

/* ---------- 10. 4-card row ---------- */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;                                                  /* 28px */
}
/* #2900: dots indikátory carouselu (cards-4 + insta-grid) — visible jen na mobilu */
.cards-dots, .insta-dots { display: none; }
.card {
  position: relative;
  height: 31.375rem;                                             /* 502px */
  border-radius: var(--radius);
  overflow: hidden;
  background: #2b2b2b;
  isolation: isolate;
  /* #2672 — transition pro hover lift (zachováno pro .is-hours). */
  transition: transform .25s ease, box-shadow .25s ease;
}
/* #2672 — hours card: jemnější lift (decorative typo block, ne CTA). */
.card.is-hours:hover { transform: translateY(-2px); }
.card .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
/* #3009: banner cards (s .bg pozadím) — zoom-in na hover místo lift+shadow.
   transition+scale na .bg div izoluje efekt na fotku; .content (h3 + btn) zůstává
   statický. overflow:hidden na .card ořízne přetékání scale boundaries. */
.card.is-banner .bg { transition: transform .5s ease; }
.card.is-banner:hover .bg { transform: scale(1.06); }
.card.is-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,1) 100%);
}
.card.is-banner .content {
  position: absolute; left: 1.625rem; right: 1.625rem; bottom: 1.625rem; /* 26px */
  color: rgb(237,237,237);
  z-index: 1;
}
.card.is-banner h3 {
  color: rgb(237,237,237);
  font-size: 1.25rem;                                            /* 20px */
  line-height: 1.2;
  margin: 0 0 1.375rem;                                          /* 22px */
}
.card.is-banner .btn { min-width: 9.25rem; }                     /* 148px */

/* hours card (white frosted) */
.card.is-hours {
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    url("../assets/card-lode-koloezky.png") center / cover no-repeat;
  color: var(--c-text);
}
.card.is-hours .content {
  position: absolute; left: 1.6875rem; right: 1.6875rem; top: 1.4375rem; bottom: 1.4375rem; /* 27px / 23px */
  display: flex; flex-direction: column;
}
.card.is-hours .head {
  display: flex; gap: 0.875rem; align-items: center;             /* 14px */
  margin-bottom: 0.875rem;                                       /* 14px */
}
.card.is-hours .head svg, .card.is-hours .head [data-icon] { width: 2.3125rem; height: 2.5rem; color: var(--c-text); display: inline-flex; } /* 37×40px */
.card.is-hours h3 {
  font-size: 1.5rem; font-style: italic; font-weight: 800;       /* 24px */
  color: var(--c-text);
}
/* #2900: stroke color změněn z oranžové %23fa7c1c na text color %23262626
   (rgb(38,38,38) = var(--c-text)) — squiggle má match barvu textu v boxu. */
.card.is-hours .squiggle {
  height: 1.3125rem;                                             /* 21px */
  margin: 0 0 1.125rem;                                          /* 18px */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 263 21' fill='none'><path d='M2 11 C 30 -3 60 25 90 11 C 120 -3 150 25 180 11 C 210 -3 240 25 261 11' stroke='%23262626' stroke-width='2.5' stroke-linecap='round'/></svg>") no-repeat left center / 16.4375rem auto; /* 263px */
}
.card.is-hours .body { font-size: 1.0625rem; line-height: 1.625rem; color: var(--c-text); } /* 17px / 26px */
.card.is-hours .body p { margin: 0 0 0.875rem; }                 /* 14px */
.card.is-hours .body strong { font-weight: 700; }
.card.is-hours .footer-icons {
  display: flex; gap: 1.75rem;                                   /* 28px */
  margin-top: auto;
  color: var(--c-orange-2);
}
.card.is-hours .footer-icons svg, .card.is-hours .footer-icons [data-icon] { width: 2.625rem; height: 2.625rem; display: inline-flex; } /* 42px */

/* map card */
.card.is-map { background: #e8eef3; }
.card.is-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* R3 LCP fix — Google Maps facade button. Replaces eager iframe; JS swaps in real iframe on click.
   Pozadí = manuálně pořízený screenshot živé mapy (assets/mapa-ph.png, 70 KB) — pixel-identický
   se zobrazením po click. WebP konverze rozmazávala drobný text → ponechán original PNG.
   Click anywhere → main.js bindMapFacade swap iframe. */
.card.is-map .map-facade {
  width: 100%; height: 100%;
  display: block;
  border: 0;
  background: #e8eef3 url("../assets/mapa-ph.png") center / cover no-repeat;
  cursor: pointer;
  padding: 0;
  transition: filter .15s ease;
}
.card.is-map .map-facade:hover,
.card.is-map .map-facade:focus-visible {
  filter: brightness(.97);
  outline: none;
}

/* ---------- 11. text-split (paragraph + h2) ---------- */
.text-split {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);        /* 640px */
  gap: 11.625rem;                                                /* 186px */
  padding: 5.5rem 0 0;                                           /* 88px */
}
.text-split p {
 /* font-weight: 700; font-style: italic;*/ font-size: 1.0625rem;    /* 17px */
  line-height: 1.75rem;                                          /* 28px */
  letter-spacing: .02em;
  margin: 0 0 1rem;                                              /* 16px */
}
.text-split p:last-child { margin-bottom: 0; }
.text-split p strong { font-weight: 800; }
.text-split h2 {
  font-size: clamp(2.125rem, 3.6vw, 3.125rem);                   /* 34–50px */
  line-height: 1.05;
}

/* ---------- 11.b CMS WYSIWYG content typography ----------
   Nadpisy uvnitř editovatelného obsahu z redakčního systému ($_stranka->text).
   Wrappery:
     .page-text   — kontakt / trasy / x-o-pujcovne / default-fallback
     .rezv-intro  — rezervace
     .intro       — homepage (h2 má hero override 40–54px v sekci 8;
                    doplňujeme jen h3–h6 aby admin custom HTML zarovnal s body)

   Spec (Honza 2026-06-12 chat):
   - velikosti: h2 50px / h3 32px / h4 24px / h5 20px / h6 16px (extrabold italic)
   - margin top/bottom = 1.7em (1.7× font-size, em scaluje samo s heading)
   - line-height tuned pro češtinu — globální reset má line-height:1 což by
     na 50px italic ExtraBold ořezávalo háčky/délky (Č/Ř/Š/Ž/Á/É/Í/Ó/Ú/Ý);
     škálovaně 1.15→1.4 s klesající velikostí (display tight, body relaxed). */
.page-text h2, .rezv-intro h2,
.page-text h3, .rezv-intro h3, .intro h3,
.page-text h4, .rezv-intro h4, .intro h4,
.page-text h5, .rezv-intro h5, .intro h5,
.page-text h6, .rezv-intro h6, .intro h6 {
  font-weight: 800;
  font-style: italic;
  color: var(--c-text);
  margin: 1.1em 0;
}
.page-text h2, .rezv-intro h2                 { font-size: 3.125rem; line-height: 1.15; } /* 50px */
.page-text h3, .rezv-intro h3, .intro h3      { font-size: 2rem;     line-height: 1.2;  } /* 32px */
.page-text h4, .rezv-intro h4, .intro h4      { font-size: 1.5rem;   line-height: 1.25; } /* 24px */
.page-text h5, .rezv-intro h5, .intro h5      { font-size: 1.25rem;  line-height: 1.3;  } /* 20px */
.page-text h6, .rezv-intro h6, .intro h6      { font-size: 1rem;     line-height: 1.4;  } /* 16px */

/* ---------- 12. wide banner ---------- */
.banner-wide {
  position: relative;
  margin-top: 4.5rem;                                            /* 72px */
  height: 24.375rem;                                             /* 390px */
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  /* #2672 — hover layer per analytik §E.1. Bez transformu (floating icons +
     footprints decorations by se rozjely) — jen shadow expand. */
  transition: box-shadow .25s ease;
  background:
    linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(10,10,10,.78) 32%, rgba(10,10,10,0) 62%),
    var(--bg-url, none) center / cover no-repeat;
  background-color: var(--c-dark);
}
.banner-wide .content {
  position: relative; z-index: 1;
  padding: 4.6875rem 6.25rem;                                    /* 75px 100px */
  max-width: 45rem;                                            /* 600px */
}
.banner-wide h2 {
  color: #fff;
  font-size: 2rem;                                               /* 32px */
  line-height: 1.2;
  margin: 0 0 1.5rem;                                            /* 24px */
}
.banner-wide h2 .hl { color: var(--c-accent); font-style: italic; }
/* #2672 — banner-wide hover shadow expand per analytik §E.1. */
.banner-wide:hover { box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.banner-wide p {
  font-size: 1rem; line-height: 1.75rem;                         /* 16px / 28px */
  margin: 0 0 1.875rem;                                          /* 30px */
 /* max-width: 38ch; */
  color: rgba(255,255,255,.92);
  font-style: normal; font-weight: 400;
}

/* ---------- 13. two banner row ---------- */
.banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;                                                  /* 28px */
  margin-top: 1.75rem;                                           /* 28px */
}
.banner-row .banner-wide { margin-top: 0; height: 37.375rem; }   /* 390px */
.banner-row .banner-wide .content { padding: 4rem 3.5rem; max-width: 100%; } /* 64px 56px */

/* blue banner (trasy) */
.banner-wide.is-blue {
background: linear-gradient(135deg, transparent 0%, transparent 100%), var(--bg-url, none) center / cover no-repeat;
    background-color: var(--c-blue-2);
}
.banner-wide.is-blue h2 { font-size: 2rem; line-height: 1.2; max-width: 23ch; } /* 32px */
/* dark FAQ banner */
.banner-wide.is-dark {
  background: var(--c-text);
}
.banner-wide.is-dark h2 .hl { color: var(--c-orange-2); }
.banner-wide.is-dark h2 { margin-bottom: 1.375rem; font-size: 1.75rem; line-height: 1.2; } /* 22px / 28px */

/* FAQ static list */
.faq-list { display: flex; flex-direction: column; gap: 0.875rem; margin: 0 0 1.5rem; } /* 14px / 24px */
.faq-item .q {
  font-weight: 800; font-style: italic; font-size: 0.9375rem;     /* 15px */
  color: #fff; line-height: 1.4;
  margin: 0 0 0.25rem;                                            /* 4px */
}
.faq-item .a {
  font-weight: 400; font-style: normal; font-size: 0.8125rem;     /* 13px */
  color: rgba(255,255,255,.65); line-height: 1.45;
  margin: 0;
}

/* ---------- 14. instagram ---------- */
.insta { margin-top: 4rem; }                                      /* 64px */
.insta-head {
  display: flex; align-items: center; gap: 0.875rem;              /* 14px */
  margin-bottom: 1rem;                                            /* 16px */
  padding-left: 0.25rem;                                          /* 4px */
  font-weight: 800; 
  font-style:italic;
  font-size: 0.9375rem;                         /* 15px */
}
/* #3009: IG logo 43×43 — nová insta ikona je self-contained (vlastní orange gradient
   fill v SVG `url(#sd_pn_grad_insta)`), wrapper proto bez backgroundu/color. Předchozí
   #2803 přístup (orange box + bílá insta uvnitř) je nahrazený full-size orange outline
   logem. */
.insta-head .ig {
  width: 2.6875rem; height: 2.6875rem;                            /* 43px */
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.insta-head .ig svg { width: 100%; height: 100%; }
/* #2900: @handle větší (2em ≈ 30px @ 15px base) per Honza request. */
.insta-head a strong { font-size: 1.75em; color: var(--c-text); }
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;                                                   /* 12px */
}
.insta-grid a {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;                                          /* 8px */
  overflow: hidden;
  background: var(--c-bg-alt);
  display: block;
}
.insta-grid a img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* #2900: IG overlay 30×30 STATICKY uprostřed fotky (vertikálně + horizontálně
   přes translate -50% trick). Bílá fill s opacity 0.55 (Honza explicit). SVG
   per Honza markup (viewBox 0 0 30 30, IG glyph cleaner outline). Drop-shadow
   odebrán — semi-transparentní bílá nepotřebuje stín, na světlých fotkách
   prosvítá fotka přes ikonu (intencionální). */
.insta-grid a::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1.875rem; height: 1.875rem;                              /* 30px */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'><path d='M15.0335 7.26562C19.2522 7.26562 22.7344 10.7478 22.7344 14.9665C22.7344 19.2522 19.2522 22.6674 15.0335 22.6674C10.7478 22.6674 7.33259 19.2522 7.33259 14.9665C7.33259 10.7478 10.7478 7.26562 15.0335 7.26562ZM15.0335 19.9888C17.779 19.9888 19.9888 17.779 19.9888 14.9665C19.9888 12.221 17.779 10.0112 15.0335 10.0112C12.221 10.0112 10.0112 12.221 10.0112 14.9665C10.0112 17.779 12.2879 19.9888 15.0335 19.9888ZM24.8103 6.99777C24.8103 8.00223 24.0067 8.8058 23.0022 8.8058C21.9978 8.8058 21.1942 8.00223 21.1942 6.99777C21.1942 5.9933 21.9978 5.18973 23.0022 5.18973C24.0067 5.18973 24.8103 5.9933 24.8103 6.99777ZM29.8996 8.8058C30.0335 11.2835 30.0335 18.7165 29.8996 21.1942C29.7656 23.6049 29.2299 25.6808 27.4888 27.4888C25.7478 29.2299 23.6049 29.7656 21.1942 29.8996C18.7165 30.0335 11.2835 30.0335 8.8058 29.8996C6.39509 29.7656 4.3192 29.2299 2.51116 27.4888C0.770089 25.6808 0.234375 23.6049 0.100446 21.1942C-0.0334821 18.7165 -0.0334821 11.2835 0.100446 8.8058C0.234375 6.39509 0.770089 4.25223 2.51116 2.51116C4.3192 0.770089 6.39509 0.234375 8.8058 0.100446C11.2835 -0.0334821 18.7165 -0.0334821 21.1942 0.100446C23.6049 0.234375 25.7478 0.770089 27.4888 2.51116C29.2299 4.25223 29.7656 6.39509 29.8996 8.8058ZM26.6853 23.8058C27.4888 21.8638 27.2879 17.1763 27.2879 14.9665C27.2879 12.8237 27.4888 8.13616 26.6853 6.12723C26.1496 4.85491 25.1451 3.78348 23.8728 3.31473C21.8638 2.51116 17.1763 2.71205 15.0335 2.71205C12.8237 2.71205 8.13616 2.51116 6.1942 3.31473C4.85491 3.85045 3.85045 4.85491 3.31473 6.12723C2.51116 8.13616 2.71205 12.8237 2.71205 14.9665C2.71205 17.1763 2.51116 21.8638 3.31473 23.8058C3.85045 25.1451 4.85491 26.1496 6.1942 26.6853C8.13616 27.4888 12.8237 27.2879 15.0335 27.2879C17.1763 27.2879 21.8638 27.4888 23.8728 26.6853C25.1451 26.1496 26.2165 25.1451 26.6853 23.8058Z' fill='white' fill-opacity='0.55'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* ---------- 14.b fotogalerie (#2839) ----------
   Sekce renderovaná frameworkem na stránkách s navázanými fotkami.
   Heading "Fotogalerie" stejný font/velikost jako .insta-head (2em strong);
   grid analog .insta-grid (square thumbs, rounded, hover lift), ALE responzi
   stack do 1 sloupce (NE carousel) — Honza explicit "vše pod sebe, bez schovávání". */
.fotogalerie { margin-top: 4rem; }
.fotogalerie-head {
  display: flex; align-items: center; gap: 0.875rem;
  margin-bottom: 1rem;
  padding-left: 0.25rem;
  font-weight: 700; font-size: 0.9375rem;
}
.fotogalerie-head .ico {
  width: 2.6875rem; height: 2.6875rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fotogalerie-head .ico svg { width: 100%; height: 100%; }
.fotogalerie-head strong { font-size: 2em; font-style: italic; font-weight: 800; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.gallery-grid a {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--c-bg-alt);
  display: block;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-grid a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.gallery-grid a img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 14.c lightbox overlay (#2839) ----------
   Vanilla JS overlay (main.js bindLightbox). Klik na .gallery-grid a otevře
   plnoobrazovkový pohled; klávesy Esc/←/→, klik na backdrop nebo × zavírá. */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox .lb-img {
  max-width: 92vw; max-height: 86vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox .lb-close,
.lightbox .lb-prev,
.lightbox .lb-next {
  position: absolute;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0;
  width: 3rem; height: 3rem;
  border-radius: 999px;
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lightbox .lb-close:hover,
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover { background: rgba(255,255,255,.28); }
.lightbox .lb-close { top: 1.5rem; right: 1.5rem; }
.lightbox .lb-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-caption {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9375rem;
  padding: 0.5rem 1.125rem;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
  max-width: 80vw;
  text-align: center;
}

/* ---------- 15. footer ----------
   #2900: footer.margin-top: 10rem (gap 160px). Vlnka ::before zachovává původní
   15rem výšku (vizuálně OK proporce — Honza explicit). top:-15rem znamená, že
   ::before extenduje 5rem NAD insta-grid bottom (do foto zóny). z-index:-1
   posílá tento horní 5rem překryv ZA insta fotky → cípek (top-right vlnky)
   "zalezává pod fotky" místo aby je překrýval shora. Spodních 10rem ::before
   sedí v footer.margin gap a tvoří viditelnou vlnu mezi fotky a footerem.
   .footer i .insta-grid a nemají vlastní stacking context (jen position:relative),
   takže z-index:-1 jde do body root contextu skutečně pod fotky. */
.footer {
  position: relative;
  margin-top: 10rem;                                              /* 160px */
  background: var(--c-bg-alt);
  color: var(--c-text);
  padding: 1.875rem 0 3rem;                                       /* 30px 0 48px */
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -15rem;                                                    /* -240px → 5rem do insta foto zóny (hidden by z-index) */
  height: 15rem;                                                  /* 240px = původní wave výška */
  z-index: -1;
  background: var(--c-bg-alt);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 312' preserveAspectRatio='none'><path d='M 0 143 C 887 312 1573 132 1920 0 L 1920 312 L 0 312 Z' fill='black'/></svg>")
    no-repeat center bottom / 100% 100%;
          mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 312' preserveAspectRatio='none'><path d='M 0 143 C 887 312 1573 132 1920 0 L 1920 312 L 0 312 Z' fill='black'/></svg>")
    no-repeat center bottom / 100% 100%;
  pointer-events: none;
}

.footer a{
color:var(--c-text);
}
.footer a:not(.btn):not(.footer-contact a):not(.footer-social a):not(.footer-brand a):hover {
    color: var(--c-orange-2);
}

.footer a:not(.btn):not(.footer-contact a):not(.footer-social a):not(.footer-brand a):hover::before{
    content:"> ";
}

/* #2900: 3-sloupcový layout per design `css/paticka.png` (col 1 brand+meta+contact,
   col 2 O půjčovně/Trasy/Další služby, col 3 Rezervace btn + Popis řeky/Ceník/Kontakt).
   Negativní margin-top vytahuje grid o 3rem nahoru — textový obsah zalezává vizuálně
   do spodní části vlny ::before pro plynulý přechod. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 3.75rem;                                                   /* 60px */
  align-items: start;
  margin-top: -3rem;                                              /* -48px */
}
/* R3 a11y: footer column headings h4 → h3 (PSI heading-hierarchy skip fix).
   Selektor přejmenován; visual styling beze změny. Selektor cílí i na legacy
   live-DB content kde admin už uložil h4 — postupně refaktoruj cez admin UI re-paste defaultu. */
.footer-grid h3, .footer-grid h4 {
  font-style: italic; font-weight: 800; font-size: 0.9375rem;     /* 15px */
  margin: 0 0 0.75rem;                                            /* 12px */
  letter-spacing: .02em;
  text-transform: uppercase;
}
.footer-grid h3 + h3,
.footer-grid h4 + h4 { margin-top: 1.375rem; }                    /* 22px */
.footer-grid ul li { padding: 0.1875rem 0; font-weight: 700; font-size: 0.9375rem; line-height: 1.5rem; } /* 3px / 15px / 24px */
/* #2900: active list item — oranžový text + italic + ">" prefix per design.
   Aplikuje se manuálně na <li class="active"> nebo dynamicky podle URL/route. */
.footer-grid ul li.active { font-style: italic; }
.footer-grid ul li.active a { color: var(--c-orange-2); }
.footer-grid ul li.active::before {
  content: ">";
  display: inline-block; width: 0.875rem;                         /* 14px */
  margin-right: 0.25rem;                                          /* 4px */
  color: var(--c-orange-2);
  font-style: italic; font-weight: 800;
}
.footer .brand { margin-bottom: 1.625rem; }                       /* 26px */
.footer-meta { font-size: 0.9375rem; line-height: 1.5rem; color: var(--c-text); } /* 15px / 24px */
.footer-meta p { margin: 0 0 0.875rem; }                          /* 14px */
.footer-meta strong { font-style: italic; font-weight: 800; }
.footer-contact { margin-top: 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; } /* 18px / 8px / 15px */
.footer-contact a { display: inline-flex; gap: 0.625rem; align-items: center; font-weight: 700; } /* 10px */
.footer-contact svg, .footer-contact [data-icon] { width: 1.125rem; height: 1.125rem; color: var(--c-text); flex-shrink: 0; display: inline-flex; } /* 18px */
.footer-social { display: flex; gap: 1.125rem; margin-top: 1.75rem; } /* 18px / 28px */
.footer-social a { color: var(--c-dark); width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; } /* 24px */
.footer-social svg, .footer-social [data-icon] { width: 1.5rem; height: 1.5rem; color: currentColor; display: inline-flex; }
.footer-cta .btn { margin-bottom: 1.375rem; }                     /* 22px */

/* ---------- 16. trasy/kontakt page-title (simple centered h1) ---------- */
.page-title { text-align: center; padding: 4.875rem 0 0.75rem; } /* 78px / 12px */
.page-title h1 { font-size: clamp(3.5rem, 7vw, 6.25rem); margin-bottom: 1em;  }       /* 56–100px */

/* ---------- 17. trasy page ---------- */
.route{
  margin: 4rem 0;                                                 /* 64px */

}

.route em{
font-style:normal;
}
.route .grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.25rem;                 /* 324px */
  gap: 3.5rem;                                                    /* 24px */
  align-items: start;
}
.route h2 { font-size: clamp(2.125rem, 3.6vw, 3.125rem); line-height: 1.05; margin-bottom: 1.375rem;  } /* 34–50px / 22px */
.route p { font-size: 1.0625rem; line-height: 1.75rem; letter-spacing: .02em; margin: 0 0 1.125rem; } /* 17px / 28px / 18px */
.route p strong { font-weight: 700; }
.route .map {
  width: 20.25rem;                                                /* 324px */
  aspect-ratio: 324 / 216;
  border-radius: var(--radius);
  background: url("../assets/img-route-map.png") center / cover no-repeat;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;                                               /* clip iframe to rounded corners */
}
.route .map--iframe { background: none; }
.route .map iframe { width: 100%; height: 100%; border: 0; display: block; }
.route .btn { margin-top: 1rem; }                                 /* 16px */

/* #2396 P1-3/P1-4: per-trasa timetable + photo grid uvnitř article — span obou sloupců.
   `.route` je 2-col grid; child sekce zabírají celou šířku přes column 1/-1. */
.route .route-timetable,
.route .route-photos { grid-column: 1 / -1; }
.route .route-timetable { margin: 0.75rem 0 0.25rem; }            /* 12px 0 4px */

.route-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;                                                   /* 12px */
  margin: 1.125rem 0 0.25rem;                                     /* 18px 0 4px */
}
/* #2409 D4: shared 4-foto galerie pod mid-booking widgetem (standalone, mimo .route grid). */
.trasy-shared-gallery {
  margin: 3rem 0 1.5rem;                                          /* 48px 0 24px */
}
.route-photo {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;                                         /* 12px */
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.route-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.route-photo:hover img { transform: scale(1.04); }

.timetable {
  margin: 1.875rem 0;                                             /* 30px */
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  padding: 1.625rem 1.875rem;                                     /* 26px 30px */
}
.timetable h4 { font-style: italic; font-weight: 800; font-size: 1.375rem; margin: 0 0 0.875rem; } /* 22px / 14px */
.timetable .row {
  display: grid; grid-template-columns: 6.875rem 1fr;             /* 110px */
  gap: 1.125rem; padding: 0.75rem 0;                              /* 18px / 12px */
  border-top: 1px solid #e0e0e0;
  align-items: center;
}
.timetable .row:first-of-type { border-top: 0; }
.timetable .row .label { font-weight: 700; font-size: 0.9375rem; } /* 15px */
.timetable .grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem 0.75rem; font-variant-numeric: tabular-nums; font-size: 0.875rem; /* 4px 12px / 14px */
}
.timetable .grid .cell { padding: 0.5rem 0.375rem; }              /* 8px 6px */
.timetable .grid .cell.hl {
  background: var(--c-accent);
  border-radius: 0.375rem;                                        /* 6px */
  font-weight: 800; text-align: center;
}
.note-small { font-size: 0.875rem; line-height: 1.375rem; color: var(--c-text-soft); font-style: italic; margin: 1rem 0; } /* 14px / 22px / 16px */

/* ---------- 17.b O půjčovně standalone page (#2396 P1-6) ---------- */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;                  /* 360px */
  gap: 3rem;                                                      /* 48px */
  margin: 3rem 0 4.5rem;                                          /* 48px / 72px */
  align-items: start;
}
.about-text h2 { font-size: clamp(2.125rem, 3.6vw, 3.125rem); line-height: 1.05; margin: 0 0 1.5rem; max-width: 18ch; } /* 34–50px / 24px */
.about-text h2 .accent { color: var(--c-orange-2); font-style: italic; font-weight: 800; }
.about-text p { font-size: 1.0625rem; line-height: 1.75rem; margin: 0 0 1rem; } /* 17px / 28px / 16px */
.about-text strong { font-weight: 800; }

.about-founder {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);                    /* 320px */
  gap: 2.5rem;                                                    /* 40px */
  margin: 4rem 0;                                                 /* 64px */
  align-items: center;
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  padding: 2.25rem 2.5rem;                                        /* 36px 40px */
}
.about-founder-photo {
  margin: 0;
  border-radius: 1rem;                                            /* 16px */
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.about-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-founder-text blockquote {
  font-size: 1.375rem; line-height: 1.4; font-style: italic; margin: 0 0 1rem; /* 22px / 16px */
}
.about-founder-meta { font-size: 1rem; margin: 0; }               /* 16px */

.about-cta {
  text-align: center;
  margin: 4rem 0 6rem;                                            /* 64px / 96px */
  padding: 3rem 1.5rem;                                           /* 48px 24px */
  background: var(--c-accent-soft, #fff5e6);
  border-radius: var(--radius);
}
.about-cta h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 1rem; } /* 28–40px / 16px */
.about-cta p { font-size: 1.0625rem; margin: 0 0 1.5rem; }        /* 17px / 24px */
.about-cta .btn + .btn { margin-left: 0.75rem; }                  /* 12px */

@media (max-width: 980px) {
  .about-intro { grid-template-columns: 1fr; gap: 2rem; }         /* 32px */
  .about-founder { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.5rem; } /* 24px / 28px 24px */
  .about-founder-photo { max-width: 20rem; }                      /* 320px */
}

/* ---------- 18. kontakt page ---------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 37.25rem) minmax(0, 42.25rem); /* 596px / 676px */
  gap: 6.25rem;                                                   /* 100px */
  margin: 3.75rem 0;                                              /* 60px */
  align-items: start;
}
.kontakt-info h2 { font-size: clamp(2.125rem, 3.5vw, 3rem); margin-bottom: 2.25rem; } /* 34–48px / 36px */
.kontakt-row {
  display: flex; gap: 0.875rem; align-items: flex-start;          /* 14px */
  padding: 0.75rem 0;                                             /* 12px */
  font-size: 1rem; line-height: 1.55;                             /* 16px */
}
.kontakt-row svg, .kontakt-row [data-icon] { width: 1.375rem; height: 1.375rem; margin-top: 0.125rem; color: var(--c-orange-2); flex-shrink: 0; display: inline-flex; } /* 22px / 2px */
.kontakt-row strong { font-style: italic; font-weight: 800; }
.kontakt-row a { font-weight: 700; }
.kontakt-row a.email { color: var(--c-orange-2); font-style: italic; }
.kontakt-row .meta { color: var(--c-text-soft); font-size: 0.875rem; } /* 14px */
.kontakt-meta { margin-top: 3rem; font-size: 1rem; line-height: 1.75rem; max-width: 37.25rem; } /* 48px / 16px / 28px / 596px */
.kontakt-meta h3 { font-style: italic; font-weight: 800; font-size: 1.375rem; margin: 0 0 0.875rem; } /* 22px / 14px */
.kontakt-meta strong { font-style: italic; font-weight: 800; }
.kontakt-meta p { margin: 0 0 0.5rem; }                           /* 8px */
.kontakt-photos { display: grid; grid-template-rows: 28.1875rem 28.1875rem; gap: 2.375rem; } /* 451px / 38px */
.kontakt-photos .photo {
  width: 100%; height: 100%;
  border-radius: var(--radius);
  background-size: cover; background-position: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
/* #2357 P1-8: Google Map iframe v kontakt sidebar — matches .photo dimensions ve 2-row gridu. */
.kontakt-photos .kontakt-map {
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #f0f0f0;
  display: block;
}

/* ---------- 19. rezervace page ---------- */
.rezv-page {
  display: grid;
  grid-template-columns: minmax(0, 33.75rem) minmax(0, 1fr);      /* 540px */
  gap: 3.75rem;                                                   /* 60px */
  margin: 3.5rem 0;                                               /* 56px */
  align-items: start;
}
.rezv-builder {
  background: var(--c-bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;                                               /* 28px */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.rezv-builder h2 {
  font-size: 1.5rem; margin: 0 0 1.375rem; line-height: 1.1;      /* 24px / 22px */
}
.rezv-field {
  display: grid; grid-template-columns: 1.75rem 4.375rem 1fr; gap: 0.75rem; align-items: center; /* 28px / 70px / 12px */
  background: rgb(228,227,227);
  padding: 0.8125rem 1.125rem;                                    /* 13px 18px */
  border-radius: 3rem;                                            /* 48px */
  margin-bottom: 0.5rem;                                          /* 8px */
}
.rezv-field svg { color: var(--c-text); width: 1.5rem; height: 1.5rem; } /* 24px */
.rezv-field label { font-style: italic; font-weight: 800; font-size: 0.9375rem; } /* 15px */
.rezv-field select, .rezv-field input {
  height: 2.375rem; border-radius: 2.375rem;                      /* 38px */
  border: 1px solid var(--c-line);
  background: #fff; padding: 0 1.125rem;                          /* 18px */
  font-style: italic; font-size: 0.9375rem;                       /* 15px */
  appearance: none; -webkit-appearance: none;
}
.rezv-field.is-row { grid-template-columns: 1.75rem 4.375rem repeat(4, 1fr); gap: 0.5rem; } /* 28/70px / 8px */
.rezv-field.is-row input { padding: 0 0.75rem; }                  /* 12px */

.rezv-cart { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.125rem 1.5rem; margin: 1rem 0; } /* 18px 24px / 16px */
.rezv-item {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 1.125rem; align-items: center;                             /* 18px */
  padding: 0.875rem 0; border-bottom: 1px solid #e0e0e0; font-size: 0.9375rem; /* 14px / 15px */
}
.rezv-item:last-child { border-bottom: 0; }
.rezv-item .name { font-weight: 700; }
.rezv-item .stock { color: var(--c-orange-2); font-weight: 700; font-size: 0.8125rem; } /* 13px */
.rezv-item input[type=number] {
  width: 4.25rem; height: 2.375rem;                               /* 68px / 38px */
  border-radius: 2.375rem; border: 1px solid var(--c-line);
  background: #fff; padding: 0 0.75rem;                           /* 12px */
  text-align: center;
}

.rezv-side h2 { font-size: clamp(2rem, 2.5vw, 2.5rem); margin-bottom: 1rem; } /* 32–40px / 16px */
.rezv-side p { font-size: 1.0625rem; line-height: 1.75rem; letter-spacing: .02em; font-style: italic; font-weight: 700; margin: 0 0 1.375rem; } /* 17/28/22px */
.price-table { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.375rem 1.5rem; } /* 22px 24px */
.price-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid #e0e0e0; font-size: 0.9375rem; } /* 16/12/15px */
.price-row:first-of-type { border-top: 0; }
.price-row strong { font-weight: 800; }

/* ---------- 19b. .sloupce — multi-column wrapper pro CMS WYSIWYG obsah ----------
   Použití v editoru stránky / HTML poli Custom Texts:
     <div class="sloupce sloupce-2">
       <div>Levý sloupec obsahu …</div>
       <div>Pravý sloupec obsahu …</div>
     </div>
   Varianty: .sloupce-2 / .sloupce-3 / .sloupce-4 = počet sloupců na desktopu.
   Padding 1rem (16px) aplikován na PŘÍMÉ děti wrapperu (samotný sloupec).
   Responze: pod @1080px stack do 1 sloupce — koreluje s ostatními desktop→
   mobile patterny v této šabloně (.text-split, .banner-row, .footer-grid,
   .kontakt-grid). */
.sloupce { display: grid; gap: 1.5rem; }                                       /* 24px gap mezi sloupci */
.sloupce > * { padding: 1rem; }                                                /* 16px vnitřní padding obsahu sloupce */
.sloupce.sloupce-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sloupce.sloupce-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sloupce.sloupce-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 20. responsive ----------
   Pozn.: @media breakpointy zůstávají v px (jednoznačnost). Styly UVNITŘ media
   blocks jsou konvertované na rem (konzistence s desktop layoutem). */
@media (max-width: 1280px) {
  :root { --pad-x: 1.75rem; }                                     /* 28px */
  .intro-grid { grid-template-columns: 1fr 28.75rem; gap: 0 2.5rem; } /* 460px / 40px */
  .intro-side { width: 28.75rem; }                                /* 460px */
  .rezv { width: 28.75rem; /*margin-top: -30rem;*/ padding: 1.375rem 1.375rem; } /* 460/-480/22px */
  /* #2900: rezv padding zmenšeno z 30px/26px na 22px na @1280 → contact full-width
     margin trick musí sync z desktopu (-1.875rem/-1.625rem) na (-1.375rem/-1.375rem)
     jinak bílá karta bleed přes pravý okraj a chybí symetrie. */
  .rezv-contact {
    margin: 0 -1.375rem -1.375rem;
    padding: 1.125rem 1.375rem 1.375rem;
  }
  .rezv h3 { font-size: 1.375rem; margin-bottom: 1.125rem; }      /* 22/18px */
  .nav-list { gap: 1.375rem; font-size: 1rem; }                   /* 22/16px */
  .nav-list a { padding: 1.75rem 0; }                             /* 28px */
  .text-split { gap: 5rem; }                                      /* 80px */
  .banner-wide .content { padding: 3.5rem 4rem; }                 /* 56px 64px */
}

@media (max-width: 1080px) {




  :root { --pad-x: 1rem; }                                        /* 16px — Honza: menší odpaly od stran na mobilu */

  /* #2900: grid 1fr má defaultně min-width:auto (=min-content), což rozšiřovalo
     grid cells na intrinsic šířku rezv-form/rezv-cta (~381px na 332px viewportu
     inner = overflow 49px). min-width:0 dovolí cells smrsknout na 1fr=parent width. */
  .intro-grid > * { min-width: 0; }
  .rezv { min-width: 0; }
  .rezv-cta { min-width: 0; }

  /* #2900 mobile design per css/responze1.png:
     - topbar celý skrytý (kontakt visible v rezv-contact dole)
     - nav-inner jako bílá floating rounded card s margins z viewport okrajů
     - blurred hero-bg prosvítá kolem karty + v gutterech kolem hero-card */
  .topbar { display: none; }
  .mobile-infobar{
     display:block;
  }
  .wrap.nav-inner {
    background: #fff;
    border-radius: var(--radius);
    padding: 0 1.25rem;                                           /* 20px internal */
    margin: 0.75rem var(--pad-x);                                 /* 12px top/bot, gutter from edges */
    max-width: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
  /* karta je bílá sama o sobě → .is-scrolled white-bg+shadow by zdvojil; reset */
  .nav.is-scrolled { background: transparent; box-shadow: none; border-color: transparent; }
  /* Rezervace btn skrytý v header bar — přístupný přes burger menu (nav-list) */
  .nav-inner > .btn { display: none; }

  /* #2357 P0-1: snížit nav-inner gap @ mobile aby logo + burger se vešly bez squash */
  .nav-inner { height: 5rem; gap: 0.875rem; }                     /* 80/14px */
  .brand-logo { width: 7.5rem; height: 2.4375rem; }               /* 120/39px */
  .nav-toggle { display: inline-flex; }

  /* hero-card získává horizontal gutter — rounded rohy + blur bg viditelné kolem */
  .wrap.hero-wrap { padding: 0 var(--pad-x); }

  .nav-list {
    display: none;
    position: fixed; inset: 6.5rem 0 auto 0;                      /* 104px = nav margin 0.75 + height 5 + 0.75 */
    background: #fff;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.75rem 0;                                   /* 12px */
    border-bottom: 1px solid var(--c-line-soft);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    max-height: calc(100vh - 6.5rem); overflow-y: auto;
    max-width:100vw;
        padding-bottom: 0;
        border-radius: var(--radius);
        border-top-left-radius: 0;
        border-top-right-radius: 0;    
  }
  .nav.is-open .nav-list { display: flex; }
  .nav-list a { padding: 0.875rem 1.5rem; ; } /* 14px 24px border-bottom: 1px solid var(--c-line-soft)*/
  .nav-list > li > a::before{ left:auto!important }
  /* #2672 — mobile: chevron stále na child <a>, submenu se zobrazí inline (ne dropdown). */
  .nav-list li.has-sub > a::after { margin-left: auto; background-repeat:no-repeat }
body:before{ 
        background-size: auto 17rem;
        /* filter: blur(28px) saturate(.88); */
        height: 17rem;
        background-repeat:no-repeat;
}
.nav-list > li{
padding-left:1rem;
padding-right:1rem;
}

  .nav-list .submenu {
    position: static;
    display: block;
    margin: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 0 0 2.5rem;                                        /* 24px */
    border: 0;
    box-shadow: none;
    background: var(--c-bg-alt);
  }
  .nav-list .submenu a { padding: 0.75rem 1.5rem; font-size: 1rem; border-bottom: 1px solid var(--c-line-soft); } /* 12/24/16px */
  .nav .btn { margin: 0.75rem 1.5rem 0.5rem; }                    /* 12px 24px 8px */

  .hero-card { height: 23.75rem; }                                /* 380px */
  .hero-body { padding: 3rem 3rem; }                              /* 48px */

  .intro-grid { grid-template-columns: 1fr; gap: 2rem; padding-right: 0; } /* 32px — full-width na mobilu */
  /* #2900 mobile: visuální pořadí přes order — rezv card sedí HNED pod hero,
     textový obsah (.intro) jde až za ní per responze1.png. Markup zůstává intro→side.
     intro-side má negativní margin-top → rezv překryje spodní zaoblené rohy hero-card
     (Honza intent: rounded rohy hero schované pod rezv). */
  .intro-side {
    width: 100%; max-width: 32.4375rem; justify-self: stretch;
    order: 1;
    margin-top: -1.875rem;                                         /* -30px → overlap hero bottom corners */
  }
  .intro { padding-top: 0.5rem; order: 2; }                       /* tighter top — grid gap delivers spacing */
  .rezv { width: 100%; max-width: 32.4375rem; margin-top: 0; justify-self: stretch; }

  /* rezv h3 mobile size — 1rem (16px) je čitelný + akceptuje wrap na 2 řádky
     na úzkém viewportu (Honza: 0.875rem bylo "zmenšený zase moc"). */
  .rezv h3 { font-size: 1rem; line-height: 1.25; margin-bottom: 0.875rem; }

  /* rezv-cta pictogramy skryté na mobilu — btn dostane full row width */
/*  .rezv-cta { grid-template-columns: 1fr; } */
  .rezv-cta .picto svg { display: none; }
  .rezv-cta .picto{ width:auto }

  /* rezv-field na mobilu: pin + "Trasa:" label nahoře (centrované jako skupina),
     select pod tím spans full width (per responze1.png). Trik: 4-col grid s
     1fr spacery na stranách centruje auto-sized pin/label pár; select s
     grid-column 1/-1 pokrývá všechny 4 columns = plnou šířkou. */
  .rezv-form .rezv-field {
    background: transparent;
    padding: 0;
    border-radius: 0;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: center;
  }
  .rezv-form .rezv-field .pin {
    grid-row: 1;
    grid-column: 2;
  }
  .rezv-form .rezv-field::after {
    content: "Trasa:";
    grid-row: 1;
    grid-column: 3;
    font-style: italic; font-weight: 700;
    font-size: 0.9375rem;
    color: var(--c-text);
  }
  .rezv-form .rezv-field select {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  /* rezv-contact: label na 1 řádku ("Potřebujete poradit? Kontaktujte nás:"),
     pod tím phone+email column. <br> v label se hide → joined inline (markup
     přidal space mezi <strong> a <br>, takže text drží mezeru). */
  .rezv-contact { grid-template-columns: 1fr; gap: 0.625rem 0; padding: 0.875rem 1.375rem 1.375rem; }
  .rezv-contact .label br { display: none; }

  .wavy-band { padding: 3.5rem 0 3.75rem; }                       /* 56px / 60px */

  /* #2900: cards-4 jako horizontální carousel — 1 karta visible, swipeable.
     scroll-snap drží karty zarovnané; .cards-dots pod nimi indikuje pozici. */
  .cards-4 {
    display: flex;
    grid-template-columns: none;                                  /* unset z desktop gridu */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 0.875rem;                                                /* 14px mezi kartami */
    padding: 0 var(--pad-x);                                      /* gutter na okrajích */
    scrollbar-width: none;                                        /* hide scrollbar Firefox */
    -webkit-overflow-scrolling: touch;
  }
  .cards-4::-webkit-scrollbar { display: none; }                  /* hide scrollbar WebKit */
  .card {
    flex: 0 0 calc(100% - 2 * var(--pad-x));                       /* každá karta = viewport - guttery */
    scroll-snap-align: center;
    height: 26.25rem;                                              /* 420px */
  }

  /* carousel indikátory (cards-4 + insta-grid) — orange tečky, active = delší pill */
  .cards-dots, .insta-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
  .cards-dots .dot, .insta-dots .dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 999px;
    background: rgba(250, 124, 28, 0.3);                          /* var(--c-orange-2) 30% */
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }
  .cards-dots .dot.is-active, .insta-dots .dot.is-active {
    background: var(--c-orange-2);
    width: 1.5rem;                                                /* 24px elongated pill */
  }

  /* insta-grid horizontal scroll carousel — 1 foto visible, swipeable, jako cards-4 */
  .insta-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 0.875rem;
    padding: 0 var(--pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .insta-grid::-webkit-scrollbar { display: none; }
  .insta-grid a {
    flex: 0 0 calc(100% - 2 * var(--pad-x));
    scroll-snap-align: center;
  }

  /* #2839: fotogalerie na mobilu stack 3-col grid (NE carousel — Honza explicit
     "vše pod sebe, bez schovávání"); na @640 single column. */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* #2409 D3: intro-photos řada se zmenší ze 3 sloupců na 2 + zmenší se gap. */
  .intro-photos { grid-template-columns: 1fr 1fr; gap: 1rem; }    /* 16px */
  .intro-photos-strip { margin-top: 2.25rem; }                    /* 36px */

  .text-split { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 4rem; } /* 28px / 64px */
  .banner-wide .content { padding: 3rem 2.25rem; }                /* 48px 36px */
  .banner-row { grid-template-columns: 1fr; }

  /* .sloupce — pod @1080 stack do 1 sloupce (všechny varianty 2/3/4). */
  .sloupce.sloupce-2,
  .sloupce.sloupce-3,
  .sloupce.sloupce-4 { grid-template-columns: 1fr; }

.sloupce > * {
    padding: 0rem;
}

  .kontakt-grid { grid-template-columns: 1fr; gap: 3rem; }        /* 48px */
  .kontakt-photos { grid-template-rows: auto auto; }
  .kontakt-photos .photo { aspect-ratio: 16 / 10; height: auto; }

  .rezv-page { grid-template-columns: 1fr; gap: 3rem; }           /* 48px */
  .route { grid-template-columns: 1fr; gap: 1.75rem; }            /* 28px */
  .route .map { width: 100%;  aspect-ratio: 16/9; } /* 480px */

  .route .grid {
    grid-template-columns: 1fr;
  }
  .route .grid figure { order: -1; }

  /* #2396 P1-4: route photo grid 2-col na tabletu, 1-col na mobilu (přes .cards-4 inheritance níže) */
  .route-photos { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 2rem; } /* 36px 32px — 3 sloupce wrapnou na 2 řady */

  /* #2900 mobile: footer obsah vycentrovaný (per Honza intent). text-align:center
     pokryje text/inline elementy; flex containery dostanou justify-content:center
     individuálně, protože text-align flex nepřebírá. */
  .footer { text-align: center; }
  .footer .brand { justify-content: center; }
  .footer-contact { align-items: center; }
  .footer-contact a { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-cta { align-items: center; display: flex; flex-direction: column; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .hero-body { padding: 2rem 1.75rem; }                           /* 32px 28px */
  .hero-card { height: 20rem; }                                   /* 320px */
  /* #2826 (ZADANI §2 mobil): "Mobilni HP" 380px Figma — H1 50px ExtraBold Italic
     (2 řádky "Půjčovna / lodí Nisa"). Bump z 44px na 50px per Figma raw data. */
  .hero-body h1 { font-size: 3.125rem; }                          /* 50px */
  .cards-4 { grid-template-columns: 1fr; }
  .card { height: 23.75rem; }                                     /* 380px */
  /* #2409 D3: pod 640px už 1 sloupec — 2 sloupce by ořezaly caption "Splavnost mapy Trojzemí". */
  .intro-photos { grid-template-columns: 1fr; gap: 0.875rem; }    /* 14px */
  /* #2839: fotogalerie @640 single column (1 fotka na řádek, vše pod sebe). */
  .gallery-grid { grid-template-columns: 1fr; }
  .banner-wide, .banner-row .banner-wide { height: auto; }
  .banner-wide .content { padding: 2.25rem 1.5rem; max-width: 100%; } /* 36px 24px */
  .footer-grid { grid-template-columns: 1fr; }
  /* .insta-grid je carousel od @1080 — žádný grid override na @640 nepotřebuje */
  .timetable .grid { grid-template-columns: repeat(3, 1fr); }
  .rezv-field.is-row { grid-template-columns: 1.75rem 4.375rem 1fr 1fr; } /* 28/70px */
  .topbar-inner { gap: 1rem; justify-content: center; font-size: 0.8125rem; } /* 16/13px */
}

/* =====================================================================
   #2680 (T1.5) — hover refine per Honza Figma tokens (C26_MSG 2026-06-04 11:19 CEST).
   Additive layer; přepisuje #2672 .btn:hover, .nav-list a:hover, .submenu a:hover.
   ===================================================================== */

/* 1. .btn:hover — Figma token: background #FA7C1C (var(--c-orange-2)) + bílé písmo.
      Override #2672 yellow swap (rgb(253,201,68)) — Honza explicit color/text correction. */
.btn:hover {
  background: var(--c-orange-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none;
}

/* 2. Top-nav items — bold + italic při hover/active, NO LAYOUT SHIFT (#3009).
      Overlay pattern: .lbl span drží visible regular-weight text (definuje width
      elementu). ::before je absolute overlay s italic + faux-bold (text-shadow
      stroke), opacity-toggled na hover/active. Width zůstává konstantní (regular
      .lbl in flow), takže nav-list (right-anchored přes margin-left:auto na <nav>)
      NESKÁČE. Chevron ::after na .has-sub má vlastní visibility — overlay logika
      se ho netýká. data-text + <span class="lbl"> injektuje header.php per
      top-level <a>. */
.nav-list > li > a { position: relative; }
.nav-list > li > a > .lbl { transition: opacity .15s ease; }
.nav-list > li > a::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-style: italic;
  font-weight: inherit;
  color: inherit;
  text-shadow:
    0.5px 0 0 currentColor,
    -0.5px 0 0 currentColor;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  white-space: nowrap;
}
.nav-list > li > a:hover,
.nav-list > li > a.is-active {
  border-bottom-color: transparent;
}
.nav-list > li:hover > a > .lbl,
.nav-list > li > a.is-active > .lbl { opacity: 0; }
.nav-list > li:hover > a::before,
.nav-list > li > a.is-active::before { opacity: 1; }

/* 3. Submenu items — oranžové zvýraznění (color FA7C1C) + "> " prefix při hover.
      No-shift: ::before pozicován absolutně do existujícího padding-left: 18px
      (line 185), takže text se při hover NEPOSOUVÁ. Opacity transition pro plynulé
      objevení šipky. Override line 191 bg-alt swap. */
.nav-list .submenu a { position: relative; }
.nav-list .submenu a::before {
  content: ">";
  position: absolute;
  left: 0.375rem;                                                 /* 6px */
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--c-orange-2);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.nav-list .submenu a:hover {
  color: var(--c-orange-2);
  background: transparent;
  font-weight: 700;
}
.nav-list .submenu a:hover::before { opacity: 1; }


table {
  width: 100%;
  border-collapse: collapse;
  background: #fbfbfb;
  border-radius: 16px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Záhlaví tabulky (caption / nadpis "Příjezd") */
table caption {
  text-align: left;
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  color: #1a1a1a;
  padding: 20px 24px 16px;
  caption-side: top;
}

/* Hlavička sloupců */
thead th {
  text-align: left;
  font-weight: 700;
  padding: 12px 16px;
  background: #efefef;
  color: #2a2a2a;
}

/* Tělo */
tbody th,
tbody td {
  padding: 12px 16px;
  vertical-align: middle;
}

/* První sloupec = popisek řádku (Ostritz, Žitava, Hrádek n.N.) */
tbody th,
tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

/* Datové buňky */
tbody td {
  font-weight: 700;
  color: #1a1a1a;
}

/* Zebra – sudé řádky světle šedé, liché bílé */
tbody tr:nth-child(odd) {
  background: #efefef;
}

tbody tr:nth-child(even) {
  background: #fbfbfb;
}

/* Patička */
tfoot td,
tfoot th {
  padding: 12px 16px;
  font-weight: 600;
  color: #555;
  background: #efefef;
  border-top: 1px solid #e0e0e0;
}

/* Zaoblení rohů u krajních buněk */
table tr:first-child th:first-child { border-top-left-radius: 16px; }
table tr:first-child th:last-child  { border-top-right-radius: 16px; }
table tr:last-child td:first-child  { border-bottom-left-radius: 16px; }
table tr:last-child td:last-child   { border-bottom-right-radius: 16px; }


.wavy-band::before {
  pointer-events: none;
}
main.wrap {
  position: relative;
  z-index: 1; /* vytvoří stacking context, čímž obsah bude nad wavy-band::before */
}


/* ---------- Responzivní tabulky ---------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .responsive-table thead { display: none; }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td { display: block; width: 100%; }

  .responsive-table tr {
    margin-bottom: 1rem;
    border-radius: 12px;
    background: #fbfbfb;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
  }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
  }

  .responsive-table td:last-child { border-bottom: none; }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #555;
    flex: 0 0 auto;
    margin-right: 1rem;
    white-space: nowrap;
  }
}


.hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hero-body {
  /* ... ostatní vlastnosti beze změny ... */
  z-index: 2;  /* bylo 1 */
}


.sloupce img{
    border-radius: var(--radius);
}

@media (max-width: 1080px) {
  .nav.is-open .wrap.nav-inner {
    border-radius: 0;
    margin: 0;
    padding:3.25rem 2.5rem;
  }
}
.wavy-band {
  overflow: hidden;
}

#mainContent img{
    height:auto!important
}