@import url('/css/fonty.css');

/* ─────────────────────────────────────────────────────────────
   Cała strona jest odwzorowaniem makiety. Makieta ma kanwę 860 px,
   więc każdy wymiar zapisany jest jako liczba jednostek makiety:
   calc(54 * var(--u)). Zmiana --u skaluje całość równocześnie —
   to jedyne pokrętło, którym reguluje się wielkość strony.
   ───────────────────────────────────────────────────────────── */
:root {
  --u: clamp(1.05px, 100vw / 1150, 1.3px);
  --kontener: 1440px;

  --papier: #ffffff;
  --papier-cieply: #f3f1ed;
  --tusz: #111111;
  --tusz-72: rgba(0, 0, 0, 0.72);
  --tusz-62: rgba(0, 0, 0, 0.62);
  --tusz-60: rgba(0, 0, 0, 0.6);
  --tusz-55: rgba(0, 0, 0, 0.55);
  --tusz-45: rgba(0, 0, 0, 0.45);
  --linia: rgba(0, 0, 0, 0.12);
  --linia-mocna: rgba(0, 0, 0, 0.18);

  --display: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Jost', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tusz); font-family: var(--ui); overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-appearance: none; appearance: none; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Treść mieszka w kontenerze 1440 px. Tła i kadry pełnoekranowe wychodzą poza
   niego pseudoelementem albo ujemnym insetem — dzięki temu żaden szablon nie
   potrzebuje dodatkowego opakowania. */
.strona { width: 100%; }
.naglowek, .pas-naglowka, .pas-filtrow, .mozaika, .galeria, .srodek, .duet,
.sekcja, .marki, .opinie-blok, .kontakt, .dane-kontaktowe, .sesja-opis,
.pasmo, .pasmo-trzy, .wezwanie-cieple, .hero, .wolanie, .stopka {
  width: min(var(--kontener), 100%);
  margin-inline: auto;
}

/* Pełna szerokość okna dla tła sekcji */
.na-calosc::before {
  content: ''; position: absolute; z-index: 0;
  inset: 0 calc(50% - 50vw);
}
.sekcja--cieply, .marki, .wezwanie-cieple { position: relative; }
.sekcja--cieply::before, .marki::before, .wezwanie-cieple::before {
  content: ''; position: absolute; inset: 0 calc(50% - 50vw);
  background: var(--papier-cieply); z-index: 0;
}
.sekcja--cieply > *, .marki > *, .wezwanie-cieple > * { position: relative; z-index: 1; }

.tylko-czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pomin { position: absolute; left: 0; top: 0; z-index: 100; transform: translateY(-150%); background: var(--tusz); color: #fff; padding: 0.75rem 1.25rem; }
.pomin:focus { transform: translateY(0); }

/* ── Skala typograficzna wprost z makiety ───────────────────── */
.t-logo   { font: 500 calc(17 * var(--u)) / 1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; }
.t-logo-s { font: 400 calc(14 * var(--u)) / 1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; }
.t-hero   { font: 400 calc(54 * var(--u)) / 1.06 var(--display); }
.t-hero-s { font: 400 calc(44 * var(--u)) / 1.15 var(--display); }
.t-h1     { font: 400 calc(42 * var(--u)) / 1.15 var(--display); }
.t-h1-s   { font: 400 calc(37 * var(--u)) / 1.15 var(--display); }
.t-h2     { font: 400 calc(30 * var(--u)) / 1.2 var(--display); }
.t-h3     { font: 400 calc(26 * var(--u)) / 1.15 var(--display); }
.t-h4     { font: 400 calc(24 * var(--u)) / 1.15 var(--display); }
.t-h5     { font: 400 calc(20 * var(--u)) / 1.15 var(--display); }
.t-h6     { font: 400 calc(17 * var(--u)) / 1.15 var(--display); }
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd { margin: 0; }

.p       { font: 300 calc(13.5 * var(--u)) / 1.75 var(--ui); color: var(--tusz-62); }
.p-hero  { font: 300 calc(13.5 * var(--u)) / 1.8 var(--ui); }
.p-s     { font: 300 calc(12.5 * var(--u)) / 1.7 var(--ui); color: var(--tusz-60); }
.p + .p, .p-s + .p-s { margin-top: calc(10 * var(--u)); }

.lbl {
  font: 400 calc(8.5 * var(--u)) / 1 var(--ui);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tusz-45);
}
.lbl--tusz { color: var(--tusz); }
.lbl--jasny { color: rgba(255, 255, 255, 0.7); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 400 calc(8.5 * var(--u)) / 1 var(--ui);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border: 1px solid currentColor;
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}
.btn--pelny { background: #fff; color: var(--tusz); border-color: #fff; }
.btn--pelny:hover { background: transparent; color: #fff; border-color: #fff; }
.btn--tusz { background: var(--tusz); color: #fff; border-color: var(--tusz); }
.btn--tusz:hover { background: transparent; color: var(--tusz); }
.btn--jasny { color: #fff; }
.btn--jasny:hover { background: #fff; color: var(--tusz); }
.btn:not(.btn--pelny):not(.btn--tusz):not(.btn--jasny):hover { background: var(--tusz); color: #fff; border-color: var(--tusz); }

/* Podkreślony link-etykieta z makiety */
.lnk { display: inline-block; border-bottom: 1px solid; padding-bottom: calc(3 * var(--u)); color: var(--tusz); }
.lnk:hover { border-bottom-color: transparent; }

/* ── Kadry ──────────────────────────────────────────────────── */
.kadr { position: relative; overflow: hidden; background: var(--papier-cieply); display: block; width: 100%; }
.kadr img, .kadr picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.kadr img { transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
a.kadr:hover img, button.kadr:hover img { transform: scale(1.03); }
body.cb .kadr img { filter: grayscale(1) contrast(1.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Nagłówek i stopka (wspólne dla wszystkich podstron) ────── */
.naglowek {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(22 * var(--u)) calc(40 * var(--u));
  background: var(--papier); position: relative; z-index: 20;
}
.naglowek__prawa { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.menu { display: flex; gap: calc(26 * var(--u)); }
.menu a, .telefon {
  font: 400 calc(10 * var(--u)) / 1 var(--ui);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tusz-55);
}
.menu a:hover, .telefon:hover { color: currentColor; opacity: 1; }
.menu a[aria-current='page'] { color: var(--tusz); border-bottom: 1px solid; padding-bottom: calc(3 * var(--u)); }

.hamburger { display: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); align-items: center; justify-content: center; }
.hamburger span, .hamburger span::before, .hamburger span::after { display: block; width: calc(20 * var(--u)); height: 1px; background: currentColor; }
.hamburger span { position: relative; transition: background-color 200ms ease; }
.hamburger span::before, .hamburger span::after { content: ''; position: absolute; left: 0; transition: transform 300ms ease; }
.hamburger span::before { top: calc(-6 * var(--u)); }
.hamburger span::after { top: calc(6 * var(--u)); }
body.menu-otwarte .hamburger span { background: transparent; }
body.menu-otwarte .hamburger span::before { transform: translateY(calc(6 * var(--u))) rotate(45deg); }
body.menu-otwarte .hamburger span::after { transform: translateY(calc(-6 * var(--u))) rotate(-45deg); }
.menu-mobilne { display: none; }

.stopka {
  padding: calc(40 * var(--u));
  display: flex; justify-content: space-between; align-items: flex-start; gap: calc(40 * var(--u));
  border-top: 1px solid var(--linia);
}
.stopka__kolumny { display: flex; gap: calc(44 * var(--u)); }
.stopka__kolumna { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.stopka__kolumna a:hover { color: var(--tusz); }

/* ── Sekcje: wymiary z makiety ──────────────────────────────── */
.hero { position: relative; height: calc(560 * var(--u)); }
.wolanie { position: relative; }
.hero > .kadr { position: absolute; inset: 0 calc(50% - 50vw); width: auto; height: 100%; }
.hero__zaslona { position: absolute; inset: 0 calc(50% - 50vw); background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.46) 38%, rgba(0,0,0,.72) 100%); }
.hero__tresc {
  position: absolute; left: 0; right: 0; bottom: calc(52 * var(--u));
  padding: 0 calc(44 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); color: #fff;
}
.hero__tresc .p-hero { color: rgba(255, 255, 255, 0.82); max-width: calc(480 * var(--u)); }
.hero__przyciski { display: flex; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }

/* wariant podstrony oferty (4b) */
.hero--sesja { height: calc(492 * var(--u)); }
.hero--sesja .hero__zaslona { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.7) 100%); }
.hero--sesja .hero__tresc { bottom: calc(49 * var(--u)); padding: 0 calc(42 * var(--u)); gap: calc(20 * var(--u)); }
.hero--sesja .p-hero { color: rgba(255, 255, 255, 0.85); max-width: calc(516 * var(--u)); }

.pas-naglowka {
  padding: calc(58 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u));
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u));
}
.pas-naglowka__lewa { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }

.filtry { display: flex; gap: calc(18 * var(--u)); flex-wrap: wrap; }
.filtry a { color: var(--tusz-45); }
.filtry a:hover { color: var(--tusz); }
.filtry a[aria-current='true'] { color: var(--tusz); border-bottom: 1px solid; padding-bottom: calc(3 * var(--u)); }

/* mozaika na stronie głównej (3a) */
.mozaika { display: grid; gap: calc(8 * var(--u)); padding-top: calc(14 * var(--u)); }
.rzad { display: grid; gap: calc(8 * var(--u)); }
.rzad--a { grid-template-columns: 1.55fr 1fr; height: calc(520 * var(--u)); }
.rzad--b { grid-template-columns: 1fr 1.25fr; height: calc(360 * var(--u)); }
.rzad--c { grid-template-columns: 1.25fr 1fr; height: calc(360 * var(--u)); }
.rzad__kolumna { display: grid; grid-template-rows: 1fr 1fr; gap: calc(8 * var(--u)); min-height: 0; }
.rzad .kadr { height: 100%; }

.srodek { padding: calc(28 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u)); display: flex; justify-content: center; }

.duet { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linia); align-items: stretch; }
.duet__tekst { padding: calc(60 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); justify-content: center; align-items: flex-start; }
.duet__kadr { height: calc(470 * var(--u)); }

.sekcja { padding: calc(64 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(26 * var(--u)); }
.sekcja--cieply { background: var(--papier-cieply); }
.sekcja__naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u)); }

.karty { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
.karta { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.karta .kadr { height: calc(300 * var(--u)); }
.karta__tresc { display: flex; flex-direction: column; gap: calc(8 * var(--u)); align-items: flex-start; }

.marki { background: var(--papier-cieply); padding: calc(60 * var(--u)) calc(40 * var(--u)); display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(48 * var(--u)); align-items: center; }
.marki__tekst { display: flex; flex-direction: column; gap: calc(16 * var(--u)); align-items: flex-start; }
.marki .kadr { height: calc(330 * var(--u)); }

.opinie { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); }
.opinie--dwie { grid-template-columns: 1fr 1fr; }
.opinia { display: flex; flex-direction: column; gap: calc(12 * var(--u)); border-top: 1px solid var(--linia-mocna); padding-top: calc(14 * var(--u)); }

.wolanie { height: calc(400 * var(--u)); }
.wolanie > .kadr { position: absolute; inset: 0 calc(50% - 50vw); width: auto; height: 100%; }
.wolanie__zaslona { position: absolute; inset: 0 calc(50% - 50vw); background: rgba(0, 0, 0, 0.52); }
.wolanie__tresc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(20 * var(--u)); color: #fff; text-align: center; padding: 0 calc(60 * var(--u)); }

/* ── Portfolio (4a) ─────────────────────────────────────────── */
.pas-filtrow {
  position: relative;
  margin: 0 auto calc(27 * var(--u));
  padding: calc(20 * var(--u)) calc(42 * var(--u)) 0;
  display: flex; justify-content: space-between; align-items: center; gap: calc(25 * var(--u));
}
/* kreska nad filtrami jest wcięta tak jak w makiecie — stąd pseudoelement
   zamiast border-top, który biegłby przez całą szerokość kontenera */
.pas-filtrow::before {
  content: ''; position: absolute; top: 0;
  left: calc(42 * var(--u)); right: calc(42 * var(--u));
  border-top: 1px solid var(--linia);
}
.galeria { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(3, 1fr); gap: calc(7 * var(--u)); padding: 0 calc(7 * var(--u)) calc(7 * var(--u)); grid-auto-rows: calc(180 * var(--u)); }
.galeria .kadr { height: 100%; }
.galeria__pusto { grid-column: 1 / -1; padding: calc(60 * var(--u)) 0; text-align: center; }
/* rytm kafelków z makiety: co dziewiąty kadr zajmuje dwa pola */
.galeria > *:nth-child(9n + 1) { grid-column: span 2; grid-row: span 2; }
.galeria > *:nth-child(9n + 6) { grid-column: span 2; }

.wezwanie-cieple { background: var(--papier-cieply); padding: calc(56 * var(--u)) calc(42 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); align-items: center; text-align: center; }

/* ── Oferta: podstrona sesji (4b) ───────────────────────────── */
.sesja-opis { padding: calc(64 * var(--u)) calc(42 * var(--u)); display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(54 * var(--u)); }
.sesja-opis__tekst { display: flex; flex-direction: column; gap: calc(17 * var(--u)); }
.parametry { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.parametr { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid var(--linia-mocna); padding-top: calc(15 * var(--u)); }
.parametr:first-child { border-top-color: var(--tusz); }

.pasmo { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(7 * var(--u)); padding: 0 calc(7 * var(--u)); height: calc(405 * var(--u)); }
.pasmo__kolumna { display: grid; grid-template-rows: 1fr 1fr; gap: calc(7 * var(--u)); min-height: 0; }
.pasmo .kadr { height: 100%; }

.kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(27 * var(--u)); }
.krok { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid var(--linia-mocna); padding-top: calc(15 * var(--u)); }

.pozostale { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(17 * var(--u)); }
.pozostale__karta { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.pozostale .kadr { height: calc(184 * var(--u)); }

/* ── O mnie (4c) ────────────────────────────────────────────── */
.publikacje { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); }
.publikacja { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid var(--linia-mocna); padding-top: calc(15 * var(--u)); }
.pasmo-trzy { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(7 * var(--u)); padding: 0 calc(7 * var(--u)); height: calc(295 * var(--u)); }
.pasmo-trzy .kadr { height: 100%; }

/* ── Kontakt (4d) ───────────────────────────────────────────── */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linia); align-items: stretch; }
.kontakt__kadr { height: calc(688 * var(--u)); }
.kontakt__panel { padding: calc(59 * var(--u)) calc(42 * var(--u)); display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.formularz { display: flex; flex-direction: column; gap: calc(17 * var(--u)); margin-top: calc(7 * var(--u)); }
.pole { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.pole input, .pole textarea {
  font: 300 calc(13.5 * var(--u)) / 1.6 var(--ui); color: var(--tusz);
  background: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: calc(4 * var(--u)) 0 calc(6 * var(--u)); border-radius: 0;
}
.pole textarea { resize: vertical; min-height: calc(46 * var(--u)); }
.pole input:focus, .pole textarea:focus { outline: none; border-bottom-color: var(--tusz); }
.wybor { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); }
.wybor label { position: relative; display: inline-flex; }
.wybor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wybor span { border-color: rgba(0, 0, 0, 0.22); color: var(--tusz-45); padding: calc(10 * var(--u)) calc(15 * var(--u)); }
.wybor input:checked + span { border-color: var(--tusz); color: var(--tusz); }
.wybor input:focus-visible + span { outline: 2px solid var(--tusz); outline-offset: 2px; }
.miod { position: absolute; left: -9999px; }
.komunikat { border: 1px solid var(--linia-mocna); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.komunikat--blad { border-color: #a3312b; color: #a3312b; }

.dane-kontaktowe {
  padding: calc(54 * var(--u)) calc(42 * var(--u));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u));
  border-top: 1px solid var(--linia);
}
.dana { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }

/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(10, 9, 8, 0.95); align-items: center; justify-content: center; }
.lightbox[open] { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86svh; width: auto; height: auto; object-fit: contain; }
body.cb .lightbox img { filter: grayscale(1) contrast(1.06); }
.lightbox__pasek { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(24 * var(--u)) calc(30 * var(--u)); color: rgba(255,255,255,.75); }
.lightbox__nawigacja { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.lightbox__nawigacja button { pointer-events: auto; padding: calc(30 * var(--u)); color: rgba(255,255,255,.7); font-size: calc(20 * var(--u)); }
.lightbox__nawigacja button:hover, .lightbox__zamknij:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────
   Mobile. Makieta nie zawiera wersji mobilnej, więc układy jedno-
   kolumnowe są dopisane — proporcje i typografia zostają te same.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --u: 1.15px; }

  .naglowek__prawa > .menu, .naglowek__prawa > .telefon { display: none; }
  .hamburger { display: inline-flex; }
  .menu-mobilne {
    position: fixed; inset: 0; z-index: 40; background: var(--papier); color: var(--tusz);
    display: flex; flex-direction: column; justify-content: center; gap: calc(24 * var(--u));
    padding: calc(80 * var(--u)) calc(40 * var(--u));
    opacity: 0; visibility: hidden; transition: opacity 350ms ease, visibility 350ms;
  }
  body.menu-otwarte .menu-mobilne { opacity: 1; visibility: visible; }
  body.menu-otwarte { overflow: hidden; }
  .menu-mobilne a { font: 400 calc(34 * var(--u)) / 1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--tusz); }
  .menu-mobilne .telefon { font-size: calc(11 * var(--u)); color: var(--tusz-55); }

  .hero { height: 78svh; }
  .hero__tresc { padding: 0 calc(28 * var(--u)); bottom: calc(40 * var(--u)); }
  .hero__tresc .t-hero { font-size: calc(40 * var(--u)); }
  .hero--sesja { height: 62svh; }
  .hero--sesja .hero__tresc { padding: 0 calc(28 * var(--u)); }
  .hero__przyciski { flex-wrap: wrap; }

  .pas-naglowka, .sekcja, .marki, .duet__tekst, .kontakt__panel, .dane-kontaktowe,
  .sesja-opis, .wezwanie-cieple, .stopka, .srodek {
    padding-left: calc(28 * var(--u)); padding-right: calc(28 * var(--u));
  }
  .pas-naglowka, .sekcja__naglowek { flex-direction: column; align-items: flex-start; }
  .pas-filtrow { padding-inline: calc(28 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); }
  .pas-filtrow::before { left: calc(28 * var(--u)); right: calc(28 * var(--u)); }
  .filtry { gap: calc(14 * var(--u)); }

  .rzad--a, .rzad--b, .rzad--c { grid-template-columns: 1fr; height: auto; }
  .rzad__kolumna, .pasmo__kolumna { grid-template-rows: auto; }
  .rzad .kadr, .pasmo .kadr, .pasmo-trzy .kadr, .galeria .kadr { height: auto; aspect-ratio: 4 / 5; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .galeria > *:nth-child(9n + 1), .galeria > *:nth-child(9n + 6) { grid-column: span 2; grid-row: auto; }
  .pasmo, .pasmo-trzy { grid-template-columns: 1fr; height: auto; }

  .duet, .kontakt { grid-template-columns: 1fr; }
  .duet__kadr, .kontakt__kadr { height: auto; aspect-ratio: 4 / 5; }
  .duet--odwrocony .duet__kadr { order: -1; }
  .marki { grid-template-columns: 1fr; }
  .marki .kadr { height: auto; aspect-ratio: 4 / 3; }
  .karty { grid-template-columns: 1fr 1fr; }
  .karta .kadr { height: auto; aspect-ratio: 3 / 4; }
  .opinie, .opinie--dwie, .kroki, .publikacje, .pozostale, .dane-kontaktowe { grid-template-columns: 1fr; }
  .pozostale .kadr { height: auto; aspect-ratio: 3 / 2; }
  .sesja-opis { grid-template-columns: 1fr; gap: calc(34 * var(--u)); }
  .wolanie { height: auto; }
  .wolanie__tresc { position: relative; padding: calc(70 * var(--u)) calc(28 * var(--u)); }
  .stopka { flex-direction: column; gap: calc(28 * var(--u)); }
  .stopka__kolumny { flex-wrap: wrap; gap: calc(28 * var(--u)); }
}

@media (max-width: 480px) {
  .karty, .galeria { grid-template-columns: 1fr; }
  .galeria > *:nth-child(9n + 1), .galeria > *:nth-child(9n + 6) { grid-column: auto; }
}

.strona { position: relative; }

/* ── Zaślepka ───────────────────────────────────────────────── */
/* Bez zdjęcia: jasna, czysto typograficzna. Ze zdjęciem: kadr na całość
   z przyciemnieniem i białym tekstem. */
.zaslepka { position: relative; min-height: 100svh; display: flex; background: var(--papier-cieply); }
.zaslepka__tresc {
  position: relative; z-index: 1; flex: 1;
  width: min(var(--kontener), 100%); margin-inline: auto;
  padding: calc(40 * var(--u)) calc(44 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(48 * var(--u));
}
.zaslepka__srodek { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); max-width: calc(620 * var(--u)); }
.zaslepka__dol { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.zaslepka__dane { font: 300 calc(13.5 * var(--u)) / 1.8 var(--ui); color: var(--tusz-72); }
.zaslepka__dane a:hover { border-bottom: 1px solid; }

.zaslepka--kadr { background: none; color: #fff; }
.zaslepka--kadr > .kadr { position: absolute; inset: 0; width: auto; height: 100%; }
.zaslepka--kadr .zaslepka__zaslona { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.72) 100%); }
.zaslepka--kadr .lbl { color: rgba(255, 255, 255, 0.7); }
.zaslepka--kadr .p, .zaslepka--kadr .zaslepka__dane { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 820px) {
  .zaslepka__tresc { padding: calc(32 * var(--u)) calc(28 * var(--u)); gap: calc(36 * var(--u)); }
  .zaslepka__srodek .t-hero { font-size: calc(40 * var(--u)); }
}