/* ════════════════════════════════════════════════════════════════
   SZABLON LANDING PAGE WYDARZENIA — Promocja Targi
   Układ: sticky spis sekcji po lewej + kolumna treści po prawej,
   otwarcie zdjęciami (wzór wskazany przez klienta).

   Zgodność z systemem wizualnym promocja-targi.pl:
   · jedyny krój: Ubuntu 300/400/500/700
   · kontener 1200 px, tekst 18 px
   · nagłówek sekcji .e-title2: 24px/400, wyśrodkowany, żółta kreska 144×2
   · separator sekcji: linia 1 px #00A0E3
   Kolory próbkowane z plików źródłowych (logo.png, baner ...jpg).
   Szablonowanie: podmieniasz --ev + treść slotów. Nic więcej.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* marka — stałe dla wszystkich wydarzeń */
  --ink:#141617;
  --ink-2:#3f4346;
  --ink-3:#71767a;
  --paper:#ffffff;
  --paper-2:#f6f4f5;
  --paper-3:#eeebec;
  --line:#e0dbdc;
  --line-2:#efecec;
  --brand-red:#e31e24;
  --brand-blue:#00a0e3;
  --brand-yellow:#fecc00;
  /* Jeden granat na całą stronę: pasek newslettera, końcowe CTA,
     nagłówki tabel i wstążka bieżącego wydarzenia. */
  --navy:#13568b;
  --logo-ink:#2b2a29;       /* sygnatura napisu w logo */
  --sep:#00a0e3;

  /* WARSTWA SZABLONU — akcent wydarzenia */
  --ev:#00a0e3;

  /* Bez przejść tonalnych: akcent zawsze w 100% koloru z logotypu.
     Żadnych rozjaśnień, przyciemnień ani tintów — jedna wartość. */
  --ev-text:var(--ev);

  /* przycisk „Kup bilet" — zawsze czerwony, niezależny od akcentu wydarzenia */
  --ticket:#e31e24;
  --ticket-text:var(--ticket);

  /* wyróżnienie luki w treści (jedno pytanie w FAQ) */
  --slot-tag:#8a6a20;

  --shadow:0 2px 14px rgba(20,22,23,.09);
  --container:1200px;
  --head-h:84px;
  color-scheme:light;
}

/* Motyw wyłącznie jasny — zgodnie z promocja-targi.pl.
   Brak trybu ciemnego jest decyzją, nie przeoczeniem: tło zawsze białe. */
html{background:#ffffff;color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* warianty wydarzeń — jedna wartość na wydarzenie.
   Domyślnie (Śląskie Targi Domów) akcent = błękit marki #00a0e3. */
:root[data-event="expoinstal"] { --ev:#0e8f73; }
:root[data-event="podhale"]    { --ev:#b4531a; }
:root[data-event="domy-red"]   { --ev:#e31e24; }  /* wariant czerwony, gdyby wrócił */

/* ─────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
/* Atrybut hidden musi wygrywać z każdą regułą display: bez tego element
   z hidden i własnym display (np. podgląd galerii) pokazuje się od razu. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.7 Ubuntu, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}

/* ── pasek kontaktowy ─────────────────────────────────────────── */
.topbar{background:var(--paper-2);font-size:14px}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;min-height:40px}
.topbar a{text-decoration:none;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.topbar a:hover{color:var(--ev-text)}
/* ikony kontaktowe — #00a0e3, jak mail.png i tel.png w oryginale */
.topbar svg{width:16px;height:16px;flex:none;color:var(--brand-blue)}
.topbar .spacer{margin-left:auto}
/* social — biały glif na wypełnionym kółku #00a0e3, jak w oryginale */
.topbar .soc{
  width:24px;height:24px;border-radius:50%;background:var(--brand-blue);
  display:grid;place-items:center;
}
.topbar .soc:hover{background:var(--ink)}
.topbar .soc svg{color:#fff;width:13px;height:13px}

/* ── nagłówek ─────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);box-shadow:0 1px 0 var(--line-2)}
.site-head .container{display:flex;align-items:center;gap:30px;min-height:var(--head-h)}
.logo{display:block;text-decoration:none;flex:none}
.logo img{width:164px;height:48px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink-2);padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--ev)}
.nav-list{display:flex;gap:26px;align-items:center;margin:0;padding:0;list-style:none}

/* ══ SLAJDER WYDARZENIA ═════════════════════════════
   Uklad: tekst na bieli po lewej + zdjecie po prawej sciete ukosem,
   na zdjeciu zolty pas z terminem i miejscem.

   WAZNE dla szablonu: ukos i pas to wylacznie CSS (clip-path + warstwa).
   Zdjecie jest zwyklym prostokatnym plikiem 1100x596 z object-fit:cover,
   wiec podmiana kadru nie wymaga zadnej obrobki graficznej.        */
.hero-slider{
  position:relative;margin-top:22px;overflow:hidden;
  background:var(--paper);aspect-ratio:1380/396;
  border:1px solid var(--line-2);
}
.slides{display:flex;height:100%;transition:transform .5s ease}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}
.slide{
  min-width:100%;height:100%;
  display:grid;grid-template-columns:47% 53%;
  background:var(--paper);color:var(--ink);
}

/* lewa polowa: typografia */
.slide-t{
  align-self:center;
  padding:0 clamp(16px,2vw,28px) 0 clamp(24px,4vw,56px);
}
.slide-t h2{
  font-size:clamp(22px,3.7vw,52px);font-weight:700;line-height:1.02;
  letter-spacing:-.02em;color:var(--ink);
}
.slide-city{display:flex;align-items:baseline;gap:clamp(8px,1.2vw,16px);margin-top:clamp(8px,1.2vw,16px)}
.slide-city .city{
  position:relative;font-weight:700;color:var(--ink);
  font-size:clamp(15px,2.1vw,30px);padding-bottom:5px;
}
.slide-city .city::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-yellow);
}
.slide-city .yr{font-weight:700;color:var(--brand-blue);font-size:clamp(17px,2.4vw,34px)}
.slide-sub{
  margin-top:clamp(8px,1.3vw,18px);font-weight:700;color:var(--ticket);
  font-size:clamp(13px,1.75vw,25px);line-height:1.2;
}

/* prawa polowa: zdjecie ze skosem */
.slide-ph{
  position:relative;overflow:hidden;background:var(--paper-2);
  clip-path:polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.slide-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* zolty pas na zdjeciu — dziedziczy ukos po kontenerze */
.slide-band{
  position:absolute;left:0;right:0;bottom:14%;
  background:var(--brand-yellow);color:var(--ink);
  display:flex;gap:clamp(14px,3.4vw,56px);
  padding:clamp(8px,1.4vw,16px) clamp(12px,2vw,28px) clamp(8px,1.4vw,16px) 11%;
}
.slide-band b{display:block;font-weight:700;line-height:1.2;font-size:clamp(12px,1.55vw,22px)}
.slide-band span{font-size:clamp(11px,1.3vw,18px);line-height:1.3}

@media (max-width:820px){
  /* na waskich ekranach ukos znika, pas ladnie schodzi pod zdjecie */
  .hero-slider{aspect-ratio:auto}
  .slide{grid-template-columns:1fr}
  .slide-t{padding:22px 20px 16px}
  /* bez wymuszonej proporcji i bez przycinania — inaczej zolty pas,
     ktory staje sie tu elementem przeplywowym, zostaje uciety */
  .slide-ph{clip-path:none;aspect-ratio:auto;overflow:visible}
  .slide-ph img{height:auto}
  /* termin do lewej krawedzi, miejsce do prawej */
  .slide-band{
    position:static;padding:12px 20px;gap:16px;
    display:flex;justify-content:space-between;align-items:flex-start;
  }
  .slide-band>div:last-child{text-align:right}
}

/* ── breadcrumb ───────────────────────────────────────────────── */
.crumb{font-size:14px;color:var(--ink-3);padding:18px 0 22px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ev-text)}

/* ══ UKŁAD DWUKOLUMNOWY ══════════════════════════════════════ */
.layout{display:grid;grid-template-columns:266px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:24px}
/* Element siatki domyslnie nie kurczy sie ponizej szerokosci swojej
   tresci. Tabela programu ma min-width:560px, wiec bez tego cala
   kolumna — a z nia strona — robila sie szersza od ekranu. */
.layout>*{min-width:0}
.content{min-width:0}

/* ── spis sekcji (lewa kolumna) ──────────────────────────────── */
.side{position:sticky;top:calc(var(--head-h) + 20px)}
/* Nagłówek spisu trzyma niebieskie tło dopóki żadna sekcja nie jest aktywna.
   Po pierwszym przewinięciu kolor „przechodzi" na pozycję aktywnej sekcji. */
.side h2{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--brand-blue);color:#fff;
  padding:11px 16px;
  transition:background .2s,color .2s;
}
.side[data-active] h2{background:transparent;color:var(--ink-3)}
.side nav ul{border-top:1px solid var(--line-2)}
.side nav a{
  display:block;text-decoration:none;color:var(--ink-2);
  font-size:16px;line-height:1.4;padding:13px 14px 13px 16px;
  border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.side nav a:hover{color:var(--ink);background:var(--paper-2)}
/* aktywna sekcja — pełne tło w błękicie marki #00a0e3 */
.side nav a[aria-current="true"]{
  color:#fff;font-weight:500;
  background:var(--brand-blue);
  border-left-color:var(--brand-blue);
  border-bottom-color:var(--brand-blue);
}
.side-cta{
  margin-top:24px;border:1px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow);padding:18px 18px 20px;text-align:center;
}
.side-cta .d{font-size:15px;color:var(--ink-3);margin-bottom:4px}
.side-cta .p{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:12px}
.side-cta .p small{display:block;font-size:13px;font-weight:400;color:var(--ink-3)}
.side-cta .btn{width:100%;justify-content:center;font-size:17px;padding:11px 16px}

/* ── otwarcie: zdjęcia ───────────────────────────────────────── */
.opener{text-align:center}
.opener .kicker{font-size:17px;font-weight:500;color:var(--ink-2);margin-bottom:22px}
.gallery{display:block}
.photo{margin:0;background:var(--paper-2)}
.photo img{width:100%;height:auto;display:block}

/* galeria poprzedniej edycji — miniatury otwierajace podglad */
.past-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px}
/* Proporcja siedzi na kontenerze, nie na <img>. Wewnątrz <button>
   aspect-ratio na samym obrazku bywa ignorowane i kafel rozciąga się
   na całą wysokość wiersza siatki — stąd wcześniejsze pionowe pasy. */
.pg-item{
  display:block;width:100%;padding:0;border:0;background:var(--paper-2);
  cursor:zoom-in;position:relative;overflow:hidden;
  aspect-ratio:4/3;
}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block}
.pg-item::after{
  content:"";position:absolute;inset:0;background:var(--brand-blue);
  opacity:0;transition:opacity .16s;
}
.pg-item:hover::after,.pg-item:focus-visible::after{opacity:.18}
@media (max-width:820px){.past-gallery{grid-template-columns:repeat(2,1fr)}}

/* podglad pelnoekranowy */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(9,10,11,.94);
  display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;
  padding:56px 20px 20px;
}
.lb-fig{margin:0;display:grid;justify-items:center;gap:12px;max-height:100%}
.lb-fig img{
  max-width:min(1200px,92vw);max-height:74vh;width:auto;height:auto;display:block;
  background:#111;
}
.lb-fig figcaption{color:#e6e4e4;font-size:15px;text-align:center;max-width:70ch}
.lb-bar{display:flex;align-items:center;gap:18px;padding:14px 0 4px}
.lb-nav,.lb-close{
  border:2px solid rgba(255,255,255,.55);background:transparent;color:#fff;
  font:400 24px/1 Ubuntu,sans-serif;cursor:pointer;
  width:46px;height:46px;display:grid;place-items:center;
  transition:background .16s,border-color .16s,color .16s;
}
.lb-nav:hover,.lb-close:hover{background:var(--brand-blue);border-color:var(--brand-blue)}
.lb-close{position:absolute;top:14px;right:18px;font-size:20px}
.lb-count{color:#cfcccc;font-size:15px;min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .lb{padding:52px 12px 12px}
  .lb-fig img{max-height:62vh}
}

/* ── tytuł strony ─────────────────────────────────────────────── */
.intro{text-align:center;padding:36px 0 4px}
.intro h1{font-size:clamp(26px,2.9vw,36px);line-height:1.2;font-weight:400;max-width:26ch;margin:0 auto 18px}
.intro .lead{font-size:19px;color:var(--ink-2);max-width:66ch;margin:0 auto}
.intro .cta-wrap{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:12px}

/* ── przyciski ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 34px;border:2px solid var(--ticket);background:var(--ticket);color:#fff;
  font-size:22px;text-decoration:none;transition:background .18s,color .18s;
}
.btn:hover{background:transparent;color:var(--ticket-text)}
.btn--sm{padding:9px 20px;font-size:16px}
.microcopy{font-size:15px;color:var(--ink-3);max-width:62ch;line-height:1.6}
.link-cta{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ev-text);border-bottom:1px solid currentColor;padding-bottom:2px}
.link-cta:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:3px}

/* ── sekcje + nagłówek sekcji ─────────────────────────────────── */
.sec{padding:46px 0;scroll-margin-top:calc(var(--head-h) + 24px)}
.sep{border:0;border-top:1px solid var(--sep);margin:0}
.e-title2{
  font-size:24px;font-weight:400;text-align:center;color:var(--ink);
  position:relative;padding-bottom:20px;margin-bottom:28px;
}
.e-title2::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:144px;height:2px;background:var(--brand-yellow);
}
.e-title2 h2{font:inherit;color:inherit;margin:0}
.body-copy{max-width:70ch;margin:0 auto;color:var(--ink-2)}
.body-copy p + p{margin-top:16px}
.body-copy h3{font-size:20px;font-weight:500;color:var(--ink);margin:22px 0 14px}
.body-copy h3:first-child{margin-top:0}
.centered{text-align:center}
.sub{font-size:20px;font-weight:500;color:var(--ink);margin-bottom:14px}

/* ── listy z haczykiem ────────────────────────────────────────── */
.ticks{display:grid;gap:12px;max-width:70ch;margin:22px auto 0}
.ticks li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--ink-2)}
.ticks li::before{
  content:"";width:14px;height:14px;margin-top:.44em;
  background:var(--ev);
  clip-path:polygon(0 38%,38% 100%,100% 8%,84% 0,36% 66%,13% 28%);
}

/* ── pasek terminu / miejsca / godzin ─────────────────────────── */
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.meta > div{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);padding:18px 20px;box-shadow:var(--shadow);
}
.meta svg{width:24px;height:24px;flex:none;color:var(--ev);margin-top:4px}
.meta b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:400}
.meta span{font-size:17px;font-weight:500;line-height:1.4}
.meta small{display:block;font-weight:400;font-size:14px;color:var(--ink-3)}

/* Kafle po kolei: niebieski, żółty, biały. Pełne kolory z logotypu,
   bez rozjaśnień — hierarchię trzyma stopień pisma, nie odcień. */
.meta > div:nth-child(1){background:var(--brand-blue);border-color:var(--brand-blue)}
.meta > div:nth-child(1) svg,
.meta > div:nth-child(1) b,
.meta > div:nth-child(1) span,
.meta > div:nth-child(1) small{color:#fff}

.meta > div:nth-child(2){background:var(--brand-yellow);border-color:var(--brand-yellow)}
.meta > div:nth-child(2) svg,
.meta > div:nth-child(2) b,
.meta > div:nth-child(2) span,
.meta > div:nth-child(2) small{color:var(--ink)}

/* ── karty technologii ───────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .ph{aspect-ratio:16/10;background:var(--paper-2);border-bottom:1px solid var(--line);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .in{padding:20px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.card h3{font-size:19px;font-weight:700;text-transform:uppercase;line-height:1.25}
.card p{font-size:16px;color:var(--ink-2);line-height:1.6;flex:1}
.card .tag{
  align-self:flex-start;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:var(--ev);border:1px solid var(--ev);padding:6px 12px;
}
.center-cta{text-align:center;margin-top:28px}

/* ── tabele ───────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
/* Nagłówek tabeli na granacie — tym samym, co slajder i końcowe CTA.
   Nie koliduje z błękitem godzin w kolumnie poniżej; biały tekst 10,38:1. */
caption{
  text-align:left;padding:13px 20px;
  background:var(--navy);color:#fff;
  border-bottom:1px solid var(--navy);
  font-size:16px;font-weight:500;
}
th,td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);border-bottom:1px solid var(--line)}
tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.prog td:first-child{white-space:nowrap;font-weight:700;color:var(--ev-text)}
.prog .who{display:block;font-size:14px;color:var(--ink-3);margin-top:3px}
.prog .soon{color:var(--ink-3);font-style:italic}
.day{font-size:19px;font-weight:500;margin:0 0 12px;text-align:center}
.day span{color:var(--ink-3);font-weight:400;font-size:15px}

/* ── wyroznienie luki w tresci (FAQ) ─────────────────────────── */
.todo{color:var(--slot-tag);font-size:15px}

/* ── ściana logotypów wystawców ────────────────────── */
.logo-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px;
}
.logo-wall li{
  background:var(--paper);display:grid;place-items:center;
  padding:20px 18px;min-height:108px;
}
.logo-wall img{max-width:100%;max-height:54px;width:auto;height:auto;object-fit:contain}
@media (max-width:520px){
  .logo-wall{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .logo-wall li{padding:16px 12px;min-height:92px}
  .logo-wall img{max-height:44px}
}

/* ── przygotowanie ───────────────────────────────────────────── */
.prep{display:grid;gap:14px;max-width:74ch;margin:0 auto}
.prep li{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px 22px;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.prep .n{width:34px;height:34px;background:var(--ev);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.prep b{display:block;font-weight:500;font-size:17px;margin-bottom:2px}
.prep span.d{color:var(--ink-2);font-size:16px;line-height:1.6}

/* ── liczby ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.stats div{text-align:center;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:26px 18px}
.stats .v{
  font-size:40px;font-weight:700;line-height:1;color:var(--ev-text);
  font-variant-numeric:tabular-nums;
}
.stats .k{font-size:15px;color:var(--ink-3);margin-top:9px}

/* ── karty wydarzeń ──────────────────────────────────────────── */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.events article,.events>a{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit}
.events .thumb{aspect-ratio:16/9;background:var(--paper-2);border-bottom:1px solid var(--line);overflow:hidden}
.events .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.events .ribbon{position:absolute;top:14px;left:0;background:var(--brand-red);color:#fff;font-size:13px;padding:5px 13px}
.events article[data-current] .ribbon,.events>a[data-current] .ribbon{background:var(--navy)}
.events .in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.events .when{font-size:14px;color:var(--ink-3)}
.events h3{font-size:16px;font-weight:700;text-transform:uppercase;line-height:1.35}
.events .same{font-size:14px;color:var(--ev-text)}

/* ── lokalizacja + FAQ ───────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
/* mapa: iframe Google Maps na wierzchu, pod nim warstwa zapasowa
   — widoczna, gdy osadzanie jest zablokowane (np. przez CSP podglądu) */
.map{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-fallback{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:8px;text-align:center;padding:20px;color:var(--ink-3);
}
.map-fallback svg{width:42px;height:42px;color:var(--ev)}
.map-fallback b{font-size:17px;font-weight:500;color:var(--ink)}
.map-fallback span{font-size:15px}
.map-fallback a{
  font-size:15px;color:var(--ev-text);text-decoration:none;
  border-bottom:1px solid currentColor;margin-top:4px;
}
.loc-list{display:grid;gap:14px}
.loc-list li{display:grid;grid-template-columns:26px 1fr;gap:13px;font-size:16px;color:var(--ink-2)}
.loc-list svg{width:22px;height:22px;color:var(--ev);margin-top:4px}
.loc-list b{color:var(--ink);font-weight:500}

.faq{max-width:80ch;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);background:var(--paper)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 42px 16px 4px;position:relative;list-style:none;font-size:18px;font-weight:500;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:12px;top:13px;color:var(--ev-text);font-size:26px;line-height:1.2}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 42px 18px 4px;color:var(--ink-2);font-size:16px;line-height:1.7}

/* ── CTA końcowe ─────────────────────────────────────────────── */
.finale{background:var(--navy);color:#fff;padding:60px 0;text-align:center;margin-top:16px}
.finale h2{font-size:clamp(25px,2.8vw,34px);line-height:1.2;max-width:26ch;margin:0 auto 16px}
.finale p{color:#d3dceb;max-width:62ch;margin:0 auto 26px}
/* Przycisk na granacie: biały blok z czerwonym napisem. Pełna czerwień
   jako wypełnienie odcina się od granatu tylko 1,64:1, więc gubiłaby się
   w tle; biel daje 7,69:1 i zachowuje czerwoną tożsamość biletu. */
.finale .btn{background:#fff;border-color:#fff;color:var(--ticket);font-weight:500}
.finale .btn:hover{background:var(--ticket);border-color:var(--ticket);color:#fff}
.finale .microcopy{color:#9fb0c6;margin:16px auto 0}

/* ── stopka ──────────────────────────────────────────────────── */
.site-foot{background:var(--paper-2);padding:34px 0;font-size:15px;color:var(--ink-3);border-top:1px solid var(--line)}
.site-foot .container{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.site-foot .spacer{margin-left:auto}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--ev-text)}

/* ── blok PFR ────────────────────────────────────────────────── */
.pfr{padding:34px 0 30px;text-align:center;border-top:1px solid var(--line-2)}
.pfr img{margin:0 auto 14px}
.pfr p{max-width:78ch;margin:0 auto;font-size:15px;color:var(--ink-2);line-height:1.6}

/* ── newsletter ──────────────────────────────────────────────── */
.nl{background:var(--navy);color:#fff;padding:34px 0}
.nl-grid{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1.35fr);gap:28px;align-items:center}
.nl-art{width:132px;height:auto;color:#8ec7ea}
.nl-t h2{font-size:26px;font-weight:700;margin-bottom:10px}
.nl-t p{font-size:16px;color:#cfe1ef;line-height:1.5}
.nl-row{display:flex;gap:0}
.nl-row input{
  flex:1;min-width:0;border:0;padding:14px 16px;font:400 17px Ubuntu,sans-serif;
  color:var(--ink);background:#fff;
}
.nl-row button{
  border:0;background:var(--ticket);color:#fff;cursor:pointer;
  font:400 17px Ubuntu,sans-serif;padding:14px 28px;
}
.nl-row button:hover{background:#fff;color:var(--ticket)}
.nl-row button:disabled{cursor:wait;opacity:.78}
.nl-consent{display:grid;grid-template-columns:18px 1fr;gap:10px;margin-top:12px;align-items:start}
.nl-consent input{margin:3px 0 0}
.nl-consent span{font-size:11px;line-height:1.45;color:#c7dcec}
.nl-message{margin:0 0 12px;padding:10px 12px;border:1px solid currentColor;background:rgba(255,255,255,.1);font-size:14px;line-height:1.45}
.nl-message.is-success{color:#d7f4df}
.nl-message.is-error{color:#ffe0e0}
.nl-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ── stopka ──────────────────────────────────────────────────── */
.site-foot{background:var(--paper);padding:0;font-size:16px;color:var(--ink-2);border-top:0}
/* cztery kolumny: logo | kontakt | dane rejestracyjne | menu */
.foot-cols{
  display:grid;grid-template-columns:200px minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr);
  gap:36px;padding:34px 0 32px;align-items:start;
}
.fc-brand img{width:164px;height:48px;margin-bottom:14px}
.fc-brand .owner{font-size:16px;color:var(--ink);line-height:1.45}
.fc-contact{display:grid;gap:14px}
.fc-contact li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.fc-contact svg{width:20px;height:20px;color:var(--brand-blue);margin-top:3px}
.fc-contact a{color:var(--ink-2);text-decoration:none}
.fc-contact a:hover{color:var(--ev-text)}
.fc-contact .tels{display:grid;gap:3px}
.fc-soc{display:flex;gap:9px;margin-top:18px;padding-left:36px}
.fc-soc a{
  width:26px;height:26px;border-radius:50%;background:var(--brand-blue);
  display:grid;place-items:center;
}
.fc-soc svg{width:14px;height:14px;color:#fff}
.fc-soc a:hover{background:var(--ink)}
.fc-reg p{margin-bottom:16px;line-height:1.55}
.fc-reg b{color:var(--ink);font-weight:500}
.fc-menu{display:grid;gap:11px;align-content:start}
.fc-menu a{text-decoration:none;color:var(--ink-2);text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.fc-menu a:hover{color:var(--ev-text)}
.footer-menu-list{display:contents}
.foot-bottom{background:var(--paper-2);padding:16px 0;font-size:14px;color:var(--ink-3)}
.foot-bottom .container{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.foot-bottom a{color:var(--ink-3);text-decoration:none}
.foot-bottom a:hover{color:var(--ev-text)}
.foot-bottom .sep-dot{color:var(--line)}

@media (max-width:900px){
  .nl-grid{grid-template-columns:1fr;gap:20px;text-align:center}
  .nl-art{display:none}
  .nl-consent{text-align:left}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
}

/* ── responsywność ───────────────────────────────────────────── */
@media (max-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .side{
    position:sticky;top:var(--head-h);z-index:30;background:var(--paper);
    margin:0 -20px 26px;padding:0 20px;box-shadow:0 1px 0 var(--line);
  }
  .side h2,.side-cta{display:none}
  .side nav ul{
    display:flex;gap:0;overflow-x:auto;border-top:0;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  }
  .side nav li{flex:none}
  .side nav a{
    white-space:nowrap;border-bottom:3px solid transparent;border-left:0;
    padding:14px 14px;font-size:15px;
  }
  .side nav a{color:var(--brand-blue);font-weight:500}
  .side nav a:hover{color:var(--navy);background:var(--paper-2)}
  .side nav a[aria-current="true"]{border-left:0;background:var(--brand-blue);color:#fff}
  .side{border-top:1px solid var(--line-2)}
  .nav{display:none}
}
@media (max-width:820px){
  .cards,.meta,.stats,.events,.two{grid-template-columns:1fr}
  .sec{padding:36px 0}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:24px}
  body{font-size:17px}
  .topbar .spacer{display:none}
  .stats .v{font-size:34px}
  .btn{font-size:19px;padding:12px 24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══ DOPRACOWANIE MOBILNE ═════════════════════════════════════
   Bloki celowo na końcu arkusza i w kolejności od szerszego do
   węższego — przy nakładających się progach wygrywa ten późniejszy. */

@media (max-width:700px){
  /* Niższy pasek nagłówka. Token steruje jednocześnie wysokością
     nagłówka, odsunięciem przyklejonego spisu sekcji i skokiem
     do kotwic, więc wystarczy zmienić go w jednym miejscu. */
  :root{--head-h:62px}
  .site-head .container{gap:12px;flex-wrap:nowrap}
  .logo{min-width:0}
  .logo img{width:132px;height:39px}
  .site-head .btn--sm{font-size:14px;padding:8px 13px;white-space:nowrap}

  .topbar{font-size:13px}
  .topbar .container{gap:4px 16px;min-height:36px}
  .crumb{font-size:13px;padding:14px 0 16px}

  .hero-slider{margin-top:14px}
  .e-title2{font-size:21px;padding-bottom:16px;margin-bottom:22px}
  .e-title2::after{width:112px}
  .intro{padding-top:26px}
  .intro .lead{font-size:17px}
  .sec{padding:32px 0}
  .day{font-size:17px}
  .nl{padding:26px 0}
  .nl-t h2{font-size:22px}
  .foot-bottom{font-size:13px}
}

@media (max-width:560px){
  /* slajder: termin i miejsce jedno pod drugim */
  .slide-band{gap:12px;padding:12px 16px}
  .slide-t h2{font-size:24px}
  .slide-sub{font-size:15px}

  /* newsletter: pole i przycisk na pełną szerokość */
  .nl-row{flex-direction:column}
  .nl-row button{padding:13px 18px}

  /* pasek zakładek zamiast spisu sekcji */
  .side nav a{padding:12px 12px;font-size:14px}

  /* podgląd zdjęć */
  .lb-nav,.lb-close{width:40px;height:40px;font-size:20px}
  .lb-fig figcaption{font-size:14px}

  /* karta i tabela */
  .card h3{font-size:18px}
  .tbl-scroll{margin-left:-20px;margin-right:-20px;border-left:0;border-right:0}
}

@media (max-width:380px){
  /* najwezsze telefony — nagłówek musi zmieścić się bez zawijania */
  .logo img{width:112px;height:33px}
  .site-head .btn--sm{font-size:13px;padding:7px 10px}
  .container{padding:0 14px}
}

/* ── przełącznik stref (wystawca / zwiedzający) ──────────────── */
.zones{display:flex;gap:2px;margin:18px 0 0;background:var(--line);border:1px solid var(--line)}
.zones a{
  flex:1;text-align:center;text-decoration:none;padding:13px 10px;
  background:var(--paper);color:var(--ink-2);font-size:17px;
}
.zones a:hover{background:var(--paper-2);color:var(--ink)}
.zones a[aria-current="page"]{background:var(--navy);color:#fff;font-weight:500}
@media (max-width:560px){.zones a{font-size:15px;padding:11px 8px}}

/* ── akordeon regulaminu ─────────────────────────────────────── */
.rules{max-width:80ch;margin:0 auto}
.rules details{border-bottom:1px solid var(--line);background:var(--paper)}
.rules details:first-child{border-top:1px solid var(--line)}
.rules summary{cursor:pointer;padding:15px 40px 15px 4px;position:relative;list-style:none;font-weight:500}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"+";position:absolute;right:12px;top:12px;color:var(--ev-text);font-size:24px}
.rules details[open] summary::after{content:"–"}
.rules .body{padding:0 40px 18px 4px;color:var(--ink-2);font-size:16px;line-height:1.7}
.rules .body p+p{margin-top:10px}

/* ── lista korzyści / zakresu opłaty ─────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:900px;margin:0 auto}
.incl div{background:var(--paper);padding:18px 20px}
.incl b{display:block;font-weight:500;margin-bottom:4px}
.incl span{font-size:15px;color:var(--ink-2);line-height:1.55}
.incl svg{width:22px;height:22px;color:var(--ev);float:left;margin:2px 10px 8px 0}

/* WordPress block wrappers */
.wp-block-group.container{width:100%;max-width:var(--container);margin-left:auto!important;margin-right:auto!important;padding-left:20px;padding-right:20px}
.wp-block-group.layout{display:grid;grid-template-columns:266px minmax(0,1fr);gap:48px;align-items:start}
.wp-block-group.content{min-width:0}
.wp-block-group:where(.container,.layout,.content)>*{margin-block-start:0;margin-block-end:0}
.table-intro,.events-intro,.features-intro,.numbered-intro{margin-bottom:26px}
.logos-intro{margin-bottom:24px}
.table-first{margin-bottom:30px}
.embed-placeholder{min-height:280px;display:grid;place-items:center;padding:24px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-3);text-align:center}
.media-text-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.media-right .media-text-media{order:2}
.media-text-media img{width:100%;height:auto}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;z-index:999;background:#fff;color:#141617;box-shadow:var(--shadow)}

@media (max-width:1040px){
  .wp-block-group.layout{display:block}
  .nav-list{gap:16px}
}

@media (max-width:820px){
  .media-text-grid,.contact-grid{grid-template-columns:1fr}
  .media-right .media-text-media{order:0}
  .nav-list{display:none}
}
@media (max-width:700px){.incl{grid-template-columns:1fr}}

/* ── logotypy patronów ───────────────────────────────────────── */
.patron{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:900px;margin:0 auto}
.patron li{border:1px dashed var(--line);min-height:84px;display:grid;place-items:center;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:10px}