/* ═══════════════════════════════════════════════════════════════════
   Szkoły i grupy · Kontakt — dodatki do układu immersyjnego (wrzesień 2026)
   Ten sam układ co podstrony wydarzeń, ale barwa neutralna jak na stronie
   głównej: to strony użytkowe, nie wystawy. Złoto zostaje przy Renesansie,
   róż przy Chopinie.
   Treści przeniesione z poprzedniej wersji bez zmian.
   ═══════════════════════════════════════════════════════════════════ */

main[data-trasa="szkoly-i-grupy"],
main[data-trasa="kontakt"] {
  --r2-tlo: #0e0d0f;
  --r2-karta: #17161a;
  --r2-karta-2: #201e23;
  --r2-tekst: #f2efeb;
  --r2-cichy: #9a948f;
  --r2-zloto: #e8e2dc;          /* akcent neutralny: kremowa biel */
  --r2-kreska: rgba(255, 255, 255, .12);
  /* elementy z front.css (pola formularza, karty info, przyciski) biorą te zmienne */
  --akcent: #e8e2dc; --akcent-ciemny: #d6cec6; --akcent-tekst: #e8e2dc; --na-akcencie: #141316;
  --tlo: #0e0d0f; --tlo-2: #17161a; --tlo-3: #201e23;
  --linia: #2c2a2f; --linia-jasna: rgba(242, 239, 235, .2);
  --tekst: #f2efeb; --tekst-2: #b3ada7; --tekst-3: #928c87; --tekst-mocny: #fff;
  --gr-panel: #17161a; --gr-sekcja: #17161a; --gr-karta: #201e23;
  --gr-wybrany: #e8e2dc; --gr-aktywny: #201e23;
}

/* akcent poza treścią strony: przycisk w nagłówku i pływający pasek zakupu.
   Klasę na body ustawia uklad-immersyjny.js przy zmianie trasy, tak samo
   jak dla Chopina i strony głównej. Wcześniej stał tu selektor :has(),
   ale klasa działa w każdej przeglądarce i jest spójna z resztą serwisu. */
body.motyw-uzytkowy {
  --akcent: #e8e2dc; --akcent-ciemny: #d6cec6; --akcent-tekst: #e8e2dc; --na-akcencie: #141316;
}
/* dolny pasek „Zapytaj o termin” ma w front.css złoto wpisane na sztywno,
   więc sama zmiana zmiennych tu nie wystarczy */
body.motyw-uzytkowy .pasek-zakupu .przycisk {
  background: linear-gradient(180deg, #f4f1ed, #ddd6cf); color: #141316;
}
body.motyw-uzytkowy .pasek-zakupu .pasek-cena { color: rgba(20, 19, 22, .72); }
body.motyw-uzytkowy .pasek-zakupu .pasek-strzalka { background: #141316; color: #e8e2dc; }

/* ─────────── wspólne poprawki układu ─────────── */
/* zdjęcia wchodzą w te same ramy co ujęcia wideo */
main[data-trasa="szkoly-i-grupy"] .r2-dzielo-film img,
main[data-trasa="kontakt"] .r2-dzielo-film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
main[data-trasa="szkoly-i-grupy"] .r2-kafel img { width: 100%; height: 100%; object-fit: cover; }

/* nadtytuł w bloku wstępu stoi nad zdaniem prowadzącym */
main[data-trasa="szkoly-i-grupy"] .r2-wstep .r2-nadtytul { margin-bottom: 20px; }

/* ─────────── Szkoły: liczby ─────────── */
.sk-liczby { border-top: 0; padding-top: clamp(40px, 5vw, 72px); }
.sk-liczby .r2-fakty-siatka { margin-top: 0; }
.sk-cztery { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sk-cztery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sk-cztery { grid-template-columns: 1fr; } }

.sk-nota { font-size: 13px !important; color: var(--r2-cichy); }

/* ─────────── Szkoły: znaczniki, punkty, odnośniki ─────────── */
.sk-znaczniki { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px !important; }
.sk-znaczniki span, .sk-znacznik {
  display: inline-flex; padding: 5px 10px;
  border: 1px solid var(--r2-kreska); color: var(--r2-zloto);
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
/* Punkty listy zostają zwykłym blokiem tekstu. Siatka (display: grid) rozbiłaby
   wiersz na osobne pola przy każdym <span data-cena>, bo element w środku wiersza
   staje się wtedy samodzielnym polem siatki i cena schodziłaby do nowej linii. */
.sk-punkty { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.sk-punkty li {
  position: relative; padding-left: 21px;
  font-size: 15px; line-height: 1.8; color: var(--r2-cichy);
}
.sk-punkty li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--r2-zloto);
}
.sk-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0 !important; }
.sk-link {
  display: inline-flex; align-items: center; border: 0; cursor: pointer; border-radius: 0;
  background: var(--r2-zloto); color: #141316;
  font-family: inherit; font-weight: 900; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; padding: 15px 26px;
  text-decoration: none; transition: background .2s ease, border-color .2s ease;
}
.sk-link:hover { background: #fff; }
.sk-link-obrys {
  background: transparent; color: var(--r2-tekst);
  box-shadow: inset 0 0 0 1px var(--r2-kreska);
}
.sk-link-obrys:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--r2-zloto); }

/* ─────────── Szkoły: seanse dla grup ─────────── */
.sk-seanse {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: clamp(26px, 3.4vw, 54px) var(--r2-margines) var(--r2-odstep);
  display: grid; gap: clamp(36px, 4.5vw, 66px);
}
.sk-seanse-glowa { max-width: 760px; margin: 0 auto; text-align: center; display: grid; gap: 18px; }
.sk-seanse-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sk-seans {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 420px; display: flex; align-items: flex-end;
  padding: clamp(24px, 2.8vw, 40px); background: #0a0a0a;
}
.sk-seans video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sk-seans::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14, 13, 15, .94) 6%, rgba(14, 13, 15, .28) 62%, rgba(14, 13, 15, .55));
}
.sk-seans-tresc { display: grid; gap: 12px; }
.sk-seans-tresc h3 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -.01em; }
.sk-seans-tresc p { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(242, 239, 235, .84); }
.sk-czas { color: var(--r2-zloto) !important; font-weight: 700; letter-spacing: .04em; font-size: 13px !important; }
@media (max-width: 820px) { .sk-seanse-siatka { grid-template-columns: 1fr; } .sk-seans { min-height: 320px; } }

.sk-wkrotce { display: grid; gap: 18px; }
.sk-nadtytul-lewy { text-align: left !important; margin-bottom: 0 !important; }
.sk-wkrotce-kafle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sk-wkrotce-kafle div {
  display: grid; gap: 12px; justify-items: start; align-content: start;
  padding: clamp(20px, 2.2vw, 30px); background: var(--r2-karta);
}
.sk-wkrotce-kafle b { font-size: clamp(17px, 1.7vw, 21px); font-weight: 900; line-height: 1.25; }
@media (max-width: 1000px) { .sk-wkrotce-kafle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sk-wkrotce-kafle { grid-template-columns: 1fr; } }

/* ─────────── Szkoły: zapytanie ─────────── */
.sk-zapytanie {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--r2-margines) clamp(80px, 9vw, 130px);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 70px);
  align-items: start; scroll-margin-top: 92px;
}
.sk-zapytanie-dane { display: grid; gap: 20px; align-content: start; }
.sk-h2 { margin: 0; font-size: clamp(27px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.01em; line-height: 1.12; }
.sk-kontakt { display: grid; gap: 10px; padding-top: 10px; }
.sk-kontakt b { font-size: 15px; }
.sk-kontakt p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--r2-cichy); }
.sk-kontakt a { color: var(--r2-zloto); text-decoration: none; border-bottom: 1px solid rgba(232, 226, 220, .35); }
.sk-kontakt a:hover { border-bottom-color: var(--r2-zloto); }
@media (max-width: 900px) { .sk-zapytanie { grid-template-columns: 1fr; } }

/* ─────────── Kontakt: karty z danymi ─────────── */
.kt-dane {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: clamp(34px, 4vw, 64px) var(--r2-margines) clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
main[data-trasa="kontakt"] .karta-info {
  border-radius: 0; background: var(--r2-karta); border: 0;
  padding: clamp(26px, 3vw, 40px); gap: 12px;
}
main[data-trasa="kontakt"] .karta-info .ikona {
  width: 44px; height: 44px; border-radius: 0;
  background: var(--r2-zloto); color: #141316;
}
main[data-trasa="kontakt"] .karta-info h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 900; }
main[data-trasa="kontakt"] .karta-info p { font-size: 15px; line-height: 1.85; color: var(--r2-cichy); }
main[data-trasa="kontakt"] .karta-info a { color: var(--r2-zloto); }
@media (max-width: 760px) { .kt-dane { grid-template-columns: 1fr; } }

/* ─────────── Kontakt: mapa ─────────── */
.kt-mapa {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: 0 var(--r2-margines) var(--r2-odstep);
  display: grid; gap: 20px; justify-items: start;
}
main[data-trasa="kontakt"] .mapa.mapa-prawdziwa {
  width: 100%; height: clamp(300px, 46vw, 520px);
  border-radius: 0; border: 0; background: #17161a;
}
.kt-trasa { margin: 0; }

/* ─────────── Kontakt: formularz ─────────── */
.kt-formularz {
  max-width: 940px; margin: 0 auto;
  padding: clamp(34px, 4vw, 64px) var(--r2-margines) var(--r2-odstep);
}

/* ─────────── formularze na ciemnym tle ───────────
   front.css pisze te bloki dla jasnego motywu: karta ma duży promień,
   a strzałka listy rozwijanej jest ciemna. Tu prostujemy oba. */
main[data-trasa="szkoly-i-grupy"] .karta-formularza,
main[data-trasa="kontakt"] .karta-formularza {
  border-radius: 0; background: var(--r2-karta); border: 1px solid var(--r2-kreska);
  padding: clamp(26px, 3.2vw, 46px);
}
main[data-trasa="szkoly-i-grupy"] .pole input,
main[data-trasa="szkoly-i-grupy"] .pole select,
main[data-trasa="szkoly-i-grupy"] .pole textarea,
main[data-trasa="kontakt"] .pole input,
main[data-trasa="kontakt"] .pole select,
main[data-trasa="kontakt"] .pole textarea { border-radius: 0; background-color: #0e0d0f; }
/* strzałka listy rozwijanej z front.css jest ciemna; tu musi być jasna.
   Podajemy też powtarzanie i położenie, bo skrótu „background” nie używamy. */
main[data-trasa="szkoly-i-grupy"] .pole select,
main[data-trasa="kontakt"] .pole select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239a948f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
main[data-trasa="szkoly-i-grupy"] .pole input:focus,
main[data-trasa="szkoly-i-grupy"] .pole select:focus,
main[data-trasa="szkoly-i-grupy"] .pole textarea:focus,
main[data-trasa="kontakt"] .pole input:focus,
main[data-trasa="kontakt"] .pole select:focus,
main[data-trasa="kontakt"] .pole textarea:focus { box-shadow: 0 0 0 3px rgba(232, 226, 220, .16); }
main[data-trasa="szkoly-i-grupy"] .przycisk,
main[data-trasa="kontakt"] .przycisk { border-radius: 0; }
main[data-trasa="szkoly-i-grupy"] .nadtytul,
main[data-trasa="kontakt"] .nadtytul { color: var(--r2-zloto); }

/* Wejście bloków przy przewijaniu prowadzi uklad-immersyjny.js po stałej liście
   klas układu (.r2-dzielo, .r2-wstep, .r2-fakty-siatka, .r2-kafel, .r2-dojazd > div).
   Bloki spoza tej listy (.sk-seans, .sk-wkrotce-kafle, .kt-dane) pokazują się od
   razu — skryptu nie ruszamy, bo jest wspólny dla wszystkich tras. */