/* Wspolny uklad makiety skiteamzieleniec.pl (obie wersje). Kolory i kroje ustawia wersja-N/styl.css przez zmienne.
   Plasko: bez cieni, zaokraglen i ozdobnikow; kolory z logo: granat #294986 z nowego logo (Rafal 2026-10-26: „bierzemy ten niebieski i podmieniamy fiolet”, wczesniej #312587), blekit #489EDC z napisu „SKI team” (Rafal 2026-10-26, wczesniej #009FE3); ciemniejsze odcienie pod kontrast. */
:root {
  --granat: #294986; --granat-c: #182d54; --blekit: #489edc; --blekit-c: #1d669a; --blekit-j: #e5f1fa;
  --pomarancz: #fca311;   /* dodatkowy kolor od klientki (2026-10-28, jak akcent na kurtkach instruktorow): przyciski, ikony, kreski pod naglowkami */
  --tlo: #fff; --tlo-2: #ecf3f8; --tekst: #1a273f; --tekst-2: #556177; --linia: #d5dbe6; --link: #1d669a;
  --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: var(--granat); --przycisk-ht: #fff;   /* granat na pomaranczu: kontrast 6,7:1 */
  --font-n: system-ui, sans-serif; --font-t: system-ui, sans-serif; --naglowek-h: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 56px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 18px/1.6 var(--font-t); overflow-wrap: break-word; overflow-x: clip; }
/* break-word i clip: zanim wczytaja sie fonty, szerszy font zastepczy nie rozpycha strony w bok na telefonie */
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }   /* np. pasek stanu stoku, gdy API nie odpowie: display z klasy nie moze go pokazac */
a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--granat); }
h1, h2, h3 { font-family: var(--font-n); color: var(--granat); line-height: 1.1; margin: 0 0 .5em; }
h2 { font-size: clamp(30px, 3.4vw, 44px); }
/* glowne naglowki z pomaranczowa kreska o stalej dlugosci (klientka 2026-10-28: „podkreslenie albo kreska o okreslonej dlugosci, kolor pomaranczowy”) */
h1::after, h2::after { content: ''; display: block; width: 128px; height: 4px; margin-top: 14px; background: var(--pomarancz); }   /* 128 px: Rafal 2026-10-28 „jeszcze raz taka dluga” */
.stopka h2::after, .podsum h2::after, .potwierdzenie h2::after { content: none; }
h3 { font-size: 24px; margin-top: 1.2em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .3em; }
.w { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.waska { max-width: 860px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.przejdz { position: absolute; left: -999px; top: 8px; z-index: 50; background: #fff; padding: 8px 14px; }
.przejdz:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blekit); outline-offset: 2px; }
.ik { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; vertical-align: -.15em; }

/* przyciski jak sprzet z wypozyczalni (Rafal: „sciac troche jak narte albo snowboard”), bez cieni:
   glowne jak narta: prosta pietka z lewej, lekko zaostrzony dziob z prawej (maska SVG DZIOB, w strone strzalki);
   drugie i male jak deska snowboardowa: plytkie, szerokie zaokraglenia obu koncow (nos i tail, border-radius --nos / 50%). Strzalka przy tych, ktore prowadza dalej.
   --przycisk / --przycisk-t: tlo i tekst, --przycisk-h / --przycisk-ht: po najechaniu (wersje i ciemne tla ustawiaja wlasne) */
.przycisk { --dziob: 30px; --nos: 15px; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px;
  padding: 12px calc(10px + var(--dziob) * .7) 11px 22px; border: 0; border-radius: 6px 0 0 6px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C15 0 29 20 37 42Q40 50 37 58C29 80 15 100 0 100Z'/%3E%3C/svg%3E") right center / var(--dziob) 100% no-repeat, linear-gradient(#000 0 0) left center / calc(100% - var(--dziob) + 1px) 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C15 0 29 20 37 42Q40 50 37 58C29 80 15 100 0 100Z'/%3E%3C/svg%3E") right center / var(--dziob) 100% no-repeat, linear-gradient(#000 0 0) left center / calc(100% - var(--dziob) + 1px) 100% no-repeat;
  font: 700 17.5px/1.15 var(--font-t); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.przycisk-drugi, .przycisk-maly { -webkit-mask: none; mask: none; border-radius: var(--nos) / 50%; padding-left: calc(12px + var(--nos)); padding-right: calc(12px + var(--nos)); }
.przycisk:focus-visible { outline: 3px solid var(--blekit-c); outline-offset: 3px; }
.przycisk-glowny:focus-visible { background: var(--przycisk-h); color: var(--przycisk-ht); text-decoration: underline; text-underline-offset: .2em; } /* maska narty ucina obrys */
.przycisk-glowny, .przycisk-maly { background: var(--przycisk); color: var(--przycisk-t); }
.przycisk-glowny:hover, .przycisk-maly:hover { background: var(--przycisk-h); color: var(--przycisk-ht); }
.przycisk-drugi { background: rgba(41, 73, 134, .09); color: var(--granat); }
.przycisk-drugi:hover { background: rgba(41, 73, 134, .18); color: var(--granat); }
.przycisk-maly { --nos: 11px; min-height: 38px; padding-top: 6px; padding-bottom: 5px; font-size: 15px; }
.przycisk-dalej::after { content: ''; width: 1.15em; height: 1.15em; flex: none; background: currentColor; transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.6 19.6 12l-6.4 6.4-1.4-1.4 4-4H4v-2h11.8l-4-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.6 19.6 12l-6.4 6.4-1.4-1.4 4-4H4v-2h11.8l-4-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.przycisk-dalej:hover::after { transform: translateX(4px); }
.pas-granat .przycisk-drugi, .glowa-kompakt .przycisk-drugi { background: rgba(255, 255, 255, .14); color: #fff; }
.link { font-weight: 600; }
.przyciski { display: flex; flex-wrap: wrap; gap: 10px 6px; margin: 18px 0 28px; }

/* naglowek i menu */
.naglowek { position: sticky; top: 0; z-index: 20; height: var(--naglowek-h); background: var(--naglowek-tlo, #fff); transition: background .2s; }
.naglowek > .w { height: 100%; display: flex; align-items: center; gap: 24px; max-width: 1480px; }   /* 8 pozycji menu, telefon, zapisy i kamera (2026-10-26) */
.logo { flex: none; display: block; }
.logo img { height: calc(var(--naglowek-h) - 16px); width: auto; }
.nawigacja { margin-left: auto; }
/* logo Zieleniec Sport Arena obok naszego, oddzielone cienka kreska (klientka 2026-10-29: „może być na samej górze”) */
.logo-arena { flex: none; display: block; margin-left: -6px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .35); }
.logo-arena img { display: block; height: 40px; width: auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.menu li { margin: 0; }
.menu a { display: block; white-space: nowrap; padding: 10px 11px; color: var(--menu-kolor, var(--tekst)); text-decoration: none; font: 600 16.5px/1.2 var(--font-t); }
.menu a:hover, .menu a[aria-current=page] { color: var(--menu-akt, var(--blekit-c)); }
.menu .menu-cta .przycisk[aria-current=page] { color: var(--przycisk-t); }
.menu .menu-cta .przycisk:hover { color: var(--przycisk-ht); }
.menu-tel a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
/* piktogram (kalendarz) tylko przy przycisku zapisu w menu */
.pikt { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu .menu-cta .przycisk { display: inline-flex; gap: .55em; }
.menu-cta .pikt { margin-top: -2px; }
.menu-cta { margin-left: 8px; }
.menu-cta .przycisk { --dziob: 26px; min-height: 46px; padding: 10px calc(8px + var(--dziob) * .7) 9px 16px; color: var(--przycisk-t); white-space: nowrap; }
.menu-przycisk { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; color: var(--menu-kolor, var(--granat)); cursor: pointer; }
.menu-przycisk .ik { width: 30px; height: 30px; }
.menu-przycisk .ik-x { display: none; }

/* naglowek podstrony */
.lead { font-size: 20px; max-width: 760px; }
.podmenu { position: sticky; top: var(--naglowek-h); z-index: 10; background: var(--podmenu-tlo, #fff); border-bottom: 1px solid var(--linia); }
.podmenu .w { display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; }
.podmenu a { flex: none; padding: 14px 0 12px; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 3px solid transparent; }
.podmenu a:hover { border-color: var(--blekit); }

/* sekcje */
.sekcja { padding: 80px 0; }
.sekcja-tlo { background: var(--tlo-2); }
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dwie-szer { align-items: start; }
.dwie-foto-pelne { align-items: stretch; }   /* zdjecie na cala wysokosc tekstu obok (Wypozyczalnia, Rafal 2026-10-29) */
.dwie.dwie-foto-pelne > img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.dwie > img, .dwie > figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.odwr > :first-child { order: 2; }
.dwie > *, .rzad > *, .zapis > * { min-width: 0; }
.kroki { padding-left: 1.4em; }
.kroki li { margin-bottom: .6em; padding-left: .2em; }
.podpowiedz { font-size: 16px; color: var(--tekst-2); }
.uwaga-makiety { margin: 14px 0 0; padding: 8px 12px; border: 1px dashed #b3bac8; color: #69768f; font: italic 14.5px/1.45 var(--font-t); background: transparent; }
.uwaga-makiety::before { content: 'Makieta: '; font-weight: 700; font-style: normal; }

/* tabele */
table { width: 100%; border-collapse: collapse; font-size: 17px; }
caption { caption-side: top; text-align: left; font-size: 15.5px; color: var(--tekst-2); padding: 0 0 10px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linia); vertical-align: top; }
thead th { font: 700 14px/1.2 var(--font-t); text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-2); border-bottom: 2px solid var(--granat); }
thead th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
tbody th small { display: block; font-weight: 400; font-size: 14.5px; color: var(--tekst-2); }
.cennik td { font-weight: 700; white-space: nowrap; color: var(--granat); font-size: 19px; }
.cennik tbody th { font-weight: 600; }
.cennik .pakiety th[scope=rowgroup] { padding-top: 26px; font: 700 14px/1.2 var(--font-t); text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-2); border-bottom: 2px solid var(--granat); }
.info { table-layout: fixed; }
.info th { width: 34%; font-weight: 600; color: var(--tekst-2); }
.info td { overflow-wrap: anywhere; }  /* dlugi e-mail nie rozpycha tabeli na telefonie, zanim wczytaja sie fonty */
.trasy { table-layout: fixed; }
.trasy th, .trasy td { overflow-wrap: anywhere; }
.trasy th:first-child { width: 34%; }
.trasa { display: inline-block; padding-left: 18px; position: relative; }
.trasa::before { content: ''; position: absolute; left: 0; top: .35em; width: 11px; height: 11px; }
.trasa-niebieska::before { background: #1f6fd1; } .trasa-czerwona::before { background: #d42b2b; } .trasa-czarna::before { background: #111; }
.duzy-tel { font: 800 30px/1.1 var(--font-n); color: var(--granat); text-decoration: none; white-space: nowrap; }

/* pytania */
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary { cursor: pointer; padding: 18px 36px 18px 0; font: 700 19px/1.35 var(--font-t); color: var(--granat); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 30px/1 var(--font-t); color: var(--blekit-c); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 18px; max-width: 760px; font-size: 16.5px; color: var(--tekst-2); }   /* mniejsze odpowiedzi (klientka 2026-10-28) */

/* regulaminy w okienkach otwieranych ze stopki i przy zapisach (Rafal 2026-10-30), na telefonie na caly ekran */
dialog.regulamin-okno { width: min(780px, calc(100vw - 48px)); max-width: none; max-height: min(88vh, 960px); margin: auto; padding: 0; border: 0;
  border-radius: var(--r); background: #fff; color: var(--tekst); overflow: hidden; }
dialog.regulamin-okno[open] { display: flex; flex-direction: column; }
dialog.regulamin-okno::backdrop { background: rgba(17, 32, 60, .7); }
.ro-glowka { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 28px; border-bottom: 1px solid var(--linia); }
.ro-glowka h2 { margin: 0; font-size: 26px; }
.ro-glowka h2::after { content: none; }
.ro-zamknij { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--tlo-2); color: var(--granat); cursor: pointer; }
.ro-zamknij:hover { background: #dbe7f1; }
.ro-zamknij .ik { width: 22px; height: 22px; fill: currentColor; }
.ro-tresc { overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 24px; }
.ro-tresc ol { margin: 0; padding-left: 24px; font-size: 16px; color: var(--tekst-2); }
.ro-tresc li { margin: 0 0 10px; padding-left: 4px; }
.ro-tresc li::marker { font-weight: 700; color: var(--granat); }
.regulamin-dekalog { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linia); font-size: 16px; font-weight: 700; }
.zw-regulamin { margin: -4px 0 0; text-align: center; font-size: 15px; }

/* widzet zapisow (jak „Zapisy - wolne godziny” w ArenaBooking School) */
.zapisy-widzet { display: grid; gap: 14px; padding: 26px 26px 20px; background: #fff; color: var(--tekst); border: 1px solid var(--linia); }
.zw-tytul { margin: 0; font-size: 28px; }
.zapisy-widzet fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.zw-opcje { display: flex; border: 2px solid var(--granat); background: #fff; }
.zapisy-widzet legend, .zw-pole > span { display: block; font-size: 14.5px; font-weight: 600; color: var(--tekst-2); margin-bottom: 6px; padding: 0; }
.zw-dyscyplina label, .wybor label { flex: 1; position: relative; }
.zw-dyscyplina input, .wybor input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.zw-dyscyplina span, .wybor span { display: block; height: 100%; padding: 12px 10px 11px; text-align: center; font-weight: 700; cursor: pointer; color: var(--granat); transition: background-color .15s; }
.zw-dyscyplina label + label span, .wybor label + label span { border-left: 1px solid rgba(41, 73, 134, .25); }
.zw-dyscyplina span:hover, .wybor span:hover { background: rgba(41, 73, 134, .08); }
.zw-dyscyplina input:checked + span, .wybor input:checked + span { background: var(--granat); color: #fff; }
.zw-dyscyplina input:focus-visible + span, .wybor input:focus-visible + span { outline: 3px solid var(--blekit); outline-offset: -3px; }
select, input, textarea { width: 100%; font: inherit; font-size: 17px; padding: 11px 12px; border: 1px solid #b8bfd0; border-radius: 0; background: #fff; color: var(--tekst); }
select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23294986' d='M7 9.5 12 14.5l5-5 1.4 1.4L12 17.3 5.6 10.9z'/%3E%3C/svg%3E") no-repeat right 10px center / 22px; padding-right: 40px; }
.zw-cena { margin: 0; font-size: 16.5px; color: var(--tekst-2); }
.zw-cena b { color: var(--granat); font-size: 19px; }
.zapisy-widzet .przycisk { width: 100%; min-height: 56px; font-size: 18.5px; }
.zw-tel { margin: 0; text-align: center; font-size: 16px; color: var(--tekst-2); }
.zw-tel a { font-weight: 700; color: var(--granat); white-space: nowrap; }

/* strona zapisow */
.zapis { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.krok { border: 0; margin: 0 0 34px; padding: 0 0 34px; border-bottom: 1px solid var(--linia); min-width: 0; }
.krok legend { display: flex; align-items: center; gap: 12px; font: 800 26px/1.2 var(--font-n); color: var(--granat); margin-bottom: 16px; padding: 0; }
.krok legend span { display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--blekit); color: #fff; font-size: 20px; }
.wybor { display: flex; flex-wrap: wrap; margin-bottom: 14px; border: 2px solid var(--granat); background: #fff; }
.wybor label { flex: 1 1 0; min-width: 110px; }
.wybor span small { display: block; font-weight: 400; font-size: 14px; opacity: .85; }
.dni { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 14px; border: 2px solid var(--granat); background: #fff; }
.dni button, .godziny button { font: inherit; border: 0; background: #fff; color: var(--granat); cursor: pointer; padding: 10px 4px; transition: background-color .15s, color .15s; }
.dni button + button { border-left: 1px solid rgba(41, 73, 134, .25); }
.dni button:hover { background: rgba(41, 73, 134, .08); }
.dni button b { display: block; font-size: 22px; font-family: var(--font-n); }
.dni button small { display: block; font-size: 13px; color: var(--tekst-2); }
.dni button[aria-pressed=true] { background: var(--granat); color: #fff; }
.dni button[aria-pressed=true] small { color: #d4ddef; }
.godziny { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.godziny button { font-weight: 700; font-size: 17px; padding: 11px 4px; box-shadow: inset 0 0 0 1.5px rgba(41, 73, 134, .4); }
.godziny button:hover:not(:disabled) { background: var(--granat); color: #fff; box-shadow: none; }
.godziny button:disabled { background: transparent; color: #a3a6b8; cursor: not-allowed; text-decoration: line-through; box-shadow: none; }
.godziny button[aria-pressed=true], .godziny button[aria-pressed=true]:hover { background: var(--blekit); color: #182d54; box-shadow: none; }
.uczestnicy .osoba { display: grid; grid-template-columns: 1.3fr .6fr 1.6fr; gap: 10px; margin-bottom: 10px; align-items: end; }
.osoba label > span, .pola label > span { display: block; font-size: 14.5px; font-weight: 600; color: var(--tekst-2); margin-bottom: 4px; }
.pola { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pola-2 { grid-template-columns: 1.6fr 1fr; }
.pole-szer { grid-column: 1 / -1; }
.zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.zgoda input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.blad { outline: 2px solid #c0392b; }
.zapis-bok { position: sticky; top: calc(var(--naglowek-h) + 20px); }
.podsum, .potwierdzenie { padding: 24px; background: var(--tlo-2); border-top: 4px solid var(--blekit); }
.podsum h2, .potwierdzenie h2 { font-size: 26px; }
.podsum dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 16.5px; }
.podsum dt { color: var(--tekst-2); }
.podsum dd { margin: 0; font-weight: 600; }
.podsum-suma { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--linia); }
.podsum-suma b { font: 800 34px/1 var(--font-n); color: var(--granat); }
.podsum .przycisk { width: 100%; min-height: 58px; font-size: 19px; }
.podsum-info { margin: 12px 0 0; font-size: 15px; color: var(--tekst-2); }

/* mapa widoczna od razu; kamera ladowana po kliknieciu */
.mapa { position: relative; min-height: 380px; background: var(--tlo-2); border: 1px solid var(--linia); }
.s-kontakt .mapa { min-height: 480px; }
.mapa iframe, .kamera iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kamera { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--granat); overflow: hidden; }
.kamera > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.kamera .przycisk { position: relative; }
.mapa-tras { margin: 0; }
.mapa-tras img { width: 100%; height: auto; }
.mapa-tras figcaption { font-size: 15px; color: var(--tekst-2); margin-top: 8px; }

/* galeria: sekcje z trzema wyroznionymi zdjeciami i mozaika w kolumnach (zachowuje proporcje, takze pionowych) */
.gal-sekcja { padding: 72px 0 64px; }
.gal-glowka { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-bottom: 24px; }
.gal-glowka h2 { margin: 0; }
.gal-glowka p { flex: 1 1 360px; margin: 0; color: var(--tekst-2); }
.gal-ile { font-weight: 700; color: var(--blekit-c); white-space: nowrap; }
/* galeria: rowne kafle 4:3 z zaokraglonymi rogami (klientka 2026-10-28: „zdjecia rownej wielkosci i oczywiscie zaokraglone”) */
.gal-siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gal-siatka li { margin: 0; }
.gal-siatka li[hidden] { display: none; }
.gal-siatka a { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--tlo-2); }
.gal-siatka img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.gal-siatka a:hover img { opacity: .88; }
.gal-wiecej { margin: 18px 0 0; text-align: center; }
[data-powieksz] { display: block; position: relative; overflow: hidden; cursor: zoom-in; background: var(--granat); }
[data-powieksz] img { transition: transform .4s ease, opacity .2s; }
[data-powieksz]:hover img { transform: scale(1.04); opacity: .92; }

/* przegladarka zdjec: strzalki, klawiatura, przesuwanie palcem, licznik */
html.pw-otwarte { overflow: hidden; }
dialog.powiekszenie { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(17, 32, 60, .97); color: #fff; }
dialog.powiekszenie::backdrop { background: rgba(17, 32, 60, .7); }
.pw-figura { position: absolute; inset: 60px 84px 70px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pw-figura img { max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; touch-action: pan-y; user-select: none; }
.pw-figura figcaption { display: flex; gap: 18px; margin-top: 14px; font-size: 15.5px; color: #ccd8ee; }
.pw-figura figcaption b { color: #fff; }
.pw-przycisk { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .15s, color .15s; }
.pw-przycisk:hover, .pw-przycisk:focus-visible { background: var(--blekit); color: var(--granat-c); }
.pw-przycisk .ik { width: 30px; height: 30px; }
.pw-zamknij { top: 12px; right: 12px; }
.pw-poprz { left: 14px; top: 50%; transform: translateY(-50%); }
.pw-nast { right: 14px; top: 50%; transform: translateY(-50%); }
.pw-poprz .ik { transform: rotate(180deg); }

/* Szkolka: kalkulator lekcji, etapy nauki na trasach przy szkole, kroki lekcji, instruktorzy na calej szerokosci */
.szk-ceny { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* cennik wypozyczalni od klientki (2026-10-28): komplety obok pojedynczego sprzetu, sprzetu na lekcje i rabatow */
.cennik-wyp-uklad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; align-items: start; }   /* komplety, pojedynczy sprzet, na lekcje */
.cennik-wyp-uklad > .cennik-wyp + .cennik-wyp { margin-top: 0; }   /* kolumny startuja rowno */
.cennik-wyp caption small { display: block; margin-top: 2px; font: 400 14.5px/1.3 var(--font-t); color: var(--tekst-2); }
.cennik-wyp caption { font: 700 20px/1.2 var(--font-n); color: var(--granat); }
.cennik-wyp + .cennik-wyp { margin-top: 28px; }
.cennik-wyp td { text-align: right; }
.cennik-wyp thead th:not(:first-child) { text-align: right; }
.cennik-rabaty { list-style: none; margin: 24px 0 0; padding: 18px 20px; background: var(--tlo-2); border-radius: 12px; font-size: 16px; }
.sekcja-tlo .cennik-rabaty { background: #fff; }
.cennik-rabaty li { margin: 0 0 6px; }
.cennik-rabaty li:last-child { margin: 0; }
.cennik-rabaty b { color: var(--granat); }
.cennik-caly { margin-top: 22px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.cennik-caly summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--granat); }
.cennik-caly table { margin-bottom: 14px; }
.kalk { padding: 28px 30px 22px; background: var(--granat); color: #e3eaf6; }
.kalk h3 { margin: 0 0 16px; color: #fff; font-size: 26px; }
.kalk .wybor { margin-bottom: 10px; border-color: #fff; flex-wrap: nowrap; }
.kalk .wybor label { min-width: 0; }
.kalk .wybor span { padding-left: 4px; padding-right: 4px; }
.kalk .przycisk { --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: #fff; --przycisk-ht: var(--granat); width: 100%; }
.kalk-cena { margin: 18px 0 16px; }
.kalk-cena b { display: block; font: 800 64px/1 var(--font-w1, var(--font-n)); color: #fff; }
.kalk-cena span { font-size: 16.5px; }
.kalk-pakiety { margin: 12px 0 0; font-size: 15px; color: #bacae8; }

.etapy-gora { position: relative; margin-top: 30px; }
.etapy-stok { position: absolute; left: 0; top: 0; width: 100%; height: 340px; pointer-events: none; }
.stok-pole { fill: rgba(41, 73, 134, .07); }
.stok-grzbiet { fill: none; stroke: rgba(41, 73, 134, .35); stroke-width: 2; vector-effect: non-scaling-stroke; }
.etapy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.etap { margin: 0; padding: 0 12px; text-align: center; }
.etap-pole { position: relative; height: 340px; margin-bottom: 10px; }
.etap-znak { position: absolute; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); display: grid; place-items: center;
  font: 800 20px/1 var(--font-w1, var(--font-n)); color: #fff; }
.etap:nth-child(1) .etap-znak { top: 316px; } .etap:nth-child(2) .etap-znak { top: 271px; } .etap:nth-child(3) .etap-znak { top: 226px; }
.etap:nth-child(4) .etap-znak { top: 181px; } .etap:nth-child(5) .etap-znak { top: 136px; }
/* narciarze nad 1. i 5. znakiem: poczatkujacy plugiem, zaawansowany skretem cietym */
.etap-narciarz { position: absolute; left: 50%; height: auto; pointer-events: none; }
.etap-narciarz-1 { width: 96px; top: 177px; transform: translateX(-50%); }
.etap-narciarz-5 { width: 124px; top: 14px; transform: translateX(-58%); }
.etap-tasma .etap-znak { background: #fff; color: var(--granat); box-shadow: inset 0 0 0 3px var(--granat); }
.etap-niebieska .etap-znak { background: #1f6fd1; } .etap-czerwona .etap-znak { background: #d42b2b; } .etap-czarna .etap-znak { background: #111; }
.etap b { display: block; font: 800 22px/1.15 var(--font-n); color: var(--granat); }
.etap-gdzie { display: block; margin: 4px 0 8px; font-size: 15px; font-weight: 700; color: var(--blekit-c); }
.etap p { margin: 0; font-size: 16px; color: var(--tekst-2); }

.kroki-duze { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: krok; }
.kroki-duze li { margin: 0; padding-top: 10px; border-top: 4px solid var(--blekit); counter-increment: krok; }
.kroki-duze li::before { content: counter(krok); display: block; font: 800 64px/1 var(--font-w1, var(--font-n)); color: var(--blekit); margin-bottom: 8px; }
.kroki-duze b { display: block; font: 800 24px/1.15 var(--font-n); color: var(--granat); margin-bottom: 8px; }
.kroki-duze p { margin: 0; color: var(--tekst-2); }

.szk-ekipa { position: relative; min-height: 600px; display: flex; align-items: flex-end; }
.szk-ekipa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.szk-ekipa .w { position: relative; width: 100%; padding-bottom: 40px; }
.szk-ekipa-panel { max-width: 560px; padding: 28px 32px 14px; background: var(--granat); color: #e3eaf6; }
.szk-ekipa-panel h2 { color: #fff; }

/* znizki bez kwot (szkolka, wypozyczalnia): rodzaje zniżek w kolumnach, nad kazda blekitna kreska jak w krokach lekcji */
.znizki { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.znizki li { margin: 0; padding: 24px 24px 22px; background: var(--tlo-2); border-radius: 12px; }   /* okienka z ikonkami (klientka 2026-10-28) */
.sekcja-tlo .znizki li { background: #fff; }
.znizki .pikt { width: 40px; height: 40px; margin-bottom: 12px; color: var(--pomarancz); stroke-width: 1.5; }
.znizki b { display: block; font: 800 22px/1.2 var(--font-n); color: var(--granat); margin-bottom: 6px; }
.znizki p { margin: 0; color: var(--tekst-2); }
.znizki-info { margin: 0 0 14px; }

/* ceny jako rowne karty pod rzedem (lekcje i wypozyczalnia na glownej): na bialym tle jasnoniebieskie, na jasnoniebieskim biale */
.karty-cen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.karty-cen li { margin: 0; padding: 22px 24px 18px; background: var(--tlo-2); border-top: 4px solid var(--blekit); }
.rzad-tlo .karty-cen li, .sekcja-tlo .karty-cen li { background: #fff; }
.karty-cen h3 { margin: 0; font-size: 24px; }
.karty-cen li > p { margin: 2px 0 0; font-size: 14.5px; color: var(--tekst-2); }
.karty-cen dl { margin: 12px 0 0; }
.karty-cen dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linia); }
.karty-cen dt { font-size: 16px; }
.karty-cen dt small { display: block; font-size: 13px; color: var(--tekst-2); }
.karty-cen dd { margin: 0; font: 800 22px/1 var(--font-n); color: var(--granat); white-space: nowrap; }
.karty-cen-podpis { margin: 14px 0 0; font-size: 15px; color: var(--tekst-2); }
.rzad-pod .uwaga-makiety { margin-top: 12px; }

/* trasy przy szkole jako karty z kolorem trudnosci (glowna); stan i pokrywa z API po wczytaniu */
.karty-tras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.karty-tras li { margin: 0; padding: 16px 18px 14px; background: var(--tlo-2); border-top: 5px solid #1f6fd1; }
.karty-tras .k-czerwona { border-top-color: #d42b2b; }
.karty-tras .k-czarna { border-top-color: #111; }
.karty-tras b { display: block; font: 800 21px/1.15 var(--font-n); color: var(--granat); }
.kt-meta { display: block; margin-top: 4px; font-size: 15px; color: var(--tekst); }
.karty-tras small { display: block; font-size: 13.5px; color: var(--tekst-2); }
.kt-stan { display: block; margin-top: 6px; font-size: 14px; color: var(--tekst-2); }
.karty-tras [data-stan-trasy] { color: #b42318; }
.karty-tras [data-stan-trasy].otwarta { color: #1d7a3e; font-weight: 700; }
.rzad-tekst .stan-stoku { margin: 0 0 14px; }
.rzad-tekst .trudnosci { margin: 4px 0 20px; }

/* kamera na granatowym pasie (wyciagi, galeria): duzy podglad 16:9, opis obok */
.kamera-pas { padding: 72px 0; background: var(--granat); color: #d7e0f1; }
.kamera-uklad { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.kamera-pas h2, .kamera-pas h3 { color: #fff; }
.kamera-pas a:not(.przycisk) { color: #fff; }
.kamera-pas .kamera { background: var(--granat-c); }
.kamera-pas .kamera .przycisk-glowny { --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: #fff; --przycisk-ht: var(--granat); }
.kamera-opis > :last-child { margin-bottom: 0; }

/* udogodnienia w skrocie (szkolka, wypozyczalnia): granatowy pas z piktogramami jak na starej stronie, Rafal 2026-10-25 */
.udogodnienia { padding: 64px 0 70px; background: var(--granat); color: #d7e0f1; }
.udogodnienia h2 { color: #fff; margin-bottom: 28px; }
.udog { list-style: none; margin: 0; padding: 1px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .18); }
.udog li { margin: 0; background: var(--granat); }
.udog a, .udog div { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 26px 20px 24px; color: inherit; text-decoration: none; }
.udog li:nth-child(5n + 1) > * { padding-left: 0; }
.udog .pikt { width: 52px; height: 52px; margin-bottom: 10px; color: var(--pomarancz); stroke-width: 1.5; }
.udog b { font: 700 22px/1.1 var(--font-n); color: #fff; overflow-wrap: normal; }
.udog span { font-size: 15.5px; line-height: 1.45; }
.udog a b::after { content: '\00a0\2192'; color: var(--blekit); }
.udog a:hover b { color: var(--blekit); }
.udog a:hover .pikt { color: #fff; }

/* kontakt (Rafal 2026-10-25: „ogarnij troszkę lepiej zakładkę kontakt”): granatowy panel z danymi obok mapy na cala szerokosc;
   lewa krawedz tresci panelu rowno z .w (100% = polowa szerokosci strony, 588 = 1240 / 2 - 32) */
.kontakt-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--granat); }
.glowa + .kontakt-uklad { margin-top: -1px; border-top: 1px solid rgba(255, 255, 255, .18); }   /* kontakt: cienka linia miedzy zdjeciem z tytulem a granatowym panelem */
.kontakt-panel { color: #d7e0f1; padding: 64px 56px 52px max(32px, calc(100% - 588px)); }
.kontakt-panel h2 { color: #fff; margin-bottom: 22px; }
.kontakt-panel a { color: #fff; }
.kontakt-panel a:hover { color: var(--blekit); }
.kontakt-panel .dane { font-size: 17px; margin-bottom: 26px; }
.kontakt-panel .dane li { margin-bottom: 14px; }
.kontakt-panel .dane-tel a { font-size: 52px; }
.kontakt-panel .dane-tel .ik { width: 30px; height: 30px; }
.kontakt-panel .przyciski { margin: 0 0 24px; }
.kontakt-panel .przycisk-glowny { --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: #fff; --przycisk-ht: var(--granat); }
.kontakt-media { font-size: 16px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); }
.kontakt-media .ik { fill: var(--pomarancz); margin-right: 4px; }
.kontakt-media a { white-space: nowrap; }
.kontakt-uklad .mapa { min-height: 560px; border: 0; }
/* Kontakt po uwagach klientki 2026-10-28: podtytul i „Szkola i wypozyczalnia” w panelu, karta „Jak do nas trafic” z „Wyznacz trase” na mapie,
   pod spodem kontakty wyciagow, bistro i domkow obok siebie oraz dane firmy */
.kontakt-panel h2 { margin-bottom: 8px; }
.kontakt-podtytul { margin: 0 0 26px; font-size: 16px; color: #c6d2e9; }
.kontakt-panel h3 { margin: 0 0 14px; color: #fff; font-size: 21px; }
.mapa-z-karta { position: relative; min-height: 560px; }
/* mapa szersza od panelu, zeby karta po prawej nie zaslaniala pinezki szkoly na srodku mapy (lewa krawedz tresci panelu nadal rowno z .w) */
@media (min-width: 1181px) {
  .kontakt-uklad:has(.mapa-z-karta) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .kontakt-uklad:has(.mapa-z-karta) .kontakt-panel { padding-left: max(32px, calc(120% - 588px)); }
}
.mapa-z-karta .mapa { position: absolute; inset: 0; min-height: 0; }
.mapa-karta { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 290px; padding: 24px 26px 22px; background: var(--granat); color: #d7e0f1; border-radius: 12px; }
.mapa-karta img { width: 120px; height: auto; margin-bottom: 12px; }
.mapa-karta h3 { margin: 0 0 10px; color: #fff; font: 600 26px/1.05 var(--font-w1, var(--font-n)); text-transform: uppercase; letter-spacing: .01em; }
.mapa-karta p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.45; }
.mapa-karta b { color: #fff; }
.mapa-karta-przycisk { margin: 16px 0 0 !important; }
.mapa-karta .przycisk { width: 100%; --przycisk-h: #fff; --przycisk-ht: var(--granat); }
.kontakty-inne { padding: 48px 0 44px; background: var(--tlo-2); }
.kontakty-karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kontakty-karty > li { margin: 0; padding: 24px 26px 20px; background: #fff; border-radius: 12px; }
.kontakty-karty h3 { margin: 0 0 8px; font-size: 22px; }
.kontakty-karty p { margin: 0 0 12px; font-size: 15.5px; color: var(--tekst-2); }
.kontakty-karty .dane { margin: 0 0 12px; font-size: 16px; }
.kontakty-karty .dane-tel a { color: var(--granat); font-size: 30px; }
.kontakty-karty .dane li:not(.dane-tel) a { color: var(--link); }
.kontakty-karty .uwaga-makiety { margin: 0 0 12px; }
.kontakty-dalej { margin: 0 !important; font-size: 15px; }
.kontakt-firma { margin: 26px 0 0; font-size: 15px; color: var(--tekst-2); }
.kroki-lista { list-style: none; margin: 8px 0 14px; padding: 0; counter-reset: krok; }
.kroki-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; margin: 0; padding: 18px 0; border-top: 1px solid var(--linia); counter-increment: krok; }
.kroki-lista li::before { content: counter(krok); grid-row: span 2; font: 800 46px/1 var(--font-n); color: var(--blekit); }
.kroki-lista b { font: 800 22px/1.2 var(--font-n); color: var(--granat); }
.kroki-lista p { margin: 4px 0 0; color: var(--tekst-2); }

/* kamera w naglowku jak u Bartusia (Rafal 2026-10-26: „do menu dodajmy ikonke z kamera”); czerwona kropka = obraz na zywo */
.kamera-link { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 46px; margin-left: 10px; color: var(--menu-kolor, var(--granat));
  border: 1.5px solid currentColor; border-radius: 15px / 50%; opacity: .92; }   /* jak przyciski-deski */
.kamera-link:hover { color: var(--blekit); opacity: 1; }
.kamera-link .pikt { width: 24px; height: 24px; }
.kropka-live { position: absolute; top: 6px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }

/* wyciagi Nartoramy ze stanem z API zieleniec.pl, w formie jak u Bartusia (Rafal 2026-10-26); pola „na zywo” ukryte, dopoki nie przyjdzie stan */
[data-wyciagi]:not(.stan-wczytany) .wyc-na-zywo { display: none; }
.wyc-wstep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 32px; }
.wyc-wstep h2 { margin-bottom: 14px; }
.wyc-wstep p { margin: 0 0 12px; }
.stan-stoku { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 7px; background: #e6f6ec; color: #1d7a3e; font: 700 15px/1.3 var(--font-t); text-transform: uppercase; letter-spacing: .05em; }
.stan-stoku.zamkniety, .wyc-stan.zamkniety { background: #fdecec; color: #b42318; }
.stan-kropka, .wyc-stan::before { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.trudnosci { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; font-weight: 700; }
.trudnosci li { margin: 0; }
.wyc { border: 1px solid var(--linia); padding: 24px 26px 20px; background: #fff; }
.wyc-glowa { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 18px; }
.wyc-znak { display: grid; place-items: center; width: 56px; height: 56px; background: var(--granat); color: #fff; font: 800 22px/1 var(--font-n); }
.wyc-glowa h3 { margin: 0; font-size: 26px; }
.wyc-glowa p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.35; color: var(--tekst-2); }
.wyc-stan { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 5px; background: #e6f6ec; color: #1d7a3e; font: 700 13px/1.2 var(--font-t); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.wyc-stan::before { content: ''; width: 8px; height: 8px; }
.wyc-karty .wyc-glowa { grid-template-columns: 56px minmax(0, 1fr); }
.wyc-karty .wyc-stan { grid-column: 2; justify-self: start; margin-top: -6px; }
.wyc-trasy { margin: 0; table-layout: fixed; }
.wyc-trasy th:first-child { width: 26%; }
.wyc-nazwa { padding-left: 0; }
.wyc-nazwa::before { display: none; }
.wyc-trasy [data-stan-trasy] { color: #b42318; }
.wyc-trasy [data-stan-trasy].otwarta { color: #1d7a3e; font-weight: 700; }
.wyc-srodtytul { margin: 40px 0 16px; font-size: 24px; }
.wyc-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wyc-karty-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wyc-srodtytul-pierwszy { margin-top: 28px; }
.wyc-siedziba { margin: -6px 0 14px; padding: 8px 12px; background: var(--tlo-2); border-left: 4px solid var(--pomarancz); font-size: 15px; font-weight: 700; color: var(--granat); }
.wyc-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; padding-top: 16px; border-top: 1px solid var(--linia); }
.wyc-dl div { min-width: 0; }
.wyc-dl dt { font: 700 13px/1 var(--font-t); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-2); margin-bottom: 6px; }
.wyc-dl dd { margin: 0; font: 700 20px/1.2 var(--font-n); color: var(--granat); }
.wyc-przejazdy { max-width: 820px; margin: 0; }
.wyc-przejazdy th { width: 40%; }
.wyc-zrodlo { margin: 4px 0 0; }   /* nad tabelami (klientka 2026-10-29) */

/* gastronomia i noclegi: logo partnera, zdjecia domkow */
.logo-partnera { display: grid; place-items: center; padding: 56px 40px; background: var(--tlo-2); }
.logo-partnera img { width: 100%; max-width: 420px; height: auto; }
.logo-partnera-male { padding: 0; background: none; place-items: start; margin-bottom: 22px; }
.logo-partnera-male img { max-width: 230px; }
.domki-zdjecia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.domki-zdjecia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* mapa Zielenca w noclegach: OpenStreetMap z trasami (Leaflet), lista punktow z odleglosciami, pod spodem mapa tras z domkami */
/* lokalizacja na Noclegach (klientka 2026-10-28): bez mapy OSM, pomaranczowe „Nawiguj do domkow” przy naglowku, panorama tras z pinezkami i legenda */
.mz-glowka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 24px; }
.mz-glowka h2, .mz-glowka p { margin: 0; }
.mz-panorama { margin: 0; }
.mz-panorama a { display: block; }
.mz-panorama img, .dwie > figure.mz-panorama img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }   /* cala mapa, bez przycinania jak zdjecia w .dwie */
.mz-panorama figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: 15px; color: var(--tekst-2); }
.mz-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; font-size: 16.5px; color: var(--tekst); }
.mz-legenda li { display: flex; align-items: center; gap: 9px; margin: 0; }
.mz-kropka { flex: none; width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }   /* jak pinezki na mapie */
.mz-kropka.mz-domki { background: #f51924; } .mz-kropka.mz-szkola { background: var(--granat); } .mz-kropka.mz-bistro { background: var(--pomarancz); }
/* lista miejsc z numerami obok mapy (Gastronomia: „Gdzie zjesz na Nartoramie”); numery tylko w kwadratach, bez numeracji listy */
.mz-lista { list-style: none; margin: 0 0 16px; padding: 0; }
.mz-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linia); }
.mz-lista b { display: block; font: 700 19px/1.25 var(--font-n); color: var(--granat); }
.mz-lista span:not(.mz-znak) { font-size: 15.5px; color: var(--tekst-2); }
.mz-znak { display: grid; place-items: center; width: 34px; height: 34px; background: var(--granat); color: #fff; font: 800 17px/1 var(--font-n); }
.mz-znak.mz-domki { background: var(--pomarancz); color: var(--granat-c); }   /* bistro (nr 1) wyroznione pomaranczem */

/* noclegi i gastronomia (2026-10-26: „lepiej ogarnij, moze jakies ikonki”): pas liczb, lista z ikonkami, panel rezerwacji, relaks,
   mozaika zdjec, kafle „obok”, pas rezerwacji; plasko, ikonki liniowe w blekicie */
/* pas liczb (Noclegi): ikonka nad liczba (klientka 2026-10-28: „ikonki mniejsze”, doszly szafa z suszeniem i balia); liczby w sasiednich
   kolumnach na jednej wysokosci, tez gdy opis ma dwie linijki */
.fakty { border-bottom: 1px solid var(--linia); }
.fakty ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* tyle kolumn, ile liczb */
.fakty li { display: grid; align-content: start; row-gap: 6px; margin: 0; padding: 24px 16px; }
.fakty li + li { border-left: 1px solid var(--linia); }
.fakty li:first-child { padding-left: 0; }
.fakty .pikt { width: 32px; height: 32px; margin-bottom: 4px; color: var(--pomarancz); stroke-width: 1.5; }
.fakty b { font: 800 26px/1.05 var(--font-n); color: var(--granat); }
.fakty span { font-size: 15px; line-height: 1.35; color: var(--tekst-2); }
.ikony-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.ikony-lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 12px 0; border-top: 1px solid var(--linia); font-size: 16.5px; line-height: 1.4; }
.ikony-lista .pikt { width: 24px; height: 24px; color: var(--pomarancz); stroke-width: 1.6; }
.domki-uklad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.rez-panel { position: sticky; top: calc(var(--naglowek-h) + 72px); padding: 30px 32px 26px; background: var(--granat); color: #d7e0f1; }
.rez-panel h2 { color: #fff; margin-bottom: 6px; }
.rez-panel a { color: #fff; }
.rez-panel .dane { margin: 18px 0 22px; }
.rez-panel .przycisk-glowny { --przycisk: var(--pomarancz); --przycisk-t: var(--granat-c); --przycisk-h: #fff; --przycisk-ht: var(--granat); }
.rez-panel .przycisk-drugi { background: rgba(255, 255, 255, .14); color: #fff; }
.rez-zapytaj { margin: 0 0 12px; }
.rez-zapytaj .przycisk { width: 100%; }
.rez-przyciski { justify-content: center; margin: 0 0 16px; }
.rez-info { margin: 0; font-size: 17px; text-align: center; color: #e3eaf6; }
.rez-adres { display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.rez-adres .ik { width: 20px; height: 20px; margin-top: .15em; fill: var(--pomarancz); }
/* lekko zaokraglone zdjecia na Noclegach (klientka 2026-10-28: „zaokraglic zdjecia”, „lekkie zaokraglenie zdjec”) */
.zaokraglone .karty-relaks li, .zaokraglone .kafle a, .zaokraglone .domki-mozaika a, .zaokraglone .mz-panorama a { border-radius: 10px; overflow: hidden; }
.domki-mozaika a { display: block; }
.domki-wiecej { margin: 26px 0 0; text-align: center; }
.karty-relaks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.karty-relaks li { margin: 0; background: #fff; }
.karty-relaks img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karty-relaks div { padding: 22px 24px 24px; }
.karty-relaks .pikt { width: 40px; height: 40px; color: var(--pomarancz); stroke-width: 1.5; margin-bottom: 8px; }
.karty-relaks h3 { margin: 0 0 8px; font-size: 23px; }
.karty-relaks p { margin: 0; font-size: 16px; color: var(--tekst-2); }
.domki-mozaika { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 8px; margin-bottom: 18px; }
.domki-mozaika a:first-child { grid-row: span 2; }
.domki-mozaika a:last-child { grid-column: span 2; }
.domki-mozaika img { width: 100%; height: 100%; object-fit: cover; }
.kafle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kafle li { margin: 0; }
.kafle a { display: flex; flex-direction: column; height: 100%; color: #fff; text-decoration: none; }   /* rowne kafle, gdy nazwa ma dwie linijki */
.kafle img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kafel-podpis { flex: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-content: center; align-items: center; padding: 14px 16px; background: var(--granat); }
.kafel-podpis .pikt { grid-row: span 2; width: 34px; height: 34px; color: var(--pomarancz); stroke-width: 1.6; }
.kafel-podpis b { font: 700 19px/1.2 var(--font-n); }
.kafel-podpis small { font-size: 14.5px; color: #c6d2e9; }
.kafle a:hover .kafel-podpis { background: var(--granat-c); }
.kafle a:hover b { color: var(--blekit); }
.pas-cta { padding: 44px 0; background: var(--tlo-2); color: var(--tekst-2); }   /* jasny: nie zlewa sie z granatowa stopka (klientka 2026-10-28) */
.pas-cta .w { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.pas-cta h2 { margin: 0 0 4px; }
.pas-cta p { margin: 0; }
.uwaga-pas { margin-top: 18px; margin-bottom: 18px; }
.udog-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Gastronomia (uwagi klientki 2026-10-28): pod jedzeniem drugi rzad o bufecie, nizej godziny otwarcia; lista ikonek w jednej kolumnie obok mapy */
.udog + .udog { margin-top: -1px; }
.udog-dalej span { font-size: 15px; }
.godziny-bistro { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin-top: 32px; }
.godziny-bistro .ik { width: 30px; height: 30px; margin-top: 4px; fill: var(--pomarancz); }
.godziny-bistro h3 { margin: 0 0 4px; color: #fff; font-size: 22px; }
.godziny-bistro p { margin: 0; font-size: 18px; color: #fff; }
.godziny-bistro .godziny-gwiazdka { margin-top: 4px; font-size: 15px; color: #c6d2e9; }
.ikony-kolumna .ikony-lista { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
.logo-partnera-srodek { place-items: center; }   /* logo bistro na srodku karty */
.udog-4 li:nth-child(n) > * { padding-left: 20px; }
.udog-4 li:nth-child(4n + 1) > * { padding-left: 0; }

/* okolica */
.okolica { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.okolica img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; }
.okolica h3 { margin: 0 0 8px; font-size: 22px; }
.okolica h3 a { color: inherit; }
.okolica p { font-size: 16.5px; }

/* opinie z Google */
.opinie { padding: 40px 0; background: var(--opinie-tlo, var(--tlo-2)); }
.opinie-uklad { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.opinie p { margin: 0; }
.opinie-ocena { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.opinie-ocena b { grid-row: span 2; font: 800 64px/1 var(--font-n); color: var(--granat); }
.opinie-ocena span:last-child { font-size: 15.5px; color: var(--tekst-2); }
.gw { position: relative; display: inline-block; font-size: 24px; letter-spacing: 2px; line-height: 1; color: #c9cede;
  background: linear-gradient(90deg, #f2a900 var(--o), #c9cede var(--o)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.opinie-tekst { max-width: 620px; font-size: 17px; }
.opinie-przyciski { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* stopka z gorami z logo */
.stopka { --st-tlo: var(--granat); position: relative; background: transparent; color: #e6ebf5; margin-top: 0; }
.stopka-gory { display: block; width: 100%; height: 110px; margin-bottom: -1px; }
.g-granat { fill: var(--st-tlo); } .g-blekit { fill: var(--blekit); }
.stopka-glowna { background: var(--st-tlo); padding: 20px 0 48px; }
.stopka-siatka { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr .8fr; gap: 40px; }
.stopka h2 { color: #fff; font-size: 20px; margin: 6px 0 14px; }
.stopka a { color: #fff; }
.stopka a:hover { color: var(--blekit); }
.stopka p { font-size: 16px; }
.stopka-marka img { width: 230px; margin-bottom: 18px; }
/* telefon, mail, adres, godziny i media z ikonkami w blekicie na granacie: stopka i kontakt (Rafal 2026-10-25) */
.dane { list-style: none; margin: 0 0 1em; padding: 0; font-size: 16px; }
.dane li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 10px; }
.dane .ik { width: 20px; height: 20px; margin-top: .2em; fill: var(--pomarancz); }
.dane .dane-tel { align-items: center; margin-bottom: 16px; }
.dane .dane-tel + .dane-tel { margin-top: -6px; }   /* drugi numer szkoly (2026-10-28) */
.dane .dane-tel .ik { width: 26px; height: 26px; margin: 0; }
.dane-tel a { font: 800 40px/1 var(--font-n); color: #fff; text-decoration: none; white-space: nowrap; }
/* opinie Google wyroznione (klientka 2026-10-28: „podkreslic w jakis sposob”): ocena, gwiazdki wypelnione wg oceny, liczba opinii */
.stopka-opinie { display: inline-grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; justify-items: start; text-align: left; padding: 12px 18px 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; text-decoration: none; }
.stopka-opinie:hover { border-color: var(--pomarancz); color: #fff; }
.so-ocena { grid-row: span 2; font: 800 36px/1 var(--font-n); color: #fff; }
.so-gwiazdki { position: relative; color: rgba(255, 255, 255, .28); font-size: 19px; line-height: 1.1; letter-spacing: 2px; white-space: nowrap; }
.so-gwiazdki::before { content: '★★★★★'; position: absolute; left: 0; top: 0; width: var(--ocena); overflow: hidden; color: var(--pomarancz); }
.so-opis { font-size: 14.5px; color: #c6d2e9; }
/* godziny otwarcia w osobnej kolumnie (klientka 2026-10-28) */
.stopka-godziny .dane span { font-size: 20px; font-weight: 600; color: #fff; }   /* „7 dni w tygodniu” wiekszy (Rafal 2026-10-28) */
.stopka-godziny .dane span b { display: block; margin-top: 4px; font: 800 30px/1.1 var(--font-n); color: #fff; }
.stopka .stopka-gwiazdka { margin: 8px 0 0; font-size: 14.5px; color: #c6d2e9; }
/* dolny pasek stopki wysrodkowany na kazdej szerokosci, na koncu „Stworzone przez” z logo Rimset (Rafal 2026-10-26) */
.stopka-dol { background: var(--st-tlo); border-top: 1px solid rgba(255, 255, 255, .16); padding: 18px 0 22px; font-size: 14.5px; text-align: center; }
.stopka-dol p { margin: 0; font-size: 14.5px; line-height: 1.9; color: #c6d2e9; }
.stopka-dol a { color: #c6d2e9; }
.stopka-autor { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; white-space: nowrap; text-decoration: none; }
.stopka-autor img { display: block; height: auto; opacity: .85; }
.stopka-autor:hover img { opacity: 1; }

/* stopka wysuwana spod tresci, jak na obecnej stronie: tresc zsuwa sie z przyklejonej do dolu okna stopki.
   Tylko na komputerze i gdy cala stopka miesci sie w oknie; klase i dolny margines tresci ustawia app.js */
.stopka-wysuwana main { position: relative; z-index: 2; background: var(--tlo); }
.stopka-wysuwana .stopka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; }

/* pasek na telefonie */
.pasek-tel { display: none; }

/* menu z gastronomia, noclegami i kamera (2026-10-26): numer telefonu ponizej 1600 px tylko jako ikonka, ponizej 1280 px przycisk menu */
@media (max-width: 1599px) {
  .menu-tel span { display: none; }
}
@media (max-width: 1279px) {
  :root { --naglowek-h: 68px; }
  .menu-przycisk { display: grid; place-items: center; }
  .kamera-link { margin-left: auto; width: 46px; height: 42px; }
  .logo-arena { padding-left: 14px; }
  .logo-arena img { height: 34px; }
  .kamera-link + .menu-przycisk { margin-left: 6px; }
  .nawigacja { position: fixed; inset: var(--naglowek-h) 0 0 0; background: var(--granat); padding: 16px 24px 120px; overflow-y: auto; display: none; }
  .menu-otwarte .nawigacja { display: block; }
  .menu-otwarte .menu-przycisk .ik-menu { display: none; }
  .menu-otwarte .menu-przycisk .ik-x { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { color: #fff; font: 700 26px/1.2 var(--font-n); padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .menu-cta .pikt { width: 24px; height: 24px; }
  .menu a:hover, .menu a[aria-current=page] { color: var(--blekit); }
  .menu-tel span { display: inline; }
  .menu-cta { margin: 20px 0 0; }
  .menu .menu-cta .przycisk { display: flex; width: 100%; min-height: 56px; padding: 10px calc(8px + var(--dziob) * .7) 9px 18px; border-bottom: 0; font-size: 19px; background: var(--przycisk); color: var(--przycisk-t); }
}
@media (max-width: 1180px) {
  .cennik-wyp-uklad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .udog a, .udog div { padding: 22px 14px 20px; }
  .udog b { font-size: 19px; }
  .udog span { font-size: 14.5px; }
}
@media (max-width: 980px) {
  .dwie, .zapis { grid-template-columns: 1fr; gap: 32px; }
  .dwie.dwie-foto-pelne > img { height: auto; aspect-ratio: 3 / 2; }
  .odwr > :first-child { order: 0; }
  .zapis-bok { position: static; }
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .okolica { grid-template-columns: 1fr; }
  .opinie-uklad { grid-template-columns: auto 1fr; gap: 20px 32px; }
  .opinie-przyciski { grid-column: 1 / -1; flex-direction: row; gap: 20px; }
  .gal-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .szk-ceny { grid-template-columns: 1fr; gap: 32px; }
  .kontakt-uklad, .domki-uklad, .kamera-uklad { grid-template-columns: 1fr; }
  .cennik-wyp-uklad { grid-template-columns: minmax(0, 1fr); }
  .cennik-wyp th, .cennik-wyp td { padding-left: 6px; padding-right: 6px; }
  .kamera-pas { padding: 48px 0; }
  .kamera-uklad { gap: 28px; }
  .rez-panel { position: static; }
  .fakty ul { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .fakty li, .fakty li:first-child, .fakty li + li { padding: 18px 14px 18px 0; border-left: 0; border-top: 1px solid var(--linia); }
  .fakty li:last-child:nth-child(odd) { grid-column: span 2; }
  .fakty li:nth-child(-n + 2) { border-top: 0; }
  .fakty li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--linia); }
  .karty-relaks { grid-template-columns: 1fr; }
  .domki-mozaika { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; }
  .domki-mozaika a:first-child { grid-row: auto; grid-column: span 2; }
  .domki-mozaika a:last-child { grid-column: auto; }
  .wyc-wstep, .wyc-karty { grid-template-columns: 1fr; }
  .kontakt-panel { padding: 52px 32px 44px; }
  .kontakt-uklad .mapa { min-height: 380px; }
  .kontakty-karty { grid-template-columns: minmax(0, 1fr); }
  .udog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .udog li:nth-child(n) > * { padding-left: 20px; }
  .udog li:nth-child(odd) > * { padding-left: 0; }
  .etapy-stok { display: none; }
  .etapy { grid-template-columns: 1fr; gap: 22px; }
  .etapy::before { content: ''; position: absolute; left: 20px; top: 20px; bottom: 20px; border-left: 3px dotted rgba(41, 73, 134, .35); }
  .etap { position: relative; padding: 0 0 0 64px; text-align: left; min-height: 44px; }
  .etap-pole { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: 0; }
  .etap .etap-znak, .etap:nth-child(n) .etap-znak { top: 20px; left: 20px; }
  .etap:has(.etap-narciarz) { padding-right: 76px; min-height: 76px; }
  .etap:has(.etap-narciarz) .etap-pole { display: contents; }   /* znak i narciarz liczone od li (znak zostaje w tym samym miejscu) */
  .etap-narciarz, .etap-narciarz-1, .etap-narciarz-5 { position: absolute; left: auto; right: 0; top: -4px; width: 68px; transform: none; }   /* na telefonie obok opisu */
  .kroki-duze { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  body { font-size: 17px; padding-bottom: 72px; }
  .w { padding: 0 16px; }
  .sekcja { padding: 52px 0; }
  .lead { font-size: 18px; }
  .stopka-siatka { grid-template-columns: 1fr; gap: 28px; }
  /* na telefonie cala stopka wysrodkowana (Rafal 2026-10-25) */
  .stopka-glowna { text-align: center; }
  .stopka-marka img { margin-inline: auto; }
  .stopka .dane li { display: block; }
  .stopka .dane .ik, .stopka .dane .dane-tel .ik { display: inline-block; margin: 0 8px 0 0; vertical-align: -.3em; }
  .stopka .dane .dane-tel .ik { vertical-align: .05em; }
  .stopka-dol a { white-space: nowrap; }
  .stopka-gory { height: 60px; }
  .gal-sekcja { padding: 48px 0 40px; }
  .gal-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .gal-siatka a { border-radius: 8px; }
  .pw-figura { inset: 64px 8px 84px; }
  .pw-figura img { max-height: calc(100dvh - 170px); }
  .pw-poprz, .pw-nast { top: auto; bottom: 14px; transform: none; }
  .pw-poprz { left: calc(50% - 64px); } .pw-nast { right: calc(50% - 64px); }
  .opinie-uklad { grid-template-columns: 1fr; }
  .kalk { padding: 22px 16px 18px; }
  .kontakt-panel { padding: 32px 16px 36px; }
  .ikony-lista { grid-template-columns: 1fr; }
  .fakty b { font-size: 24px; }
  .fakty .pikt { width: 28px; height: 28px; }
  .rez-panel { padding: 26px 18px 22px; }
  .kafle { grid-template-columns: 1fr 1fr; gap: 8px; }
  .karty-cen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .karty-tras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .karty-tras li { padding: 12px 12px 10px; }
  .karty-tras b { font-size: 18px; }
  .kt-meta { font-size: 14px; }
  .karty-cen li { padding: 14px 12px 10px; }
  .karty-cen h3 { font-size: 20px; }
  .karty-cen li > p { font-size: 13px; }
  .karty-cen dl div { gap: 6px; padding: 7px 0; }
  .karty-cen dt { font-size: 14px; }
  .karty-cen dt small { font-size: 12px; }
  .karty-cen dd { font-size: 18px; }
  .kafel-podpis { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .kafel-podpis .pikt { display: none; }
  .kafel-podpis b { font-size: 17px; }
  .kafel-podpis small { font-size: 13.5px; }
  .domki-mozaika { gap: 6px; grid-template-rows: 200px 130px 130px; }
  .wyc { padding: 18px 16px 16px; }
  .wyc-glowa { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .wyc-znak { width: 46px; height: 46px; font-size: 19px; }
  .wyc-glowa h3 { font-size: 23px; }
  .wyc-glowa .wyc-stan { grid-column: 1 / -1; justify-self: start; }
  /* trasy jako wiersze: nazwa z kolorem trudnosci i stan, pod spodem dlugosc i pokrywa */
  .wyc-trasy thead, .wyc-trasy td:nth-child(2) { display: none; }
  .wyc-trasy tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--linia); }
  .wyc-trasy th, .wyc-trasy td { display: block; padding: 0; border: 0; width: auto !important; }
  .wyc-trasy th { grid-column: 1 / 4; }
  .wyc-trasy [data-stan-trasy] { grid-column: 4; grid-row: 1; text-align: right; }
  .wyc-trasy td:nth-child(3) { grid-column: 1; grid-row: 2; padding-left: 18px; color: var(--tekst-2); }
  .wyc-trasy [data-pokrywa] { grid-column: 2 / -1; grid-row: 2; color: var(--tekst-2); white-space: nowrap; }
  .wyc-trasy [data-pokrywa]::before { content: 'pokrywa '; }
  .wyc-nazwa { padding-left: 18px; }
  .wyc-nazwa::before { display: block; }
  .wyc-przejazdy tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--linia); }
  .wyc-przejazdy th, .wyc-przejazdy td { display: block; padding: 0; border: 0; width: auto; }
  .wyc-przejazdy td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--tekst-2); }
  .wyc-przejazdy td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .domki-zdjecia { grid-template-columns: 1fr 1fr; gap: 6px; }
  .logo-partnera { padding: 36px 24px; }
  .kontakt-panel .dane-tel a { font-size: 42px; }
  .kontakt-uklad .mapa { min-height: 320px; }
  .mapa-z-karta .mapa { min-height: 320px; }
  .mapa-karta { padding: 24px 16px 28px; }
  .kontakty-karty > li { padding: 20px 18px 18px; }
  .kroki-lista li { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
  .kroki-lista li::before { font-size: 38px; }
  .udogodnienia { padding: 48px 0 52px; }
  .udog a, .udog div { padding: 20px 12px 18px; }
  .udog li:nth-child(n) > * { padding-left: 14px; }
  .udog li:nth-child(odd) > * { padding-left: 0; }
  .udog .pikt { width: 38px; height: 38px; }
  .udog b { font-size: 20px; }
  .udog span { font-size: 14.5px; }
  .kalk-cena b, .kroki-duze li::before { font-size: 52px; }
  .szk-ekipa { min-height: 0; display: block; }
  .szk-ekipa-foto { position: relative; aspect-ratio: 3 / 2; height: auto; }
  .szk-ekipa .w { padding: 0; }
  .szk-ekipa-panel { max-width: none; }
  .dni button { padding: 8px 2px; }
  .dni button b { font-size: 19px; }
  .godziny { grid-template-columns: repeat(4, 1fr); }
  .uczestnicy .osoba { grid-template-columns: 1fr 90px; }
  .uczestnicy .osoba label:last-child { grid-column: 1 / -1; }
  .pola { grid-template-columns: 1fr; }
  .info th { width: 40%; }
  /* cenniki na telefonie: nazwa w pierwszym wierszu, ceny pod spodem z podpisem */
  .cennik:not(.cennik-wyp) thead { display: none; }
  .cennik:not(.cennik-wyp) tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); border-bottom: 1px solid var(--linia); padding: 8px 0; }
  .cennik:not(.cennik-wyp) th[scope=row], .cennik:not(.cennik-wyp) th[scope=rowgroup] { grid-column: 1 / -1; border: 0; padding: 4px 0; }
  .cennik:not(.cennik-wyp) td { border: 0; padding: 4px 0; font-size: 18px; }
  .cennik:not(.cennik-wyp) td::before { content: attr(data-czas); display: block; font: 400 13px/1.3 var(--font-t); color: var(--tekst-2); }
          .trasy th:nth-child(4), .trasy td:nth-child(4) { display: none; }
  .trasy { font-size: 15.5px; }
  .pasek-tel { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linia); }
  .pasek-tel .przycisk { --dziob: 26px; --nos: 14px; min-height: 50px; padding-top: 10px; padding-bottom: 9px; font-size: 17px; }
  .duzy-tel { font-size: 26px; }
}
@media (max-width: 1180px) {
  /* karta „Jak do nas trafic” pod mapa, gdy mapa jest waska (inaczej zaslania pinezke szkoly) */
  .mapa-z-karta { display: flex; flex-direction: column; min-height: 0; }
  .mapa-z-karta .mapa { position: relative; flex: 1; min-height: 380px; }
  .mapa-karta { position: static; transform: none; width: auto; border-radius: 0; padding: 28px 32px 32px; border-top: 1px solid rgba(255, 255, 255, .18); }
  .mapa-karta .przycisk { width: auto; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  /* siedem liczb na laptopie (ok. 1024 px) w dwoch rzedach po cztery, zeby „6 domków” i „1–9 osób” miescily sie w jednej linijce */
  .fakty ul { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fakty li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
  .fakty li:nth-child(n + 5) { border-top: 1px solid var(--linia); }
}
@media (max-width: 400px) {
  .cennik-wyp thead th { font-size: 12.5px; letter-spacing: 0; overflow-wrap: anywhere; }   /* „SNOWBOARDOWY” na 320 px przy foncie zastepczym */
}

/* ---------- uwagi klientki 2026-10-29 (strona główna, szkoła, „szkoła 2”) ---------- */
/* zaokraglone zdjecia i ramki na calej stronie (klientka: „prośba ogólna – ramki, zdjęcia żeby były zaokrąglone”); zdjecia pod naglowkiem zostaja na cala szerokosc */
:root { --r: 12px; }
.rzad-foto, .rzad-tekst, .karty-cen li, .kafle a, .karty-relaks li, .domki-mozaika a, .gal-siatka a, .mz-panorama a, .mapa-tras a, .dwie > img,
.zapisy-widzet, .kalk, .rez-panel, .wyc, .znizki li, .kontakty-karty > li, .mapa-karta, .opinia, .okolica img, .kamera, .karty-tras li,
.cennik-blok, .cennik-rabaty, .cennik-grupa, .uwaga-makiety, .szk-ekipa-panel, .logo-partnera:not(.logo-partnera-male) { border-radius: var(--r); }
.rzad-foto, .kafle a, .karty-relaks li, .gal-siatka a, .mz-panorama a, .mapa-tras a, .kamera, .domki-mozaika a { overflow: hidden; }
.kontakt-uklad .mapa, .mapa-z-karta .mapa { border-radius: 0; }

/* druga linijka tytulu innym kolorem (Szkoła / Wypożyczalnia „narciarska & snowboardowa”) */
.h1-akcent, .h2-akcent { color: var(--blekit); }
.h2-akcent { display: block; font-size: .62em; margin-top: 4px; }

/* ikonka zniżki w lekcjach i wypożyczalni na głównej */
.znizka-info { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 16px; }
.znizka-info .pikt { width: 26px; height: 26px; flex: none; color: var(--pomarancz); }
.znizka-info a { font-weight: 700; }

/* lekcje razem z zapisami w karcie (klientka: „musimy to połączyć”) */
.rzad-lekcje .zapisy-widzet { margin: 4px 0 0; padding: 20px 20px 16px; border: 0; background: #fff; }
.rzad-lekcje .zapisy-widzet .przycisk { min-height: 52px; }
.lekcje-wiecej { margin: 14px 0 0; font-size: 16px; }

/* sklepik innym kolorem */
.rzad-sklepik .rzad-tekst { background: #fff4e0; border-top-color: var(--pomarancz); }
.rzad-sklepik h2 { color: #8a4f00; }

/* trasy przy szkole jako tablica w dwoch kolumnach */
.tt-glowka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 56px; align-items: end; margin-bottom: 28px; }
.tt-glowka h2 { margin-bottom: 14px; }
.tt-glowka p { margin: 0 0 12px; }
.tt-kolumny { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
.tt-kol { padding: 22px 24px 14px; background: var(--tlo-2); border-radius: var(--r); }
.tt-kol h3 { margin: 0 0 10px; font-size: 22px; }
.tt-kol h3 small { display: block; margin-top: 2px; font: 400 15px/1.3 var(--font-t); color: var(--tekst-2); }
.tt-lista { list-style: none; margin: 0; padding: 0; }
.tt-lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; padding: 11px 0; border-top: 1px solid var(--linia); }
.tt-znak { width: 14px; height: 14px; border-radius: 3px; }
.tt-niebieska { background: #1f6fd1; } .tt-czerwona { background: #d42b2b; } .tt-czarna { background: #111; }
.tt-lista b { display: block; font: 700 18px/1.2 var(--font-n); color: var(--granat); }
.tt-lista div span { font-size: 14.5px; color: var(--tekst-2); }
.tt-stan { text-align: right; font-size: 14.5px; font-weight: 700; color: #b42318; white-space: nowrap; }
.tt-stan .otwarta { color: #1d7a3e; }
.tt-stan small { display: block; font-weight: 400; color: var(--tekst-2); }
.trasy-tablica .przyciski { margin: 24px 0 0; }

/* „Gdzie jesteśmy” na głównej: etykieta, wartość, dopisek innymi krojami (nie jednym ciągiem) */
.gdzie-lista { list-style: none; margin: 0 0 22px; padding: 0; }
.gdzie-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.gdzie-lista .ik { width: 22px; height: 22px; margin-top: 2px; fill: var(--pomarancz); }
.gdzie-lista small { display: block; font: 700 13px/1.3 var(--font-t); text-transform: uppercase; letter-spacing: .06em; color: #bacae8; }
.gdzie-lista b { display: block; margin: 3px 0 2px; font: 700 20px/1.3 var(--font-n); color: #fff; }
.gdzie-lista b a { color: #fff; text-decoration: none; white-space: nowrap; }
.gdzie-lista span { font-size: 15.5px; color: #d7e0f1; }
/* karta „Jak do nas trafić”: nazwa, adres i dojazd rozne krojem */
.mapa-karta .mk-nazwa { font: 700 18px/1.3 var(--font-n); color: #fff; }
.mapa-karta .mk-adres { display: flex; gap: 8px; font-size: 16px; color: #fff; }
.mapa-karta .mk-adres .ik { width: 18px; height: 18px; margin-top: .2em; fill: var(--pomarancz); flex: none; }
.mapa-karta .mk-dojazd { font-size: 14.5px; font-style: italic; color: #c6d2e9; }

/* szkoła: cennik i oferta na górze, cały cennik widoczny od razu (klientka: „niech się rozwija od razu, albo najlepiej jest na samej górze”) */
.dane-jasne .ik { fill: var(--pomarancz); }
.szk-cennik { margin-top: 40px; }
.cennik-lekcji-uklad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cennik-blok { padding: 26px 28px 22px; background: var(--tlo-2); }
.sekcja-tlo .cennik-blok { background: #fff; }
.cennik-blok h3 { margin: 0 0 6px; font-size: 26px; }
.cennik-blok > p { font-size: 16px; color: var(--tekst-2); }
.cennik-lek td { text-align: right; white-space: nowrap; }
.cennik-lek thead th:not(:first-child) { text-align: right; }
.cennik-lek td:last-child { color: var(--blekit-c); font-size: 17px; }
.cennik-opis { margin-top: 3px; font-size: 13.5px !important; line-height: 1.35; }
.cennik-info { margin: 12px 0 0; font-size: 14.5px; color: var(--tekst-2); }
.cennik-grupa { margin-top: 16px; padding: 14px 18px; background: #fff; border-left: 4px solid var(--pomarancz); font-size: 16px; }
.cennik-sezon { margin: 18px 0 0; font-size: 15px; color: var(--tekst-2); }
.cennik-przyciski { margin: 14px 0 0; }

/* jak wygląda lekcja: numery w kółkach, punkty pod spodem */
.kroki-kolka li::before { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blekit); color: #fff; font-size: 22px; }
.kroki-kolka ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--tekst-2); font-size: 16.5px; }
.kroki-kolka ul li { display: list-item; padding: 0; border: 0; margin: 0 0 4px; counter-increment: none; }   /* podpunkty nie licza sie do numeru kroku */
.kroki-kolka ul li::before { content: none; }
.kroki-kolka ul .ik { width: 16px; height: 16px; fill: var(--pomarancz); vertical-align: -.15em; }

@media (max-width: 980px) {
  .tt-glowka, .tt-kolumny, .cennik-lekcji-uklad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .tt-kol, .cennik-blok { padding: 18px 16px 12px; }
  dialog.regulamin-okno { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .ro-glowka { padding: 12px 12px 12px 16px; }
  .ro-glowka h2 { font-size: 21px; }
  .ro-tresc { padding: 16px 16px 24px; }
  .ro-tresc ol { padding-left: 20px; font-size: 15.5px; }
  .gdzie-lista b { font-size: 18px; }
}
@media (max-width: 380px) {
  .logo-arena { padding-left: 10px; margin-left: -10px; }
  .logo-arena img { height: 28px; }
}

/* Dekalog narciarski z Nartusią (folder od klientki 2026-10-29) */
.dekalog-uklad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; align-items: start; }
.dekalog-nartusia { position: sticky; top: calc(var(--naglowek-h) + 72px); text-align: center; }
.dekalog-nartusia img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.dekalog-dymek { position: relative; margin: 16px 0 0; padding: 16px 18px; background: var(--tlo-2); border-radius: var(--r); font-size: 16px; text-align: left; }
.dekalog-dymek::before { content: ''; position: absolute; left: 50%; top: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--tlo-2); transform: translateX(-50%); }
.dekalog-dymek b { display: block; color: var(--granat); font-size: 18px; }
.dekalog-wstep { color: var(--tekst-2); }
.dekalog-zaznacz { margin: 20px 0 10px; font-weight: 700; color: var(--granat); }
.dekalog-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: dk; }
.dekalog-lista li { margin: 0; counter-increment: dk; }
.dekalog-lista label { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 2px 12px; height: 100%; padding: 14px 16px 14px 14px;
  background: var(--tlo-2); border: 2px solid transparent; border-radius: var(--r); cursor: pointer; transition: border-color .15s, background-color .15s; }
.dekalog-lista input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dk-pole { grid-row: span 2; width: 28px; height: 28px; border: 2px solid var(--granat); border-radius: 6px; background: #fff; display: grid; place-items: center; }
.dk-pole::after { content: ''; width: 8px; height: 14px; margin-top: -3px; border: solid var(--pomarancz); border-width: 0 4px 4px 0; transform: rotate(45deg); opacity: 0; transition: opacity .15s; }
.dekalog-lista input:checked + .dk-pole { background: var(--granat); }
.dekalog-lista input:checked + .dk-pole::after { opacity: 1; }
.dekalog-lista input:focus-visible + .dk-pole { outline: 3px solid var(--blekit); outline-offset: 2px; }
.dekalog-lista label:hover { border-color: rgba(41, 73, 134, .25); }
.dekalog-lista label:has(input:checked) { background: #fff4e0; border-color: var(--pomarancz); }
.dekalog-lista b { font: 700 17px/1.3 var(--font-n); color: var(--granat); }
.dekalog-lista b::before { content: counter(dk) '. '; }
.dk-opis { font-size: 14.5px; line-height: 1.45; color: var(--tekst-2); }
.dekalog-wynik { margin: 16px 0 0; font-weight: 700; color: var(--granat); }
.dekalog-wynik.brawo { padding: 12px 16px; background: #fff4e0; border-left: 4px solid var(--pomarancz); border-radius: 0 var(--r) var(--r) 0; font-size: 19px; }
.dekalog .przyciski { margin: 16px 0 0; }
.nartusia-pas { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--linia); }
.nartusia-pas h3 { margin: 0 0 6px; }
.nartusia-pas > p { margin: 0; }
.nartusia-foto { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nartusia-foto li { margin: 0; }
.nartusia-foto a { display: block; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--tlo-2); }
.nartusia-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.nartusia-foto a:hover img { opacity: .88; }
p.nartusia-wiecej { margin: 12px 0 0; font-weight: 700; }

/* Nartusia w „Dla dzieci” */
.nartusia-link { display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; padding: 10px 16px 10px 10px; background: #fff4e0; border-radius: var(--r);
  color: var(--tekst); text-decoration: none; font-size: 16px; line-height: 1.4; }
.nartusia-link img { flex: none; width: 54px; height: auto; }
.nartusia-link b { color: var(--granat); }
.nartusia-link:hover b { text-decoration: underline; }

/* numery ratunkowe (Kontakt, Wyciągi): spokojnie, w kolorach strony — „nad bezpieczeństwem czuwa GOPR” (Rafał 2026-10-29) */
.alarm { margin: 28px 0 0; padding: 18px 22px; background: var(--tlo-2); border-left: 4px solid var(--blekit); border-radius: 0 var(--r) var(--r) 0; }
.kontakty-inne .alarm, .sekcja-tlo .alarm { background: #fff; }
.alarm h3 { margin: 0 0 4px; font-size: 20px; color: var(--granat); }
.alarm p { margin: 0 0 12px; font-size: 16px; color: var(--tekst-2); }
.alarm ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.alarm li { margin: 0; }
.alarm li span { display: block; font-size: 14px; color: var(--tekst-2); }
.alarm li b { font: 800 20px/1.3 var(--font-n); color: var(--tekst-2); }
.alarm a { color: var(--granat); text-decoration: none; white-space: nowrap; }
.alarm a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .dekalog-uklad { grid-template-columns: minmax(0, 1fr); }
  .dekalog-nartusia { position: static; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left; }
  .dekalog-nartusia img { max-width: 110px; }
  .dekalog-dymek { margin: 0; }
  .dekalog-dymek::before { left: -10px; top: 50%; border: 10px solid transparent; border-left: 0; border-right-color: var(--tlo-2); transform: translateY(-50%); }
}
@media (max-width: 680px) {
  .dekalog-lista { grid-template-columns: minmax(0, 1fr); }
  .dekalog-nartusia { grid-template-columns: 84px minmax(0, 1fr); }
  .dekalog-nartusia img { max-width: 84px; }
  .dekalog-dymek { font-size: 15px; padding: 12px 14px; }
  .nartusia-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nartusia-pas { margin-top: 32px; padding-top: 24px; }
}

/* gotowa strona: okienko zgody na statystyki (GA4 dopiero po zgodzie) i „Ustawienia cookies” w stopce */
.okienko-zgody { position: fixed; left: 16px; bottom: 16px; z-index: 40; width: min(560px, calc(100vw - 32px)); padding: 18px 20px 16px; background: #fff; color: var(--tekst);
  border: 1px solid var(--linia); border-top: 4px solid var(--pomarancz); border-radius: var(--r); box-shadow: 0 10px 30px rgba(17, 32, 60, .25); }
.okienko-zgody[hidden] { display: none; }
.okienko-zgody p { margin: 0 0 14px; font-size: 15.5px; color: var(--tekst-2); }
.okienko-zgody b { display: block; margin-bottom: 4px; font: 700 19px/1.3 var(--font-t); color: var(--granat); }
.okienko-zgody .przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.okienko-zgody .przycisk { min-height: 46px; font-size: 16px; }
.link-przycisk { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.stopka-dol .link-przycisk { color: #c6d2e9; white-space: nowrap; }
@media (max-width: 680px) {   /* nad paskiem „Zapisz się / telefon” */
  .okienko-zgody { left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); padding: 14px 16px 12px; }
}

/* gotowa strona: polityka prywatnosci i strona 404 */
.tekst-prawny h2 { margin: 44px 0 14px; font-size: 27px; }
.tekst-prawny h2:first-child { margin-top: 0; }
.tekst-prawny ul { padding-left: 22px; }
.tekst-prawny li { margin-bottom: 10px; }
.tekst-prawny-data { margin-top: 36px; font-size: 15px; color: var(--tekst-2); }
.strona-404 { padding: calc(var(--naglowek-h) + 48px) 0 72px; background: linear-gradient(var(--tlo-2), #fff 78%); }
.uklad-404 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.scena-404 { display: block; width: 100%; height: auto; }
.tekst-404 h1 { font-size: clamp(40px, 5vw, 64px); text-transform: uppercase; }
.tekst-404 .lead { max-width: 520px; color: var(--tekst-2); }
.tekst-404 .przyciski { margin: 24px 0 36px; }
.tekst-404 h2 { font-size: clamp(26px, 2.6vw, 32px); }
.lista-404 { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; font-size: 17.5px; }
.lista-404 li { margin: 0; }
.lista-404 a { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--granat); text-decoration: none; }
.lista-404 a:hover { text-decoration: underline; }
.lista-404 .tt-znak { flex: none; }
@media (max-width: 980px) {
  .uklad-404 { grid-template-columns: minmax(0, 1fr); }
  .scena-404-ramka { max-width: 520px; }
}
@media (max-width: 680px) {
  .strona-404 { padding: calc(var(--naglowek-h) + 24px) 0 48px; }
  .lista-404 { grid-template-columns: minmax(0, 1fr); }
}