/* Wersja 3: wersja 2 „Jasna” (biel i jasny blekit sniegu, granatowy tekst i przyciski, Sofia Sans) z naglowkiem i startem z wersji 1
   (przezroczysty naglowek na zdjeciu, granatowy po przewinieciu, granatowe panele z tytulem w Barlow Condensed wersalikami, blekitne przyciski). */
:root {
  --font-n: 'Sofia Sans', system-ui, sans-serif; --font-t: 'Sofia Sans', system-ui, sans-serif; --font-w1: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tlo-2: #eaf4fb; --naglowek-h: 92px; --linia: #cfdbe5;
  --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: var(--granat); --przycisk-ht: #fff;
  --menu-kolor: #fff; --menu-akt: var(--blekit); --naglowek-tlo: transparent; --podmenu-tlo: #fff;
}
body { font-size: 19px; }
h1, h2, h3 { letter-spacing: -.012em; }
h1, h2 { font-weight: 650; }   /* lzejsze naglowki (Rafal 2026-10-28: „zmien headingi na 600 650”, potem „h1 tez”; wczesniej 850);
   tytuly h1 w Barlow Condensed (start, naglowki podstron) 600 zamiast 800 — ten font ma tylko 600/700/800 */
h3 { font-weight: 600; }
h2 { font-size: clamp(32px, 3.5vw, 48px); }
.lead { font-size: 21px; }

/* naglowek z wersji 1: przezroczysty na zdjeciu, granatowy po przewinieciu i na stronach bez zdjecia */
.w3 .naglowek { position: fixed; left: 0; right: 0; top: 0; }
.przewiniete .naglowek, .bez-zdjecia .naglowek, .menu-otwarte .naglowek { background: var(--granat); }
.logo img { height: 74px; transition: height .2s; }
.przewiniete .logo img { height: 60px; }
.menu a { text-transform: uppercase; letter-spacing: .04em; font: 700 17px/1.2 var(--font-w1); }
.menu-tel a { font-size: 19px; }
.w3:not(.bez-zdjecia) .naglowek::before { content: ''; position: absolute; inset: 0; background: rgba(26, 49, 93, .62); z-index: -1; transition: opacity .2s; }
.przewiniete .naglowek::before, .menu-otwarte .naglowek::before { opacity: 0; }
/* przyciski pomaranczowe z granatowym napisem (klientka 2026-10-28), na granacie i na zdjeciach po najechaniu biale */
.naglowek, .glowa, .glowa-kompakt { --przycisk-h: #fff; --przycisk-ht: var(--granat); }
.menu-cta .przycisk { font: 700 17px/1.1 var(--font-w1); text-transform: uppercase; letter-spacing: .04em; }
.start .przycisk-glowny { font: 700 19px/1.1 var(--font-w1); text-transform: uppercase; letter-spacing: .04em; }

/* start z wersji 1: duze zdjecie lekcji, granatowy panel z tytulem i zapisy nachodza na jego dol */
.start { position: relative; color: #fff; }
.start-foto { width: 100%; height: clamp(460px, 78vh, 820px); object-fit: cover; object-position: 50% 45%; }
.start-uklad { position: relative; margin-top: -170px; }   /* panel na cala szerokosc .w (zapisy przeniesione do lekcji, 2026-10-29) */
.start-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; background: var(--granat); padding: 34px 40px 32px; border-radius: var(--r); }
.start h1 { color: #fff; font: 600 clamp(42px, 5vw, 70px)/.98 var(--font-w1); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 16px; }
.start h1 { margin: 0; font-size: clamp(34px, 3.9vw, 56px); }
.start h1 span { display: block; }
.start h1 .start-to { margin-bottom: 6px; font-size: .5em; letter-spacing: .03em; color: #e3eaf6; }
.start h1 .start-l2 { color: var(--blekit); }
.start h1 .start-l3 { color: var(--pomarancz); }
.start-info .dane { margin-bottom: 18px; font-size: 16.5px; color: #e3eaf6; }
.start-info .dane b, .start-info .dane a { color: #fff; }
.start-tele { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
.start-panel p { font-size: 19px; color: #e3eaf6; }
.start-tel { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 36px/1 var(--font-w1); }
.start-tel:hover { color: var(--blekit); }

/* rzedy zdjecie + tekst (Rafal 2026-10-26: „tekst z jednej strony, zdjecie z drugiej, nie ma miedzy tym symetrii”): oba w siatce strony
   (12 kolumn jak .w), zdjecie 4:3 na 8 kolumnach, tekst w karcie na 6 kolumnach nachodzi na zdjecie, na srodku jego wysokosci
   (jak panel w naglowku); co drugi rzad odwrotnie. Na telefonie karta nachodzi na dol zdjecia. */
.rzad { display: grid; grid-template-columns: minmax(32px, 1fr) repeat(12, minmax(0, 98px)) minmax(32px, 1fr); align-items: center; padding: 80px 0; }
.rzad-foto { grid-column: 2 / 10; grid-row: 1; align-self: stretch; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* przy dluzszym tekscie rosnie do wysokosci karty */
.rzad-tekst { grid-column: 8 / 14; grid-row: 1; position: relative; z-index: 1; padding: 40px 44px 34px; background: #fff; border-top: 4px solid var(--blekit); }
.rzad.odwr .rzad-foto { grid-column: 6 / 14; }
.rzad.odwr .rzad-tekst { grid-column: 2 / 8; }
.rzad-tekst > :last-child { margin-bottom: 0; }
.rzad-tlo { background: var(--tlo-2); }
.rzad-pod { grid-column: 2 / 14; grid-row: 2; margin-top: 44px; }   /* np. karty z cenami pod zdjeciem i karta */
.rzad:not(.rzad-tlo) .rzad-tekst { background: var(--tlo-2); }   /* na bialym tle karta jasnoniebieska, na jasnoniebieskim biala */
.start + .rzad { margin-top: 0; }

/* naglowek podstrony: tytul i wstep wprost na zdjeciu, bez panelu; przyciemnienie tylko u dolu zdjecia (Rafal 2026-10-26:
   „glowa-panel zajmuje troche miejsca i zaslania to, co jest na zdjeciu”, z wariantow A–E wybral B). Zdjecie jest tlem calej sekcji,
   wiec przy dlugim wstepie na waskim telefonie sekcja rosnie, zamiast wpychac tekst pod pasek menu. Granatowe tlo .glowa widac tylko,
   zanim wczyta sie zdjecie. */
.glowa { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, 46vw, 640px); color: #fff; background: var(--granat); }
.glowa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glowa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(24, 45, 84, .92), rgba(24, 45, 84, .6) 45%, rgba(24, 45, 84, 0)); pointer-events: none; }
.glowa-dol { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--naglowek-h) + 40px); padding-bottom: 36px; }
.glowa-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px 56px; align-items: last baseline; }   /* ostatnia linijka tytulu i wstepu na jednej linii (Rafal 2026-10-26: „równamy tekst z lewej i prawej kolumny?”) */
.glowa h1 { margin: 0; color: #fff; font: 600 clamp(38px, 4.6vw, 62px)/1 var(--font-w1); text-transform: uppercase; letter-spacing: .005em; }
.glowa .lead { margin: 0; color: #e3eaf6; font-size: 19px; }
.glowa:has(.lead-dlugi)::after { height: 100%; background: linear-gradient(to top, rgba(24, 45, 84, .94), rgba(24, 45, 84, .78) 55%, rgba(24, 45, 84, .35)); }   /* dlugi wstep: mocniejsze przyciemnienie */
.glowa .lead-dlugi { font-size: 17px; line-height: 1.55; }
.glowa-akcje { grid-column: 1 / -1; margin: 18px 0 0; }   /* przyciski pod tytulem i wstepem (Noclegi: zapytaj, napisz, telefon) */
.glowa .przycisk-drugi { background: rgba(255, 255, 255, .16); color: #fff; }
.glowa .przycisk-drugi:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.glowa-zaproszenie { margin: 16px 0 0; color: #e3eaf6; font-size: 17px; }   /* galeria: zaproszenie do przesylania zdjec (klientka 2026-10-28) */
.glowa-zaproszenie a { color: #fff; font-weight: 700; }
.glowa-zaproszenie a:hover { color: var(--pomarancz); }
.glowa-kompakt { min-height: 0; display: block; background: var(--granat); padding: calc(var(--naglowek-h) + 40px) 0 34px; }
.glowa-kompakt::after { content: none; }   /* przyciemnienie zdjecia tylko w naglowku ze zdjeciem (zapisy bez zdjecia: zakrywalo tytul) */

.stopka-gory .g-granat { fill: var(--granat); }

@media (max-width: 1365px) {
  .menu a { padding: 10px 8px; font-size: 16px; }
  .menu-cta .przycisk { font-size: 16px; }
}
@media (max-width: 1279px) {
  :root { --naglowek-h: 72px; }
  .logo img, .przewiniete .logo img { height: 56px; }
  .menu a { font-size: 26px; }
}
@media (max-width: 980px) {
  .start-foto { height: clamp(340px, 62vh, 560px); }
  .start-uklad { margin-top: -90px; }
  .start-panel { grid-template-columns: minmax(0, 1fr); }
  .rzad { grid-template-columns: 32px minmax(0, 1fr) 32px; padding: 0 0 56px; }
  .rzad-foto, .rzad.odwr .rzad-foto { grid-column: 1 / -1; grid-row: 1; align-self: auto; height: auto; aspect-ratio: 3 / 2; }
  .rzad-tekst, .rzad.odwr .rzad-tekst { grid-column: 2; grid-row: 2; margin-top: -64px; padding: 32px 32px 28px; }
  .rzad-pod { grid-column: 2; grid-row: 3; margin-top: 32px; }
  .start + .rzad { margin-top: 48px; }
  .glowa-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .glowa-akcje { margin-top: 4px; }
}
@media (max-width: 680px) {
  body { font-size: 17.5px; }
  .start-panel { padding: 26px 18px 22px; }
  .start-uklad { margin-top: -50px; }
  .start h1 { font-size: 42px; }
  .start-tel { font-size: 32px; }
  .rzad { grid-template-columns: 12px minmax(0, 1fr) 12px; }
  .rzad-tekst, .rzad.odwr .rzad-tekst { margin-top: -40px; padding: 24px 16px 22px; }
  .glowa { min-height: 420px; }
  .glowa::after { height: 100%; background: linear-gradient(to top, rgba(24, 45, 84, .92), rgba(24, 45, 84, .72) 55%, rgba(24, 45, 84, .2)); }
  .glowa-dol { padding-top: calc(var(--naglowek-h) + 28px); padding-bottom: 24px; }
  .glowa .lead { font-size: 16px; }
  .glowa .lead-dlugi { font-size: 15.5px; }
  .glowa-kompakt { padding: calc(var(--naglowek-h) + 24px) 0 22px; }
}