/* s/y POLONEZ — site.css: układ PODSTRON bez three.js (/aplikuj /trasa-rejsu /relacja-z-podrozy /jacht /faq /kontakt /polityka) — brief 9s/9t.
   Tokeny, nagłówek, przyciski, panele, formularz, akordeony i stopka są w styles.css (wspólne z frontem); tu tylko to, czego front nie ma.
   Zasady bez zmian: dwa kroje, jedna czerwień, .panel dla każdego bloku tekstu, hyphens: manual (brief 9i), zero pełnoszerokościowych gradientów (brief 9a). */

body.site { position: relative; background: var(--ink-0); color: var(--foam); min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: var(--nav-h); }
/* odbitka portu pod 20 % krycia (brief 9s): serwer ustawia --poster na <html> TYLKO, gdy plik istnieje — bez pliku zostaje jednolite --ink-0 */
body.site::before { content: ''; position: fixed; inset: 0; z-index: 0; background: var(--poster, none) center / cover no-repeat; opacity: .2; pointer-events: none; }
.nav-site { background: var(--ink-1); box-shadow: 0 1px 0 var(--line); }
.nav-site .wordmark svg { height: 18px; }
.site-main { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--page-pad) var(--s9); display: grid; gap: var(--s5); align-content: start; }
.site-main > .panel, .site-main .panel-full { max-width: none; }
.site-hero h1 { font-size: clamp(44px, 5vw, 72px); line-height: .95; margin-bottom: var(--s4); }
.site-hero .lead { margin-bottom: 0; }
.site-hero .lead + * { margin-top: var(--s5); }
.site-hero .lead + [hidden] + *:not([hidden]), .site-hero .lead + [hidden] + [hidden] + *:not([hidden]) { margin-top: var(--s5); }   /* QA2 (A, przy okazji): na /kontakt po leadzie stoją ukryte sloty e-mail/telefon — odstęp ma dostać pierwszy WIDOCZNY element */
.site-hero .kicker { margin-bottom: var(--s3); }
.site-hero .site-cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-top: var(--s5); }
.site-main h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--s4); }
.site-main h2.kicker-h, .kicker-h { font: 500 var(--fs-kicker) / 1.3 var(--f-text); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--foam-2); margin: 0 0 var(--s5); }
.site-main h3 { font-size: 24px; margin-bottom: var(--s3); }
.dwie-kolumny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.dwie-kolumny > div > p { color: var(--foam); font-size: var(--fs-body); }
.tekst p { max-width: var(--measure); }
.site-main .lista li { color: var(--foam); }

/* ---------- /jacht: kafelki + rysunek (style .spec/.rysunek/.drobne w styles.css) ---------- */
.jacht-dane .jacht-grid { margin-top: 0; }
.jacht-dane .przypis { margin-top: var(--s3); }

/* ---------- /jacht, brief 9aa: OŻAGLOWANIE + OPRZYRZĄDOWANIE — rysunek 2D (C, /rysunki/*.svg wstrzykiwany przez serwer) obok tekstu; bez pliku figura ukryta → jedna kolumna ---------- */
.jacht-plan .kicker { margin-bottom: var(--s2); }
.jacht-grid-rys { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; margin-bottom: 0; }
.jacht-grid-rys:has(> figure:first-child[hidden]) { grid-template-columns: 1fr; }                  /* decyduje PIERWSZY rysunek (plan żagli / plan pokładu); drugi (olinowanie) jest dodatkiem w lewej kolumnie */
.jacht-grid-rys figure[hidden] { display: none; }
.jacht-plan > .kicker { max-width: none; }
.plan-tekst { display: grid; gap: var(--s5); align-content: start; }
.plan-opis, .plan-dane { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.plan-opis > p { margin: 0; color: var(--foam); }
.site-main .plan-dane h3.kicker-h { font-size: var(--fs-kicker); margin: 0; }
/* bez rysunku C (figura ukryta): opis po lewej, tabela/legenda po prawej — sekcja nie zostaje z pustą prawą połową */
.jacht-grid-rys:has(> figure:first-child[hidden]) .plan-tekst { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.plan-tekst .fakty { margin-top: var(--s2); }
.plan-tekst .przypis { margin: 0; font-size: var(--fs-small); color: var(--foam-2); max-width: var(--measure); }
.tabela { width: 100%; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.tabela th, .tabela td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela thead th { font: 500 12px / 1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--foam-2); }
.tabela tbody th { font: 400 20px / 1 var(--f-display); text-transform: uppercase; color: var(--foam); white-space: nowrap; }
.tabela td { color: var(--foam-2); }
.tabela td:last-child, .tabela th:last-child { text-align: right; padding-right: 0; color: var(--foam); }
.legenda-planu { margin: 0; padding: 0; list-style: none; counter-reset: plan; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; gap: var(--s2) var(--s4); font-size: var(--fs-small); color: var(--foam); }
.legenda-planu li { counter-increment: plan; position: relative; padding-left: 32px; min-height: 22px; line-height: 1.35; }
.legenda-planu li::before { content: counter(plan); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--signal); color: var(--foam); font: 500 11px / 22px var(--f-text); text-align: center; }
.zrodla-plan summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.zrodla-plan summary::-webkit-details-marker { display: none; }
.zrodla-plan summary::after { content: '+'; font: 400 16px / 1 var(--f-text); color: var(--teak); }
.zrodla-plan[open] summary::after { content: '−'; }
.zrodla-plan .lista { margin-top: var(--s3); gap: var(--s2); }
.zrodla-plan .lista a { color: var(--foam); }
.plan .plan-zoom { justify-self: start; }
/* QA1 (A-S3-2 / 9aa (3)): schemat olinowania = DRUGI rysunek w lewej kolumnie pod planem żagli (wypełnia pustą kolumnę, ~525 px zamiast ~440 px w prawej); tekst + tabela zajmują prawą kolumnę przez oba wiersze */
.jacht-grid-rys > figure + figure { grid-column: 1; margin-top: var(--s4); }
.jacht-grid-rys:not(:has(> figure:first-child[hidden])) > .plan-tekst { grid-column: 2; grid-row: 1 / span 2; }
.plan-dialog { max-width: min(96vw, 1400px); width: auto; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--panel-r); background: var(--ink-1); color: var(--foam); }
.plan-dialog::backdrop { background: rgba(5, 15, 27, .82); }
.plan-dialog .rysunek-svg { width: min(92vw, 1320px); max-height: 82vh; }
.plan-dialog svg { width: 100%; height: auto; max-height: 82vh; }
.plan-dialog .dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s4); }
.plan-dialog .dialog-foot p { margin: 0; }
@media (max-width: 1023px) { .jacht-grid-rys { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .jacht-grid-rys:has(> figure:first-child[hidden]) .plan-tekst { grid-template-columns: 1fr; } .jacht-grid-rys > .plan-tekst, .jacht-grid-rys > figure + figure { grid-column: auto; grid-row: auto; } }
@media (max-width: 767px) { .legenda-planu { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .tabela tbody th { font-size: 18px; white-space: normal; } }

/* ---------- /kontakt: JASNY PANEL ZE ZNAKIEM KOLOROWYM — jedyna podstrona ze znakiem; na froncie biała pieczęć hero (księga znaku: znak kolorowy tylko na jasnym, spokojnym tle) ---------- */
.panel-paper { background: var(--paper); color: var(--paper-ink); border-color: transparent; display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: start; }
.panel-paper img[src*="logo-znak"] { height: 72px; width: auto; margin: 0; padding: 0; }
.panel-paper .nazwa { font-family: var(--f-display); font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--paper-ink); margin: 0 0 var(--s3); }
.panel-paper p { color: var(--paper-ink-2); margin: 0 0 var(--s2); max-width: none; }
.panel-paper .dzis { font-size: var(--fs-small); }
.panel-paper a { color: var(--paper-ink); }
.kontakt-social { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; }
.kontakt-social a { color: var(--foam); }
.kontakt-dane p { margin-bottom: var(--s2); }

/* ---------- /aplikuj: zaproszenie + kroki + formularz w dwóch kolumnach ---------- */
.ap-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); align-items: start; }
.ap-intro { position: sticky; top: calc(var(--nav-h) + var(--s5)); }
.ap-intro h1 { font-size: clamp(44px, 5vw, 64px); line-height: .95; margin-bottom: var(--s4); }
.ap-intro .zasada { margin-bottom: var(--s6); }                                     /* A-4: odstęp przed kickerem „JAK DOŁĄCZYĆ” */
.ap-intro .co-dalej { margin-bottom: var(--s5); }
.ap-sukces { display: grid; gap: var(--s3); align-content: start; }
.ap-sukces h2 { font-size: clamp(36px, 4vw, 56px); }
.sukces-akcje { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s3); }
.ap-form .form-h { font-size: 32px; }

/* ---------- /trasa-rejsu (Maciej, 22.10.2026): zwarty pasek tytułu + mapa trasy z ~/polonez-trasa w ramce na całą szerokość i resztę wysokości okna;
   ramka kończy się równo z dołem okna (bez przewijania strony, żeby zobaczyć całą mapę), stopka pod nią ---------- */
.trasa-main { max-width: none; padding: 0; gap: 0; display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h)); }
.trasa-pasek { background: var(--ink-1); border-bottom: 1px solid var(--line); }
.trasa-pasek-in { max-width: var(--wide); margin: 0 auto; padding: var(--s3) var(--page-pad); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h1 link" "lead lead"; align-items: center; gap: var(--s1) var(--s5); }
.trasa-pasek h1 { grid-area: h1; font-size: clamp(36px, 3vw, 48px); line-height: .95; margin: 0; }
.trasa-pasek .lead { grid-area: lead; max-width: none; margin: 0; font-size: 16px; line-height: 1.45; font-weight: 400; color: var(--foam-2); }
.trasa-otworz { grid-area: link; min-height: 36px; padding: 0 var(--s4); font-size: 13px; }
.trasa-ramka { position: relative; flex: 1 0 auto; min-height: 640px; background: var(--ink-0); }
.trasa-mapa { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (max-height: 800px) { .trasa-ramka { min-height: 560px; } }   /* laptop 1366×768 / 1280×800: mapa mieści się w oknie (ok. 610–650 px) zamiast wystawać pod dół */
/* 31.10.2026: pod mapą tabela odcinków (lib/strony.js → odcinkiTrasyHTML, ten sam .tabela co na /jacht); pasek + mapa dalej wypełniają pierwszy ekran (.trasa-ekran) */
.trasa-ekran { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h)); }
.trasa-odcinki { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--page-pad) var(--s9); }
.trasa-odcinki:empty { display: none; }
.tabela-odcinki .nr { color: var(--foam-2); margin-right: .3em; }
.tabela-odcinki .opis-odcinka { display: block; margin-top: var(--s1); }   /* „Charakter żeglugi” pod trasą, jak w kartach odcinków na stronie głównej */
.trasa-odcinki .site-cta { margin: var(--s5) 0 0; }
@media (max-width: 767px) {   /* wąsko: każdy odcinek jako blok (tytuł, trasa, termin) zamiast trzech ściśniętych kolumn */
  .trasa-odcinki { padding: var(--s5) var(--gutter) var(--s8); }
  .tabela-odcinki, .tabela-odcinki tbody { display: block; }
  .tabela-odcinki thead { display: none; }
  .tabela-odcinki tr { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .tabela-odcinki th, .tabela-odcinki td, .tabela-odcinki td:last-child { padding: 0; border: 0; text-align: left; }
}

/* ---------- /relacja-z-podrozy (Maciej, 22.10.2026): wpisy z content.relacja.wpisy (serwer: lib/strony.js → relacjaHTML) — panel na wpis, kicker „data · miejsce”, H2, zdjęcia ---------- */
.relacja { display: grid; gap: var(--s5); }
.relacja:empty { display: none; }
.wpis.panel { max-width: none; }
.wpis .kicker { margin-bottom: var(--s3); }
.wpis > p:not(.kicker) { color: var(--foam); font-size: var(--fs-body); line-height: var(--lh-body); }
.wpis-zdjecia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s3); margin-top: var(--s5); }
.wpis-zdjecia img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-1); background: var(--ink-2); }
.wpis-zdjecia:has(> figure:only-child) { grid-template-columns: minmax(0, 1fr); }
.wpis-zdjecia > figure:only-child img { width: auto; max-width: 100%; max-height: 75vh; aspect-ratio: auto; }
.relacja-podglad { max-width: none; margin: 0 0 var(--s5); color: var(--foam-2); }   /* podgląd wpisu z CMS (?podglad=): plakietka i zdanie w jednej linii */
.relacja-podglad .badge { margin-right: var(--s3); vertical-align: middle; }
.relacja-podglad .badge::before { background: var(--signal); }
/* 31.10.2026: miniatura = link do dużego zdjęcia (lib/strony.js); z JS otwiera przeglądarkę zdjęć wpisu (site.js) — pełny ekran, zdjęcie w całości, licznik i zamknij u góry, strzałki po bokach, alt pod spodem */
.wpis-foto { display: block; border-radius: var(--r-1); cursor: zoom-in; }
.wpis-foto img { transition: filter var(--t-fast); }
.wpis-foto:hover img { filter: brightness(1.1); }
.wpis-zdjecia > figure:only-child .wpis-foto { width: fit-content; max-width: 100%; }
.foto-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; background: rgba(5, 15, 27, .97); color: var(--foam); overflow: hidden; touch-action: pinch-zoom; }
.foto-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: foto-wejscie var(--t-base) var(--ease-out); }
.foto-dialog::backdrop { background: rgba(5, 15, 27, .6); }
@keyframes foto-wejscie { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .foto-dialog[open] { animation: none; } }
.foto-gora { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); }
.foto-licznik { margin: 0; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.foto-zamknij { margin-left: auto; }
.foto-scena { position: relative; container-type: size; display: grid; place-items: center; margin: 0 var(--s4) var(--s4); }
.foto-duze { width: min(100cqw, 100cqh * var(--proporcja, 1.5)); height: auto; aspect-ratio: var(--proporcja, 1.5); border-radius: var(--r-1); background: var(--ink-2); user-select: none; -webkit-user-drag: none; }
.foto-opis { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s4) var(--s4); text-align: center; }
.foto-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--foam); background: var(--panel-bg); box-shadow: inset 0 0 0 1px rgba(244,241,232,.35); transition: box-shadow var(--t-fast); }
.foto-btn:hover { box-shadow: inset 0 0 0 1px var(--foam); }
.foto-btn:focus-visible { box-shadow: var(--focus); }   /* .foto-btn nadpisałby globalny pierścień fokusu (ta sama waga selektora, site.css po styles.css) */
.foto-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foto-wstecz, .foto-dalej { position: absolute; top: 50%; transform: translateY(-50%); }
.foto-wstecz { left: 0; }
.foto-dalej { right: 0; }
@media (min-width: 768px) { .foto-scena { margin: 0 var(--s9) var(--s4); } .foto-wstecz { left: calc(var(--s9) * -1 + var(--s4)); } .foto-dalej { right: calc(var(--s9) * -1 + var(--s4)); } }

/* ---------- /faq ---------- */
.faq-cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

@media (max-width: 1023px) {
  .ap-main { grid-template-columns: 1fr; }
  .ap-intro { position: static; }
}
@media (max-width: 767px) {
  .site-main { padding: var(--s5) var(--gutter) var(--s8); gap: var(--s4); }
  .site-main.trasa-main { padding: 0; gap: 0; }
  .trasa-pasek-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "lead" "link"; padding: var(--s4) var(--gutter); row-gap: var(--s2); }
  .trasa-otworz { justify-self: start; }
  .trasa-ramka { min-height: 520px; }
  .dwie-kolumny, .panel-paper { grid-template-columns: 1fr; }
  .panel-paper { gap: var(--s4); }
  .panel-paper img[src*="logo-znak"] { height: 64px; }
  .site-hero h1 { font-size: clamp(38px, 11vw, 46px); }
  .sukces-akcje .btn, .site-cta .btn { width: 100%; }
}

/* /jacht (Maciej 22.10.2026: „dodaj kilka zdjęć, opisz wyposażenie”): galeria w kolumnach (naturalne proporcje zdjęć), siatka wyposażenia, wnętrze ze zdjęciami — HTML: tools/jacht.mjs */
.foto { margin: 0; }
.foto a { display: block; border-radius: var(--r-1); overflow: hidden; background: var(--panel-bg); }
.foto img { display: block; width: 100%; height: auto; transition: transform var(--t-base) var(--ease-out); }
.foto a:hover img, .foto a:focus-visible img { transform: scale(1.02); }
.foto a:focus-visible { outline: none; box-shadow: var(--focus); }
.foto figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--foam-2); }
.galeria { columns: 3 280px; column-gap: var(--s4); }
.galeria .foto { break-inside: avoid; margin: 0 0 var(--s4); }
.galeria-wnetrze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) 0 var(--s3); }
.galeria-wnetrze .foto:first-child { grid-column: 1 / -1; }
.wnetrze-opis, .wyp-lead { max-width: var(--measure); }
.wyp-lead { margin-bottom: var(--s6); }
.wyp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-bottom: var(--s5); }
.wyp-grupa .lista { gap: var(--s2); }
@media (max-width: 1023px) { .wyp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .wyp-grid, .galeria-wnetrze { grid-template-columns: 1fr; } .galeria { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .foto img { transition: none; } }