/* ==========================================================================
   Mała Chmurka — arkusz stylów
   Paleta zaczerpnięta z wnętrza lokalu: kremowe ściany, stonowany granat,
   naturalne drewno i błękit.
   ========================================================================== */

/* ---------- Zmienne ---------- */
:root {
  --cream:       #FBF7F1;
  --cream-deep:  #F3EBE0;
  --sand:        #E8DCCB;
  --wood:        #C9A87C;
  --wood-dark:   #A9834F;

  /* Kolor marki z oficjalnej księgi znaku */
  --brand:       #93C7CF;
  --brand-deep:  #3E7C89;  /* przyciemniony — kontrast AA z białym tekstem */
  --brand-pale:  #E4F1F4;

  --navy:        #3D5A78;
  --navy-deep:   #2A4159;
  --navy-soft:   #566F8A;
  --sky:         #A9C6DD;
  --sky-pale:    #DCEAF4;

  --ink:         #2C3540;
  --muted:       #6B7885;
  --line:        #E3D9CB;
  --white:       #FFFFFF;

  /* Ceglasty — przycisk „Nowe wejście" dla obsługi. Ten sam odcień co --bad
     w mc-common.css, żeby ta sama pozycja menu wyglądała tak samo na stronie
     głównej i na podstronach. Ceglasty, nie sygnalizacyjny: obok stoi drugi
     przycisk i dwa krzyczące kolory zaczęłyby ze sobą walczyć. */
  --brick:       #B5443C;
  --brick-dark:  #9C3A33;

  /* Kolor przycisku „Nowe zajęcia" — ten sam odcień, co w mc-common.css,
     żeby ta sama pozycja menu wyglądała tak samo na każdej stronie. */
  --teal:        #3E7C89;
  --teal-dark:   #33636D;

  --font-head: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 44px;

  --shadow-sm: 0 2px 10px rgba(44, 53, 64, .06);
  --shadow:    0 10px 30px rgba(44, 53, 64, .09);
  --shadow-lg: 0 22px 55px rgba(44, 53, 64, .14);

  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy-deep);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }

a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--wood-dark); }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

:focus-visible {
  outline: 3px solid var(--wood);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Widoczne dla czytników ekranu, niewidoczne na ekranie */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.link-button {
  font: inherit;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Układ ---------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(64px, 9vw, 118px) 0; }
.section-alt { background: var(--cream-deep); }
.section-navy { background: var(--navy-deep); color: #E9F0F6; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy a { color: var(--sky); }
.section-navy a:hover { color: #fff; }

.section-head { max-width: 640px; margin: 0 auto clamp(38px, 5vw, 62px); text-align: center; }
.section-sub { color: var(--muted); font-size: 1.05rem; margin: 0; }

.eyebrow {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wood-dark);
  margin: 0 0 .7em;
}
.eyebrow-light { color: var(--sky); }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: .85em 1.9em;
  border-radius: 999px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
  will-change: transform;
}
.btn-primary {
  background: var(--wood);
  color: #fff;
  box-shadow: 0 8px 22px rgba(169, 131, 79, .34);
}
.btn-primary:hover {
  background: var(--wood-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(169, 131, 79, .42);
}
.btn-ghost {
  border: 2px solid rgba(255, 255, 255, .65);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding: 14px 0;
}
.site-header.is-scrolled {
  background: rgba(251, 247, 241, .95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding: 6px 0;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Logo — znak słowny: nazwa jest tekstem, nie plikiem SVG. Stoi wprost
   w HTML (na podstronach bierze się z SETTINGS.brand), a tutaj dostaje krój,
   wielkość i kolor — barwa zmienia się po przewinięciu strony. */
.logo { display: flex; align-items: center; }
.logo-mark {
  display: block;
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.62rem;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #fff;
  transition: color .3s var(--ease), font-size .3s var(--ease);
}
.site-header.is-scrolled .logo-mark { color: var(--brand-deep); font-size: 1.44rem; }

/* Nawigacja */
/* Menu klienta zostaje w jednym rzędzie — tak jak było. Przy `nowrap` pozycje
   ściskają się i mieszczą; gdyby zawijały się zawsze, każdy klient dostałby
   dwupiętrowy nagłówek za darmo.
   Dopiero trzy przyciski obsługi rozpychają menu ponad szerokość strony
   (na 1440 px chciałoby 1754 px), więc zawijanie włączamy wyłącznie wtedy, gdy
   te przyciski są widoczne. Klasę ustawia updateNavAdmin() w mc-common.js. */
.nav ul { display: flex; align-items: center; gap: 6px; }
body.has-admin-nav .nav ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.nav a,
.nav .nav-btn {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  padding: .5em .85em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

/* Między hamburgerem a pełnym desktopem menu jest ciasne — zbijamy
   odstępy, żeby pozycje zostały w jednej linii. */
@media (min-width: 861px) and (max-width: 1080px) {
  .nav ul { gap: 0; }
  .nav a,
  .nav .nav-btn { font-size: .9rem; padding: .5em .58em; }
  .nav .nav-cta { margin-left: 6px; padding-inline: .95em; }
}
.nav a:hover, .nav a.is-current,
.nav .nav-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.site-header.is-scrolled .nav a,
.site-header.is-scrolled .nav .nav-btn { color: var(--navy-deep); }
.site-header.is-scrolled .nav a:hover,
.site-header.is-scrolled .nav a.is-current { background: var(--sky-pale); color: var(--navy-deep); }

.nav .nav-cta {
  background: var(--wood);
  color: #fff;
  margin-left: 8px;
  padding-inline: 1.3em;
}
.nav .nav-cta:hover,
.site-header.is-scrolled .nav .nav-cta { background: var(--wood); color: #fff; }
.site-header.is-scrolled .nav .nav-cta:hover { background: var(--wood-dark); }

/* „Nowe wejście" — ten sam przycisk co „Zarezerwuj miejsce", tylko czerwony.
   Ceglasty, nie sygnalizacyjny: oba stoją obok siebie w tym samym pasku
   i dwa krzyczące kolory zaczęłyby ze sobą walczyć. Reguły powtarzają się dla
   stanu `is-scrolled`, bo tam nagłówek przemalowuje pozycje menu na granat —
   przycisk musi zostać czerwony w obu stanach. */
.nav .nav-cta-red,
.nav .nav-cta-red:hover,
.site-header.is-scrolled .nav .nav-cta-red { background: var(--brick); color: #fff; }
.nav .nav-cta-red:hover,
.site-header.is-scrolled .nav .nav-cta-red:hover { background: var(--brick-dark); color: #fff; }

/* „Nowe zajęcia" — morski. Każdy z trzech przycisków obsługi ma własny kolor,
   bo w pasku pełnym pozycji sam napis to za mało, żeby trafić w ten właściwy
   bez czytania. Reguły powtórzone dla `is-scrolled` z tego samego powodu,
   co przy czerwonym: nagłówek po przewinięciu przemalowuje pozycje na granat. */
.nav .nav-cta-teal,
.site-header.is-scrolled .nav .nav-cta-teal { background: var(--teal); color: #fff; }
.nav .nav-cta-teal:hover,
.site-header.is-scrolled .nav .nav-cta-teal:hover { background: var(--teal-dark); color: #fff; }

/* Plakietka z liczbą spraw czekających w panelu, przy pozycji „Panel admina".
   Ta sama co przy zakładkach w panelu — ale strona główna nie ładuje
   mc-common.css, więc regułę trzeba powtórzyć tutaj. Bez tego `var()` z nieznaną
   zmienną po cichu wychodzi na przezroczyste i plakietki po prostu nie widać. */
.nav .tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--brick);
  color: #fff;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* Na kolorowym przycisku czerwone kółko na brązowym tle się gubi — odwracamy
   je: biały krążek z ceglastym napisem. Ta sama sztuczka co w mc-common.css. */
.nav .nav-cta .tab-badge { background: #fff; color: var(--brick); }
/* `display:inline-grid` wyżej to reguła autorska z klasą — wygrywa
   z domyślnym [hidden]{display:none} przeglądarki, więc bez tego zastrzeżenia
   plakietka świeciłaby „0", kiedy nie ma żadnych spraw. Ta sama pułapka
   co przy .lightbox i .cookie-panel niżej w pliku (mc-common.css ma na to
   globalne [hidden]{display:none!important}, style.css — nie). */
.nav .tab-badge[hidden] { display: none; }

/* Przyciski obsługi stoją obok siebie — bez własnego odstępu skleiłyby się
   w jeden pasek. */
.nav .nav-cta + .nav-cta,
.nav li + li > .nav-cta { margin-left: 6px; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px; height: 40px;
  padding: 9px 8px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 3px; width: 100%;
  background: #fff; border-radius: 3px;
  transition: transform .3s var(--ease), opacity .25s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled .nav-toggle span { background: var(--navy-deep); }
.nav-toggle[aria-expanded="true"] span { background: var(--navy-deep); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(96vh, 860px);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.5s var(--ease), transform 7s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }

.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(42, 65, 89, .62) 0%, rgba(42, 65, 89, .34) 45%, rgba(42, 65, 89, .74) 100%);
}

.hero-content { position: relative; padding-block: 130px 120px; max-width: 810px; }
.hero-kicker {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--sky);
  margin-bottom: 1em;
}
.hero h1 { color: #fff; text-shadow: 0 3px 26px rgba(20, 32, 46, .4); margin-bottom: .5em; }
.hero-lead {
  color: rgba(255, 255, 255, .95);
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  max-width: 610px;
  margin-bottom: 2em;
  text-shadow: 0 2px 16px rgba(20, 32, 46, .35);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-dots {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.hero-dots button {
  width: 11px; height: 11px; padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.hero-dots button.is-active { background: #fff; transform: scale(1.35); }

.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 1; }
.hero-wave svg { width: 100%; height: 90px; display: block; }
.hero-wave path { fill: var(--cream); }

/* ==========================================================================
   FAKTY
   ========================================================================== */
.facts { background: var(--cream); padding: clamp(30px, 4vw, 46px) 0 clamp(10px, 2vw, 18px); }
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.fact {
  text-align: center;
  padding: 26px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fact-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.fact-label { display: block; font-size: .93rem; color: var(--muted); margin-top: .35em; }

/* ==========================================================================
   SEKCJE DWUKOLUMNOWE
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }

.split-text h2 { margin-bottom: .55em; }
.split-text p { color: #46525F; }

.signature {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--wood-dark);
  margin-top: 1.6em;
}

.split-media { position: relative; }
.split-media > img:first-child {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.split-media-sm {
  position: absolute;
  right: -22px; bottom: -34px;
  width: 46%;
  border-radius: var(--radius-lg);
  border: 7px solid var(--cream);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.section-alt .split-media-sm { border-color: var(--cream-deep); }

.check-list { margin: 0 0 1.4em; }
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: .55em;
  color: #46525F;
}
.check-list li::before {
  content: "";
  position: absolute; left: 4px; top: .58em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--wood);
  box-shadow: 0 0 0 5px rgba(201, 168, 124, .22);
}

.note { font-size: .95rem; color: var(--muted); }

/* ==========================================================================
   KARTY
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.card-img { aspect-ratio: 3 / 2; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--muted); font-size: .98rem; flex: 1; }
.card-link { font-family: var(--font-head); font-weight: 600; color: var(--wood-dark); }
.card-link:hover { color: var(--navy); }

/* ==========================================================================
   STREFY
   ========================================================================== */
.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 28px;
}
.zone h3 { margin: 1em 0 .35em; }
.zone p { color: var(--muted); font-size: .97rem; margin: 0; }
.zone-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.zone-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.zone:hover .zone-img img { transform: scale(1.05); }

/* ==========================================================================
   OFERTA / URODZINKI
   ========================================================================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
  margin-bottom: clamp(40px, 5vw, 62px);
}
.offer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.offer:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.offer-icon {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto 18px;
  font-size: 1.7rem;
  border-radius: 50%;
  background: var(--brand-pale);
}
.offer p { color: var(--muted); font-size: .97rem; margin: 0; }
.offer-link { display: inline-block; margin-top: 16px; }

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 50px) clamp(28px, 4vw, 58px);
  box-shadow: var(--shadow);
}
.cta-band h3 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(233, 240, 246, .9); margin: 0; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* ==========================================================================
   CENNIK
   ========================================================================== */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  max-width: 860px;
  margin-inline: auto;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 34px 34px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price-card h3 { color: var(--brand-deep); margin-bottom: .9em; }
.price-card-featured {
  background: linear-gradient(160deg, #fff 0%, var(--brand-pale) 100%);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: var(--brand-deep); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em;
  padding: .45em 1.15em; border-radius: 999px;
  box-shadow: 0 5px 14px rgba(62, 124, 137, .32);
}

/* Wiersz ceny: nazwa — kropkowana linia — kwota */
.price-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0;
  font-size: 1.06rem;
}
.price-list li + li { border-top: 1px solid rgba(147, 199, 207, .3); }
.price-time { color: var(--muted); white-space: nowrap; }
.price-dot {
  flex: 1;
  border-bottom: 2px dotted rgba(147, 199, 207, .7);
  transform: translateY(-4px);
}
.price-amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
  white-space: nowrap;
}

/* Pasek zniżek */
.discounts {
  max-width: 860px;
  margin: 30px auto 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 32px clamp(24px, 4vw, 44px);
  color: #fff;
  box-shadow: var(--shadow);
}
.discounts h3 {
  color: #fff;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
}
.discount-list {
  max-width: 560px;
  margin-inline: auto;
}
.discount-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.discount-label { font-size: .97rem; color: rgba(255, 255, 255, .92); }
.discount-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  white-space: nowrap;
}

.price-note { text-align: center; margin: 34px auto 0; max-width: 640px; color: var(--muted); }

/* ==========================================================================
   OFERTY
   Prosta lista tytułów, bez kafelków. Gotowe pozycje są odnośnikami,
   przygotowywane zostają zwykłym tekstem — nie ma czego kliknąć.
   ========================================================================== */
.oferty {
  max-width: 520px;
  margin-inline: auto;
}
.oferty li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
}
.oferty li + li { border-top: 1px solid var(--line); }

.oferty a,
.oferta-wkrotce {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 600;
}
.oferty a { color: var(--navy-deep); }
.oferty a:hover { color: var(--wood-dark); }

.oferta-ikona {
  flex: none;
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oferta-wkrotce { color: var(--muted); }
.oferta-wkrotce em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: .92rem;
  color: var(--muted);
  opacity: .8;
}

.oferty-stopka {
  text-align: center;
  margin: 34px auto 0;
  max-width: 640px;
  color: var(--muted);
  font-size: .96rem;
}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.gallery-item {
  padding: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(42, 65, 89, 0);
  transition: background-color .3s var(--ease);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { background: rgba(42, 65, 89, .22); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 34, 46, .93);
  padding: 5vh 6vw;
  opacity: 0;
  transition: opacity .28s var(--ease);
}
/* KLUCZOWE: display:flex powyzej nadpisuje domyslne [hidden]{display:none},
   przez co zamknieta nakladka wisiala nad strona i przechwytywala klikniecia. */
.lightbox[hidden] { display: none; }

.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: 100%; max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  color: #fff;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: background-color .2s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox-close { top: 22px; right: 24px; width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.4rem; line-height: 1; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.contact-list { margin: 0 0 30px; }
.contact-list > div { padding: 16px 0; border-bottom: 1px solid rgba(169, 198, 221, .22); }
.contact-list > div:last-child { border-bottom: 0; }
.contact-list dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: .45em;
}
.contact-list dd { margin: 0; font-size: 1.05rem; }
.map-link { display: inline-block; margin-top: .5em; font-size: .93rem; font-weight: 600; }
.social { display: flex; gap: 12px; }

/* ---------- Ikony social media ----------
   Te same okrągłe przyciski w sekcji kontaktu i w stopce. */
.social-link {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(169, 198, 221, .16);
  color: var(--sky);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social-link svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.social-link:hover,
.social-link:focus-visible {
  background: var(--sky);
  color: var(--navy-deep);
  transform: translateY(-2px);
}

.access-note {
  background: rgba(169, 198, 221, .13);
  border-left: 4px solid var(--sky);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  font-size: .97rem;
  color: rgba(233, 240, 246, .93);
}
.access-note strong { color: #fff; }

.hours-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow);
}
.hours-card h3 { color: var(--navy-deep); margin-bottom: .8em; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  font-size: .99rem;
}
.hours li:last-child { border-bottom: 0; }
.hours li.is-weekend { font-weight: 700; color: var(--navy); }
.hours li span:last-child { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }

/* Dzień zamknięty i dzień dzisiejszy. Godziny bierzemy z wizytówki Google,
   więc „nieczynne" nie jest już wyjątkiem, który zdarza się raz na rok —
   musi się dać odczytać jednym spojrzeniem. Dzisiejszy wiersz dostaje kropkę
   przed nazwą dnia, a nie samo pogrubienie: pogrubienie zajmuje już weekend. */
.hours li.is-closed span:last-child { color: var(--muted); font-weight: 500; }

/* Wyjątek od tygodniowego grafiku — dzień wykluczony w panelu. Godziny
   zostają widoczne (grafik z wizytówki się nie zmienił), ale przekreślone,
   żeby nikt nie odczytał ich jako obowiązujących w tę konkretną datę.

   Znak `>` jest tu konieczny: adnotacja siedzi w środku pierwszego <span>,
   więc sama też jest „ostatnim dzieckiem" swojego rodzica. Bez ograniczenia
   do bezpośrednich dzieci przekreślenie łapało również ją — czyli dokładnie
   ten napis, który ma być czytelny. */
.hours li.has-wyjatek > span:last-child {
  text-decoration: line-through;
  text-decoration-color: var(--brick);
  color: var(--muted);
  font-weight: 500;
}
.hours-wyjatek {
  display: block;
  font-size: .8rem;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--brick);
  margin-top: 1px;
  /* Reguła wyżej ustawia dniom `nowrap` — dla zdania z datą to za mało
     miejsca na wąskim ekranie. */
  white-space: normal;
  text-decoration: none;
}
.hours li.is-today { color: var(--brand-deep); }
.hours li.is-today span:first-child::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--brand-deep);
  vertical-align: middle;
}
.hours-note { margin: 20px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ==========================================================================
   STOPKA
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: rgba(233, 240, 246, .82); padding: clamp(52px, 6vw, 76px) 0 0; }
.site-footer h4 { color: #fff; margin-bottom: 1em; font-size: .95rem; letter-spacing: .06em; }
.site-footer a { color: rgba(233, 240, 246, .82); }
.site-footer a:hover { color: var(--sky); }

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr .7fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
}
.footer-brand .footer-logo { font-size: 1.9rem; color: #fff; margin-bottom: 18px; }
.footer-tagline { font-family: var(--font-head); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.footer-nav li { margin-bottom: .5em; }
.footer-contact p { margin-bottom: .8em; font-size: .96rem; }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.site-footer .social-link { color: rgba(233, 240, 246, .82); }
.site-footer .social-link:hover,
.site-footer .social-link:focus-visible { color: var(--navy-deep); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 22px;
}
.footer-bottom p { margin: 0; font-size: .88rem; color: rgba(233, 240, 246, .6); text-align: center; }
.footer-legal { margin-top: .5em !important; }
.footer-legal .link-button { color: rgba(233, 240, 246, .6); }
.footer-legal .link-button:hover { color: var(--sky); }

/* ==========================================================================
   ZGODY NA CIASTECZKA
   ========================================================================== */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  padding: 16px;
  animation: cookie-wjazd .35s var(--ease) both;
}
/* Na wszelki wypadek, gdyby kiedyś ta reguła dostała własne display —
   patrz wyjaśnienie przy .cookie-panel[hidden] wyżej w pliku. */
.cookie-banner[hidden] { display: none; }
@keyframes cookie-wjazd {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner-box {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
  /* na bardzo niskich ekranach baner przewija się sam, zamiast
     wychodzić poza górną krawędź */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.cookie-banner-text { flex: 1 1 380px; }
.cookie-banner-text h2 { font-size: 1.18rem; color: var(--navy-deep); margin-bottom: .35em; }
.cookie-banner-text p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--muted); }

.cookie-banner-actions {
  flex: 0 1 auto;
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* Przyciski „akceptuję" i „odrzucam" muszą wyglądać tak samo — odmowa
   nie może być trudniejsza od zgody. */
.cookie-btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .93rem;
  padding: .75em 1.5em;
  border: 2px solid transparent;   /* żeby wszystkie warianty miały tę samą wysokość */
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cookie-btn-main {
  background: var(--wood);
  color: #fff;
}
.cookie-btn-main:hover { background: var(--wood-dark); color: #fff; }

.cookie-btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.cookie-btn-ghost:hover { border-color: var(--navy); color: var(--navy-deep); }

/* ---------- Okno ustawień ---------- */
.cookie-panel {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(42, 65, 89, .58);
  overflow-y: auto;
}
/* Bez tego atrybut hidden nic nie daje: powyższe display:grid jest
   regułą autorską i wygrywa z domyślnym [hidden]{display:none}
   przeglądarki, więc okno zostawałoby na ekranie na stałe.
   Ten sam mechanizm psuł kiedyś .lightbox — patrz niżej w pliku. */
.cookie-panel[hidden] { display: none; }

body.cookie-open { overflow: hidden; }

/* Okno jest kolumną: nagłówek i przyciski stoją w miejscu, przewija się
   tylko środek. Inaczej na niższych ekranach przyciski lądują poniżej
   krawędzi i nie da się do nich dojść. */
.cookie-panel-box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cookie-panel-head {
  flex: none;
  padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 38px) 0;
}
.cookie-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;          /* bez tego element flex nie kurczy się poniżej
                             swojej treści i wypycha przyciski poza okno */
  overflow-y: auto;
  padding: 0 clamp(22px, 4vw, 38px);
  -webkit-overflow-scrolling: touch;
}

.cookie-panel-box h2 { font-size: 1.4rem; color: var(--navy-deep); margin-bottom: .4em; padding-right: 40px; }
.cookie-panel-lead { font-size: .95rem; color: var(--muted); margin-bottom: 1.4em; }

.cookie-panel-close {
  position: absolute; top: 16px; right: 18px;
  z-index: 1;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1;
  border-radius: 50%;
  color: var(--navy);
  transition: background-color .2s var(--ease);
}
.cookie-panel-close:hover { background: var(--sand); }

.cookie-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.cookie-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: .5em;
}
.cookie-cat-head h3 { font-size: 1.05rem; color: var(--navy-deep); margin: 0; }
.cookie-cat p { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0; }

.cookie-always {
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-pale);
  padding: .35em .9em;
  border-radius: 999px;
  white-space: nowrap;
}

.cookie-details { margin: 1em 0 0; font-size: .84rem; }
.cookie-details > div {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--line);
}
.cookie-details dt { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.cookie-details dd { margin: 0; color: var(--muted); }

/* ---------- Przełącznik ---------- */
.cookie-switch {
  position: relative;
  flex: none;
  display: inline-flex; align-items: center;
  cursor: pointer;
}
.cookie-switch input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: pointer;
}
.cookie-switch-track {
  width: 52px; height: 30px;
  border-radius: 999px;
  background: #CFC7BC;
  transition: background-color .22s var(--ease);
}
.cookie-switch-track::after {
  content: "";
  display: block;
  width: 24px; height: 24px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease);
}
.cookie-switch input:checked ~ .cookie-switch-track { background: var(--brand-deep); }
.cookie-switch input:checked ~ .cookie-switch-track::after { transform: translateX(22px); }
.cookie-switch input:focus-visible ~ .cookie-switch-track {
  outline: 3px solid var(--wood);
  outline-offset: 3px;
}

/* Przyciski przypięte do dołu okna — zawsze widoczne, niezależnie
   od tego, ile treści jest wyżej. */
.cookie-panel-actions {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 18px clamp(22px, 4vw, 38px) clamp(22px, 4vw, 30px);
  border-top: 1px solid var(--line);
  background: var(--cream);
}

@media (max-width: 560px) {
  .cookie-banner { padding: 10px; }
  .cookie-banner-box { padding: 20px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .cookie-btn,
  .cookie-panel-actions .cookie-btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- Powrót na górę ----------
   Przycisk ma kształt chmurki z logo. Po jej konturze biegnie
   linia pokazująca, ile strony zostało już przewinięte. */
.to-top {
  /* chmurka nie wypełnia całego pola przycisku, więc odsuwamy go
     od rogu odrobinę mniej — optycznie wychodzi na te same 22 px */
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 66px; height: 46px;
  padding: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.to-top-cloud {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 7px 16px rgba(44, 53, 64, .26));
}

.to-top-fill { fill: var(--wood); transition: fill .2s var(--ease); }
.to-top:hover .to-top-fill { fill: var(--wood-dark); }

.to-top-track, .to-top-bar { fill: none; stroke-width: 2.6; }
.to-top-track { stroke: rgba(255, 255, 255, .32); }
.to-top-bar {
  stroke: #fff;
  stroke-linecap: round;
  /* długość konturu chmurki liczy JS przez getTotalLength();
     wartości poniżej to tylko stan wyjściowy, zanim skrypt ruszy */
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}

.to-top-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.to-top:hover .to-top-arrow { transform: translateY(-2px); }

/* ---------- Animacja pojawiania ----------
   Stan ukryty obowiązuje tylko wtedy, gdy JavaScript wystartował
   (klasa .js na <html>). Bez JS treść jest po prostu widoczna. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 78px; }

  /* Przycisk musi zostać NAD rozwiniętym menu — inaczej menu zasłania własny
     krzyżyk i nie ma czym go zamknąć. */
  .nav-toggle { display: flex; position: relative; z-index: 3; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2;
    background: var(--cream);
    box-shadow: var(--shadow-lg);
    padding: 88px 24px 32px;
    transform: translateY(-104%);
    transition: transform .38s var(--ease);
    /* `dvh`, nie `vh`: `100vh` liczy się razem z paskiem adresu przeglądarki,
       więc menu było wyższe niż to, co faktycznie widać — dolne pozycje
       lądowały pod krawędzią ekranu i nie dało się do nich dojechać.
       Przy `dvh` menu kończy się tam, gdzie kończy się widok, a nadmiar
       treści zaczyna się normalnie przewijać. */
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Bez tego przewijanie wewnątrz menu „przelewa się" na stronę pod spodem
       i po dojechaniu do końca listy widok odbija w górę. */
    overscroll-behavior: contain;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .nav.is-open { transform: translateY(0); }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }

  .nav a,
  .nav .nav-btn { color: var(--navy-deep); padding: .85em 1em; font-size: 1.08rem; border-radius: var(--radius); }
  /* Przycisk („Wyloguj się") domyślnie centruje tekst i zwęża się do napisu —
     sąsiednie pozycje są do lewej i na całą szerokość, więc dorównujemy,
     żeby dało się trafić w całą pozycję, a nie w sam napis. */
  .nav .nav-btn { width: 100%; text-align: left; }
  .nav a:hover, .nav a.is-current,
  .nav .nav-btn:hover { background: var(--sky-pale); }
  .nav .nav-cta { margin: 10px 0 0; text-align: center; }

  /* Przyciemnienie pod menu — widać, że wystarczy dotknąć obok, żeby zamknąć. */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(42, 65, 89, .38); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  body.nav-open .nav-backdrop { opacity: 1; }

  /* Rozwinięte menu przechodzi nad wszystko, także nad baner ciasteczek
     (z-index 200), który dotąd zasłaniał jego dolną połowę. */
  body.nav-open .site-header { z-index: 300; }

  /* NAJWAŻNIEJSZE W TYM BLOKU.
     Nagłówek po przewinięciu dostaje `backdrop-filter`, a każdy filtr tworzy
     BLOK ZAWIERAJĄCY dla potomków `position:fixed`. Menu jest dzieckiem
     nagłówka, więc od tego momentu przestawało być przypięte do okna,
     a zaczynało do paska nagłówka — i otwarte w połowie strony potrafiło
     wylądować poza ekranem. Na czas otwarcia zdejmujemy filtr: menu wraca
     do okna i zachowuje się tak samo niezależnie od tego, jak daleko
     użytkownik przewinął. Rozmycia i tak nie widać, bo menu przykrywa
     nagłówek prawie nieprzezroczystym tłem. */
  body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Krzyżyk dostaje na czas otwarcia własne tło w kolorze menu. Tła nagłówka
     użyć się nie da: menu jest jego dzieckiem, więc maluje się NAD nim —
     bez tej podkładki przewijane pozycje przejeżdżałyby tuż przy przycisku. */
  body.nav-open .nav-toggle {
    background: var(--cream);
    border-radius: 12px;
    box-shadow: 0 0 0 8px var(--cream);
  }

  /* Blokadę przewijania robi JavaScript (unieruchomienie <body> z zapamiętaną
     pozycją) — `overflow:hidden` na <html> bywało na telefonach nieskuteczne
     i przesuwało menu poza ekran. Tu zostaje tylko wyciszenie „gumowego"
     odbicia na krawędziach. */
  html.nav-open, body.nav-open { overscroll-behavior: none; }

  .split { grid-template-columns: 1fr; }
  .split-reverse .split-text,
  .split-reverse .split-media { order: 0; }
  .split-media { max-width: 460px; margin-inline: auto; }
  .split-media-sm { right: -10px; bottom: -22px; }

  .hero { min-height: auto; }
  .hero-content { padding-block: 118px 132px; }
  .hero-dots { bottom: 92px; }

  .cta-band { text-align: center; justify-content: center; }
  .cta-band-actions { justify-content: center; width: 100%; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }

  .facts-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fact { padding: 20px 12px; border-radius: var(--radius); }

  .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Oba przyciski obok siebie ściskały tekst do połowy szerokości
     ekranu i łamały go na kilka linijek. Zamiast tego stawiamy je
     jeden pod drugim, każdy naturalnej szerokości i wyśrodkowany. */
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { text-align: center; }

  .lightbox { padding: 3vh 3vw; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.9rem; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }

  .split-media-sm { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Dostępność: ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-slide { transition: opacity .3s linear; transform: none; }
}

/* ---------- Druk ---------- */
@media print {
  .site-header, .hero-dots, .to-top, .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}