/* NOWE GRAFIKI PORTALI (28.10.2026): plik składa _shared/grafiki_nowe/buduj.py (część wspólna + część portalu); ładuje go
   tylko strona dla oglądającego objętego przełącznikiem GRAFIKI_NOWE_DLA. Adresy obrazów mają ?v= z treści pliku. */

/* warstwa tła sekcji: zdjęcie (picture) i film nad nim; film pojawia się płynnie dopiero, gdy naprawdę gra */
.gn-tlo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gn-tlo picture,.gn-tlo img,.gn-tlo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  margin:0;max-width:none;border-radius:0}
.gn-tlo video{opacity:0;transition:opacity 1.2s ease}
.gn-tlo video.gn-gra{opacity:1}
.gn-tlo::after{content:"";position:absolute;inset:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.gn-tlo video{display:none}}
/* sekcja z warstwą pod treścią: osobny kontekst warstw, warstwa tuż nad własnym tłem sekcji, treść nad nią bez zmian */
.gn-hero{position:relative;isolation:isolate;overflow:hidden}
.gn-hero > .gn-tlo{z-index:-1}

/* pasek ze zdjęciem nad nagłówkiem sekcji (stałe proporcje: bez skoku układu przy wczytywaniu) */
.gn-pas{position:relative;display:block;margin:0 0 18px;border-radius:18px;overflow:hidden;aspect-ratio:16/5;
  background:#0d1b14;box-shadow:0 8px 26px rgba(15,23,42,.12)}
.gn-pas picture,.gn-pas img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none}
.gn-pas .gn-tlo::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)}
@media (max-width:640px){.gn-pas{aspect-ratio:16/7;border-radius:14px}}

/* podpis „zdjęcie poglądowe”: mały, w rogu zdjęcia albo pod siatką */
.gn-pod{position:absolute;right:10px;bottom:8px;z-index:3;font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.2px;
  color:rgba(255,255,255,.88);background:rgba(0,0,0,.34);padding:3px 9px;border-radius:999px;pointer-events:none}
.gn-pogl{display:block;font-size:12px;color:#6b7686;margin:8px 2px 0;text-align:right}

/* ── HUB: Festival Travel, S-Unit (s-unit.pl), Erasmus Travel ───────────────────────────────────────────────────────── */

/* FESTIVAL, strona główna (/ dla gościa, /glowna): plansza „Na ilu z nich byłeś?” na zdjęciu i filmie z festiwalu */
.g-hero.gn-hero{background:#0a1405}
.g-hero.gn-hero .gn-tlo::after{background:
  linear-gradient(90deg,rgba(7,16,3,.86) 0%,rgba(7,16,3,.64) 30%,rgba(7,16,3,.30) 62%,rgba(7,16,3,.48) 100%),
  linear-gradient(0deg,rgba(7,16,3,.60) 0%,rgba(7,16,3,0) 42%)}
@media (max-width:980px){.g-hero.gn-hero .gn-tlo::after{background:
  linear-gradient(180deg,rgba(7,16,3,.38) 0%,rgba(7,16,3,.64) 30%,rgba(7,16,3,.82) 100%)}}

/* FESTIVAL, katalog (/festiwale, /festival): zdjęcie zamiast obrazka z obcego serwera, film w pętli */
.fl-hero.gn-hero{background:#0c120a}
.fl-hero.gn-hero .gn-tlo::after{background:linear-gradient(180deg,rgba(10,16,8,.52) 0%,rgba(10,16,8,.70) 60%,rgba(10,16,8,.86) 100%)}

/* FESTIVAL, eventy (/eventy): pasek z filmem z klubu nad nagłówkiem */
.gn-pas-film{background:#071006}
.gn-pas-film .gn-tlo::after{background:linear-gradient(180deg,rgba(4,10,3,0) 50%,rgba(4,10,3,.45) 100%)}

/* tablica bez wpisów: zdjęcie marki nad zdaniem „Jeszcze nic tu nie ma.” */
html[data-gn-marka] .tb-pusto{overflow:hidden}
html[data-gn-marka] .tb-pusto::before{content:"";display:block;height:150px;margin:-28px -20px 18px;background:#e8eef5 center/cover no-repeat}
html[data-gn-marka="festiwale"] .tb-pusto::before{background-image:url(/public/grafiki/fe-samolot-960.webp?v=974068cb90)}
html[data-gn-marka="erasmus"] .tb-pusto::before{background-image:url(/public/grafiki/er-planowanie-960.webp?v=87532066b2)}
html[data-gn-marka="hub"] .tb-pusto::before{background-image:url(/public/grafiki/su-ambasador-960.webp?v=2ba344d6b6)}

/* arkusz instalacji aplikacji (Festival: #fa-arkusz, Erasmus: .am-ark): zdjęcie marki nad ikoną */
html[data-gn-marka="festiwale"] #fa-arkusz .fa-ark-glowa::before,
html[data-gn-marka="erasmus"] .am-ark .am-ark-glowa::before{content:"";display:block;height:120px;border-radius:16px;margin:0 0 -30px;
  background:#0d1b14 center/cover no-repeat}
html[data-gn-marka="festiwale"] #fa-arkusz .fa-ark-glowa::before{background-image:url(/public/grafiki/fe-opaski-960.webp?v=c1ce60bcb0);background-position:center 35%}
html[data-gn-marka="erasmus"] .am-ark .am-ark-glowa::before{background-image:url(/public/grafiki/er-hero-m-960.webp?v=fe65ac0eec);background-position:center 30%}
html[data-gn-marka="festiwale"] #fa-arkusz .fa-ark-glowa .fa-ark-ikona,
html[data-gn-marka="erasmus"] .am-ark .am-ark-glowa .am-ark-ikona{position:relative;margin-left:14px;border:3px solid #fff}

/* ── S-UNIT (s-unit.pl, strona główna grupy) ── */
.home .hero.gn-hero{padding-top:70px;padding-bottom:44px}
.home .hero.gn-hero .gn-tlo::after{background:
  radial-gradient(ellipse 62% 70% at 50% 44%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.80) 55%,rgba(255,255,255,.45) 100%),
  linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.55) 78%,rgba(247,248,251,1) 100%)}
@media (max-width:700px){.home .hero.gn-hero .gn-tlo::after{background:
  radial-gradient(ellipse 90% 55% at 50% 48%,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 60%,rgba(255,255,255,.35) 100%),
  linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 30%,rgba(247,248,251,.85) 100%)}}

/* karty marek: zdjęcie u góry, znak marki zachodzi na zdjęcie (karty rysuje skrypt strony, więc rozpoznajemy je po znaku) */
.home .world:has(> img.wlogo){padding-top:150px}
.home .world:has(> img.wlogo)::after{content:"";position:absolute;left:0;right:0;top:0;height:128px;z-index:0;
  background:#e6ebf2 var(--gn-foto,none) center/cover no-repeat;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.home .world:has(> img.wlogo)::before{z-index:2}
.home .world:has(> img.wlogo) .wlogo{position:relative;z-index:1;margin-top:-62px;border:3px solid #fff;
  box-shadow:0 6px 18px rgba(15,23,42,.18);background:#fff}
.home .world:has(> img.wlogo[src*="key=wakacje"]){--gn-foto:url(/public/grafiki/su-wakacje-960.webp?v=bcd105f849)}
.home .world:has(> img.wlogo[src*="key=festiwale"]){--gn-foto:url(/public/grafiki/fe-festiwale-960.webp?v=46bbab7a31)}
.home .world:has(> img.wlogo[src*="key=grupowe"]){--gn-foto:url(/public/grafiki/su-wycieczki-960.webp?v=0aece336b7)}
.home .world:has(> img.wlogo[src*="key=erasmus"]){--gn-foto:url(/public/grafiki/er-hero-960.webp?v=6ee07e417e)}
.home .world:has(> img.wlogo[src*="key=ambasador"]){--gn-foto:url(/public/grafiki/su-ambasador-960.webp?v=2ba344d6b6)}

/* odnośniki do paszportów i rankingów: miniatura po lewej */
.pasz-linki a.gn-on{position:relative;padding-left:84px;min-height:78px}
.pasz-linki a.gn-on::before{content:"";position:absolute;left:12px;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:14px;
  background:#eef1f6 center/cover no-repeat;box-shadow:0 3px 10px rgba(15,23,42,.12)}
.pasz-linki a.gn-on[href="/kraje"]::before{background-image:url(/public/grafiki/su-t-paszport-480.webp?v=d5e08c45a2)}
.pasz-linki a.gn-on[href="/paszport-fest"]::before{background-image:url(/public/grafiki/su-t-paszport-fest-480.webp?v=b352c8c932)}
.pasz-linki a.gn-on[href="/ranking"]::before{background-image:url(/public/grafiki/su-t-rankingi-480.webp?v=1d74d4a2dc)}
.pasz-linki a.gn-on[href="/gwiazdki"]::before{background-image:url(/public/grafiki/su-t-aktywnosc-480.webp?v=30203562c2)}
.pasz-linki a.gn-on[href="/nagrody"]::before{background-image:url(/public/grafiki/su-t-nagrody-480.webp?v=dd293d3fe1)}

/* Gala: sala w świetle sceny pod ciemną zasłoną */
.gala-sec.gn-on{background-image:linear-gradient(90deg,rgba(14,10,30,.93) 0%,rgba(14,10,30,.80) 55%,rgba(14,10,30,.62) 100%),
  url(/public/grafiki/su-gala-960.webp?v=3df008eca3);background-size:cover;background-position:center}
@media (min-width:961px){.gala-sec.gn-on{background-image:linear-gradient(90deg,rgba(14,10,30,.93) 0%,rgba(14,10,30,.80) 55%,rgba(14,10,30,.55) 100%),
  url(/public/grafiki/su-gala-1600.webp?v=7b6f520d9a)}}

/* ── ERASMUS TRAVEL ── */
.er-hero .gn-tlo.er-hero-foto{z-index:0}
/* niski nagłówek: kadr na twarze (górna część zdjęcia), a nie na kurtki */
.er-hero .gn-tlo img,.er-hero .gn-tlo video{object-position:center 26%}
@media (max-width:700px){.er-hero .gn-tlo img,.er-hero .gn-tlo video{object-position:center 35%}}
.gn-er-miasto .gn-tlo{border-radius:inherit}
.gn-er-miasto .gn-tlo::after{background:none}
.so-hero .gn-pas,.uv-hero .gn-pas{margin-bottom:16px}

/* ── PROFILE (druga paczka, 28.10.2026): listy i strony klubów, DJ-ów, mediów, organizatorów, labeli, ekip, festiwali ── */

/* nagłówek listy: pasek ze zdjęciem i filmem nad treścią, którą rysuje skrypt strony (szerokość jak .wrap listy) */
.gn-lista{max-width:1100px;margin:18px auto 0;padding:0 20px;box-sizing:border-box}
.gn-lista .gn-pas{margin:0;aspect-ratio:21/7}
.gn-lista + #page{margin-top:16px}
@media (max-width:640px){.gn-lista{margin-top:12px;padding:0 14px}.gn-lista .gn-pas{aspect-ratio:16/8}}
/* rankingi DJ-ów i kalendarz: ten sam pasek w ich własnej kolumnie */
.gn-pas.gn-rdj{aspect-ratio:21/7;margin:4px 0 18px}
@media (max-width:640px){.gn-pas.gn-rdj{aspect-ratio:16/8}}
/* strony profili dla wyszukiwarek (/dj/…, /klub/…) bez zdjęcia: pasek nad nazwą */
.panel-wrap > .gn-pas{aspect-ratio:21/8;margin:0 0 14px}

/* nagłówek profilu (.phero): ostre tło w miejsce rozmytego zdjęcia, mocniejsza zasłona pod białym tekstem */
.phero.gn-phero .pbg{display:none}
.phero.gn-phero > .gn-ph-tlo{z-index:0;border-radius:inherit}
.phero.gn-phero > .gn-ph-tlo img,.phero.gn-phero > .gn-ph-tlo video{object-position:center 45%}
.phero.gn-phero .pov{background:linear-gradient(180deg,rgba(6,10,16,.18) 0%,rgba(6,10,16,.55) 52%,rgba(6,10,16,.90) 100%),
  linear-gradient(90deg,rgba(6,10,16,.55) 0%,rgba(6,10,16,.12) 70%)}
.phero.gn-phero{min-height:260px}
@media (max-width:560px){.phero.gn-phero{min-height:300px}.phero.gn-phero .pov{background:
  linear-gradient(180deg,rgba(6,10,16,.30) 0%,rgba(6,10,16,.70) 45%,rgba(6,10,16,.92) 100%)}}
.gn-pod.gn-pod-gora{top:10px;bottom:auto;right:12px}
.phero.gn-phero > .gn-pod{z-index:3}

/* kafelek profilu bez zdjęcia: obrazek zastępczy, inicjały na wierzchu */
.gn-zast{position:relative;background-size:cover !important;background-position:center !important}
.gn-zast > svg,.gn-zast > i{display:none}
.gn-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#fff;font-weight:800;letter-spacing:.04em;font-size:clamp(26px,8vw,52px);line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5)}
.vcard .ph .gn-ini{font-size:clamp(26px,7vw,44px)}
.phero .pav.gn-pav{color:transparent}
.phero .pav.gn-pav .gn-ini{font-size:44px}
@media (max-width:560px){.phero .pav.gn-pav .gn-ini{font-size:34px}}
span.rdj-tw.gn-zast-kolo{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.gn-zast-img{object-fit:cover}

/* strona festiwalu bez okładki: tło nagłówka pod dotychczasową zasłoną */
.ft-hero.gn-ft > .gn-ft-tlo{position:absolute;inset:0;z-index:0}
.ft-hero.gn-ft > .gn-pod{position:absolute;z-index:2}