/* JiriZindulka.com · v2 · brand klienta (Open Sans, navy #233a59, sky #9bdaf2, CTA #f2cb05) */

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-latin.woff2?v=9a11e94ab7") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-latin-ext.woff2?v=c471c053eb") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #233a59;
  --sky: #9bdaf2;
  --ink: #111;
  --cta: #f2cb05;
  --blue: #426a8c;
  --surface: #d4f3ff;
  --bar: #d5dbe0;
  --paper: #fff;
  --tint: color-mix(in srgb, var(--surface) 38%, white);
  --line: color-mix(in srgb, var(--navy) 14%, white);
  --line-2: color-mix(in srgb, var(--navy) 24%, white);
  --shade: 0 1px 2px rgba(35, 58, 89, .06), 0 8px 24px rgba(35, 58, 89, .08);
  --shade-2: 0 2px 4px rgba(35, 58, 89, .08), 0 18px 40px rgba(35, 58, 89, .14);

  --f: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-h1: 48px; --t-h2: 36px; --t-h3: 30px; --t-h4: 20px;
  --t-body: 18px; --t-sm: 14px; --t-xs: 12px;

  --r: 8px;
  --wrap: 1152px; --gut: 24px;
  --sec: 96px;
  --head: 76px;
  --easing: cubic-bezier(.32, .72, 0, 1);
  --dur: 200ms;
}
@media (max-width: 720px) {
  :root { --t-h1: 36px; --t-h2: 30px; --t-h3: 24px; --t-h4: 18px; --t-body: 16px; --gut: 16px; --sec: 64px; --head: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--f);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; object-position: var(--fx, 50% 50%); }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-foot :focus-visible, .hero :focus-visible { outline-color: var(--sky); }
h1, h2, h3, h4 { font-weight: 600; color: var(--navy); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); line-height: 1.18; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
h4 { font-size: var(--t-h4); line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
table, .num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-to-content { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: var(--r); }
.skip-to-content:focus { top: 12px; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gut), 760px); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec--tint { background: var(--tint); }
.sec--navy { background: var(--navy); color: #fff; }
.sec--navy h2, .sec--navy h3 { color: #fff; }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sec:not(.sec--tint):not(.sec--navy) + .sec:not(.sec--tint):not(.sec--navy) { padding-top: 0; }
.sec--tint + .sec--tint { padding-top: 0; }

.eyebrow { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.sec--navy .eyebrow, .on-dark .eyebrow { color: var(--sky); }
.lead { font-size: 20px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 88%, var(--navy)); max-width: 62ch; }
.muted { color: var(--blue); }
.small { font-size: var(--t-sm); line-height: 1.55; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-head > div { max-width: 680px; }
.sec-head p { margin-top: 12px; }
@media (max-width: 720px) { .lead { font-size: 18px; } .sec-head { margin-bottom: 24px; } }

/* ---------- tlačítka */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r); border: 2px solid transparent;
  font: 700 14px/1.2 var(--f); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  background: var(--cta); color: var(--navy); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), border-color var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.btn:hover { background: color-mix(in srgb, var(--cta) 86%, var(--navy)); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--line { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--line:hover { background: var(--navy); color: #fff; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--mail { text-transform: none; letter-spacing: .01em; font-size: 16px; }
.on-dark .btn--line, .sec--navy .btn--line { border-color: #fff; color: #fff; }
.on-dark .btn--line:hover, .sec--navy .btn--line:hover { background: #fff; color: var(--navy); }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); text-decoration: none; }
.tlink svg { width: 18px; height: 18px; transition: transform var(--dur) var(--easing); }
.tlink:hover { text-decoration: underline; }
.tlink:hover svg { transform: translateX(3px); }
.on-dark .tlink, .sec--navy .tlink { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ---------- hlavička */
.site-head { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing); }
.site-head[data-scrolled="true"] { border-color: var(--line); box-shadow: 0 6px 20px rgba(35, 58, 89, .06); }
.head-row { height: var(--head); display: flex; align-items: center; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.wordmark-znak { display: block; flex: none; width: 40px; height: 40px; border-radius: 6px; background: url("/znak.svg") center / cover no-repeat; }
.wordmark b { font-weight: 800; font-size: 20px; letter-spacing: -.01em; line-height: 1; }
.head-row > nav { margin-left: auto; }
.nav { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav > li { position: relative; }
.nav > li > a {
  display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); text-decoration: none;
}
.nav > li > a svg { width: 14px; height: 14px; opacity: .7; }
.nav > li > a:hover, .nav > li:focus-within > a { background: var(--tint); }
.nav > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sky); border-radius: 6px 6px 0 0; }
.nav-sub {
  position: absolute; left: 50%; top: calc(100% + 6px); width: max-content; display: grid; grid-auto-flow: column; gap: 4px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shade-2);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing), visibility var(--dur) var(--easing);
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav > li:hover .nav-sub, .nav > li:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-grp { min-width: 200px; }
.nav-grp + .nav-grp { padding-left: 4px; border-left: 1px solid var(--line); }
.nav-grp ul { list-style: none; margin: 0; padding: 0; }
.nav-cap { margin: 0; padding: 10px 12px 6px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); line-height: 1.3; }
.nav-sub a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--navy); text-decoration: none; font-size: 16px; line-height: 1.35; white-space: nowrap; }
.nav-sub a:hover { background: var(--tint); }
.nav-sub a.nav-lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding: 10px 12px; background: var(--tint); font-weight: 600; }
.nav-sub a.nav-lead svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--easing); }
.nav-sub a.nav-lead:hover { background: color-mix(in srgb, var(--surface) 70%, white); }
.nav-sub a.nav-lead:hover svg { transform: translateX(3px); }
.head-cta { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--navy); border-radius: 6px; cursor: pointer; padding: 12px; }
.nav-toggle:hover { background: var(--tint); }
@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .head-cta { margin-left: auto; }
}
@media (max-width: 520px) {
  .head-cta .btn { display: none; }
  .wordmark b { font-size: 18px; }
  .wordmark-znak { width: 34px; height: 34px; }
}

.m-nav { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--easing), visibility var(--dur) var(--easing); }
.m-nav[data-open="true"] { visibility: visible; opacity: 1; }
.m-nav-head { height: var(--head); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gut); border-bottom: 1px solid var(--line); flex: none; }
.m-nav-head button { width: 44px; height: 44px; border: 0; background: none; color: var(--navy); padding: 12px; cursor: pointer; }
.m-nav-body { overflow-y: auto; padding: 8px var(--gut) 32px; flex: 1; }
.m-nav-body details { border-bottom: 1px solid var(--line); }
.m-nav-body summary, .m-link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 18px; font-weight: 600; color: var(--navy); text-decoration: none; cursor: pointer; list-style: none; }
.m-nav-body summary::-webkit-details-marker { display: none; }
.m-nav-body summary svg { width: 20px; height: 20px; transition: transform var(--dur) var(--easing); }
.m-nav-body details[open] summary svg { transform: rotate(180deg); }
.m-link { border-bottom: 1px solid var(--line); }
.m-nav-body details ul { list-style: none; padding: 0 0 12px 12px; }
.m-nav-body details a { display: block; padding: 12px 0; color: var(--navy); text-decoration: none; font-size: 16px; }
.m-nav-body .m-cap { padding: 14px 0 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.m-nav-cta { margin-top: 24px; }
.m-nav-foot { margin-top: 24px; display: grid; gap: 8px; }
.m-nav-foot a, .foot-contact a { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font-weight: 600; min-height: 40px; }
.m-nav-foot svg, .foot-contact svg { width: 20px; height: 20px; }
body[data-menu="open"] { overflow: hidden; }

/* ---------- hero homepage */
.hero { position: relative; color: #fff; isolation: isolate; min-height: min(760px, calc(100svh - var(--head))); display: flex; align-items: end; }
.hero-img, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* clona nad živým videem: závoj pod sloupcem textu zleva, pravá třetina obrazu zůstává čistá (D35) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(35, 58, 89, .6) 0%, rgba(35, 58, 89, .54) 40%, rgba(35, 58, 89, .3) 56%, rgba(35, 58, 89, 0) 76%),
    linear-gradient(180deg, rgba(35, 58, 89, .2) 0%, rgba(35, 58, 89, .3) 30%, rgba(35, 58, 89, .6) 60%, rgba(35, 58, 89, .9) 100%);
}
.hero .wrap { padding-block: 128px 64px; }
.hero .eyebrow { color: #fff; }
.hero-ey .door-sep { color: var(--sky); }
.hero-ey, .hero h1, .hero .lead { text-shadow: 0 1px 2px rgba(18, 30, 46, .28); }
.hero h1 { color: #fff; max-width: 17ch; font-size: clamp(36px, 5.2vw, 60px); }
.hero .lead { color: rgba(255, 255, 255, .92); margin-top: 24px; max-width: 54ch; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; max-width: 860px; }
.door {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 24px 24px;
  background: #fff; color: var(--navy); border-radius: var(--r); text-decoration: none; box-shadow: var(--shade-2);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.door:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 4px 8px rgba(35, 58, 89, .1), 0 24px 48px rgba(35, 58, 89, .22); }
.door b { font-size: 20px; font-weight: 700; line-height: 1.25; }
.door > span { grid-column: 1; font-size: 16px; color: var(--blue); line-height: 1.45; }
.door svg { grid-row: 1 / span 2; grid-column: 2; width: 28px; height: 28px; transition: transform var(--dur) var(--easing); }
.door:hover svg { transform: translateX(4px); }
.door em { font-style: normal; font-weight: 700; color: var(--navy); white-space: nowrap; }
.hero-foot { margin-top: 24px; min-height: 44px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.hero-foot .tlink { color: #fff; }
@media (max-width: 720px) {
  /* mobil: fotka a video jako pás nahoře, loď nad textem (dřív schovaná pod kartami) */
  .hero { --band: min(125vw, 70svh); min-height: auto; background-color: var(--navy); }
  .hero-img, .hero::after { inset: 0 0 auto; height: var(--band); }
  .hero-img img { object-position: 56% 40%; }
  .hero .live { object-position: 50% 80%; }
  .hero::after { background: linear-gradient(180deg, rgba(35, 58, 89, .16) 0, rgba(35, 58, 89, 0) 24%, rgba(35, 58, 89, 0) 42%, rgba(35, 58, 89, .46) 62%, rgba(35, 58, 89, .72) 78%, var(--navy) 100%); }
  .hero .wrap { padding-block: calc(var(--band) - 128px) 32px; }
  .doors { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .door { padding: 16px 24px; }
  .door b { font-size: 18px; }
  .door .door-sep { display: none; }
  .door em { display: block; margin-top: 2px; }
  .hero-ey .door-sep { display: none; }
  .hero-ey > span { display: block; }
}

/* ---------- hlavička podstránky (v5): široká fotka nese celou hlavičku, užší stojí v rámu vedle textu */
.phero { position: relative; isolation: isolate; color: #fff; background-color: var(--navy); }
.phero .wrap { padding-block: 40px 64px; }
.phero h1 { color: #fff; max-width: 20ch; margin-top: 32px; }
.phero .lead { color: rgba(255, 255, 255, .92); margin-top: 16px; max-width: 58ch; }
.phero .actions { margin-top: 32px; }
.phero .eyebrow { color: var(--sky); margin: 32px 0 0; }
.phero .eyebrow + h1 { margin-top: 12px; }
.phero-img picture, .phero-img img { width: 100%; height: 100%; }
.phero-img img { object-fit: cover; }
/* rám a holá hlavička stojí na mřížce poledníků a rovnoběžek jako námořní mapa */
.phero--frame, .phero--flat {
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 96px 96px; background-position: calc(50% - 48px) -1px;
}
/* široká: hlavička roste s poměrem fotky až do výšky okna, text sedí dole na clonně zespodu */
.phero--wide .wrap { display: flex; flex-direction: column; min-height: clamp(520px, calc(100vw / max(var(--ar), 2)), calc(100svh - var(--head))); padding-block: 24px 64px; }
.phero--wide .phero-text { margin-top: auto; }
.phero--wide .phero-img { position: absolute; inset: 0; z-index: -2; }
.phero--wide::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(35, 58, 89, .55) 0, rgba(35, 58, 89, 0) 140px),
    linear-gradient(90deg, rgba(35, 58, 89, .5) 0%, rgba(35, 58, 89, .18) 45%, rgba(35, 58, 89, 0) 70%),
    linear-gradient(0deg, rgba(35, 58, 89, .94) 0%, rgba(35, 58, 89, .62) 32%, rgba(35, 58, 89, 0) 64%);
}
.phero--wide h1, .phero--wide .lead, .phero--wide .eyebrow { text-shadow: 0 1px 2px rgba(18, 30, 46, .3); }
/* rám: fotka v poměru, v jakém vznikla, celá vidět; šířka z výšky rámu a poměru stran */
.phero--frame .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "text img"; column-gap: 64px; align-items: center; padding-block: 24px 72px; }
.phero--frame .wrap > nav { grid-area: crumbs; }
.phero--frame .phero-text { grid-area: text; }
.phero--frame .phero-img {
  grid-area: img; --fh: clamp(360px, 54svh, 540px); width: min(560px, calc(var(--fh) * var(--ar))); aspect-ratio: var(--ar);
  margin-top: 32px; border-radius: var(--r); overflow: hidden; background: rgba(255, 255, 255, .06);
  box-shadow: 0 2px 4px rgba(10, 18, 30, .2), 0 32px 64px rgba(10, 18, 30, .42);
}
@media (max-width: 959px) {
  .phero--frame .wrap { display: flex; flex-direction: column; align-items: stretch; padding-block: 0 48px; }
  .phero--frame .phero-img { order: -1; width: auto; aspect-ratio: var(--ar-m); margin: 0 calc(-1 * var(--gut)) 24px; border-radius: 0; box-shadow: none; }
}
@media (max-width: 720px) {
  .phero .wrap { padding-block: 24px 40px; }
  .phero h1 { margin-top: 24px; }
  .phero .eyebrow { margin-top: 24px; }
  .phero--wide .wrap { min-height: 0; padding-block: 0 40px; }
  .phero--wide .phero-text { margin-top: 0; }
  .phero--wide .phero-img { position: relative; z-index: 0; order: -1; aspect-ratio: var(--ar-m); margin: 0 calc(-1 * var(--gut)) 24px; }
  .phero--wide::after { display: none; }
  .phero--frame .wrap { padding-block: 0 40px; }
  .phero--wide .phero-img::after, .phero--frame .phero-img::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, rgba(35, 58, 89, 0), var(--navy)); pointer-events: none; }
  .phero--frame .phero-img { position: relative; }
}

.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
.crumbs li { display: flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, .8); }
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- výběr podle situace */
.chooser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.choice {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; min-height: 132px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff; color: var(--navy); text-decoration: none; transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.choice:hover { border-color: var(--navy); box-shadow: var(--shade); text-decoration: none; transform: translateY(-2px); }
.choice q { quotes: "„" "“"; font-size: 18px; font-weight: 600; line-height: 1.35; }
.choice span { margin-top: auto; font-size: 14px; color: var(--blue); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.choice span svg { flex: none; width: 16px; height: 16px; color: var(--navy); transition: transform var(--dur) var(--easing); }
.choice:hover span svg { transform: translateX(4px); }
@media (max-width: 960px) { .chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .chooser { grid-template-columns: 1fr; } .choice { min-height: 0; } }

/* ---------- cesta ke kapitánskému průkazu */
.path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: krok; position: relative; }
.step { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 24px 24px; }
/* kroky jako vytyčený kurz na mapě: waypoint s vlasovým kruhem, čárkovaná trasa vede přesně k dalšímu */
.step-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; margin-bottom: 16px; position: relative; z-index: 2; isolation: isolate; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.step-num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--navy); }
.step-num::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blue) 45%, white); }
.path .step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: 72px; top: 43px; width: calc(100% - 38px); height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 11px); transform-origin: left center; }
.step h3 { font-size: 20px; line-height: 1.3; }
.step-when { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--blue); }
.step-when b { color: var(--navy); font-weight: 600; }
.step-date { white-space: nowrap; }
@media (min-width: 961px) { .path .step-date { display: block; } }
.step-meta { padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 16px; }
.step-meta .price { font-weight: 700; color: var(--navy); }
.step-meta a { font-size: 14px; font-weight: 700; text-decoration: none; }
.step-meta a:hover { text-decoration: underline; }
.step p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
@media (min-width: 961px) { .path .step-meta { flex-direction: column; align-items: flex-start; gap: 4px; } }
.path-note { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; padding: 24px 24px; background: var(--surface); border-radius: var(--r); color: var(--navy); }
.path-note p { max-width: 70ch; }
.path-note q { quotes: "„" "“"; font-weight: 600; }
.path-note cite { font-style: normal; font-size: 14px; color: var(--blue); display: block; margin-top: 4px; }
.step .step-body { flex: 1; }
@media (max-width: 960px) {
  .path { grid-template-columns: 1fr; gap: 12px; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 16px; }
  .step-num { grid-row: 1 / span 4; margin: 0; }
  .path .step:not(:last-child)::after { left: 35px; top: 64px; width: 2px; height: calc(100% - 42px); background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 11px); transform-origin: center top; }
  .step-meta { grid-column: 2; }
}

/* ---------- pruh faktů */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); }
.fact { padding: 24px 24px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact b { display: block; font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 8px; font-size: 14px; color: var(--blue); line-height: 1.45; }
.sec--navy .facts { border-color: rgba(255, 255, 255, .2); }
.sec--navy .fact + .fact { border-color: rgba(255, 255, 255, .2); }
.sec--navy .fact b { color: #fff; }
.sec--navy .fact span { color: var(--sky); }
@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 16px 12px; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fact b { font-size: 24px; }
}

/* ---------- karty */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--dur) var(--easing), transform var(--dur) var(--easing); }
.card:hover { box-shadow: var(--shade); }
.card-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--easing); }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 24px; }
.card-cover { display: flex; align-items: flex-end; height: 240px; margin-bottom: 18px; }
.card-cover picture { display: block; height: 100%; }
.card-cover img { height: 100%; width: auto; max-width: 100%; }
.card-kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.card h3 { font-size: 20px; line-height: 1.3; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
.card-facts { margin: auto 0 0; padding-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; border-top: 1px solid var(--line); }
/* údaje sedí u spodní hrany karty, aby ceny v řadě karet ležely na jedné lince */
.card-body > :has(+ .card-facts) { margin-bottom: 16px; }
.card-facts dt { color: var(--blue); }
.card-facts .pill { margin-block: -3px; }
.card-facts dd { margin: 0; font-weight: 600; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
/* dlouhé textové údaje (licence, jazyky) pod popiskem, ne zarovnané doprava */
.card-facts--text { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
.card-facts--text dt { font-size: 12px; letter-spacing: .04em; }
.card-facts--text dd { text-align: left; margin-bottom: 12px; }
.card-facts--text dd:last-child { margin-bottom: 0; }
.card-go { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--navy); position: relative; z-index: 1; pointer-events: none; }
.card-go svg { width: 18px; height: 18px; transition: transform var(--dur) var(--easing); }
.card:hover .card-go svg { transform: translateX(3px); }
.card--plain .card-body { padding: 24px; }
@media (max-width: 1080px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 620px) { .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; } }

/* ---------- dvě cesty na plavby */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.entry { position: relative; isolation: isolate; min-height: 600px; border-radius: var(--r); overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: end; padding: 32px; text-decoration: none; }
.entry picture, .entry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--easing); }
/* tma jen pod textem (text sahá ~270 px nad spodní hranu), horní polovina karty zůstává čistá pro živou fotku */
.entry::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(35, 58, 89, .94) 0, rgba(35, 58, 89, .86) 200px, rgba(35, 58, 89, .74) 300px, rgba(35, 58, 89, .4) 380px, rgba(35, 58, 89, 0) 480px); }
.entry:hover img { transform: scale(1.03); }
.entry img[src*="ledovec-pred-pridi"] { object-position: 30% 50%; }
.entry .eyebrow { color: #fff; margin-bottom: 8px; }
.entry h3 { color: #fff; font-size: 30px; }
.entry p { margin-top: 12px; color: rgba(255, 255, 255, .92); max-width: 44ch; font-size: 16px; }
.entry .tlink { margin-top: 16px; color: #fff; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 16px; }
  /* mobil: fotka jako pás 4:3 nahoře, text pod ní na navy (dřív ho gradient přes celou kartu zakryl) */
  .entry { container-type: inline-size; min-height: 0; padding: 0 24px 24px; background: var(--navy); justify-content: start; }
  .entry picture, .entry .live, .entry .live[data-src*="velryba"] { inset: 0 0 auto; height: 75cqi; }
  .entry::after { inset: 0 0 auto; height: 75cqi; background: linear-gradient(180deg, rgba(35, 58, 89, 0) 52%, rgba(35, 58, 89, .72) 84%, var(--navy) 100%); }
  .entry .eyebrow { margin-top: calc(75cqi - 28px); }
  .entry h3 { font-size: 24px; }
}

/* ---------- mozaika typů plaveb: dvě velké karty, pod nimi tři menší */
.typy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.typ { grid-column: span 2; min-height: 480px; padding: 24px; }
.typ--velka { grid-column: span 3; min-height: 600px; padding: 32px; }
.typ:not(.typ--velka) h3 { font-size: 24px; }
.typ:not(.typ--velka) p { font-size: 15px; }
.entry .typ-fakta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: var(--t-sm); font-weight: 600; color: #fff; }
.typ-fakta span { display: inline-flex; align-items: center; gap: 6px; }
.typ-fakta svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 1080px) {
  .typy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .typ, .typ--velka { grid-column: span 1; min-height: 520px; padding: 24px; }
  .typ:last-child { grid-column: 1 / -1; }
  .typ--velka h3 { font-size: 26px; }
}
@media (max-width: 820px) {
  .typy { gap: 16px; }
  .typ, .typ--velka { min-height: 0; padding: 0 24px 24px; }
  /* tablet: poslední karta přes obě kolony by měla fotku 4:3 vysokou skoro 600 px, proto nižší pás */
  .typ:last-child picture, .typ:last-child .live, .typ:last-child::after { height: 40cqi; }
  .typ:last-child .eyebrow { margin-top: calc(40cqi - 28px); }
}
@media (max-width: 620px) {
  .typy { grid-template-columns: 1fr; }
  .typ:last-child picture, .typ:last-child .live, .typ:last-child::after { height: 75cqi; }
  .typ:last-child .eyebrow { margin-top: calc(75cqi - 28px); }
}

/* ---------- výzva pro začínající: zavolat dřív, než se přihlásí */
.callout { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; padding: 24px 28px; border-radius: var(--r); background: var(--tint); border-left: 4px solid var(--sky); }
.callout-body { flex: 1 1 360px; }
.callout-h { margin: 0; font-size: var(--t-h4); font-weight: 700; line-height: 1.3; color: var(--navy); }
.callout-body p:not(.callout-h) { margin-top: 8px; font-size: 16px; }
.prose .callout { margin: 32px 0; }
.prose > .duo-img { margin: 24px 0; }
.prose .callout .callout-h { margin: 0; font-size: var(--t-h4); }
@media (max-width: 620px) { .callout { padding: 20px; } .callout .btn { width: 100%; justify-content: center; } }

/* ---------- termíny */
.terms { width: 100%; border-collapse: collapse; font-size: 16px; }
.terms th { text-align: left; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); padding: 0 16px 12px 0; border-bottom: 2px solid var(--navy); white-space: nowrap; }
.terms td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.terms tr:hover td { background: color-mix(in srgb, var(--surface) 22%, white); }
.terms .t-name a { font-weight: 600; color: var(--navy); text-decoration: none; }
.terms .t-name a:hover { text-decoration: underline; }
.terms .t-na { color: var(--blue); opacity: .6; }
.terms .t-date small { display: block; font-weight: 400; font-size: 14px; color: var(--blue); margin-top: 2px; }
.terms .t-name small { display: block; font-size: 14px; color: var(--blue); margin-top: 2px; }
.terms .t-date { white-space: nowrap; font-weight: 600; color: var(--navy); }
.terms .t-price { white-space: nowrap; font-weight: 700; color: var(--navy); text-align: right; }
.terms th.t-price { text-align: right; }
.terms .t-act { text-align: right; white-space: nowrap; }
.terms .t-act .btn + a { margin-left: 12px; }
.terms .t-act a.ask { font-size: 14px; font-weight: 600; }
.terms tr.is-full td { color: color-mix(in srgb, var(--ink) 60%, white); }
.terms tr.is-full .t-date, .terms tr.is-full .t-price { color: color-mix(in srgb, var(--navy) 60%, white); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--surface); color: var(--navy); }
.pill--last { background: color-mix(in srgb, var(--cta) 30%, white); color: var(--navy); }
.pill--full { background: var(--bar); color: #3a4655; }
.pill--plan { background: #fff; color: var(--blue); border: 1px solid var(--line-2); }
.terms-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.terms-filter a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; transition: background var(--dur) var(--easing), border-color var(--dur) var(--easing), color var(--dur) var(--easing); }
.terms-filter a:hover, .terms-filter a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chips[hidden] { display: none; }
.chips button { min-height: 44px; padding: 8px 24px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 600 14px/1.2 var(--f); letter-spacing: .02em; color: var(--navy); cursor: pointer; transition: background var(--dur) var(--easing), border-color var(--dur) var(--easing), color var(--dur) var(--easing), transform var(--dur) var(--easing); }
.chips button:hover { border-color: var(--navy); }
.chips button:active { transform: scale(.97); }
.chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.terms-group + .terms-group { margin-top: 48px; }
.terms-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 600 14px/1.2 var(--f); color: var(--navy); cursor: pointer; }
.terms-more:hover { border-color: var(--navy); }
.terms-more svg { width: 16px; height: 16px; }
.terms tr[hidden] { display: none !important; }
@media (max-width: 820px) {
  .terms-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 4px; scrollbar-width: none; }
  .terms-filter::-webkit-scrollbar { display: none; }
  .terms-filter a { flex: none; white-space: nowrap; }
}
.terms-group h3 { font-size: 24px; margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.terms-group h3 small { font-size: 14px; font-weight: 400; color: var(--blue); }
.terms-empty { padding: 24px; background: var(--tint); border-radius: var(--r); }
.terms-src { margin-top: 24px; font-size: 14px; color: var(--blue); }
@media (max-width: 820px) {
  .terms thead { display: none; }
  .terms, .terms tbody, .terms tr, .terms td { display: block; width: 100%; }
  .terms tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .terms td { padding: 0; border: 0; }
  .terms tr:hover td { background: none; }
  .terms .t-name { grid-column: 1 / -1; }
  .terms .t-name:has(.t-na) { height: 0; overflow: hidden; margin-bottom: -8px; }
  .terms .t-date { grid-column: 1; }
  .terms .t-price { grid-column: 2; grid-row: 2; }
  .terms .t-place { grid-column: 1 / -1; font-size: 14px; color: var(--blue); }
  .terms .t-free { grid-column: 1; }
  .terms .t-act { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 16px; margin-top: 8px; }
  .terms .t-act .btn + a { margin-left: 0; }
}

/* ---------- detail kurzu / plavby */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.aside { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 16px; }
/* nejvyšší box (detail knihy) má s odsazením 803 px; na nižším okně by spodek ležel pod okrajem */
@media (max-height: 820px) { .aside { position: static; } }
.book, .milniky { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 24px; box-shadow: var(--shade); }
.book .from { font-size: 14px; color: var(--blue); }
.book .price { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.book .price-note { font-size: 14px; color: var(--blue); margin-top: 4px; }
.book dl { margin: 24px 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; font-size: 16px; }
.book dt { color: var(--blue); }
.book dd { margin: 0; font-weight: 600; color: var(--navy); text-align: right; }
.book .btn { width: 100%; }
.book .next { margin-top: 12px; font-size: 14px; text-align: center; color: var(--blue); }
.book .ask { display: block; margin-top: 16px; text-align: center; font-size: 14px; font-weight: 600; }
.book-more { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.book-more a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.book-more a:hover { text-decoration: underline; }
.book-more svg { flex: none; width: 16px; height: 16px; color: var(--blue); transition: transform var(--dur) var(--easing); }
.book-more a:hover svg { transform: translateX(3px); }
.prose { max-width: 70ch; }
.prose h2 { font-size: 30px; margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin: 32px 0 12px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 12px 0; }
.prose li + li { margin-top: 8px; }
.prose ul li::marker { color: var(--blue); }
.prose p + ul, .prose ul + p { margin-top: 12px; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--sky); font-size: 20px; color: var(--navy); }
.can { background: var(--surface); border-radius: var(--r); padding: 24px 32px; margin: 32px 0; }
.can h3 { font-size: 18px; margin: 0 0 12px; }
.can ul { list-style: none; padding: 0; display: grid; gap: 8px; margin: 0; }
.can li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--navy); }
.can li svg { width: 20px; height: 20px; margin-top: 4px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 16px 0; }
.kv dt { color: var(--blue); }
.kv dd { margin: 0; color: var(--ink); }
/* právní texty: obsah dokumentu, storno tabulka, h3 s číslem článku */
.legal { font-size: 16px; }
.legal h2 { scroll-margin-top: 96px; }
.legal h3 { font-size: 18px; margin-top: 32px; scroll-margin-top: 96px; }
.legal-toc { background: var(--tint); border-radius: var(--r); padding: 24px 32px; margin: 0 0 48px; }
.legal-toc h2 { font-size: 18px; margin: 0 0 12px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legal-toc a { color: var(--navy); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-tab { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 16px; }
.legal-tab th { text-align: left; font-weight: 700; color: var(--navy); padding: 0 16px 12px 0; border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.legal-tab td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-tab td:first-child { white-space: nowrap; font-weight: 600; color: var(--navy); }
.note { margin-top: 24px; padding: 16px 24px; border-left: 3px solid var(--blue); background: var(--tint); font-size: 16px; border-radius: 0 var(--r) var(--r) 0; }
@media (max-width: 1080px) { .detail { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }
@media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } .aside { position: static; order: -1; } .prose h2 { font-size: 24px; margin-top: 40px; } }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 12px; } }

/* ---------- bloky detailu (D61): fakta, obsah stránky, témata, rozvrh, cena, místo, přihláška, průkaz */
.prose :is(.toc ul, .topics, .kroky, .stops, .etapy, .price-split ul) { list-style: none; padding-left: 0; margin-block: 0; }
.prose :is(.toc ul, .topics, .kroky, .stops, .etapy, .price-split ul) li + li { margin-top: 0; }
.facts--in { margin: 0 0 32px; }
.facts--in .fact { padding: 20px; }
.facts--in .fact:first-child { padding-left: 0; }
.facts--in .fact b { font-size: 24px; }
.toc { margin: 0 0 56px; }
.toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--navy); text-decoration: none; transition: background-color var(--dur) var(--easing), border-color var(--dur) var(--easing); }
.toc a:hover { background: var(--tint); border-color: var(--blue); }
/* odstavec za blokem (dlaždice, cena, údaje, kroky, karta průkazu) nesmí lepit */
:is(.topics, .price-split, .where, .kroky, .stops, .etapy, .licence) + :is(p, .actions) { margin-top: 20px; }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.topics li { background: var(--tint); border-radius: var(--r); padding: 20px 24px 24px; }
.topics li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.t-n { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--blue); font-variant-numeric: tabular-nums; }
.t-n::after { content: ""; width: 24px; height: 1px; background: currentColor; }
.prose .topics h3 { font-size: 18px; margin: 8px 0 6px; }
.topics p { font-size: 15px; line-height: 1.6; }
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; align-items: start; }
.day { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.prose .day h3 { margin: 0; padding: 10px 16px; background: var(--navy); color: #fff; font-size: 16px; }
.day dl { margin: 0; padding: 4px 16px 8px; }
.day dl > div { padding: 10px 0; }
.day dl > div + div { border-top: 1px solid var(--line); }
.day dt { font-size: 13px; color: var(--blue); font-variant-numeric: tabular-nums; }
.day dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.day .is-pauza dd { font-weight: 400; color: var(--blue); }
.price-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 24px; }
.price-split > div { border-radius: var(--r); padding: 20px 24px 12px; }
.ps-in { background: var(--tint); }
.ps-out { border: 1px solid var(--line-2); }
.prose .price-split h3 { margin: 0 0 4px; font-size: 16px; }
.price-split li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; line-height: 1.5; }
.price-split li + li { border-top: 1px solid var(--line); }
.ps-in li { align-items: flex-start; }
.ps-in li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--navy); }
.price-split li span { flex: 1; }
.price-split li b { color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.where > div { position: relative; padding: 16px 20px 18px 68px; border: 1px solid var(--line); border-radius: var(--r); }
.where > div:not(:has(svg)) { padding-left: 20px; }
.where > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.where dt { font-size: 13px; font-weight: 600; color: var(--blue); }
.where dt svg { position: absolute; left: 18px; top: 16px; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--surface); color: var(--navy); }
.where dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.kroky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; counter-reset: krok; }
.kroky li { counter-increment: krok; position: relative; }
/* waypoint jako na trase cesty ke průkazu: navy kruh s vlasovým prstencem, čárkovaná spojnice k dalšímu */
.kroky li::before { content: counter(krok); position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 6px 0 16px 6px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--blue) 45%, white); }
.kroky li:not(:last-child)::after { content: ""; position: absolute; left: 64px; right: -16px; top: 25px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 11px); }
.kroky p { font-size: 15px; line-height: 1.6; }
.kroky--svisle { grid-template-columns: 1fr; gap: 20px; }
.kroky--svisle li { padding-left: 64px; min-height: 52px; }
.kroky--svisle li::before { position: absolute; left: 0; top: 0; }
.kroky--svisle li:not(:last-child)::after { left: 25px; right: auto; top: 58px; bottom: -14px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 11px); }
/* trasa plavby: linka se zastávkami, start a cíl plné, čárkovaná spojnice jako u kroků */
.prose .stops { margin-top: 24px; }
/* O Jirkovi (D63): milníky vedle kapitol, na mobilu pod textem */
.bio-milniky { display: grid; grid-template-columns: minmax(0, 70ch) 340px; gap: 64px; justify-content: space-between; align-items: start; }
.milniky { position: sticky; top: calc(var(--head) + 24px); }
.bio-milniky + .prose { margin-top: 48px; }
.milniky .eyebrow { margin-bottom: 20px; }
.milniky .stops { list-style: none; padding: 0; margin: 0; }
.milniky .stops h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; font-variant-numeric: tabular-nums; }
@media (max-height: 820px) { .milniky { position: static; } }
@media (max-width: 900px) { .bio-milniky { grid-template-columns: minmax(0, 1fr); gap: 40px; } .milniky { position: static; } }
.stops li { position: relative; padding: 0 0 24px 40px; }
.stops li:last-child { padding-bottom: 0; }
.stops li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 5px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--blue); background: #fff; }
.stops li:is(:first-child, :last-child)::before { border-color: var(--navy); background: var(--navy); box-shadow: 0 0 0 4px var(--surface); }
.stops li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 27px; bottom: 2px; width: 2px; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 11px); }
.prose .stops h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; }
.stops p { font-size: 15px; line-height: 1.65; }
/* etapy · mapa, popis, video */
.etapy { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.sec-head + .etapy { margin-top: 0; }
.etapy-zaver { margin-top: 24px; font-size: 16px; }
.etapa { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.etapa-text { padding: 20px 20px 24px; }
.etapa-text h3 { margin: 0; font-size: 22px; line-height: 1.3; color: var(--navy); }
.etapa-text p { font-size: 16px; line-height: 1.7; }
.etapa-text p + p, .etapa-vice p + p { margin-top: 12px; }
.etapa-kdy { list-style: none; margin: 12px 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.etapa-kdy li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 15px; font-weight: 600; color: var(--navy); }
.etapa-kdy span { display: inline-flex; align-items: center; gap: 8px; }
.etapa-kdy svg { width: 18px; height: 18px; color: var(--blue); }
.etapa-kdy :is(a, .pill) { margin-left: auto; }
.etapa-vice { margin-top: 12px; }
.etapa-vice summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--blue); list-style: none; }
.etapa-vice summary::-webkit-details-marker { display: none; }
.etapa-vice summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur) var(--easing); }
.etapa-vice[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.etapa-vice[open] summary { margin-bottom: 8px; }
.etapa-text .video { margin-top: 24px; }
.etapa-mapa { margin: 0; }
.em-svg { display: block; width: 100%; height: auto; background: color-mix(in srgb, var(--navy) 78%, #000); }
.em-sit { fill: none; stroke: var(--sky); stroke-opacity: .1; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.em-zeme { fill: color-mix(in srgb, var(--navy) 78%, var(--sky)); stroke: var(--sky); stroke-opacity: .3; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.em-kruh { fill: none; stroke: var(--sky); stroke-opacity: .5; stroke-width: 1px; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.em-kruh-t { font-size: 11px; font-weight: 600; letter-spacing: .24em; fill: var(--sky); fill-opacity: .8; }
.em-trasa { fill: none; stroke: var(--cta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.etapa-mapa { --s: 1; }
.em-in { transform: scale(var(--s)); }
.em-p circle { fill: var(--navy); stroke: #fff; stroke-width: 1.6; }
.em-p text, .em-meritko text { font-size: 15px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: color-mix(in srgb, var(--navy) 78%, #000); stroke-width: 3.5px; stroke-linejoin: round; }
.em-meritko path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.em-meritko text { font-size: 11px; letter-spacing: .14em; fill: rgba(255, 255, 255, .8); }
/* trasa se vykreslí od startu, cílový přístav se ukáže, když do něj dojede; bez JS je vše rovnou */
.js .etapa-mapa[data-reveal] { opacity: 1; transform: none; }
.js .etapa-mapa .em-trasa { transition: stroke-dashoffset 1400ms cubic-bezier(.65, 0, .35, 1) 150ms; }
.js .etapa-mapa .em-p--cil { transition: opacity 300ms var(--easing) 1450ms; }
.js .etapa-mapa:not(.is-in) .em-trasa { stroke-dashoffset: 1; }
.js .etapa-mapa:not(.is-in) .em-p--cil { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .etapa-mapa :is(.em-trasa, .em-p--cil) { transition: none; } }
@media (min-width: 900px) {
  .etapa { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 40px; padding: 24px; align-items: start; overflow: visible; }
  .etapa > .etapa-mapa { position: sticky; top: calc(var(--head) + 24px); border-radius: var(--r); overflow: hidden; }
  .etapa-text { padding: 0 8px 4px 0; }
  .etapa-text h3 { font-size: 24px; }
}
/* popisky rostou kolem své tečky, aby i v úzké mapě měly aspoň 11 px */
@media (min-width: 900px) and (max-width: 1199px) { .etapa-mapa { --s: 1.35; } }
@media (max-width: 599px) { .etapa-mapa { --s: 1.15; } .em-trasa { stroke-width: 4.5; } .em-kruh-t { font-size: 16px; } }
@media (max-width: 480px) { .etapa-mapa { --s: 1.5; } }
.videa-rada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .videa-rada { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.prose .etapa-mapa, .prose > .video { margin: 24px 0; border-radius: var(--r); overflow: hidden; }
.licence { margin-top: 24px; padding: 32px; border-radius: var(--r); color: #fff; background-color: var(--navy);
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px; }
.licence :focus-visible { outline-color: var(--sky); }
.licence .eyebrow { color: var(--sky); margin-bottom: 8px; }
.prose .licence h3 { margin: 0; color: #fff; font-size: 24px; line-height: 1.25; }
.lic-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0; border-block: 1px solid rgba(255, 255, 255, .2); }
.lic-nums > div { padding: 16px 16px 16px 0; }
.lic-nums > div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .2); }
.lic-nums dt { font-size: 28px; font-weight: 700; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-nums dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--sky); }
.lic-text p { font-size: 16px; color: rgba(255, 255, 255, .92); }
.lic-text p + p { margin-top: 12px; }
.licence a { color: #fff; }
.lic-more { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.lic-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; font-size: 16px; font-weight: 600; color: #fff; }
.lic-more summary::-webkit-details-marker { display: none; }
.lic-more summary svg { flex: none; width: 20px; height: 20px; transition: transform var(--dur) var(--easing); }
.lic-more[open] summary svg { transform: rotate(180deg); }
.lic-more > div { padding-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.lic-more li::marker { color: var(--sky); }
@media (max-width: 720px) {
  .facts--in .fact:nth-child(odd) { padding-left: 0; }
  .facts--in .fact b { font-size: 22px; }
  .plan { grid-template-columns: 1fr; }
  .licence { padding: 24px 20px; }
  .lic-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lic-nums > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lic-nums > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .2); }
  .lic-nums dt { font-size: 24px; }
}
@media (max-width: 600px) {
  .topics, .price-split, .where { grid-template-columns: 1fr; }
  .kroky { grid-template-columns: 1fr; gap: 20px; }
  .kroky li { padding-left: 64px; min-height: 52px; }
  .kroky li::before { position: absolute; left: 0; top: 0; }
  .kroky li:not(:last-child)::after { left: 25px; right: auto; top: 58px; bottom: -14px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 11px); }
}

/* ---------- storno blok BoatSafe */
.insure { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; padding: 24px 24px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; }
.insure b { color: var(--navy); display: block; margin-bottom: 4px; }
.insure p { font-size: 16px; }
@media (max-width: 620px) { .insure { grid-template-columns: minmax(0, 1fr); padding: 24px; } .insure .btn { white-space: normal; text-align: center; justify-content: center; } }

/* ---------- Jirka + Boomerang */
.duo { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.duo--rev { grid-template-columns: 6fr 5fr; }
.duo--rev .duo-img { order: 2; }
.duo-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.duo-img img { width: 100%; height: 100%; object-fit: cover; }
.duo-img picture, .card-img picture, .gallery picture { height: 100%; }
.duo-img--wide { aspect-ratio: 4 / 3; }
.duo-body p { margin-top: 16px; }
.duo-body .actions { margin-top: 32px; }
.prose p + .actions { margin-top: 24px; }
.prose a[href^="tel:"] { white-space: nowrap; }
.duo-body h2 { margin-top: 0; }
.cred { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.cred li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; line-height: 1.55; }
.cred svg { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
@media (max-width: 900px) { .duo, .duo--rev { grid-template-columns: 1fr; gap: 24px; } .duo--rev .duo-img { order: 0; } .duo-img { aspect-ratio: 4 / 3; } }

/* ---------- recenze */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.quote { margin: 0; padding: 32px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); display: flex; flex-direction: column; }
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
.quote blockquote::before { content: ""; display: block; width: 30px; height: 22px; margin-bottom: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath fill='%239bdaf2' d='M5 0h8L8 22H0zM21 0h8l-5 22h-8z'/%3E%3C/svg%3E") no-repeat; }
.quote figcaption { margin-top: auto; padding-top: 24px; font-weight: 700; color: var(--navy); font-size: 14px; }


/* ---------- svět kolem (YouDock, BoatSafe, webináře, regaty) */
.world { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.world a { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 220px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background var(--dur) var(--easing), border-color var(--dur) var(--easing); }
.world a:hover { background: rgba(255, 255, 255, .1); border-color: var(--sky); }
.world .w-tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.world b { font-size: 20px; font-weight: 700; line-height: 1.3; }
.world p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.world .tlink { margin-top: auto; padding-top: 12px; font-size: 14px; }
@media (max-width: 1080px) { .world { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .quotes, .world {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 360px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none;
  }
  .quotes::-webkit-scrollbar, .world::-webkit-scrollbar { display: none; }
  .quote, .world a { scroll-snap-align: start; }
  .quote { padding: 24px; }
  .world a { min-height: 0; }
}

/* ---------- mapa sezóny: námořní mapa v navy, trasa se kreslí po kapitolách a loďka jede s ní */
.mapa { --s: 1; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.m-fig { margin: 0; }
.m-svg { display: block; width: 100%; height: auto; border-radius: var(--r); background: color-mix(in srgb, var(--navy) 78%, #000); outline: 1px solid rgba(155, 218, 242, .16); outline-offset: -1px; }
.m-fig figcaption { margin-top: 12px; font-size: var(--t-xs); color: rgba(255, 255, 255, .6); }
.m-sit { fill: none; stroke: var(--sky); stroke-opacity: .1; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.m-zeme { fill: color-mix(in srgb, var(--navy) 78%, var(--sky)); stroke: var(--sky); stroke-opacity: .3; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-kruh { fill: none; stroke: var(--sky); stroke-opacity: .5; stroke-width: 1px; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.m-kruh-t { font-size: 9px; font-weight: 600; letter-spacing: .24em; fill: var(--sky); fill-opacity: .8; }
.m-trasa { transition: opacity var(--dur) var(--easing); }
.m-trasa path { fill: none; stroke: var(--cta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width var(--dur) var(--easing); }
.m-trasa.is-on path { stroke-width: 3.4; }
.m-in { transform: scale(var(--s)); }
.m-p circle { fill: var(--navy); stroke: #fff; stroke-width: 1.4; }
.m-p .m-ping { fill: none; stroke: var(--cta); stroke-width: 1.2; opacity: 0; }
.m-p text, .m-meritko text { font-size: 12.5px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: color-mix(in srgb, var(--navy) 78%, #000); stroke-width: 3px; stroke-linejoin: round; }
.m-c { cursor: default; transition: opacity var(--dur) var(--easing); }
.m-c circle { fill: var(--cta); stroke: color-mix(in srgb, var(--navy) 78%, #000); stroke-width: 2; }
.m-c text { font-size: 11px; font-weight: 700; fill: var(--navy); font-variant-numeric: tabular-nums; }
.mapa.is-focus .m-trasa:not(.is-on), .mapa.is-focus .m-c:not(.is-on) { opacity: .2; }
.m-lod circle { fill: #fff; stroke: var(--cta); stroke-width: 2; }
.m-lod .m-lod-halo { fill: var(--cta); fill-opacity: .3; stroke: none; }
.m-meritko path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.m-meritko text { font-size: 9px; letter-spacing: .14em; fill: rgba(255, 255, 255, .8); }

.kapitoly { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.kapitoly li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.kapitoly a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 2px 16px; align-items: center; padding: 14px 12px; margin-inline: -12px; border-radius: var(--r); color: #fff; text-decoration: none; transition: background var(--dur) var(--easing); }
.kapitoly a:hover, .kapitoly li.is-on a { background: rgba(255, 255, 255, .07); }
.k-num { grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--cta); color: var(--cta); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--dur) var(--easing), color var(--dur) var(--easing); }
.kapitoly li.is-on .k-num, .kapitoly a:hover .k-num { background: var(--cta); color: var(--navy); }
.k-mes { grid-column: 2; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.kapitoly b { grid-column: 2; font-size: 17px; line-height: 1.35; }
.k-pop { grid-column: 2; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.kapitoly svg { grid-column: 3; grid-row: 1 / span 3; width: 18px; height: 18px; color: var(--sky); transition: transform var(--dur) var(--easing), color var(--dur) var(--easing); }
.kapitoly a:hover svg { transform: translateX(3px); color: #fff; }
@media (max-width: 900px) {
  .mapa { grid-template-columns: 1fr; gap: 32px; }
}
/* úzká mapa se zmenší skoro na polovinu: značky a popisky rostou kolem svého bodu, vedlejší přístavy jen tečkou */
@media (max-width: 600px) {
  .mapa { --s: 1.8; }
  .m-trasa path { stroke-width: 3.6; }
  .m-trasa.is-on path { stroke-width: 5; }
  .m-p--vedl text { display: none; }
  .m-kruh-t { font-size: 15px; }
  .m-meritko path { stroke-width: 1.8; }
}

/* ---------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 18px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; transition: transform var(--dur) var(--easing); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .faq-a { padding: 0 0 24px; max-width: 72ch; }
.faq .faq-a p + p { margin-top: .8em; }
.faq .faq-src { font-size: 14px; color: var(--blue); margin-top: 12px; }
.faq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
@media (min-width: 901px) { .faq-grid > div:first-child { position: sticky; top: calc(var(--head) + 32px); } }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } .faq summary { font-size: 16px; } }

/* ---------- kontakt pás */
.contact-band { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; }
.contact-band .actions { justify-content: flex-end; }
@media (max-width: 820px) { .contact-band { grid-template-columns: 1fr; } .contact-band .actions { justify-content: flex-start; } }

/* ---------- galerie, video */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.video button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: none; color: #fff; }
.video button img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--dur) var(--easing); }
.video button:hover img { opacity: 1; }
.video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--cta); color: var(--navy); display: grid; place-items: center; }
.video .play svg { width: 28px; height: 28px; margin-left: 4px; }
.video .v-cap { position: absolute; left: 16px; bottom: 14px; right: 16px; text-align: left; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- lodní deník (v7): fotka drží svůj poměr stran, nic se neořízne. Růst položky = poměr
   stran, takže fotky v řádku mají stejnou výšku a řádek vyplní šířku; ::after s velkým růstem
   nechá poslední řádek v cílové výšce --h. Pod 560 px jeden sloupec přes celou šířku */
.log { --h: 260px; display: flex; flex-wrap: wrap; gap: 32px 12px; }
.log::after { content: ""; flex: 999 1 0; }
.log-item { flex: var(--ar) 1 calc(var(--ar) * var(--h)); min-width: 0; margin: 0; }
.log--js::after { display: none; }
.log--js .log-item { flex: none; }
.log-img { position: relative; display: block; aspect-ratio: var(--ar); border-radius: var(--r); overflow: hidden; background: var(--tint); cursor: zoom-in; transition: transform 400ms var(--easing), box-shadow 400ms var(--easing); }
.log-img picture, .log-img img { display: block; width: 100%; height: 100%; }
/* rámeček nese poměr fotky, cover tu nic neořízne; hover rámeček zvedne, obraz se nezvětšuje */
.log-img img { object-fit: cover; }
@media (hover: hover) { .log-img:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35, 58, 89, .18); } }
.log-img:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.log figcaption { margin-top: 10px; font-size: var(--t-xs); line-height: 1.5; color: var(--blue); font-variant-numeric: tabular-nums; }
.log figcaption b { display: block; font-size: var(--t-sm); line-height: 1.4; color: var(--navy); }
.log figcaption > span { display: block; margin-top: 2px; }
.sec--navy .log figcaption { color: rgba(255, 255, 255, .72); }
.sec--navy .log figcaption b { color: #fff; }
.sec--navy .log-img { background: rgba(255, 255, 255, .06); }
.sec--navy .log-img:focus-visible { outline-color: var(--sky); }
@media (max-width: 900px) { .log { --h: 200px; gap: 28px 8px; } }
@media (max-width: 560px) { .log { --h: 250px; gap: 24px 8px; } }
.log-uzka figcaption .gps { display: none; }
/* obsah deníku v hlavičce: kapitoly jako řádky lodního deníku */
.phero .actions:has(.log-toc) { display: block; margin-top: 40px; }
.log-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .2); }
.log-toc li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.log-toc a { display: block; height: 100%; padding: 16px 16px 4px; color: #fff; text-decoration: none; }
.log-toc li:first-child a { padding-left: 0; }
.log-toc span { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.log-toc b { display: block; margin-top: 8px; font-size: 16px; line-height: 1.35; }
.log-toc small { display: block; margin-top: 4px; font-size: var(--t-sm); color: rgba(255, 255, 255, .7); }
.log-toc a:hover b { text-decoration: underline; }
@media (max-width: 900px) {
  .log-toc ol { grid-template-columns: 1fr; }
  .log-toc li + li { border-left: 0; }
  .log-toc li { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .log-toc a, .log-toc li:first-child a { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 14px 0; }
  .log-toc b, .log-toc small { margin-top: 0; }
}
@media (max-width: 520px) {
  .log-toc a, .log-toc li:first-child a { grid-template-columns: minmax(0, 1fr) auto; }
  .log-toc span { grid-column: 1 / -1; }
}

/* ---------- fotka přes celou obrazovku (lodní deník, dialog z zaklad.JS) */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(12, 22, 36, .975); }
.lb:focus { outline: none; }
.lb[open] { display: grid; place-items: center; animation: fade 240ms var(--easing) both; }
.lb figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.lb img { display: block; width: min(100vw - 176px, (100dvh - 152px) * var(--ar)); height: auto; aspect-ratio: var(--ar); border-radius: 4px; background: rgba(255, 255, 255, .06) center / 100% 100% no-repeat; }
.lb figcaption { text-align: center; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; padding-inline: 16px; }
.lb figcaption b { display: block; font-size: 15px; color: #fff; }
.lb button { position: fixed; z-index: 1; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; transition: background var(--dur) var(--easing), transform var(--dur) var(--easing); }
.lb button:hover { background: rgba(255, 255, 255, .22); }
.lb button:active { transform: scale(.94); }
.lb button:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.lb button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb button[hidden] { display: none; }
.lb-x { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lb-p, .lb-d { top: calc(50% - 24px); }
.lb-p { left: 24px; }
.lb-d { right: 24px; }
.lb-n { position: fixed; top: calc(30px + env(safe-area-inset-top)); left: 24px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .lb img { width: min(100vw - 32px, (100dvh - 216px) * var(--ar)); }
  .lb-p, .lb-d { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .lb-p { left: 16px; }
  .lb-d { right: 16px; }
  .lb-n { left: 16px; }
}

/* ---------- rezervace (FAPI) */
.fapi-box { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 32px; min-height: 360px; }
.fapi-box noscript a { font-weight: 700; }
.steps3 { list-style: none; counter-reset: s; display: grid; gap: 16px; padding-left: 0 !important; margin-left: 0; }
/* číslo absolutně vlevo: obsah položky (text, odkazy, tučné) zůstává jeden řádkový tok, ne buňky gridu */
.steps3 li { counter-increment: s; position: relative; min-height: 32px; padding: 3px 0 0 48px; margin: 0; font-size: 16px; line-height: 1.6; }
.steps3 li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--navy); font-weight: 700; display: grid; place-items: center; }

/* ---------- lepicí lišta na mobilu */
.sticky-bar { display: none; }
@media (max-width: 720px) {
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(35, 58, 89, .1);
    transform: translateY(110%); transition: transform var(--dur) var(--easing);
  }
  .sticky-bar[data-show="true"] { transform: none; }
  .sticky-bar div { flex: 1; min-width: 0; line-height: 1.3; }
  .sticky-bar small { display: block; font-size: 12px; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-bar b { font-size: 16px; color: var(--navy); white-space: nowrap; }
  .sticky-bar .btn { min-height: 44px; padding: 8px 16px; }
  body.has-bar .foot-legal .wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- patička */
.site-foot { background: var(--navy); color: #fff; margin-top: 0; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: 64px 48px; }
.foot-grid h2 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.foot-grid ul { list-style: none; display: grid; gap: 12px; font-size: 16px; }
.foot-brand .wordmark { color: #fff; }
.foot-brand p { margin-top: 16px; font-size: 16px; color: rgba(255, 255, 255, .85); max-width: 34ch; }
.foot-contact { margin-top: 24px; display: grid; gap: 4px; }
.foot-contact a { color: #fff; }
.foot-legal { background: var(--bar); color: var(--navy); font-size: 14px; }
.foot-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px; }
.foot-legal a { color: var(--navy); }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 48px 40px; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- 404, drobnosti */
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--navy); font-size: 12px; font-weight: 700; }
.logos { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; min-height: 48px; }
.store:hover { background: var(--navy); text-decoration: none; }
.store svg { width: 20px; height: 20px; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

/* ---------- živé fotky (D28 až D30): video leží nad fotkou a prolne se až prvním snímkem, fotka pod ním
   zůstává pro LCP, tisk, omezený pohyb a stav bez skriptu */
.live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 1600ms var(--easing); }
.live.is-on { opacity: 1; }
.entry .live { z-index: -2; transition: opacity 1600ms var(--easing), transform 700ms var(--easing); }
.entry:hover .live { transform: scale(1.03); }
/* velryba je ve zdroji uprostřed, přesah nahoru ji zvedne nad text; jen desktop, na mobilu je video
   pás 4:3 nad textem (bez media query by toto pozdější pravidlo pás přebilo a moře prosvítalo pod textem) */
@media (min-width: 821px) { .entry .live[data-src*="velryba"] { top: -16%; height: 116%; } }
.duo-img { position: relative; }
.hero-ctl { margin-left: auto; display: flex; align-items: center; gap: 16px; animation: fade 600ms var(--easing) both; }
.hero-ctl[hidden] { display: none; }
.hero-place { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); opacity: 0; transition: opacity 1200ms var(--easing) 600ms; }
.hero.is-live .hero-place { opacity: 1; }
.hero-place.is-cued { transition: opacity 400ms var(--easing); }
.hero.is-live .hero-place.is-swap { opacity: 0; }
.hero-play { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(35, 58, 89, .32); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); transition: background var(--dur) var(--easing), transform var(--dur) var(--easing); }
.hero-play:hover { background: rgba(35, 58, 89, .6); }
.hero-play:active { transform: scale(.94); }
.hero-play:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.hero-play svg { display: block; width: 44px; height: 44px; fill: none; stroke: currentColor; }
.hero-play circle { stroke-width: 1.5; }
.hero-play .ring-bg { stroke: rgba(255, 255, 255, .28); }
.hero-play .ring { stroke-dasharray: 125.664; stroke-dashoffset: 125.664; stroke-linecap: round; }
.hero-play .i-pause { stroke-width: 2.25; stroke-linecap: round; }
.hero-play .i-play { fill: currentColor; stroke: none; display: none; }
.hero-ctl.is-paused .i-pause { display: none; }
.hero-ctl.is-paused .i-play { display: block; }

/* ---------- pohyb (jen transform a opacity; fotka hlavičky se nikdy nezprůhlední, je to LCP) */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--easing), transform 300ms var(--easing); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* fotka v rámu dosedne; rám zůstává vidět, na podstránce může jít o LCP */
.js .duo-img[data-reveal] { opacity: 1; transform: none; }
.js .duo-img[data-reveal] img { transform: scale(1.06); transition: transform 1400ms var(--easing); }
.js .duo-img[data-reveal].is-in img { transform: none; }
.js .duo-img[data-reveal] .live { transform: scale(1.06); transition: opacity 1600ms var(--easing), transform 1400ms var(--easing); }
.js .duo-img[data-reveal].is-in .live { transform: none; }
/* kurz se vykresluje: karta přijede, waypoint se vyplní a zamkne, trasa dojede k dalšímu právě když se vyplňuje.
   Rozpracovaný stav existuje jen se skriptem; bez něj, v tisku a při omezeném pohybu je mapa hotová */
.path { --step: 360ms; }
.js .path .step { transition: opacity var(--step) var(--easing), transform var(--step) var(--easing); }
.js .path .step-num { transition: color 150ms linear 280ms; }
.js .path .step-num::before { transition: scale 300ms var(--easing) 180ms; }
.js .path .step-num::after { transition: opacity 400ms var(--easing) 200ms, scale 500ms var(--easing) 200ms; }
.js .path .step:not(:last-child)::after { transition: scale 320ms cubic-bezier(.65, 0, .35, 1) 220ms; }
.js .path .step:not(.is-in) { opacity: 0; transform: translateY(16px); }
.js .path .step:not(.is-in) .step-num { color: var(--navy); }
.js .path .step:not(.is-in) .step-num::before { scale: 0; }
.js .path .step:not(.is-in) .step-num::after { opacity: 0; scale: 1.5; }
.js .path .step:not(.is-in):not(:last-child)::after { scale: 0 1; }
@media (max-width: 960px) {
  .js .path .step:not(:last-child)::after { transition-duration: 640ms; }
  .js .path .step:not(.is-in):not(:last-child)::after { scale: 1 0; }
}
/* mapa sezóny: trasa se vykresluje stálou rychlostí (--t začátek, --jizda délka úseku), přístav se rozsvítí
   a zavlní, když do něj loď poprvé dorazí, číslo kapitoly vyskočí, když ho míjí. Bez skriptu je mapa celá */
.js .mapa:not(.is-in) .m-trasa path { stroke-dashoffset: var(--off); }
.js .mapa.is-in .m-trasa path { transition: stroke-dashoffset var(--jizda) linear var(--t), stroke-width var(--dur) var(--easing); }
.js .mapa:not(.is-in) .m-p { opacity: 0; }
.js .mapa.is-in .m-p { transition: opacity 360ms var(--easing) var(--t); }
.js .mapa.is-in .m-ping { animation: ping 1300ms cubic-bezier(.2, .6, .3, 1) var(--t) both; }
.js .mapa:not(.is-in) .m-c .m-in { transform: scale(0); }
.js .mapa.is-in .m-c .m-in { transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1) var(--t); }
.js .mapa.is-in .k-num { animation: rozsvit 1600ms var(--easing) var(--t) both; }
.mapa.is-in .m-lod-halo { animation: dech 2400ms ease-in-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }
@keyframes dech { 50% { transform: scale(1.5); fill-opacity: .12; } }
@keyframes rozsvit { 15% { background: var(--cta); color: var(--navy); box-shadow: 0 0 0 6px rgba(242, 203, 5, .22); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .doors, .hero-foot,
  .phero .eyebrow, .phero h1, .phero .lead, .phero .actions { animation: rise 480ms var(--easing) both; }
  .hero h1, .phero h1 { animation-delay: 70ms; }
  .hero .lead, .phero .lead { animation-delay: 140ms; }
  .hero .doors, .phero .actions { animation-delay: 210ms; }
  .hero-foot { animation-delay: 280ms; }
  .terms tr.is-shown { animation: rise 300ms var(--easing) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .faq details[open] .faq-a { animation: fade 240ms var(--easing); }
  .m-nav-body > * { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--easing), transform 240ms var(--easing); }
  .m-nav[data-open="true"] .m-nav-body > * { opacity: 1; transform: none; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(2) { transition-delay: 40ms; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(3) { transition-delay: 80ms; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(4) { transition-delay: 120ms; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(5) { transition-delay: 160ms; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(6) { transition-delay: 200ms; }
  .m-nav[data-open="true"] .m-nav-body > :nth-child(n+7) { transition-delay: 240ms; }
  /* fotka a video hlavičky odjíždějí pomaleji než stránka; nativní scroll timeline, bez skriptu */
  @supports (animation-timeline: scroll()) {
    .hero, .phero--wide { overflow: clip; }
    @media (min-width: 721px) { .hero-img, .phero--wide .phero-img { animation: drift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } }
  }
  /* fotka hlavičky při příchodu: široká se usadí z mírného přiblížení, rám se odkryje zespodu (v5) */
  .phero--wide .phero-img img { animation: settle 1600ms var(--easing) both; }
  /* backwards: po odkrytí clip-path zmizí, aby se vrátil stín a zaoblený roh rámu */
  .phero--frame .phero-img { animation: unveil 900ms var(--easing) 120ms backwards; }
  .phero--frame .phero-img img { animation: settle 1400ms var(--easing) 120ms both; }
}
@keyframes drift { to { transform: translateY(24%); } }
@keyframes settle { from { transform: scale(1.08); } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round var(--r)); } to { clip-path: inset(0 round var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .duo-img[data-reveal] img { transform: none; }
  .js .path .step:not(.is-in) { opacity: 1; transform: none; }
  .js .path .step:not(.is-in) .step-num { color: #fff; }
  .js .path .step:not(.is-in) .step-num::before, .js .path .step:not(.is-in) .step-num::after, .js .path .step:not(.is-in):not(:last-child)::after { opacity: 1; scale: 1; }
  .js .mapa:not(.is-in) .m-trasa path { stroke-dashoffset: 0; }
  .js .mapa:not(.is-in) .m-p { opacity: 1; }
  .js .mapa:not(.is-in) .m-c .m-in { transform: scale(var(--s)); }
  .m-lod { display: none; }
  .live, .live.is-on, .hero-ctl { display: none; }
}
@media print {
  .site-head, .m-nav, .sticky-bar, .site-foot { display: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .duo-img[data-reveal] img { transform: none; }
  .js .path .step:not(.is-in) { opacity: 1; transform: none; }
  .js .path .step:not(.is-in) .step-num { color: #fff; }
  .js .path .step:not(.is-in) .step-num::before, .js .path .step:not(.is-in) .step-num::after, .js .path .step:not(.is-in):not(:last-child)::after { opacity: 1; scale: 1; }
  .js .mapa:not(.is-in) .m-trasa path { stroke-dashoffset: 0; }
  .js .mapa:not(.is-in) .m-p { opacity: 1; }
  .js .mapa:not(.is-in) .m-c .m-in { transform: scale(var(--s)); }
  .m-lod { display: none; }
  .live, .live.is-on, .hero-ctl { display: none; }
}

/* ---------- tabulka bez prvního sloupce */
@media (max-width: 820px) { .terms--bare .t-price { grid-row: 1; } }

/* ---------- nabídka kurzů (řádky místo karet: počet položek nerozbije mřížku) */
.offer { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.offer li { border-bottom: 1px solid var(--line); }
.offer a { display: grid; grid-template-columns: minmax(0, 1fr) 230px 150px 130px; gap: 8px 32px; align-items: start; padding: 24px 16px; margin: 0 -16px; border-radius: var(--r); color: inherit; text-decoration: none; transition: background var(--dur) var(--easing); }
.offer a:hover { background: var(--tint); }
.offer h3 { font-size: 20px; line-height: 1.3; margin-top: 4px; }
.offer p { margin-top: 8px; font-size: 16px; line-height: 1.55; max-width: 56ch; }
.offer .card-kicker { margin-bottom: 0; }
.o-fact { margin: 0; align-self: start; padding-top: 24px; }
.o-fact dt { font-size: 14px; color: var(--blue); }
.o-fact dd { margin: 2px 0 0; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.o-go { grid-column: 2 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--navy); }
.o-go svg { width: 18px; height: 18px; transition: transform var(--dur) var(--easing); }
.offer a:hover .o-go svg { transform: translateX(3px); }
/* nejvýš dva údaje: odkaz se vejde do stejného řádku */
.offer--inline a { grid-template-columns: minmax(0, 1fr) 180px 170px 160px; }
.offer--inline .o-go { grid-column: 4; grid-row: 1; align-self: start; margin-top: 48px; }
@media (max-width: 900px) {
  .offer a { grid-template-columns: 1fr 1fr; gap: 16px 16px; padding: 24px 0; margin: 0; }
  .o-main { grid-column: 1 / -1; }
  .o-go, .offer--inline .o-go { grid-column: 1 / -1; grid-row: auto; margin-top: 0; justify-self: start; }
  .offer--inline a { grid-template-columns: 1fr 1fr; }
  .o-fact { padding-top: 0; }
  span.o-fact { display: none; }
  .offer:not(.offer--inline) .o-fact--first { grid-column: 1 / -1; }
}

/* tým · fotky kapitánů */
/* mřížka karet: každá karta zabírá tři společné řádky (fotka, hlavička s náhledem, "Celý profil"),
   takže fotky, jména i tlačítka sedí v řadě na jedné lince, i když je text různě dlouhý */
.tym { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-bottom: -24px; }
.tym-card { position: relative; display: flex; flex-direction: column; grid-row: span 3; margin-bottom: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--dur) var(--easing); }
.tym-card:hover { box-shadow: var(--shade); }
@supports (grid-template-rows: subgrid) { .tym-card { display: grid; grid-template-rows: subgrid; } }
.tym-foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tint); }
.tym-foto picture { display: block; height: 100%; }
.tym-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--easing); }
.tym-card:hover .tym-foto img { transform: scale(1.03); }
.tym-foto::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 48px; height: 4px; background: var(--sky); }
.tym-hlava { padding: 24px 24px 20px; }
.tym-hlava .eyebrow { margin-bottom: 6px; }
.tym-hlava h3 { font-size: 22px; line-height: 1.25; }
.tym-hlava p, .tym-text p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
.tym-text { padding: 0 24px 24px; }
.tym-text .tym-pokr { margin-top: 0; }
.tym-vic { border-top: 1px solid var(--line); }
.tym-vic summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; font-size: var(--t-sm); font-weight: 700; color: var(--navy); transition: background var(--dur) var(--easing); }
.tym-vic summary::-webkit-details-marker { display: none; }
.tym-vic summary:hover { background: var(--tint); }
.tym-vic summary svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--easing); }
.tym-vic[open] summary svg { transform: rotate(180deg); }
.tym-vic[open] summary { background: var(--tint); }
.tym-vic[open] .tym-text { padding-top: 4px; }
.tym-h { margin: 28px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tym-h + p, .tym-h + ul { margin-top: 10px; }
.tym-ul { margin: 12px 0 0; padding-left: 1.1em; font-size: 15px; line-height: 1.55; }
.tym-ul li { margin-top: 8px; padding-left: 2px; }
.tym-ul li::marker { color: var(--blue); }
.tym-kv { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.tym-kv dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.tym-kv dd { margin: 2px 0 12px; font-weight: 600; color: var(--navy); }
.tym-kv dd:last-child { margin-bottom: 0; }
.tym-kv a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tym-kv a:hover { text-decoration-color: currentColor; }
.tym-kv--kontakt { border-top: 0; padding-top: 0; margin-top: 16px; }
/* Jiří Zindulka: hlavní karta přes dva sloupce, tmavá, fotka vlevo přes celou výšku */
.tym-card.tym-card--hlavni { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; background: var(--navy); border-color: var(--navy); }
.tym-card--hlavni .tym-foto { grid-column: 1; aspect-ratio: auto; min-height: 320px; }
.tym-card--hlavni .tym-foto picture, .tym-card--hlavni .tym-foto img { position: absolute; inset: 0; }
.tym-card--hlavni .tym-foto::after { background: var(--cta); }
.tym-card--hlavni .tym-hlava { grid-column: 2; align-self: center; padding: 40px 40px 40px 36px; color: #fff; }
.tym-card--hlavni .eyebrow { color: var(--sky); }
.tym-card--hlavni h3 { font-size: 32px; line-height: 1.2; color: #fff; }
.tym-card--hlavni .tym-hlava p { font-size: 18px; margin-top: 16px; }
.tym-odkaz { margin-top: 24px; }
.tym-card--hlavni .tlink { color: #fff; }
.tym-card--hlavni :focus-visible { outline-color: var(--sky); }
/* Pavel Burkert: jen text, bez fotky (na starém webu žádná není), přes celý řádek */
.tym-card.tym-card--text { display: block; grid-column: 1 / -1; grid-row: auto; align-self: start; border-left: 4px solid var(--sky); }
.tym-card--text .tym-hlava, .tym-card--text .tym-text { max-width: 78ch; }
.tym-card--text .tym-vic summary { max-width: none; }
@media (max-width: 960px) {
  .tym { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-bottom: -16px; }
  .tym-card { margin-bottom: 16px; }
  .tym-card.tym-card--hlavni { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) {
  .tym { grid-template-columns: minmax(0, 1fr); }
  .tym-card.tym-card--hlavni { display: flex; grid-column: auto; }
  .tym-card--hlavni .tym-foto { aspect-ratio: 4 / 3; min-height: 0; }
  .tym-card--hlavni .tym-hlava { padding: 24px 24px 28px; }
  .tym-card--hlavni h3 { font-size: 26px; }
  .tym-card--hlavni .tym-hlava p { font-size: 16px; }
  .tym-card--text { border-left-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .tym-foto img { transition: none; }
  .tym-card:hover .tym-foto img { transform: none; }
}