/* Potańcówki Ludowe — wersja C „Pasiak”
   Jasny papier, kolorowe pasy jak deski banera — tylko że w pasach są prawdziwe zdjęcia z zabaw.
   Archivo (wąskie, mocne nagłówki) + Instrument Serif (kursywa akcentów). Mobile-first. */
@font-face { font-family: 'Archivo'; src: url('../fonty/archivo-pl.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonty/instrument-serif-pl.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonty/instrument-serif-italic-pl.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --papier: #F3ECE0; --papier2: #EAE1D2; --biel: #FFFBF4;
  --tusz: #1A1414; --cichy: #5A4E48; --linia: #D9CDBB;
  --cz: #A3122A; --cz-ciemny: #820E21; --nb: #12305E; --nb-jasny: #1D4E9E;
  --f-gl: 'Archivo', 'Arial Narrow', sans-serif;
  --f-ak: 'Instrument Serif', Georgia, serif;
  --szer: 1260px;
  --ruch: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
html.bez-przewijania { overflow: hidden; }
body { margin: 0; background: var(--papier); color: var(--tusz); font: 400 1.0625rem/1.6 var(--f-gl); }
img, svg, canvas { max-width: 100%; height: auto; display: block; }
a { color: var(--nb-jasny); text-underline-offset: .18em; }
a:hover { color: var(--cz); }
:focus-visible { outline: 3px solid var(--nb-jasny); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--f-gl); font-weight: 800; font-variation-settings: 'wdth' 75; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
h2 em, h1 em { font-family: var(--f-ak); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cz); font-variation-settings: 'wdth' 100; }
p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cz); color: #fff; padding: 10px 16px; font-weight: 700; }
.pomin:focus { top: 12px; }
.pasy-linia { height: 6px; }

/* ---------- przyciski ---------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .7em 1.35em; border-radius: 0; font: 700 1.0625rem/1.15 var(--f-gl); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color .2s, color .2s, transform .25s var(--ruch), box-shadow .25s var(--ruch); text-align: center; }
.przycisk:active { transform: translateY(1px); }
.przycisk-duzy { min-height: 56px; font-size: 1.125rem; padding: .8em 1.6em; }
.przycisk-cz { background: var(--cz); color: #fff; }
.przycisk-cz:hover { background: var(--cz-ciemny); color: #fff; box-shadow: -6px 0 0 var(--nb-jasny); }
.przycisk-obrys { background: transparent; color: var(--tusz); border-color: var(--tusz); }
.przycisk-obrys:hover { background: var(--tusz); color: var(--papier); }
.przycisk-krem { background: var(--papier); color: var(--tusz); }
.przycisk-krem:hover { background: #fff; color: var(--cz); box-shadow: -6px 0 0 var(--cz); }
.przycisk-obrys-krem { background: transparent; color: var(--papier); border-color: var(--papier); }
.przycisk-obrys-krem:hover { background: var(--papier); color: var(--tusz); }

/* ---------- pasek z adresem ---------- */
.pasek-info { background: var(--tusz); color: var(--papier); font-size: .95rem; }
.pasek-wnetrze { max-width: var(--szer); margin: 0 auto; padding: 2px 16px; display: flex; align-items: center; gap: 8px 22px; min-height: 46px; }
.pasek-adres { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pasek-adres svg { flex: none; color: #FF8A8A; }
.pasek-adres > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-godz { display: none; opacity: .85; }
.pasek-dojazd { margin-left: auto; flex: none; color: #fff; font-weight: 700; padding: 10px 0; text-decoration: underline; text-decoration-color: #FF8A8A; text-decoration-thickness: 2px; }
.pasek-dojazd:hover { color: #FFB3B3; }
@media (min-width: 900px) { .pasek-godz { display: block; } }

/* ---------- nagłówek ---------- */
.naglowek { position: sticky; top: 0; z-index: 30; background: rgba(243, 236, 224, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linia); }
.naglowek-wnetrze { max-width: var(--szer); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; min-height: 66px; }
.logo { display: block; margin-right: auto; }
.logo img { height: 42px; width: auto; }
.naglowek-tel { min-height: 46px; min-width: 46px; padding: .5em .85em; }
.naglowek-tel-nr { display: none; }
.menu-przycisk { width: 48px; height: 48px; border: 2px solid var(--tusz); background: transparent; color: var(--tusz); cursor: pointer; display: grid; place-items: center; }
.menu-kreski, .menu-kreski::before, .menu-kreski::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .3s var(--ruch); }
.menu-kreski { position: relative; }
.menu-kreski::before, .menu-kreski::after { content: ''; position: absolute; left: 0; }
.menu-kreski::before { top: -6px; } .menu-kreski::after { top: 6px; }
[aria-expanded="true"] .menu-kreski { background: transparent; }
[aria-expanded="true"] .menu-kreski::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-kreski::after { transform: translateY(-6px) rotate(-45deg); }
.menu { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 70px); overflow: auto; background: var(--papier); border-bottom: 6px solid var(--cz); padding: 6px 16px 22px; display: flex; flex-direction: column; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: transform .3s var(--ruch), opacity .25s, visibility 0s .3s; }
.menu.otwarte { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ruch), opacity .25s; }
.menu a { color: var(--tusz); text-decoration: none; font: 800 2rem/1 var(--f-gl); font-variation-settings: 'wdth' 75; text-transform: uppercase; padding: 14px 2px; border-bottom: 1px solid var(--linia); }
.menu a:hover { color: var(--cz); }
.menu .menu-tel { color: var(--cz); font-size: 1.5rem; }
@media (min-width: 1080px) {
  .menu-przycisk { display: none; }
  .menu { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; padding: 0; flex-direction: row; gap: 2px; transition: none; }
  .menu a { position: relative; font: 600 1rem/1 var(--f-gl); text-transform: none; padding: 14px 12px; border: 0; }
  .menu a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; background: linear-gradient(90deg, #A3122A 0 25%, #1F5C3F 25% 40%, #9C2266 40% 55%, #A8380A 55% 70%, #5B2C83 70% 85%, #1D4E9E 85%); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ruch); }
  .menu a:hover { color: var(--tusz); }
  .menu a:hover::after { transform: scaleX(1); }
  .menu .menu-tel { display: none; }
  .naglowek-tel-nr { display: inline; }
  .logo img { height: 50px; }
}

/* ---------- start: najbliższa zabawa ---------- */
.start { position: relative; background: var(--cz); color: #fff; overflow: hidden; }
.start::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 46px); pointer-events: none; }
.start-wnetrze { position: relative; max-width: var(--szer); margin: 0 auto; padding: 22px 20px 44px; display: grid; gap: 30px; }
.start-info { min-width: 0; }
.znacznik { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 .95rem/1.2 var(--f-gl); letter-spacing: .14em; text-transform: uppercase; }
.znacznik-kiedy { background: #fff; color: var(--cz); padding: 4px 10px; letter-spacing: .08em; }
.start-tytul { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.start-dzien { font: 400 italic clamp(1.6rem, 6vw, 2.4rem)/1 var(--f-ak); text-transform: none; letter-spacing: 0; color: #FFD9D9; font-variation-settings: 'wdth' 100; }
.start-data { font-size: clamp(3.3rem, 15vw, 7.4rem); line-height: .86; letter-spacing: -.02em; font-variation-settings: 'wdth' 70; }
.start-godz { font-size: clamp(1.6rem, 6vw, 2.6rem); font-variation-settings: 'wdth' 80; color: #FFE7B3; }
.start-kapela { margin-top: 18px; padding-top: 14px; border-top: 2px solid rgba(255, 255, 255, .35); font: 800 clamp(1.7rem, 6.6vw, 2.8rem)/1.02 var(--f-gl); font-variation-settings: 'wdth' 78; text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; }
.etykieta { font: 400 italic 1.25rem/1 var(--f-ak); text-transform: none; color: #FFD9D9; font-variation-settings: 'wdth' 100; }
.licznik { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; }
.licznik b { font: 800 1.9rem/1 var(--f-gl); font-variation-settings: 'wdth' 75; font-variant-numeric: tabular-nums; }
.licznik i { font-style: normal; margin-left: 3px; color: #FFD9D9; font-size: .95rem; }
.start-przyciski { display: grid; gap: 12px; margin-top: 20px; }
.start-dopisek { margin-top: 16px; color: #FFE4E4; }
.start-dopisek a { color: #fff; font-weight: 700; white-space: nowrap; }

/* pasiak ze zdjęć + plakat */
.start-pasiak { position: relative; display: grid; place-items: center; min-height: 420px; padding: 34px 0; touch-action: pan-y; }
.pasiak { position: absolute; inset: 0; display: flex; gap: 6px; }
.pas { position: relative; flex: 1; overflow: hidden; background: var(--k); }
.pas-in { position: absolute; inset: -60px 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .9; will-change: transform; }
.pas::after { content: ''; position: absolute; inset: 0; background: var(--k); mix-blend-mode: screen; opacity: .35; }
.pas:nth-child(odd) .pas-in { background-position: 30% 40%; }
.plakat-przycisk { position: relative; z-index: 2; display: block; width: min(72%, 330px); padding: 0; border: 0; background: none; cursor: zoom-in; transform: rotate(-2deg); transition: transform .45s var(--ruch); }
.plakat-przycisk img { width: 100%; box-shadow: 0 28px 60px rgba(20, 0, 0, .45); border: 6px solid #fff; }
.plakat-przycisk:hover, .plakat-przycisk:focus-visible { transform: rotate(0) scale(1.02); }
.plakat-przycisk:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.plakat-znaczek { position: absolute; right: -10px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; background: var(--tusz); color: #fff; font: 700 .95rem/1 var(--f-gl); padding: 12px 14px; }
.start-brak { display: none; }
.brak-terminow .start-info, .brak-terminow .start-pasiak { display: none; }
.brak-terminow .start-brak { display: block; padding: 20px 0; }
.brak-terminow .start-brak .znacznik { color: #fff; }
.start-brak-tytul { font: 800 clamp(2.6rem, 11vw, 6rem)/.9 var(--f-gl); font-variation-settings: 'wdth' 72; text-transform: uppercase; margin: 14px 0 18px; }
.start-brak p { margin-bottom: 16px; }
.start-brak a:not(.przycisk) { color: #fff; font-weight: 700; }

@media (min-width: 640px) { .start-przyciski { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 960px) {
  .start-wnetrze { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; gap: 48px; padding: 0 28px; }
  .start-info { padding: 54px 0 60px; align-self: center; }
  .start-pasiak { min-height: 600px; padding: 50px 0; }
  .plakat-przycisk { width: min(66%, 380px); }
}
@media (max-width: 959px) {
  /* telefon: najpierw dane i telefon, plakat zaraz pod nimi */
  .start-pasiak { margin: 0 -20px; }
}

/* ---------- sekcje ---------- */
.sekcja { padding: 80px 0; }
.sekcja-wnetrze { max-width: var(--szer); margin: 0 auto; padding: 0 20px; }
.sekcja-glowa { margin-bottom: 30px; display: grid; gap: 12px; }
.sekcja-glowa h2 { font-size: clamp(2.8rem, 11vw, 5.6rem); }
.sekcja-glowa p { color: var(--cichy); font-size: 1.125rem; max-width: 620px; }
.sekcja-glowa p a { color: var(--tusz); font-weight: 700; white-space: nowrap; }
@media (min-width: 960px) { .sekcja-glowa { grid-template-columns: auto 1fr; align-items: end; gap: 40px; } .sekcja-glowa p { justify-self: end; text-align: right; } }

/* ---------- kalendarz: deski ---------- */
.deski { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.deska { position: relative; display: grid; grid-template-columns: 76px 1fr; grid-template-areas: "data tresc" "data rez"; gap: 2px 16px; padding: 16px 16px 12px; background: var(--k); color: #fff; overflow: hidden; transition: transform .35s var(--ruch); }
.deska::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px); pointer-events: none; }
.d-data { grid-area: data; display: flex; flex-direction: column; align-items: flex-start; }
.d-dzien { font: 400 italic 1.05rem/1 var(--f-ak); opacity: .9; }
.d-nr { font: 800 3.4rem/.9 var(--f-gl); font-variation-settings: 'wdth' 70; }
.d-mies { font: 700 .9rem/1.1 var(--f-gl); text-transform: uppercase; letter-spacing: .06em; }
.d-tresc { grid-area: tresc; min-width: 0; }
.d-gra { font: 400 italic 1.05rem/1 var(--f-ak); opacity: .9; }
.d-kapela { font-size: 1.6rem; line-height: 1; margin-top: 4px; font-variation-settings: 'wdth' 78; }
.d-godz { margin-top: 6px; font-size: .98rem; opacity: .92; }
.d-rez { grid-area: rez; position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.d-rez:hover { color: #fff; text-decoration-style: wavy; }
.deska-info { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; }
.deska-info .przycisk { align-self: flex-start; }
.d-info-tytul { font: 800 1.9rem/1 var(--f-gl); font-variation-settings: 'wdth' 75; text-transform: uppercase; }
@media (min-width: 760px) {
  /* deski stają pionowo jak na banerze — zawsze wypełniają całą szerokość, bez dziur */
  .deski { flex-direction: row; align-items: stretch; min-height: 460px; }
  .deska { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "data" "tresc" "rez"; padding: 22px 18px 18px; gap: 0; }
  .deska:hover, .deska:focus-within { transform: translateY(-14px); }
  .d-nr { font-size: clamp(3.6rem, 6vw, 5.6rem); }
  .d-tresc { margin-top: 24px; align-self: end; }
  .d-kapela { font-size: clamp(1.35rem, 2.1vw, 2rem); overflow-wrap: normal; word-break: normal; }
  .deski:has(> :nth-child(5)) .d-kapela { font-size: clamp(1.1rem, 1.45vw, 1.45rem); font-variation-settings: 'wdth' 66; }
  .d-rez { margin-top: 14px; }
  .deski[data-ile="1"] .deska { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; grid-template-areas: "data tresc rez"; align-items: end; gap: 40px; padding: 34px 40px; }
  .deski[data-ile="1"] { min-height: 0; }
  .deski[data-ile="1"] .d-kapela { font-size: 3rem; }
  .deski[data-ile="1"] .d-tresc { margin: 0; }
  .deski[data-ile="1"] .d-rez { margin: 0; }
  .deski[data-ile="2"] .d-kapela, .deski[data-ile="3"] .d-kapela { font-size: clamp(2rem, 3vw, 2.8rem); }
  .deski[data-ile="0"] { min-height: 0; }
  .deska-info { flex: 1; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .deski:has(> :nth-child(5)) { flex-wrap: wrap; min-height: 0; }
  .deski:has(> :nth-child(5)) .deska { flex: 1 1 22%; min-height: 300px; }
}

/* ---------- filmy ---------- */
.filmy { background: var(--tusz); color: var(--papier); }
.filmy .sekcja-glowa p { color: #CFC5B8; }
.filmy h2 em { color: #FF8A8A; }
.odtwarzacz { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.odtwarzacz::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #A3122A 0 25%, #1F5C3F 25% 40%, #9C2266 40% 55%, #A8380A 55% 70%, #5B2C83 70% 85%, #1D4E9E 85%); pointer-events: none; }
.odtwarzacz iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.odtwarzacz-fasada { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; color: #fff; }
.odtwarzacz-fasada img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ruch); }
.odtwarzacz-fasada:hover img { transform: scale(1.02); }
.odtwarzacz-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--cz); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ruch); }
.odtwarzacz-fasada:hover .odtwarzacz-play { transform: scale(1.08); }
.odtwarzacz-tytul { position: absolute; left: 0; right: 0; bottom: 6px; padding: 48px 20px 16px; text-align: left; font: 700 1.1rem/1.35 var(--f-gl); background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.odtwarzacz-offline { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 20px; text-align: center; color: #fff; }
.odtwarzacz-link { color: #fff; }
.filmy-lista { list-style: none; margin: 18px 0 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 260px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #6a5f58 transparent; overscroll-behavior-x: contain; }
.filmy-lista li { scroll-snap-align: start; }
.film-kafel { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 0 0 4px; border: 0; background: none; color: var(--papier); text-align: left; cursor: pointer; font: 600 1rem/1.3 var(--f-gl); }
.film-mini { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 5px solid #3a302c; transition: border-color .2s; }
.film-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ruch); }
.film-kafel:hover .film-mini img { transform: scale(1.05); }
.film-play { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--papier); color: var(--cz); font-size: .9rem; }
.film-kafel[aria-current="true"] .film-mini { border-color: var(--cz); }
.film-kafel[aria-current="true"] .film-play { background: var(--cz); color: #fff; }
.film-tytul { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.filmy-brak { padding: 30px; color: #fff; }
@media (min-width: 1000px) {
  .filmy .sekcja-wnetrze { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "glowa glowa" "gracz lista"; gap: 0 22px; }
  .filmy .sekcja-glowa { grid-area: glowa; }
  .odtwarzacz { grid-area: gracz; }
  .filmy-lista { grid-area: lista; margin: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: auto; max-height: 0; min-height: 100%; padding: 0 8px 0 0; scroll-snap-type: y mandatory; align-content: start; }
  .film-kafel { flex-direction: row; align-items: flex-start; }
  .film-mini { flex: none; width: 140px; }
  .film-tytul { font-size: .95rem; }
}

/* ---------- subskrypcja ---------- */
.subskrypcja { background: var(--nb); color: #fff; position: relative; overflow: hidden; }
.subskrypcja::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #A3122A 0 25%, #1F5C3F 25% 40%, #9C2266 40% 55%, #A8380A 55% 70%, #5B2C83 70% 85%, #1D4E9E 85%); }
.sub-uklad { display: grid; gap: 16px 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.sub-liczba { font: 800 clamp(5rem, 24vw, 12rem)/.8 var(--f-gl); font-variation-settings: 'wdth' 62; letter-spacing: -.02em; color: #fff; }
.sub-liczba span { font: 400 italic .3em/1 var(--f-ak); margin-left: .12em; color: #FFB3B3; letter-spacing: 0; }
.sub-tekst h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1; }
.sub-tekst h2 em { color: #FFB3B3; }
.sub-tekst p { margin: 12px 0 20px; color: #DCE4F2; font-size: 1.125rem; max-width: 520px; }
@media (min-width: 900px) { .sub-uklad { grid-template-columns: auto 1fr; } }

/* ---------- WOW: kartka z zaproszeniem ---------- */
.zaproszenie { background: var(--papier2); }
.zap-uklad { display: grid; gap: 34px; align-items: start; }
.zap-formularz h2 { font-size: clamp(2.8rem, 11vw, 5.2rem); }
.zap-opis { margin-top: 14px; color: var(--cichy); font-size: 1.125rem; max-width: 500px; }
.zap-pola { margin-top: 22px; display: grid; gap: 8px; max-width: 520px; }
.zap-pola > label { font-weight: 700; margin-top: 8px; }
.zap-pola input[type="text"], .zap-pola select { width: 100%; min-height: 54px; padding: 10px 14px; border: 2px solid var(--tusz); border-radius: 0; background: var(--biel); color: var(--tusz); font: 600 1.125rem/1.2 var(--f-gl); }
.zap-pola input[type="text"]:focus-visible, .zap-pola select:focus-visible { outline: 3px solid var(--nb-jasny); outline-offset: 2px; }
.zap-pomoc { color: var(--cichy); font-size: .95rem; }
.zap-kolory { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zap-kolory legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.zap-kolory label { position: relative; cursor: pointer; }
.zap-kolory input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pal { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 10px; border: 2px solid var(--linia); background: var(--biel); font-weight: 600; }
.pal::before { content: ''; width: 34px; height: 24px; }
.pal-0::before { background: linear-gradient(90deg, #A3122A 0 40%, #E0571B 40% 55%, #A3122A 55% 80%, #9C2266 80%); }
.pal-1::before { background: linear-gradient(90deg, #A3122A 0 20%, #1F5C3F 20% 40%, #9C2266 40% 60%, #A8380A 60% 80%, #1D4E9E 80%); }
.pal-2::before { background: linear-gradient(90deg, #12305E 0 35%, #1D4E9E 35% 60%, #A3122A 60% 75%, #12305E 75%); }
.zap-kolory input:checked + .pal { border-color: var(--tusz); box-shadow: inset 0 -4px 0 var(--cz); }
.zap-kolory input:focus-visible + .pal { outline: 3px solid var(--nb-jasny); outline-offset: 2px; }
.zap-przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.zap-stan { min-height: 1.6em; color: var(--nb); font-weight: 700; }
.zap-podglad { justify-self: center; width: min(100%, 460px); }
#zap-kartka { width: 100%; aspect-ratio: 4 / 5; background: var(--biel); box-shadow: 0 26px 60px rgba(40, 20, 10, .25); transform: rotate(1.5deg); transition: transform .4s var(--ruch); }
.zap-podglad:hover #zap-kartka { transform: rotate(0); }
@media (min-width: 960px) { .zap-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 70px; align-items: center; } }

/* ---------- dojazd ---------- */
.dojazd-glowa { display: grid; gap: 20px; align-items: end; }
.dojazd-glowa h2 { font-size: clamp(2.8rem, 11vw, 5.6rem); }
.dojazd-adres { margin-top: 10px; font-size: 1.2rem; }
.dojazd-adres b { color: var(--cz); }
.dojazd-przyciski { display: grid; gap: 12px; }
.fakty { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fakty li { padding: 16px; background: var(--biel); border-top: 5px solid var(--cz); display: grid; gap: 4px; }
.fakty li:nth-child(2) { border-color: #1F5C3F; } .fakty li:nth-child(3) { border-color: var(--nb-jasny); } .fakty li:nth-child(4) { border-color: #9C2266; }
.fakty b { font: 800 2.2rem/1 var(--f-gl); font-variation-settings: 'wdth' 72; }
.fakty span { color: var(--cichy); line-height: 1.3; }
.mapa { position: relative; min-height: 360px; background: var(--biel); display: grid; place-items: center; padding: 20px 20px 90px; overflow: hidden; }
.mapa-szkic { width: 100%; max-width: 760px; font-family: var(--f-gl); }
.mapa-przycisk { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; }
.mapa.mapa-wczytana { padding: 0; min-height: 460px; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .dojazd-przyciski { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 960px) {
  .dojazd-glowa { grid-template-columns: 1fr auto; }
  .fakty { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mapa, .mapa.mapa-wczytana { min-height: 520px; }
}

/* ---------- stopka ---------- */
.stopka { background: var(--tusz); color: #D8D0C4; }
.stopka-wnetrze { max-width: var(--szer); margin: 0 auto; padding: 44px 20px 30px; display: grid; gap: 12px; }
.stopka-logo { height: 64px; width: auto; margin-bottom: 8px; }
.stopka a { color: #fff; }
.stopka-drobne { font-size: .92rem; }
.prototyp { border-top: 1px solid rgba(255, 255, 255, .15); padding: 14px 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; font-size: .95rem; }
.prototyp-linki { display: flex; flex-wrap: wrap; gap: 6px; }
.prototyp-linki a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-weight: 600; }
.prototyp-linki a[aria-current] { background: var(--cz); border-color: var(--cz); }
.prototyp > a { color: #fff; padding: 10px 0; }

/* ---------- plakat w powiększeniu ---------- */
.plakat-okno { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.plakat-okno::backdrop { background: rgba(26, 20, 20, .9); backdrop-filter: blur(6px); }
.plakat-zawartosc { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 16px; pointer-events: none; }
.plakat-ramka { pointer-events: auto; min-height: 0; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; touch-action: none; justify-self: center; }
.plakat-ramka.powiekszony { cursor: grab; }
.plakat-duzy { max-height: calc(100vh - 110px); width: auto; transition: transform .25s var(--ruch); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.plakat-pasek { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.plakat-pasek .przycisk { min-width: 48px; }

/* ---------- znaczek (ikona profilowa YT/FB) w nagłówku i pływający przycisk ----------
   Trzy wersje kolorystyczne (czerwona, ciemna, jasna) leżą na sobie; widoczna jest ta z klasą .wl.
   Najechanie na logo: znaczek obraca się i przechodzi do kolejnego koloru.
   Najechanie na pozycję menu: pozycja dostaje „pigułkę” w swoim kolorze, a znaczek przyjmuje ten sam kolor. */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .logo-napis { height: 42px; width: auto; }
.znaczek { position: relative; flex: none; display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 4px 12px rgba(80, 10, 20, .28); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.znaczek img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; transition: opacity .45s ease; }
.znaczek img.wl { opacity: 1; }
.znaczek::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #A3122A; border-right-color: #1D4E9E; opacity: 0; transition: opacity .3s, transform .9s ease; }
.logo:hover .znaczek, .logo:focus-visible .znaczek { box-shadow: 0 8px 20px rgba(80, 10, 20, .35); }
.logo:hover .znaczek::after, .logo:focus-visible .znaczek::after { opacity: 1; transform: rotate(180deg); }
.znaczek.kreci { transform: rotate(360deg); }
/* wejście przy otwarciu strony: znaczek wtacza się z lewej */
.js .naglowek .znaczek { animation: wtocz 1s cubic-bezier(.25, 1.2, .45, 1) .15s both; }
@keyframes wtocz { from { transform: translateX(-40px) rotate(-270deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1080px) { .znaczek { width: 54px; height: 54px; } .logo .logo-napis { height: 50px; } }
@media (max-width: 380px) { .logo .logo-napis { height: 34px; } .znaczek { width: 40px; height: 40px; } }

/* menu: pigułka w kolorze znaczka */
.menu a[data-wariant] { transition: background-color .25s, color .25s, box-shadow .25s; }
.menu a[data-wariant="czerwona"]:hover, .menu a[data-wariant="czerwona"]:focus-visible { background: #A3122A; color: #fff; }
.menu a[data-wariant="ciemna"]:hover, .menu a[data-wariant="ciemna"]:focus-visible { background: #1A1414; color: #F3ECE0; }
.menu a[data-wariant="jasna"]:hover, .menu a[data-wariant="jasna"]:focus-visible { background: #FFFBF4; color: #A3122A; box-shadow: inset 0 0 0 2px #A3122A; }
@media (min-width: 1080px) {
  .menu a[data-wariant] { border-radius: 999px; padding: 13px 16px; }
  .menu a[data-wariant]::after { display: none; }
}
@media (max-width: 1079px) { .menu a[data-wariant], .menu .menu-tel { padding-left: 14px; padding-right: 14px; } }

/* pływający przycisk „na górę”: znaczek kręci się jak płyta przy przewijaniu, obręcz pokazuje, ile strony już za nami */
.na-gore { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.na-gore.widoczny { opacity: 1; transform: none; pointer-events: auto; }
.na-gore-postep { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.na-gore-postep circle { fill: none; stroke: #1D4E9E; stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: var(--postep, 100); stroke-linecap: round; }
.znaczek-plywajacy { width: 54px; height: 54px; transition: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.na-gore-strzalka { position: absolute; right: -2px; top: -4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #FFFBF4; color: #A3122A; font: 800 15px/1 var(--f-gl); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s; }
.na-gore:hover .na-gore-strzalka, .na-gore:focus-visible .na-gore-strzalka { transform: translateY(-4px); }
.na-gore:focus-visible { outline: 3px solid #1D4E9E; outline-offset: 4px; }
@media (min-width: 960px) { .na-gore { right: 26px; bottom: 26px; width: 76px; height: 76px; } .znaczek-plywajacy { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .js .naglowek .znaczek { animation: none; } .znaczek.kreci { transform: none; } }