/* Osnowa - strona demonstracyjna Telar
   Kolory: kafle i witraże z klatek schodowych łódzkich kamienic.
   Kroje: Castoro Titling (napisy nad bramą), Albert Sans (tekst) - trzymane lokalnie. */

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

:root {
  color-scheme: light;
  --karta: #FFFFFF;
  --m-kwartal: #D8E1EC;
  --m-podworko: #E8EEF4;
  --m-nasze: #D3E3D8;
  --ciemna-sekcja: #2A1C17;
  --stopka-tlo: #22418A;
  --jasny-tekst: #F3F6F9;
  --mosiadz-tekst: #8E6A33;
  --kobalt: #22418A;
  --kobalt-ciemny: #172E63;
  --fajans: #F3F6F9;
  --fajans-cien: #E3E9F0;
  --espresso: #2A1C17;
  --espresso-drugi: #5E524C;
  --mosiadz: #B58B4C;
  --bluszcz: #3E6B4F;
  --bialy: #FFFFFF;
  --cieply-jasny: #EDE6E1;      /* tekst na ciemnym: czwartki, zdjęcie w bramie */
  --plakietka: #3E6B4F;         /* bluszcz pod białym tekstem - ten sam w obu motywach */
  --cien: rgb(42 28 23 / .12);
  --obwodka: #8E6A33;           /* zaznaczenie z klawiatury: ciemny mosiądz, 4,4 : 1 do tła */
  --obwodka-na-ciemnym: #C9A266;

  --kroj-napis: "Castoro Titling", "Times New Roman", serif;
  --kroj-tekst: "Albert Sans", system-ui, sans-serif;

  --szer: min(1180px, 100% - 2 * var(--margines));
  --margines: clamp(16px, 4vw, 48px);
  --naglowek-h: 64px;
}

/* Ciemny motyw: podwórze nocą - atramentowy granat, kobalt rozjaśniony do światła latarni. */
:root[data-motyw="ciemny"] {
  color-scheme: dark;
  --fajans: #10182B;
  --fajans-cien: #26324F;
  --espresso: #E8EDF4;
  --espresso-drugi: #AEB8C8;
  --kobalt: #8FA8E8;
  --kobalt-ciemny: #B4C6F2;
  --mosiadz: #C9A266;
  --mosiadz-tekst: #C9A266;
  --bluszcz: #7DB394;
  --bialy: #0F1626;
  --karta: #18223B;
  --m-kwartal: #2A3658;
  --m-podworko: #202A45;
  --m-nasze: #25463B;
  --ciemna-sekcja: #0A1020;
  --stopka-tlo: #0A1020;
  --cien: rgb(0 0 0 / .45);
  --obwodka: #C9A266;
}
body { transition: background-color .3s, color .3s; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--naglowek-h); }
body {
  margin: 0;
  background: var(--fajans);
  color: var(--espresso);
  font: 400 1.0625rem/1.65 var(--kroj-tekst);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font-family: var(--kroj-napis); color: var(--kobalt); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: .03em; }
h3 { font-family: var(--kroj-napis); color: var(--kobalt); font-size: 1.25rem; letter-spacing: .05em; }
p { margin: 0 0 1em; }
a { color: var(--kobalt); }
:focus-visible { outline: 3px solid var(--obwodka); outline-offset: 3px; }
.stopka, .czwartki { --obwodka: var(--obwodka-na-ciemnym); }
::selection { background: var(--kobalt); color: var(--bialy); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--kobalt); color: var(--bialy); padding: .5em 1em; }
.pomin:focus { left: 8px; }

.sekcja { width: var(--szer); margin-inline: auto; padding-block: clamp(64px, 10vw, 128px); }

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4em;
  background: var(--kobalt); color: var(--bialy);
  border: 2px solid var(--kobalt); border-radius: 999px;
  font: 600 .95rem/1 var(--kroj-tekst); letter-spacing: .02em; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.przycisk:hover { background: var(--kobalt-ciemny); border-color: var(--kobalt-ciemny); }
.przycisk--obrys { background: transparent; color: var(--kobalt); }
.przycisk--obrys:hover { background: var(--kobalt); color: var(--bialy); }

/* ---------- Nagłówek ---------- */
.naglowek {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--naglowek-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--margines);
  transition: background-color .3s, box-shadow .3s;
}
.naglowek--pelny { background: var(--fajans); box-shadow: 0 1px 0 var(--fajans-cien); }
.naglowek__logo {
  font: 400 1.5rem/1 var(--kroj-napis); letter-spacing: .12em; color: var(--kobalt); text-decoration: none;
  padding-block: 10px; transition: opacity .3s, visibility .3s;
}
/* visibility, nie samo opacity: niewidoczne logo nie może łapać klawisza Tab. */
.naglowek--na-bramie .naglowek__logo { opacity: 0; visibility: hidden; }
.naglowek__nawigacja { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.naglowek__nawigacja a { color: var(--espresso); text-decoration: none; font-weight: 500; font-size: .95rem; padding-block: .6rem; }
.naglowek__nawigacja a:hover { color: var(--kobalt); }
.naglowek__nawigacja .naglowek__cta { color: var(--kobalt); border: 2px solid var(--kobalt); border-radius: 999px; padding: .45em 1em; }
.naglowek__nawigacja .naglowek__cta:hover { background: var(--kobalt); color: var(--bialy); }
.naglowek__przelacznik { display: none; }

@media (max-width: 719px) {
  .naglowek__przelacznik {
    display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; margin-left: auto;
    background: var(--fajans); border: 0; border-radius: 50%; cursor: pointer;
  }
  .naglowek__przelacznik span { display: block; width: 20px; height: 2px; background: var(--kobalt); transition: transform .2s, opacity .2s; }
  .naglowek__przelacznik[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .naglowek__przelacznik[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .naglowek__przelacznik[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .naglowek__nawigacja {
    position: absolute; inset: var(--naglowek-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fajans); padding: .5rem var(--margines) 1.25rem; box-shadow: 0 12px 24px var(--cien);
    display: none;
  }
  .naglowek__nawigacja.otwarta { display: flex; }
  .naglowek__nawigacja a { padding: .8rem 0; border-bottom: 1px solid var(--fajans-cien); font-size: 1.05rem; }
  .naglowek__nawigacja .naglowek__cta { margin-top: .9rem; text-align: center; border-bottom: 2px solid var(--kobalt); }
}

/* ---------- Brama (znak rozpoznawczy) ---------- */
/* Wysokości w svh/lvh: na telefonie pasek adresu przeglądarki chowa się przy przewijaniu.
   Scena ma wysokość małego ekranu (dół z adresem nigdy nie wpada pod pasek), a cała brama -
   dużego, więc chowanie paska nie zmienia długości przejścia. */
.brama { position: relative; background: var(--fajans); }
/* Telefon: gdy pasek adresu się schowa, pod sceną odsłania się pas tła - ciemny jak cień pod tekstem. */
.brama--ruch:not(.brama--boki):not(.brama--pasek) { background: #17100D; }
.brama__scena { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
.brama--ruch { height: 190vh; height: 190lvh; }
.brama--ruch .brama__scena { position: sticky; top: 0; }

.brama__podworze, .brama__podworze img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brama__podworze img { object-fit: cover; object-position: 50% 55%; transform-origin: 50% 60%; will-change: transform; }

.brama__fasada { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.f-tynk { fill: var(--fajans); }
.f-boniowanie { stroke: var(--fajans-cien); stroke-width: 2; fill: none; }
.f-cokol { fill: var(--fajans-cien); }
.f-linia, .f-gzyms { stroke: var(--kobalt); stroke-width: 4; fill: none; }
.f-gzyms--cienki { stroke-width: 2; }
.f-napis { font: 400 64px var(--kroj-napis); letter-spacing: 18px; fill: var(--kobalt); }
.f-podnapis { font: 600 17px var(--kroj-tekst); letter-spacing: 6px; fill: var(--mosiadz-tekst); }
.f-archiwolta { stroke: var(--kobalt); stroke-width: 30; fill: none; }
.f-listwa { stroke: var(--mosiadz); stroke-width: 3; fill: none; }
.f-zwornik, .f-tabliczka { fill: var(--kobalt); }
.f-kraty path { stroke: var(--kobalt); stroke-width: 4; fill: none; stroke-linecap: round; }
.f-kraty .f-kraty--grube { stroke-width: 7; }
.f-kraty path:first-child { stroke-width: 9; }
.f-numer { font: 700 26px var(--kroj-tekst); fill: var(--bialy); }

/* Domyślnie (telefon, brak JS): tekst na dole, na przyciemnionym zdjęciu. */
.brama__tekst {
  position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(var(--y, 0px));
  padding: 5rem var(--margines) 1.5rem; will-change: transform, opacity;
  background: linear-gradient(to top, rgb(23 16 13 / .85) 65%, transparent);
  color: var(--cieply-jasny); --obwodka: var(--obwodka-na-ciemnym);
}
.brama__tekst h1 { font-family: var(--kroj-napis); color: #FFFFFF; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.05; letter-spacing: .02em; margin-bottom: .45em; text-wrap: balance; }
.brama__dalej { display: block; }
.brama__lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--cieply-jasny); max-width: 34ch; }
.brama__przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Na zdjęciu kolory stałe - niezależne od motywu. */
.brama__tekst .przycisk { background: #F3F6F9; color: #22418A; border-color: #F3F6F9; }
.brama__tekst .przycisk--obrys { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.brama__tekst .przycisk--obrys:hover { background: #FFFFFF; color: #22418A; }
.brama__adres { display: none; }

/* Adres pod przyciskami - widoczny zawsze, poza szerokim ekranem z adresem po prawej. */
.brama__gdzie { margin: 1.25rem 0 0; font-size: .95rem; color: var(--cieply-jasny); display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.brama__gdzie b { color: #FFFFFF; font-weight: 600; }
.brama--adres .brama__gdzie { display: none; }

/* Podpowiedź przewijania - tylko gdy brama naprawdę się rusza. */
.brama__przewin { display: none; }
.brama--ruch .brama__przewin {
  display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cieply-jasny);
}
.brama--ruch .brama__przewin::before {
  content: ""; width: 2px; height: 28px; background: currentColor; transform-origin: top;
  animation: przewin 2.2s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes przewin { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Szeroki ekran: tekst na fasadzie po bokach bramy (klasę i --bok ustawia skrypt). */
.brama--boki .brama__tekst {
  left: var(--margines); right: auto; bottom: auto; top: 50%; padding: 0; background: none;
  transform: translateY(calc(-50% + var(--y, 0px)));
  width: min(440px, calc(var(--bok, 400px) - 2 * var(--margines)));
}
.brama--boki .brama__tekst h1 { color: var(--kobalt); font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
.brama--boki .brama__lead, .brama--boki .brama__gdzie, .brama--boki .brama__przewin,
.brama--pasek .brama__gdzie, .brama--pasek .brama__przewin { color: var(--espresso-drugi); }
.brama--boki .brama__gdzie b, .brama--pasek .brama__gdzie b { color: var(--espresso); }
.brama--boki .brama__tekst, .brama--pasek .brama__tekst { color: var(--espresso); --obwodka: var(--mosiadz-tekst); }
.brama--boki .brama__tekst .przycisk { background: var(--kobalt); color: var(--bialy); border-color: var(--kobalt); }
.brama--boki .brama__tekst .przycisk:hover { background: var(--kobalt-ciemny); }
.brama--boki .brama__tekst .przycisk--obrys { background: transparent; color: var(--kobalt); border-color: var(--kobalt); }
.brama--boki .brama__tekst .przycisk--obrys:hover { background: var(--kobalt); color: var(--bialy); }
.brama--adres .brama__adres {
  position: absolute; right: var(--margines); top: 50%; transform: translateY(-50%);
  width: min(300px, calc(var(--bok, 400px) - 2 * var(--margines))); margin: 0; padding-left: 1rem;
  border-left: 3px solid var(--mosiadz); display: grid; gap: .35rem; font-size: .95rem; color: var(--espresso-drugi);
}
.brama__adres span:first-child { color: var(--espresso); font-weight: 600; }

/* Ekran pośredni (tablet, węższe okno): jasny pas u dołu, jak cokół kamienicy. */
.brama--pasek .brama__tekst {
  background: var(--fajans); border-top: 4px solid var(--kobalt); padding: 1.4rem var(--margines) 1.6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 2rem; align-items: center;
}
.brama--pasek .brama__tekst h1 { color: var(--kobalt); margin: 0; font-size: clamp(2rem, 4.6vw, 3rem); }
.brama--pasek .brama__lead { color: var(--espresso-drugi); margin: 0; }
.brama--pasek .brama__przyciski { grid-column: 2; margin-top: .25rem; }
.brama--pasek .brama__tekst .przycisk { background: var(--kobalt); color: var(--bialy); border-color: var(--kobalt); }
.brama--pasek .brama__tekst .przycisk--obrys { background: transparent; color: var(--kobalt); border-color: var(--kobalt); }
.brama--pasek .brama__tekst .przycisk--obrys:hover { background: var(--kobalt); color: var(--bialy); }
.brama--pasek .brama__tekst h1 { grid-row: span 4; }
.brama--pasek .brama__gdzie, .brama--pasek .brama__przewin { grid-column: 2; margin-top: .5rem; }

.brama__podpis {
  position: absolute; left: var(--margines); bottom: clamp(24px, 6vh, 64px); margin: 0;
  max-width: min(520px, 100% - 2 * var(--margines));
  /* Bluszcz - kolor podwórza: napis „jesteś na miejscu” wygląda jak tabliczka przy drzwiach. */
  background: var(--plakietka); color: #FFFFFF; padding: .9rem 1.2rem; border-radius: 4px;
  font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  opacity: 0; transform: translateY(12px); transition: none; pointer-events: none;
}

/* ---------- O nas ---------- */
.o-nas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.o-nas h2 { margin-bottom: .8em; }
.o-nas__tekst p { max-width: 58ch; }
.o-nas__foto { margin: 0; }
.o-nas__foto img { border-radius: 200px 200px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* ---------- Menu ---------- */
.menu__glowa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(32px, 5vw, 56px); padding-bottom: 1.25rem; border-bottom: 2px solid var(--kobalt); }
.menu__legenda { margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 1rem; border-top: 1px solid var(--fajans-cien); font-size: .9rem; color: var(--espresso-drugi); }
.menu__legenda b { color: var(--kobalt); }
.menu__legenda span { white-space: nowrap; }
.menu__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(40px, 7vw, 112px); }
.menu__grupa h3 { margin-bottom: 1rem; }
.menu__grupa h3 small { font-family: var(--kroj-tekst); font-size: .8rem; letter-spacing: .02em; color: var(--espresso-drugi); margin-left: .4em; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.pozycja { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; padding: .55rem 0; }
.pozycja__nazwa { font-weight: 500; }
.pozycja__kropki { flex: 1 1 2rem; border-bottom: 2px dotted var(--mosiadz); transform: translateY(-.3em); min-width: 1.5rem; }
.pozycja__cena { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pozycja__opis { flex-basis: 100%; font-size: .9rem; color: var(--espresso-drugi); }
.alergen {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: .2em;
  font: 600 .78rem/1 var(--kroj-tekst); font-style: normal; color: var(--kobalt);
  border: 1.5px solid var(--kobalt); border-radius: 50%; vertical-align: .15em;
}

/* ---------- Czwartki ---------- */
.czwartki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ciemna-sekcja); color: var(--cieply-jasny); }
.czwartki__foto { margin: 0; min-height: 420px; }
.czwartki__foto img { width: 100%; height: 100%; object-fit: cover; }
.czwartki__tekst { padding: clamp(48px, 8vw, 112px) var(--margines); align-self: center; max-width: 620px; }
.czwartki h2 { color: var(--jasny-tekst); margin-bottom: .6em; }
.czwartki__kiedy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: 1.4em; font-weight: 600; font-size: .95rem; }
.czwartki__pora { padding: .4em .9em; background: var(--plakietka); color: #FFFFFF; border-radius: 999px; white-space: nowrap; }

/* ---------- Galeria ---------- */
.galeria h2 { margin-bottom: clamp(24px, 4vw, 40px); }
.galeria__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 18vw, 240px); grid-auto-flow: dense; gap: 12px; }
.galeria__siatka figure { margin: 0; overflow: hidden; border-radius: 4px; }
.galeria__siatka img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galeria__siatka figure:hover img { transform: scale(1.03); }
.g-wysoka { grid-row: span 2; }
.g-szeroka { grid-column: span 2; }

/* ---------- Opinie ---------- */
.opinie { border-top: 1px solid var(--fajans-cien); }
.opinie__uwaga { color: var(--espresso-drugi); font-size: .9rem; margin: .6rem 0 clamp(24px, 4vw, 40px); }
.opinie__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.opinia { margin: 0; padding: 1.75rem 1.5rem 1.5rem; background: var(--karta); border-radius: 4px; border-top: 4px solid var(--kobalt); }
.opinia p { font-size: 1.08rem; }
.opinia footer { font: 600 .95rem var(--kroj-tekst); letter-spacing: .04em; color: var(--kobalt); }

/* ---------- Jak trafić ---------- */
.trafic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.trafic h2 { margin-bottom: .8em; }
.trafic h3 { margin: 2rem 0 .75rem; }
.trafic__kroki { margin: 0; padding: 0; list-style: none; counter-reset: krok; display: grid; gap: .9rem; }
.trafic__kroki li { counter-increment: krok; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: baseline; }
.trafic__kroki li::before { content: counter(krok); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--kobalt); color: var(--bialy); font-weight: 600; font-size: .9rem; }
.godziny { margin: 0 0 .5rem; }
.godziny div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--fajans-cien); max-width: 26rem; }
.godziny dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.godziny__teraz { min-height: 1.6em; font-weight: 600; color: var(--bluszcz); margin-bottom: 1.5rem; }
.godziny__teraz.zamkniete { color: var(--espresso-drugi); }
.trafic__mapa { margin: 0; }
.trafic__mapa svg { width: 100%; height: auto; border-radius: 6px; }
.trafic__mapa figcaption { font-size: .85rem; color: var(--espresso-drugi); margin-top: .6rem; }
.m-ulica { fill: var(--karta); }
.m-kwartal rect { fill: var(--m-kwartal); }
.m-podworka rect { fill: var(--m-podworko); }
.m-nasze-podworze { fill: var(--m-nasze); }
.m-drzewo { fill: var(--bluszcz); opacity: .85; }
.m-kawiarnia { fill: var(--kobalt); }
.m-trasa { fill: none; stroke: var(--mosiadz); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }
.m-pinezka path { fill: var(--kobalt); stroke: var(--bialy); stroke-width: 2; }
.m-pinezka text { font: 700 13px var(--kroj-tekst); fill: var(--bialy); }
.m-etykieta { font: 500 11px var(--kroj-tekst); fill: var(--espresso-drugi); }
.m-etykieta--nasza { font: 400 13px var(--kroj-napis); letter-spacing: 1.5px; fill: var(--kobalt); }
.m-nazwa-ulicy { font: 600 12px var(--kroj-tekst); fill: var(--espresso); letter-spacing: .5px; }
.m-polnoc path { fill: var(--espresso-drugi); }
.m-polnoc text { font: 600 11px var(--kroj-tekst); fill: var(--espresso-drugi); }

/* ---------- Stopka ---------- */
.stopka { background: var(--stopka-tlo); color: var(--jasny-tekst); padding: clamp(48px, 7vw, 80px) var(--margines) 2rem; }
.stopka__kolumny { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.stopka__logo { font: 400 2rem/1 var(--kroj-napis); letter-spacing: .14em; margin-bottom: .8rem; }
.stopka__link { background: none; border: 0; padding: 0; color: var(--jasny-tekst); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.stopka__kontakt { display: grid; justify-items: start; }
.stopka__kontakt a { color: var(--jasny-tekst); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.stopka__autorzy summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: flex; align-items: center; min-height: 44px; }
.stopka__autorzy p { font-size: .85rem; margin-top: .6rem; opacity: .85; }
.stopka__demo { width: min(1180px, 100%); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgb(243 246 249 / .25); font-size: .85rem; }

/* ---------- Dymek (informacje demo) ---------- */
/* ---------- Przełącznik motywu ---------- */
.motyw {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; color: var(--kobalt); border: 2px solid var(--fajans-cien); border-radius: 50%; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.motyw:hover { border-color: var(--kobalt); }
.motyw svg { width: 20px; height: 20px; }
.motyw .slonce { display: none; }
:root[data-motyw="ciemny"] .motyw .slonce { display: block; }
:root[data-motyw="ciemny"] .motyw .ksiezyc { display: none; }
.naglowek__narzedzia { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.dymek {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px);
  width: max-content; max-width: min(460px, calc(100vw - 32px)); padding: .9rem 1.2rem; border-radius: 6px;
  background: var(--espresso); color: var(--fajans); font-size: .95rem; box-shadow: 0 10px 30px rgb(0 0 0 / .2);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.dymek.widoczny { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Telefon ---------- */
@media (max-width: 899px) {
  .o-nas, .trafic, .czwartki { grid-template-columns: minmax(0, 1fr); }
  .o-nas__foto { max-width: 420px; }
  .czwartki__foto { min-height: 0; aspect-ratio: 16 / 9; }
  .menu__siatka, .opinie__siatka { grid-template-columns: minmax(0, 1fr); }
  .stopka__kolumny { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  /* Telefon: dwie kolumny „kaskadowo”, każde zdjęcie w swojej proporcji - nic nie jest przycinane. */
  .galeria__siatka { display: block; columns: 2; column-gap: 10px; }
  .galeria__siatka figure { break-inside: avoid; margin-bottom: 10px; }
  .galeria__siatka img { height: auto; }
  /* Mapka ma na telefonie ok. 0,57 swojej wielkości - napisy powiększone, żeby miały ok. 11 px. */
  .m-etykieta { font-size: 19px; }
  /* Większe napisy nie mieszczą się w starych miejscach: „piekarnia” kończy się przed przejściem
     w bramie, „Osnowa” schodzi pod drzewo, w środek naszego podwórza. */
  .m-etykieta--piekarnia { text-anchor: end; transform: translateX(66px); }
  .m-etykieta--nasza { font-size: 18px; letter-spacing: 1px; transform: translate(42px, 16px); }
  .m-nazwa-ulicy { font-size: 18px; }
  .m-polnoc text { font-size: 17px; }
  .m-pinezka text { font-size: 17px; transform: translateY(2px); }
}

/* Niski ekran: brama nieruchoma (skrypt), scena bez minimalnej wysokości - wszystko na ekranie. */
@media (max-height: 539px) {
  .brama__scena { min-height: 0; }
  .brama--pasek .brama__tekst { padding-block: .8rem .9rem; row-gap: .3rem; }
  .brama--pasek .brama__tekst h1 { font-size: 1.6rem; }
  .brama--pasek .brama__lead { font-size: .9rem; }
  .brama--pasek .brama__gdzie { margin-top: .2rem; font-size: .85rem; }
  .brama__przyciski { margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .galeria__siatka img { transition: none; }
}