/* 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}