/* ═══════════════════════════════════════════════════════════════════
   Wioska Świętego Mikołaja — motyw podstrony (październik 2026)

   Układ, odstępy i typografia są te same co w Renesansie i u Chopina:
   wszystko bierze się z klas r2- w uklad-immersyjny.css. Tutaj siedzą
   WYŁĄCZNIE trzy rzeczy:
     1. kolory motywu, czyli nadpisane zmienne --r2-*,
     2. reguły dla <img>, bo wspólny arkusz zna tylko <video>,
     3. dwa drobiazgi własne: znacznik pieczątki i numerowana trasa.

   Paleta: zieleń jodłowa zamiast czerni (Chopin) i grafitu (Renesans),
   złoto wspólne dla całego serwisu, czerwień jako jedyny mocny akcent.
   Zielone tło gra z zorzą i choinkami na wizualizacjach, a jednocześnie
   od pierwszej sekundy mówi, że to inna wystawa niż pozostałe.
   ═══════════════════════════════════════════════════════════════════ */

main[data-trasa="wioska-swiateczna"] {
  --r2-tlo: #0b1a13;
  --r2-karta: #122419;
  --r2-karta-2: #18301f;
  --r2-tekst: #f2f6f1;
  --r2-cichy: #93a697;
  --r2-zloto: #e9bd63;
  --r2-kreska: rgba(255, 255, 255, .12);
  --wm-czerwien: #c7453a;
  background: var(--r2-tlo);
  color: var(--r2-tekst);
}

/* ── 1. obrazy tam, gdzie wspólny arkusz spodziewa się wideo ──────── */
main[data-trasa="wioska-swiateczna"] .r2-wejscie-film,
main[data-trasa="wioska-swiateczna"] .r2-dzial img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
main[data-trasa="wioska-swiateczna"] .r2-kafel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
main[data-trasa="wioska-swiateczna"] .r2-dzielo-film img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* Wizualizacje Wioski są jasne (choinki, lampki, śnieg), więc przyciemnienie
   hero musi sięgać głębiej niż w ciemnych ujęciach Renesansu. Bez tego biały
   tytuł gubi się w światłach choinki. */
main[data-trasa="wioska-swiateczna"] .r2-wejscie-cien {
  background:
    linear-gradient(0deg, rgba(8, 20, 14, .95) 2%, rgba(8, 20, 14, .54) 48%, rgba(8, 20, 14, .66)),
    radial-gradient(120% 80% at 50% 50%, rgba(8, 20, 14, .26) 20%, rgba(8, 20, 14, .6));
}
main[data-trasa="wioska-swiateczna"] .r2-wejscie-tytul h1 { text-shadow: 0 2px 28px rgba(8, 20, 14, .6); }
main[data-trasa="wioska-swiateczna"] .r2-wejscie-podpis {
  color: rgba(255, 255, 255, .9); text-shadow: 0 1px 16px rgba(8, 20, 14, .75);
}
/* Przekładka działowa też leży na jasnym kadrze. */
main[data-trasa="wioska-swiateczna"] .r2-dzial::after { background: rgba(8, 20, 14, .72); }

/* ── 2. mozaika: materiał jest poziomy, nie pionowy ──────────────── */
/* Kafle 9:16 ze wspólnego arkusza są pod ujęcia z telefonu. Wizualizacje Wioski
   są szerokie, więc idą w 4:5. Na dużym ekranie cztery kolumny, bo kadrów jest
   dziewięć i mniejsze kafle czytają się lepiej niż trzy wielkie w rzędzie.
   Panorama zostaje na całą szerokość, jak u Renesansu. */
main[data-trasa="wioska-swiateczna"] .wm-mozaika { grid-template-columns: repeat(4, 1fr); }
main[data-trasa="wioska-swiateczna"] .wm-mozaika .r2-kafel { aspect-ratio: 4 / 5; background: var(--r2-karta); }
main[data-trasa="wioska-swiateczna"] .wm-mozaika .r2-kafel-panorama { aspect-ratio: 21 / 9; }
@media (max-width: 1100px) {
  main[data-trasa="wioska-swiateczna"] .wm-mozaika { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  main[data-trasa="wioska-swiateczna"] .wm-mozaika { grid-template-columns: repeat(2, 1fr); }
}

/* ── 2b. sale: na dużym ekranie zdjęcie obok opisu ───────────────── */
/* Wspólny układ kładzie kadr na całą szpaltę i opis pod nim. U Chopina to działa,
   bo tam są spokojne ujęcia wideo. Wizualizacje Wioski są gęste od szczegółów
   i w tej skali przytłaczają stronę, więc na szerokim ekranie idą w parze
   z tekstem, naprzemiennie raz z lewej, raz z prawej. */
@media (min-width: 900px) {
  main[data-trasa="wioska-swiateczna"] .r2-dzielo {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 34px);
  }
  main[data-trasa="wioska-swiateczna"] .r2-dzielo:nth-of-type(even) .r2-dzielo-film { order: 2; }
  main[data-trasa="wioska-swiateczna"] .r2-dzielo-film { align-self: stretch; display: grid; }
  main[data-trasa="wioska-swiateczna"] .r2-dzielo-film img { height: 100%; aspect-ratio: auto; min-height: 340px; }
}

/* ── 2c. zdjęcie w tle pod zdaniem otwierającym ──────────────────── */
main[data-trasa="wioska-swiateczna"] .r2-manifest-tlo img {
  width: 100%; height: 100%; object-fit: cover; opacity: .42;
}
main[data-trasa="wioska-swiateczna"] .r2-manifest-tlo::after {
  background: linear-gradient(0deg, var(--r2-tlo), rgba(8, 20, 14, .42) 45%, var(--r2-tlo));
}

/* ── 3. numer sali i pieczątka ───────────────────────────────────── */
main[data-trasa="wioska-swiateczna"] .c2-numer { color: var(--wm-czerwien); }
.wm-pieczatka {
  margin: clamp(16px, 2vw, 22px) 0 0 !important;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px dashed var(--wm-czerwien);
  font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--r2-zloto) !important;
}
.wm-pieczatka::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wm-czerwien);
}

/* ── 4. trasa: lista z numerami ──────────────────────────────────── */
.wm-trasa-sek { text-align: left; }
.wm-trasa { margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; list-style: none; counter-reset: wm; }
.wm-trasa li {
  counter-increment: wm;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px clamp(14px, 1.8vw, 22px);
  align-items: start;
  background: var(--r2-karta); border-bottom: 1px solid var(--r2-tlo);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 30px);
}
.wm-trasa li:last-child { border-bottom: 0; }
.wm-trasa li::before {
  content: counter(wm); grid-row: 1 / span 2;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--wm-czerwien); color: #fff; font-weight: 900; font-size: 14px;
}
.wm-trasa b { font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; }
.wm-trasa span { font-size: 15px; line-height: 1.55; color: var(--r2-cichy); }
@media (max-width: 760px) {
  .wm-trasa li { grid-template-columns: 34px minmax(0, 1fr); }
  .wm-trasa li::before { width: 26px; height: 26px; font-size: 12px; }
}