@charset "UTF-8";

/* =========================================================================
   ŠABLONA C — „Kapitán"
   Vrstva nad assets/css/site.css. Přepisuje jen to, co dělá jinak.

   Východisko: plavba není zboží, ale trasa po měřené řece. Vltava v Praze má
   říční kilometry, mosty v pořadí a místo, kde se loď otáčí. Z toho vychází
   celá šablona — hlavním prvkem je „trasovnice", vlasová linka s ryskami,
   která nahrazuje veselé vlnky šablony B a vrací se jako předěl sekcí.

   Papír je chladný, do říčního světla, ne krémový — tím se Kapitán liší
   od Slunečné paluby i od Salonu na první pohled.
   ========================================================================= */

/* --- 1. Paleta ----------------------------------------------------------
   Pět tokenů nastavuje konfigurace domény, zbytek se z nich dopočítá.
   Hodnoty tady jsou výchozí, aby šablona fungovala i bez vlastní palety. */

:root {
  --sea:        #1F6F8B;
  --sea-deep:   #14505F;
  --sea-dark:   color-mix(in srgb, #14505F 76%, #000);
  --sea-soft:   color-mix(in srgb, #1F6F8B 16%, #fff);
  --rope:       #2E6E9E;
  --rope-dark:  color-mix(in srgb, #2E6E9E 76%, #000);
  --rope-soft:  color-mix(in srgb, #2E6E9E 14%, #fff);
  --canvas:     #F2F4F6;
  --canvas-2:   color-mix(in srgb, #F2F4F6 96%, #000);
  --ink:        #131C24;
  --ink-2:      color-mix(in srgb, #131C24 76%, #fff);
  --ink-3:      color-mix(in srgb, #131C24 48%, #fff);

  /* Přemapování sémantiky společného základu na Kapitána. */
  --cream:      var(--canvas);
  --cream-2:    var(--canvas-2);
  --sand:       color-mix(in srgb, var(--canvas) 88%, #000);
  --paper:      #FFFFFF;
  --bg:         var(--canvas);
  --text:       var(--ink);
  --muted:      var(--ink-2);
  --line:       color-mix(in srgb, var(--ink) 15%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);

  --river:      var(--sea);
  --river-deep: var(--sea-deep);
  --river-dark: var(--sea-dark);
  --river-soft: var(--sea-soft);
  /* Hlavní akce nese barva řeky, akcent se šetří na drobnosti. Kdyby se
     akcent nasadil na tlačítka i čísla, celý web zezelená a ztratí osu. */
  --coral:      var(--sea);
  --coral-ink:  var(--sea-deep);
  --coral-soft: var(--sea-soft);
  --sun:        var(--rope);
  --sun-deep:   var(--rope-dark);
  --sun-soft:   var(--rope-soft);
  --wood:       var(--sea-deep);

  /* Kapitán kreslí jedním inkoustem: všechny kategorie jsou odstíny téže
     modři. Dvě barvy o podobné sytosti vedle sebe dělaly jen bahno. */

  /* Kategorie plaveb: jedna řada odstínů, ne čtyři cizí barvy. */
  --cat-vyletni:  var(--sea-deep);
  --cat-sezonni:  var(--rope-dark);
  --cat-soukrome: var(--sea-dark);
  --cat-darek:    var(--rope);

  /* Jedno písmo ve dvou šířkách. Rozšířený řez nese jméno lodi jako
     smaltovaná cedule v přístavu, běžný řez text. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Segoe UI", -apple-system, sans-serif;

  /* Ostré rohy. Kapitán staví na linkách, ne na zaoblení a stínech. */
  --r-pill: 2px;
  --r-sm:   2px;
  --r:      2px;
  --r-lg:   2px;

  --shadow:    none;
  --shadow-sm: none;
  --shadow-lg: none;
}

/* Trasovnice: vlasová linka s ryskami po 72 px, jako kilometrovník na řece. */
:root {
  --route-rule:
    linear-gradient(var(--line-strong) 0 0) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--sea) 0 1px, transparent 1px 72px) 0 0 / 100% 7px no-repeat;
}

/* --- 2. Typografie ------------------------------------------------------- */

body { font-variation-settings: "wdth" 100; letter-spacing: .005em; }

h1, h2, h3, .hero h1, .cruise-card__title, .log-row__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
}

/* Podtrh ve *hvězdičkách* je znak Slunečné paluby. Kapitán zvýrazní
   slovo pevnou linkou v barvě řeky, bez kurzívy. */
.hero h1 em { font-style: normal; }
.hero h1 em::after {
  height: 3px;
  border-radius: 0;
  background: var(--rope);
  opacity: 1;
}

/* --- 2b. Vrstvení hero sekce --------------------------------------------
   Site.css dává hlavní fotce záporný z-index a spoléhá, že se vykreslí pod
   scrimem uvnitř vlastního stacking kontextu. Ve chvíli, kdy šablona přidá
   nad hero další vrstvu, se fotka přestane kreslit a zůstane jen tmavý scrim.
   Vrstvíme proto výslovně kladnými hodnotami: fotka, přes ni scrim, nahoře text. */

/* Hodnoty musí být kladné. Při z-index: 0 spadne fotka do stejné vrstvy jako
   neposicovaný obsah a přemaluje ji scrim. */
.hero__bg,
.page-hero__bg { z-index: 1; }
.hero::after,
.page-hero::after { z-index: 2; }
.hero__wave,
.page-hero__wave { z-index: 3; }
.hero .wrap,
.hero__inner,
.page-hero .wrap,
.page-hero__inner { position: relative; z-index: 4; }
.hero .wheel-mark,
.page-hero .wheel-mark { z-index: 2; }

/* --- 3. Předěly: trasovnice místo vlnek ---------------------------------- */

.wave {
  height: 8px;
  margin: 0;
  background: var(--route-rule);
}
.wave path { fill: transparent; }
.wave--flip { transform: none; }

/* Na tmavém hero musí být trasovnice světlá, jinak zmizí. */
.hero__wave {
  bottom: 0;
  height: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .55) 0 0) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 72px) 0 0 / 100% 7px no-repeat;
}

.page-hero__wave { bottom: 0; height: 8px; }

/* Kormidlo je motiv Slunečné paluby. Kapitánovi stačí skrýt loukotě a ze
   stejného SVG zbydou dva soustředné kruhy – lodní okénko. */
.wheel-mark g,
.logo__wheel g { display: none; }
.wheel-mark circle,
.logo__wheel circle { stroke-width: 5; }
.wheel-mark { opacity: .1; }

/* --- 4. Hlavička --------------------------------------------------------- */

.topbar {
  background: var(--sea-dark);
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }

.logo__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 122;
  font-weight: 800;
  letter-spacing: -.02em;
}
.logo__tag {
  color: var(--ink-3);
  letter-spacing: .08em;
  font-variation-settings: "wdth" 88;
}

.nav__link { border-radius: 2px; font-weight: 500; }
.nav__link:hover { background: var(--sea-soft); color: var(--sea-deep); }
.nav__sub { border: 1px solid var(--line); border-radius: 2px; box-shadow: none; }

/* --- 5. Tlačítka --------------------------------------------------------- */

.btn {
  border-radius: 2px;
  box-shadow: none;
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  letter-spacing: .01em;
  border-width: 1px;
}
.btn:hover { transform: none; box-shadow: none; background: var(--sea-dark); }
.btn:active { transform: none; box-shadow: none; }
.btn--book { --btn-bg: var(--sea-deep); }
/* Na tmavém hero by tmavě modré tlačítko splynulo s vodou. */
.hero .btn:not(.btn--ghost):not(.btn--sun) { --btn-bg: var(--sea); }
.hero .btn:not(.btn--ghost):not(.btn--sun):hover { background: var(--sea-deep); }
.btn--inquiry { --btn-bg: var(--rope); }
.btn--sun { --btn-bg: var(--rope); --btn-fg: #fff; }
.btn--sun:hover { background: var(--rope-dark); }
.btn--ghost {
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--sea-soft); border-color: var(--sea); }

a:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rope);
  outline-offset: 2px;
}

/* --- 6. Nadpisy sekcí ---------------------------------------------------- */

/* Verzálkový popisek nad nadpisem je nejobehranější prvek na webu.
   Kapitán z něj dělá značku na trase: ryska a k ní věta normálním písmem. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--sea-deep);
}
.eyebrow::before {
  content: "";
  width: 1px;
  height: 1.1em;
  background: var(--rope);
}

/* Sekce čteme zleva, vycentrovaný nadpis rozbíjí osu trasovnice. */
.section-head--center,
.section-head--center .section-head__text { text-align: left; margin-inline: 0; }
.section-head--center .eyebrow { justify-content: flex-start; }

.section--sand { background: var(--canvas-2); }
.section--river {
  background: var(--sea-dark);
  border-block: 1px solid color-mix(in srgb, #fff 16%, transparent);
}
.section--river a:not(.btn) { color: var(--rope-soft); }

/* --- 7. Plavby: lodní deník tam, kde je místo --------------------------
   Srovnávací seznam plaveb (výletní, další plavby) jde na jeden sloupec
   řádků – vedle sebe se dají srovnat očima ceny i délky.

   Sezónní plavby jsou ale nálada, ne tabulka: Advent, Silvestr, Valentýn se
   prodávají fotkou. Ty zůstávají v mřížce a řádek se v ní překlopí do karty.

   Container query by tu nepomohl: kontejnerem by byla celá mřížka (1180 px),
   ne jednotlivá buňka, takže by dotaz na šířku odpověděl vždy kladně. Ledger
   se proto váže na mřížky, které samy nutíme do jednoho sloupce. */

.grid--3:not(.page-gallery),
.grid--2:not(.page-gallery) {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

/* Výchozí tvar je karta: funguje v úzkém sloupci i na mobilu. */
.log-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 0 1.4rem;
  background: none;
}
.log-row:hover .log-row__media img { transform: scale(1.03); }

.log-row__media {
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
}
.log-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.log-row__title {
  margin: 0 0 .3rem;
  font-size: var(--step-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
}
.log-row__title a { color: var(--ink); text-decoration: none; }
.log-row__title a::after { content: ""; position: absolute; inset: 0; }
.log-row:hover .log-row__title a { color: var(--sea-deep); }

.log-row__badge {
  padding: .1rem .45rem;
  border: 1px solid var(--sea);
  border-radius: 2px;
  color: var(--sea-deep);
  font-size: .72rem;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  white-space: nowrap;
}

.log-row__text {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 58ch;
}

/* Úseky plavby: ryska a k ní údaj, jako značka na trase. */
.log-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0;
  font-size: .86rem;
  color: var(--ink-3);
}
.log-row__leg { display: inline-flex; align-items: center; gap: .4rem; }
.log-row__leg::before {
  content: "";
  width: 1px;
  height: .85em;
  background: var(--rope);
}

.log-row__fare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .6rem;
  line-height: 1.25;
}
.log-row__from { font-size: .76rem; color: var(--ink-3); }
.log-row__price {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.log-row__note { font-size: .74rem; color: var(--ink-3); }
.log-row__more {
  font-size: .82rem;
  font-weight: 600;
  color: var(--sea-deep);
  border-bottom: 1px solid var(--sea);
}

/* Jednosloupcová mřížka: řádek deníku – fotka, popis, vpravo cena. */
@media (min-width: 760px) {
  .grid--3:not(.page-gallery) > .log-row,
  .grid--2:not(.page-gallery) > .log-row {
    display: grid;
    grid-template-columns: 9rem 1fr 11rem;
    gap: 1.5rem;
    align-items: center;
    padding: 1.15rem .25rem;
    border-bottom: 1px solid var(--line);
  }
  .grid--3:not(.page-gallery) > .log-row:hover,
  .grid--2:not(.page-gallery) > .log-row:hover {
    background: color-mix(in srgb, var(--sea) 5%, transparent);
  }
  .grid--3:not(.page-gallery) > .log-row > .log-row__fare,
  .grid--2:not(.page-gallery) > .log-row > .log-row__fare {
    display: block;
    text-align: right;
  }
  .grid--3:not(.page-gallery) > .log-row .log-row__from,
  .grid--3:not(.page-gallery) > .log-row .log-row__price,
  .grid--3:not(.page-gallery) > .log-row .log-row__note,
  .grid--3:not(.page-gallery) > .log-row .log-row__more,
  .grid--2:not(.page-gallery) > .log-row .log-row__from,
  .grid--2:not(.page-gallery) > .log-row .log-row__price,
  .grid--2:not(.page-gallery) > .log-row .log-row__note,
  .grid--2:not(.page-gallery) > .log-row .log-row__more { display: block; }
  .grid--3:not(.page-gallery) > .log-row .log-row__more,
  .grid--2:not(.page-gallery) > .log-row .log-row__more { margin-top: .5rem; }
}
/* Řádky deníku na tmavém pásu.
   Celý blok výše počítá se světlým papírem – bere --ink, --muted a --sea-deep.
   Na navy podkladu z toho zbyla tmavá na tmavé, takže se na tmavé ploše
   přebarvuje všechno, co nese text nebo linku. */
.section--river .log-row__title a { color: #fff; }
.section--river .log-row:hover .log-row__title a { color: var(--rope-soft); }
.section--river .log-row__badge {
  border-color: rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .88);
}
.section--river .log-row__text { color: rgba(255, 255, 255, .8); }
.section--river .log-row__meta,
.section--river .log-row__from,
.section--river .log-row__note { color: rgba(255, 255, 255, .66); }
.section--river .log-row__leg::before { background: rgba(255, 255, 255, .45); }
.section--river .log-row__price { color: #fff; }
.section--river .log-row__more {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .55);
}

@media (min-width: 760px) {
  .section--river .grid--3:not(.page-gallery) > .log-row,
  .section--river .grid--2:not(.page-gallery) > .log-row {
    border-bottom-color: rgba(255, 255, 255, .16);
  }
  .section--river .grid--3:not(.page-gallery) > .log-row:hover,
  .section--river .grid--2:not(.page-gallery) > .log-row:hover {
    background: rgba(255, 255, 255, .05);
  }
}
.section--river .grid--stack { border-top-color: rgba(255, 255, 255, .2); }

/* --- 8. Čísla na úvodu --------------------------------------------------- */

.trust {
  border-block: 1px solid var(--line-strong);
  background: none;
}
.trust__item { border-radius: 0; background: none; box-shadow: none; }
.trust__num {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sea-deep);
}
.trust__label { color: var(--ink-3); letter-spacing: 0; text-transform: none; }
/* Rytmus čísel drží řeka, akcent se objeví jen u každého třetího. */
.trust__item:nth-child(2n) .trust__num { color: var(--sea); }
.trust__item:nth-child(3n) .trust__num { color: var(--rope-dark); }

/* --- 9. Proč právě my ---------------------------------------------------- */

.usp__item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-top: 1.1rem;
}
.usp__icon {
  border-radius: 2px;
  background: var(--sea-soft);
  color: var(--sea-deep);
  box-shadow: none;
}

/* --- 10. Formuláře a ceník ---------------------------------------------- */

.input,
.field input,
.field select,
.field textarea {
  border-radius: 2px;
  border-color: var(--line-strong);
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--sea);
  outline-offset: 0;
  border-color: var(--sea);
}

.card,
.pricing,
.form-side {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid var(--line);
}

/* Akcent --sun je v tomhle motivu střední modř. Na navy plochách – říčním
   pásu a patičce – by zmizel, proto se tam přemapuje na světlou variantu.
   Tím se srovnají i nadpisy sekcí, odrážky a odkazy, které z něj vycházejí. */
.section--river,
.site-footer {
  --sun: var(--rope-soft);
  --sun-deep: #fff;
}

/* --- 11. Patička --------------------------------------------------------- */

.site-footer {
  background: var(--sea-dark);
  border-top: 8px solid transparent;
  border-image: var(--route-rule);
}
.site-footer a:not(.btn) { color: var(--rope-soft); }
.site-footer a:not(.btn):hover { color: #fff; }

/* Podtitul u loga dědí okrovou --sun, kterou tenhle motiv přebil na střední
   modrou. Na tmavém podkladu byla pod hranicí čitelnosti. */
.footer-brand .logo__tag { color: var(--rope-soft); }
.site-footer .footer-note { color: rgba(255, 255, 255, .74); }

.mobile-bar {
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
  border-top: 1px solid var(--line-strong);
  box-shadow: none;
}

/* --- 12. Klid v pohybu --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .log-row,
  .log-row__media img { transition: none; }
}

/* --- 13. Vzduch a čitelnost ----------------------------------------------
   Kapitán staví na linkách, takže potřebuje kolem nich prostor. Stejná
   pravidla jako v Salonu: větší základní stupeň, delší proklad, kratší řádek. */

:root { --section: clamp(4.2rem, 3rem + 6.5vw, 7.5rem); }

body {
  font-size: clamp(1.02rem, .99rem + .18vw, 1.09rem);
  line-height: 1.62;
}

.section p,
.prose p { max-width: 68ch; }
/* Odstavec, který jen drží tlačítko, se nesmí zúžit – text-align: center
   by ho pak centroval uvnitř úzkého bloku, ne přes celou sekci. */
.section p.text-center,
.prose p.text-center { max-width: none; }

.hero__lead,
.page-hero__lead {
  font-size: clamp(1.06rem, 1rem + .28vw, 1.18rem);
  line-height: 1.58;
  max-width: 34rem;
}

/* Číslice v cenách a statistikách musí lícovat pod sebou. */
.trust__num,
.log-row__price,
.price-table td,
.pricing td { font-variant-numeric: tabular-nums lining-nums; }

/* Drobný text v šedé na světlém podkladu je nejčastější zdroj špatné
   čitelnosti; posouváme ho o stupeň tmavěji. */
.log-row__meta,
.trust__label,
.muted,
small { color: var(--ink-2); }

/* --- 14. Jeden inkoust ----------------------------------------------------
   Předchozí verze míchala modrou se zelenou o stejné sytosti. Nic nemělo
   přednost a plochy se srážely. Kapitán proto kreslí jedním odstínem ve třech
   hloubkách; druhá barva se nepoužívá vůbec a kontrast dělá světlost. */

/* Hlavní akce je plná, tmavá a na fotce čitelná. */
.hero .btn--book,
.hero .btn--pulse,
.hero .btn:not(.btn--ghost):not(.btn--sun) {
  --btn-bg: var(--sea-deep);
  --btn-fg: #fff;
}
.hero .btn:not(.btn--ghost):not(.btn--sun):hover { background: var(--sea-dark); }

/* Druhá akce na fotce: bílá vlasovka a průhledné sklo, žádná druhá barva. */
.hero .btn--sun,
.page-hero .btn--sun {
  --btn-bg: transparent;
  --btn-fg: #fff;
  background: rgba(10, 20, 28, .38);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
}
.hero .btn--sun:hover,
.page-hero .btn--sun:hover {
  --btn-fg: var(--sea-deep);
  background: #fff;
  border-color: #fff;
}

/* Na světlém podkladu je druhá akce obtažená modří. */
.section:not(.section--river) .btn--sun {
  --btn-bg: transparent;
  --btn-fg: var(--sea-deep);
  border: 1px solid var(--sea);
}
.section:not(.section--river) .btn--sun:hover {
  --btn-fg: #fff;
  background: var(--sea-deep);
  border-color: var(--sea-deep);
}

.section:not(.section--river) .form-side .btn--sun {
  --btn-bg: #fff;
  --btn-fg: var(--sea-deep);
  border-color: #fff;
}
.section:not(.section--river) .form-side .btn--sun:hover {
  --btn-fg: var(--sea-deep);
  background: var(--canvas);
  border-color: var(--canvas);
}

/* Patička a říční pás jsou nejtmavší plochy webu. Modrý obrys s modrým
   popisem se v nich ztrácel, proto drží bílou linku a bílý text. */
.section--river .btn--sun,
.site-footer .btn--sun {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.section--river .btn--sun:hover,
.site-footer .btn--sun:hover {
  --btn-fg: var(--sea-dark);
  background: #fff;
  border-color: #fff;
}

/* Štítek nad nadpisem býval plná okrová pilulka – nejtěžší prvek na fotce.
   Teď je to tmavé sklo s bílým textem, které fotku nechá dýchat. */
.hero__eyebrow {
  background: rgba(10, 20, 28, .5);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.hero__eyebrow svg { color: #fff; opacity: .85; }

/* Zvýraznění v nadpisu: bílá linka, ne barevná. */
.hero h1 em::after { background: rgba(255, 255, 255, .85); }

/* Čísla na úvodu jdou po hloubkách jedné modři. */
.trust__num { color: var(--sea-deep); }
.trust__item:nth-child(2n) .trust__num { color: var(--sea); }
.trust__item:nth-child(3n) .trust__num { color: var(--rope); }

/* Značka na trase a rysky trasovnice nesou světlejší tón, ne cizí barvu. */
.eyebrow { color: var(--sea-deep); }
.eyebrow::before { background: var(--rope); }
.log-row__badge { border-color: var(--sea); color: var(--sea-deep); }
.log-row__leg::before { background: var(--rope); }
.btn--inquiry { --btn-bg: var(--sea); }
.btn--inquiry:hover { background: var(--sea-deep); }
a:focus-visible,
.btn:focus-visible,
button:focus-visible { outline-color: var(--sea); }
/* Kruhový vodoznak přes fotku nepůsobí jako značka, ale jako šmouha na skle.
   Kapitán ho nechává jen tam, kde je pod ním plocha, ne snímek. */
.hero .wheel-mark,
.page-hero .wheel-mark { display: none; }

/* Scrim ze společného základu ztmavuje levou polovinu na 84 %, takže z fotky
   zbude tmavý flek a hero vypadá, jako by snímek chyběl. Kapitán ho drží
   lehčí a spoléhá na sklo pod štítkem a na stín textu. */
.hero::after {
  background:
    linear-gradient(98deg, rgba(10, 20, 28, .72) 0%, rgba(10, 20, 28, .42) 30%, rgba(10, 20, 28, .08) 58%, rgba(10, 20, 28, 0) 74%),
    linear-gradient(180deg, rgba(10, 20, 28, .3) 0%, rgba(10, 20, 28, 0) 28%, rgba(10, 20, 28, 0) 64%, rgba(10, 20, 28, .4) 100%);
}
.page-hero::after {
  background:
    linear-gradient(100deg, rgba(10, 20, 28, .7) 0%, rgba(10, 20, 28, .36) 48%, rgba(10, 20, 28, .06) 78%),
    linear-gradient(180deg, rgba(10, 20, 28, .2) 0%, rgba(10, 20, 28, 0) 45%, rgba(10, 20, 28, .44) 100%);
}
.hero h1,
.page-hero h1 { text-shadow: 0 2px 24px rgba(8, 16, 22, .55); }

/* --- 15. Doladění hero ---------------------------------------------------
   Tmavá varianta modři je na fotce prakticky černá a hlavní akce pak působí
   jako díra. Na fotce proto nese tlačítko základní modř, tmavou si nechává
   až na hover a na světlé sekce. */

.hero .btn--book,
.hero .btn--pulse,
.hero .btn:not(.btn--ghost):not(.btn--sun) { --btn-bg: var(--sea); }
.hero .btn:not(.btn--ghost):not(.btn--sun):hover { background: var(--sea-deep); }

.topbar { background: var(--sea-deep); }

.hero__eyebrow {
  background: rgba(14, 26, 36, .42);
  border-color: rgba(255, 255, 255, .34);
}

/* Nadpis se má vejít na tři řádky, ne se roztéct po celé výšce hero.
   Širší sazební obrazec a vyvážené lámání udrží řádky v podobné délce. */
.hero__inner { max-width: 58rem; }
.hero h1 {
  max-width: 54rem;
  font-size: clamp(2.3rem, 1.5rem + 3.1vw, 4.2rem);
  text-wrap: balance;
}
@media (max-width: 720px) {
  /* Na mobilu se stejná věta na tři řádky nevejde a násilné zmenšení by ji
     udělalo nečitelnou; tam se řádky nechávají plynout. */
  .hero h1 { text-wrap: pretty; }
}