@charset "UTF-8";

/* =========================================================================
   ŠABLONA D - „Regata"
   Vrstva nad assets/css/site.css. Přepisuje jen to, co dělá jinak.

   Východisko: Sluneční paluba je letní odpoledne na řece. Regata je totéž
   odpoledne, jen o svátku - přístaviště s vlaječkami, startovní čísla, zmrzlina
   na molu. Zůstává tedy veselá povaha šablony B, mění se ladění:

     • papír je chladný, porcelánový, ne krémový,
     • řeka má barvu barvínku místo tyrkysu, akcent zůstal teplý (mango)
       a druhou barvou je tlumená malinová místo korálu,
     • písmo je hladký geometrický grotesk místo vlnkatého serifu (Fraunces),
     • dělicím prvkem je šňůra vlaječek, ne jen přerušovaná linka.

   Veselost drží barvy a vlaječky, ne ozdoby navíc. Konfety pod obsahem
   i nakloněné štítky tu chvíli byly a zase šly pryč: v nabídce plaveb
   odváděly oči od fotek dřív, než stihly zaujmout.

   Kormidlo z loga se používá dál - je to znak provozovatele, ne šablony.
   ========================================================================= */

/* --- 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 {
  --sail:        #4558C8;
  --sail-deep:   #33409B;
  --sail-dark:   color-mix(in srgb, #33409B 78%, #000);
  --sail-soft:   color-mix(in srgb, #4558C8 14%, #fff);

  --mango:       #EEA83C;
  --mango-deep:  color-mix(in srgb, #EEA83C 74%, #000);
  --mango-soft:  color-mix(in srgb, #EEA83C 20%, #fff);

  --porcelain:   #F5F6FB;
  --porcelain-2: color-mix(in srgb, #F5F6FB 96%, #000);
  --shell:       color-mix(in srgb, #F5F6FB 90%, #000);

  --ink:         #1C2246;
  --ink-2:       color-mix(in srgb, #1C2246 78%, #fff);
  --ink-3:       color-mix(in srgb, #1C2246 52%, #fff);

  /* Malinová je pevná barva šablony, ne token palety. Kdyby se dala
     přenastavit po doménách, přestala by být poznávacím znamením Regaty. */
  --melon:       #E05377;
  --melon-ink:   #BC3459;
  --melon-soft:  #FAE0E6;

  /* --- Přemapování sémantiky společného základu na Regatu -------------- */
  --cream:       var(--porcelain);
  --cream-2:     var(--porcelain-2);
  --sand:        var(--shell);
  --paper:       #FFFFFF;
  --bg:          var(--porcelain);
  --text:        var(--ink);
  --muted:       var(--ink-2);
  --line:        color-mix(in srgb, var(--sail) 15%, transparent);
  --line-strong: color-mix(in srgb, var(--sail) 28%, transparent);

  --river:       var(--sail);
  --river-deep:  var(--sail-deep);
  --river-dark:  var(--sail-dark);
  --river-soft:  var(--sail-soft);

  /* Hlavní akce nese malinová, drobné zvýraznění mango. Stejná dělba jako
     v šabloně B (korál a slunce), jen o dva tóny jinam. */
  --coral:       var(--melon);
  --coral-ink:   var(--melon-ink);
  --coral-soft:  var(--melon-soft);

  --sun:         var(--mango);
  --sun-deep:    var(--mango-deep);
  --sun-soft:    var(--mango-soft);

  --wood:        var(--melon-ink);
  --wood-soft:   var(--melon-soft);

  /* Kategorie plaveb: čtyři rozeznatelné, ale spolu ladící barvy. */
  --cat-vyletni:  var(--sail-deep);
  --cat-sezonni:  var(--melon-ink);
  --cat-soukrome: var(--mango-deep);
  --cat-darek:    color-mix(in srgb, var(--sail) 55%, var(--melon));

  /* Písmo. Zaoblené displejové fonty (Fredoka, Baloo) vypadají vesele, ale
     česká diakritika v nich bývá odbytá: háček nad „ř" a kroužek nad „ů" se
     kreslí jako cizí těleso. Plus Jakarta Sans má akcenty nakreslené pořádně
     a přitom si drží živý, mírně geometrický charakter. */
  --font-display: "Plus Jakarta Sans", "Noto Sans", "Noto Sans Hebrew", "Segoe UI", -apple-system, sans-serif;
  --font-body:    "Figtree", "Noto Sans", "Noto Sans Hebrew", "Segoe UI", -apple-system, sans-serif;

  /* Tvar. Regata je o kus kulatější než Sluneční paluba, ale ne natolik,
     aby karty vypadaly jako vystřižené samolepky. */
  --r-sm: 10px;
  --r-md: 14px;   /* site.css tuhle proměnnou používá u aktualit, ale nemá ji */
  --r:    18px;
  --r-lg: 24px;

  --shadow-sm: 0 2px 6px rgba(28, 34, 70, .07);
  --shadow:    0 12px 30px -12px rgba(28, 34, 70, .26);
  --shadow-lg: 0 28px 60px -24px rgba(28, 34, 70, .36);

  --ring: 0 0 0 3px var(--porcelain), 0 0 0 6px var(--melon);

  /* Šňůra vlaječek. Maska drží tvar, barvy jdou z proměnných, takže se
     praporky přebarví spolu s paletou domény. */
  --bunting-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='17'%3E%3Crect width='22' height='2' rx='1' fill='%23000'/%3E%3Cpath d='M2 1.8h18L11 15z' fill='%23000'/%3E%3C/svg%3E");
  --bunting-colors: repeating-linear-gradient(90deg,
    var(--sail) 0 22px, var(--melon) 22px 44px, var(--mango) 44px 66px);
}

/* --- 2. Typografie -------------------------------------------------------
   Osy SOFT a WONK patří Frauncesu ze šablony B. Plus Jakarta Sans je nezná,
   takže se musí vypnout, jinak zůstane v proměnném nastavení nesmysl. */

h1, h2, h3, h4,
.logo__name,
.hero h1,
.trust__num,
.fieldset > legend,
.datepicker__title {
  font-variation-settings: normal;
  letter-spacing: -.02em;
}

/* Česká diakritika sedí vysoko nad verzálkami, proto o chlup víc prokladu,
   než má společný základ: ať se kroužek nad „ů" nedotýká řádku nad ním. */
h1, h2, h3, h4 { line-height: 1.18; }

/* --- 3. Papír ------------------------------------------------------------
   Stejný princip jako u Slunečné paluby: dvě sotva znatelné barevné mlhy,
   aby plocha nebyla mrtvá. */

body::before {
  opacity: .6;
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--sail) 10%, transparent), transparent 42%),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--mango) 12%, transparent), transparent 38%),
    radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--melon) 8%, transparent), transparent 45%);
}

::selection { background: var(--melon); color: #fff; }

/* --- 4. Předěl: šňůra vlaječek ------------------------------------------- */

.wheel-divider { gap: .9rem; color: var(--line-strong); }
.wheel-divider::before,
.wheel-divider::after {
  height: 17px;
  background: var(--bunting-colors);
  -webkit-mask: var(--bunting-mask) 0 0 / 22px 17px repeat-x;
          mask: var(--bunting-mask) 0 0 / 22px 17px repeat-x;
}
.wheel-divider svg { width: 30px; height: 30px; color: var(--sail-deep); }

/* Vlaječky visí i nad patičkou: tam končí procházka po molu. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 17px;
  background: var(--bunting-colors);
  -webkit-mask: var(--bunting-mask) 0 0 / 22px 17px repeat-x;
          mask: var(--bunting-mask) 0 0 / 22px 17px repeat-x;
  pointer-events: none;
}
.site-footer { padding-top: calc(var(--section) * .75 + 17px); }

/* --- 5. Hero -------------------------------------------------------------
   Scrimy a stíny textu má společný základ napsané natvrdo v tyrkysové černi.
   Regata je posouvá do noční modři, aby fotka ladila s paletou. */

/* Scrim drží dál doprava a o něco hlouběji než v šabloně B. Světlá denní
   fotka (bílý trup, nebe) by jinak text v perexu spolkla. */
.hero::after {
  background:
    linear-gradient(96deg, rgba(14,18,54,.88) 0%, rgba(14,18,54,.74) 28%, rgba(14,18,54,.40) 52%, rgba(14,18,54,.08) 70%, rgba(14,18,54,0) 80%),
    linear-gradient(180deg, rgba(14,18,54,.32) 0%, rgba(14,18,54,0) 26%, rgba(14,18,54,0) 62%, rgba(14,18,54,.42) 100%);
}
.page-hero::after {
  background:
    linear-gradient(100deg, rgba(14,18,54,.66) 0%, rgba(14,18,54,.40) 45%, rgba(14,18,54,.12) 75%),
    linear-gradient(180deg, rgba(14,18,54,.22) 0%, rgba(14,18,54,.05) 45%, rgba(14,18,54,.48) 100%);
}
.page-hero h1 { text-shadow: 0 2px 24px rgba(8,10,34,.75), 0 1px 4px rgba(8,10,34,.55); }
.page-hero__lead { text-shadow: 0 1px 16px rgba(8,10,34,.8), 0 1px 3px rgba(8,10,34,.55); }

@media (max-width: 860px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(14,18,54,.55) 0%, rgba(14,18,54,.30) 38%, rgba(14,18,54,.72) 100%);
  }
  .page-hero::after {
    background: linear-gradient(180deg, rgba(14,18,54,.82), rgba(14,18,54,.68) 55%, rgba(14,18,54,.86));
  }
}

/* Zvýrazněné slovo v titulku je u Slunečné paluby žlutý podtrh. Regata ho
   vede malinovou a nakloní o chlup víc, ať to je tah fixem, ne linka. */
.hero h1 em::after {
  background: var(--melon);
  height: .2em;
  transform: rotate(-1deg);
}
@media (max-width: 860px) {
  .hero h1 em {
    background-image: linear-gradient(var(--melon), var(--melon));
    background-size: 100% .2em;
  }
}

.hero__eyebrow {
  background: var(--mango);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--mango) 65%, #000);
}
.hero__eyebrow svg { color: var(--melon-ink); }

/* --- 6. Tlačítka --------------------------------------------------------
   Chunky tlačítko s plným spodním stínem zůstává, je to půlka veselosti
   šablony B. Regata ho jen o chlup zvedne. */

.btn {
  font-weight: 700;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--btn-bg) 66%, #000);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--btn-bg) 66%, #000), var(--shadow);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-bg) 66%, #000); }

.btn--ghost { border-width: 2px; border-color: var(--sail); color: var(--sail-deep); }
.btn--ghost:hover { --btn-fg: var(--sail-deep); border-color: var(--sail-deep); }

/* --- 7. Hlavička --------------------------------------------------------- */

.site-header.is-stuck {
  border-bottom-color: color-mix(in srgb, var(--sail) 20%, transparent);
  box-shadow: 0 8px 24px -16px rgba(28,34,70,.5);
}
.logo__tag { color: var(--melon-ink); }
.topbar .icon { color: var(--mango); }
.topbar a:hover { color: var(--mango); }

/* --- 8. Nadpisy sekcí ----------------------------------------------------
   Odrážka nad nadpisem je u Slunečné paluby žlutá čárka. Regata dá kratší
   dvojici: malinový praporek a mangovou tečku za ním. */

.eyebrow { letter-spacing: .12em; }
.eyebrow::before {
  width: 26px;
  height: 7px;
  border-radius: 0;
  background:
    linear-gradient(var(--melon), var(--melon)) 0 2px / 18px 3px no-repeat,
    radial-gradient(circle 3.5px at 22.5px 3.5px, var(--mango) 99%, transparent);
}
.section--river .eyebrow::before {
  background:
    linear-gradient(var(--mango), var(--mango)) 0 2px / 18px 3px no-repeat,
    radial-gradient(circle 3.5px at 22.5px 3.5px, #fff 99%, transparent);
}

/* --- 9. Karty plaveb ----------------------------------------------------
   Karta má u Regaty vidět obrys a při najetí se zvedne o kus výš než
   v šabloně B. Naklánět ji je už moc: od toho jsou vlaječky. */

.cruise-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.cruise-card:hover { border-color: var(--accent); }
.cruise-card__badge {
  background: var(--melon);
  color: #fff;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--melon) 62%, #000);
}

.news-card:hover .news-card__title a { color: var(--melon-ink); }
.news-card__more { color: var(--melon-ink); }

/* --- 10. Dlaždice, fakta, čísla ------------------------------------------ */

.usp__icon { border-radius: 16px; }
.fact__icon { border-radius: 14px; }

.trust__item:nth-child(2n) .trust__num { color: var(--melon-ink); }
.trust__item:nth-child(3n) .trust__num { color: var(--mango-deep); }

.callout { border-color: var(--melon); }
.note-box { border-inline-start-width: 4px; border-inline-start-color: var(--melon); }

/* --- 11. Seznamy --------------------------------------------------------- */

.list-wheel li::before { color: var(--sail); }
.list-wheel--sun li::before { color: var(--mango-deep); }
.list-wheel--coral li::before { color: var(--melon-ink); }
.section--river .list-wheel li::before { color: var(--mango); }

.list-check li::before { border-color: var(--melon); }

.programme li::before {
  top: .82em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--melon);
}
.programme li:nth-child(2n)::before { background: var(--sail); }

/* --- 12. Patička --------------------------------------------------------- */

.footer-brand .logo__tag { color: var(--mango); }
.site-footer a:not(.btn):hover { color: var(--mango); }
.site-footer h3 { letter-spacing: .08em; }

/* --- 13. Tisk ------------------------------------------------------------
   Vlaječky a barevné mlhy jsou ozdoba obrazovky. Na papíře by z nich byly
   jen šedé fleky, které spolknou tonér. */

@media print {
  .wheel-divider::before,
  .wheel-divider::after,
  .site-footer::before,
  body::before { display: none; }
  .site-footer { padding-top: 0; }
}