/* EDU PLANETA — komponenty wspólne dla strony głównej i podstron.
 *
 * WAŻNE: ten arkusz jest wczytywany również na stronie głównej, która ma własny,
 * skompilowany CSS aplikacji. Dlatego nie ma tu ANI JEDNEJ reguły globalnej —
 * żadnego `body`, `p`, `h2` czy resetu. Wyłącznie klasy komponentów.
 * Tokeny czytamy z wartością zapasową, więc arkusz działa też bez edu-pages.css.
 */

/* ── Baner zgody cookies (RODO) ───────────────────────────── */
.cookie-bar{
  position:fixed; left:20px; bottom:20px; z-index:120;
  width:min(420px, calc(100vw - 40px));
  background:var(--paper,#faf9f6);
  border:1px solid var(--line,#dedfd6);
  border-radius:24px;
  box-shadow:0 18px 60px #20241f2e;
  padding:26px 28px;
  font-family:var(--body-font,Manrope,Arial,sans-serif);
  font-size:14px; line-height:1.6; color:var(--muted,#666a61);
}
.cookie-bar[hidden]{display:none}
.cookie-bar h2{
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:18px; font-weight:600; line-height:1.1; letter-spacing:-.03em;
  color:var(--ink,#20241f); margin:0 0 10px;
}
.cookie-bar p{margin:0 0 18px}
.cookie-bar a{color:var(--forest,#284e3d)}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px}
.cookie-actions button{
  font:inherit; cursor:pointer; border:0;
  padding:12px 20px; border-radius:999px; font-size:14px; font-weight:700;
}
.cookie-accept{background:var(--forest,#284e3d); color:#fff; flex:1 1 auto}
.cookie-accept:hover{background:#1e3d2f}
.cookie-reject{border:1px solid var(--line,#dedfd6); color:var(--ink,#20241f); background:none}
.cookie-reject:hover{background:var(--soft,#f0f1e9)}

/* ── Przycisk „przejdź do zamówienia" w koszyku aplikacji ─── */
.go-checkout{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:18px;
  background:var(--forest,#284e3d); color:#fff;
  border-radius:12px; padding:17px 24px;
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:16px; font-weight:600; text-decoration:none;
}
.go-checkout:hover{background:#1e3d2f}
.go-checkout[aria-disabled="true"]{opacity:.4; pointer-events:none}


@media (max-width:620px){
  .cookie-bar{left:12px; right:12px; bottom:12px; width:auto; padding:22px 20px}
  .cookie-actions button{flex:1 1 100%}
}

/* ── Poprawka defektu skompilowanej aplikacji ─────────────────
 * Sekcja „benefits" ma siatkę `1fr 1fr`, a jej kolumny nie schodzą poniżej
 * szerokości zawartości. Na ekranach poniżej ~420 px daje to poziome
 * przewijanie całej strony (zmierzone: 47 px nadmiaru przy 320 px).
 * Defekt istnieje również w nietkniętej paczce — nie pochodzi z naszych zmian.
 * Override jest wąski: dotyczy wyłącznie małych ekranów i tylko tej siatki.
 */
@media (max-width:420px){
  .benefits-grid{grid-template-columns:minmax(0,1fr)}
  .benefits-intro h2,.benefits-intro p{overflow-wrap:anywhere}
}

/* ── Koszyk aplikacji: ukrywamy jej listę i przycisk kopiowania ─
 * Od 2026-09-25 aplikacja zna wszystkie trzy boxy i ich ceny, ale jej koszyk
 * nie ma przejścia do formularza zamówienia — daje tylko podsumowanie do
 * skopiowania. Listę pozycji, sumę i przycisk „Przejdź do zamówienia" renderuje
 * `edu-shop.js` (węzły z klasą `edu-basket`), a oryginały Reacta chowamy
 * selektorem — bez dotykania jego drzewa i bez walki o klasy.
 *
 * Pole z tekstem do skopiowania i przycisk „Kopiuj podsumowanie" znikają
 * na życzenie klienta: klasyczne podsumowanie jest czytelniejsze.
 */
.basket-modal .basket-items:not(.edu-basket),
.basket-modal .basket-total:not(.edu-basket),
.basket-modal .order-summary,
.basket-modal .copy-order{display:none!important}

/* ── Trzecia karta w siatce sklepu ────────────────────────────
 * Aplikacja renderuje trzy karty, ale jej własna siatka ma na sztywno `1fr 1fr`.
 * Tu poszerzamy ją do trzech kolumn.
 * Poniżej 960 px zostaje układ aplikacji (dwie kolumny, potem jedna).
 */
@media (min-width:961px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
}

/* Akcent karty piernikowej — odpowiednik motywów .chocolate i .archaeology,
   których aplikacja dostarcza sama. Kolor przycisku ujednolicony niżej. */
.product-card.gingerbread .product-info h3{color:#42291d; text-shadow:0 1px #e8d3b4, 0 2px #cdab7e}

/* ── Wyrównanie kart w rzędzie ────────────────────────────────
 * Opisy produktów mają różną długość (2 albo 3 linijki), przez co cena,
 * przycisk i link „Sprawdź zawartość" lądowały na różnych wysokościach.
 * Karta staje się kolumną flex, a opis dostaje `flex:1` i pochłania nadmiar —
 * dzięki temu bloki pod nim startują w tej samej linii we wszystkich kartach.
 * Sama siatka rozciąga karty do równej wysokości już domyślnie.
 */
@media (min-width:701px){
  .product-grid .product-card{display:flex; flex-direction:column}
  .product-grid .product-info{display:flex; flex-direction:column; flex:1}
  .product-grid .product-info p{flex:1}
}

/* ── Jeden kolor wszystkich przycisków zakupu (2026-09-25) ──────────────
   Karty produktów miały trzy różne kolory (karamel / zieleń / brąz), bo każdy
   box nosi własny motyw. Decyzja: wszystkie CTA zakupowe w zieleni marki.
   Reguły muszą wymieniać motywy jawnie, żeby dorównać specyficznością
   regułom z ftp-*.css i z sekcji piernikowej wyżej w tym pliku.
   Arkusz ładuje się PO bundlowym, więc przy równej specyficzności wygrywa. */
.product-card.chocolate .product-buy button,
.product-card.archaeology .product-buy button,
.product-card.gingerbread .product-buy button,
.final-cta button.chocolate,
.final-cta button.archaeology,
.final-cta button.gingerbread{
  background:var(--forest,#284e3d);
  color:#fff;
}
.product-card.chocolate .product-buy button:hover,
.product-card.archaeology .product-buy button:hover,
.product-card.gingerbread .product-buy button:hover,
.final-cta button.chocolate:hover,
.final-cta button.archaeology:hover,
.final-cta button.gingerbread:hover{
  background:#1e3b2e;
  color:#fff;
}

/* ── Sekcja z filmem prezentacyjnym — ukryta na życzenie (2026-09-25) ───
   Ukrywamy CSS-em, nie wycinamy z bundla: węzeł Reacta zostaje nietknięty,
   a powrót to usunięcie tych dwóch reguł. Film ma preload="none",
   więc ukryty nie generuje pobrania. Link „Prezentacja" w menu znika razem
   z sekcją, żeby nie prowadził donikąd. */
#opinie{display:none}
.main-nav a[href="#opinie"]{display:none}

/* ── Nowe logo marki (2026-09-25) ───────────────────────────────────────
   Poprzedni znak był kwadratową planetą, którą bundle pokazywał jako
   okrągły kadr w czarnym kole (.brand-symbol: 49px, overflow:hidden,
   obrazek rozdmuchany do 316px i przesunięty). Nowe logo jest szerokie
   i niesie napis „EduPlaneta", więc kadrowanie trzeba wyłączyć — inaczej
   w kole widać przypadkowy wycinek liter.
   Nazwę marki obok logo wygaszamy wizualnie (font-size:0), bo dublowałaby
   napis z obrazka; tekst zostaje w DOM dla czytników ekranu, a podtytuł
   „WARSZTATY EDUKACYJNE" wraca do swojego rozmiaru. */
.brand-symbol{
  background:none;
  border-radius:0;
  width:auto;
  height:42px;
  overflow:visible;
}
.brand-symbol img{
  position:static;
  width:auto;
  height:42px;
  max-width:none;
}
/* Zakres ograniczony do `.site` — to kontener aplikacji, którego podstrony nie mają.
   Bez tego rozmiar podtytułu z tej reguły przeciekał na podstrony i zmniejszał go
   z 9,5 px do 7 px. Podstrony rządzą się własną regułą w edu-pages.css. */
.site .brand span{font-size:0}
.site .brand span small{font-size:7px}

@media (max-width:620px){
  .brand-symbol,.brand-symbol img{height:34px}
}

/* ── Hero: trzy zdjęcia zamiast dwóch (2026-09-25) ──────────────────────
 * Aplikacja pozycjonuje tylko `.hero-product-0` i `.hero-product-1`.
 * Trzecia karta dziedziczyła `position:absolute` bez współrzędnych i lądowała
 * w lewym górnym rogu, nachodząc na pozostałe. Tu układamy wachlarz trzech kart:
 * węższe niż oryginalne 65%, bo trzy muszą zmieścić się w tej samej kolumnie.
 * Wysokość kontenera rośnie proporcjonalnie na każdym punkcie łamania.
 */
/* Proporcja zamiast sztywnej wysokości: układ kart jest procentowy,
   więc przy zmianie szerokości kolumny skaluje się sam i nie trzeba
   dobierać wysokości osobno na każdym punkcie łamania. */
.site .hero-visual{aspect-ratio:.945; height:auto}
.site .hero-product{width:44%}
.site .hero-product-0{z-index:1; top:0; left:0; right:auto; transform:rotate(-8deg)}
.site .hero-product-1{z-index:2; top:24%; right:0; left:auto; transform:rotate(7deg)}
.site .hero-product-2{z-index:3; top:53%; left:5%; right:auto; transform:rotate(-3deg)}
.site .hero-product-0:hover{z-index:4; transform:rotate(-4deg) translateY(-8px)}
.site .hero-product-1:hover{z-index:4; transform:rotate(3deg) translateY(-8px)}
.site .hero-product-2:hover{z-index:4; transform:rotate(0deg) translateY(-8px)}

@media (max-width:700px){
  /* Kolumna jest tu pełnej szerokości, więc karty mogą być większe;
     kaskada zostaje ta sama, a proporcja daje im miejsce na trzecią kartę. */
  .site .hero-visual{aspect-ratio:.78; height:auto}
  .site .hero-product{width:48%}
  .site .hero-product-0{top:0; left:0}
  .site .hero-product-1{top:29%; right:0}
  .site .hero-product-2{top:53%; left:0}
}

/* ── Pasek promocyjny (październik 2026) ────────────────────────────────
 * Górny pasek ogłoszeniowy przerobiony na nośnik promocji. Bundle trzyma go
 * jako dwa <span> w układzie space-between — nie ruszamy tej struktury,
 * tylko podbijamy rozmiar i wyróżniamy prawy span złotą plakietką.
 * Dzięki temu na mobile (gdzie CSS aplikacji chowa pierwszy span) zostaje
 * dokładnie sama promocja, wyśrodkowana.
 *
 * PO PAŹDZIERNIKU: usunąć ten blok i przywrócić w index.html oraz w bundlu
 * tekst „1 box · do 25 uczestników · od 300 zł”.
 */
.announcement{
  height:auto; min-height:52px; padding:10px 48px;
  font-size:13.5px; letter-spacing:.02em; gap:20px;
  justify-content:center;
  /* Pasek jedzie z uzytkownikiem. Naglowek aplikacji tez jest sticky (top:0),
     wiec spychamy go pod pasek, inaczej jeden wchodzi pod drugi. */
  position:sticky; top:0; z-index:40;
}
.site .header{top:var(--promo-h,56px)}
/* Kotwice (#boxy, #faq) musza uwzglednic wyzszy pas przyklejony u gory. */
html:has(.announcement){scroll-padding-top:150px}
/* Claim marki ustepuje miejsca promocji - napis ma stac samotnie na srodku. */
.announcement>span:first-child{display:none}
/* Trzy plany typograficzne zamiast jednej zlotej plamy:
   etykieta (kapitaliki, karmel) - kod (obwodka) - korzysc (biel). */
.promo-tresc{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.promo-tresc b{
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  color:var(--caramel,#e8b35d);
}
.promo-tresc em{
  font-style:normal; font-weight:800; font-size:13px; letter-spacing:.14em;
  color:#fff; border:1.5px solid rgba(232,179,93,.65);
  padding:5px 13px; border-radius:8px; white-space:nowrap;
}
.promo-tresc i{font-style:normal; font-size:14px; font-weight:600; color:#fff; letter-spacing:.01em}
.promo-tresc b::after,.promo-tresc i::before{
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.35); vertical-align:middle;
}
.promo-tresc b::after{margin-left:14px}
.promo-tresc i::before{margin-right:14px}
@media (max-width:820px){
  .announcement{padding:10px 16px; min-height:46px}
  .promo-tresc{gap:8px}
  .promo-tresc b{font-size:9.5px; letter-spacing:.14em}
  .promo-tresc em{font-size:12px; padding:4px 10px; letter-spacing:.1em}
  .promo-tresc i{font-size:12.5px}
  .promo-tresc b::after,.promo-tresc i::before{display:none}
}


/* ── Pole kodu rabatowego w koszyku (2026-09-28) ────────────────────────
 * Kod ma rzucac sie w oczy zanim klient przejdzie do formularza, dlatego
 * blok jest w kolorze akcentowym marki, a nie w szarosci tla.
 * Wezly nosza klase `edu-basket`, wiec znikaja razem z reszta naszego
 * koszyka przy kazdym przerysowaniu.
 */
.edu-promo{
  margin:20px 0 4px;
  padding:18px 20px;
  border:2px dashed var(--caramel,#e8b35d);
  border-radius:16px;
  background:#fdf7ec;
}
.edu-promo[data-aktywny]{
  border-style:solid;
  border-color:var(--forest,#284e3d);
  background:#eef4f0;
}
.edu-promo__top{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.edu-promo__badge{
  flex-shrink:0;
  background:var(--caramel,#e8b35d);
  color:var(--ink,#20241f);
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-weight:800;
  font-size:17px;
  padding:9px 14px;
  border-radius:12px;
  white-space:nowrap;
}
.edu-promo[data-aktywny] .edu-promo__badge{background:var(--forest,#284e3d); color:#fff}
.edu-promo__tekst b{
  display:block;
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:17px; font-weight:700; color:var(--ink,#20241f); margin-bottom:3px;
}
.edu-promo__tekst span{font-size:13.5px; line-height:1.5; color:var(--muted,#666a61)}
.edu-promo__row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px}
.edu-promo__input{
  width:100%; padding:13px 15px;
  border:1.5px solid var(--line,#dedfd6); border-radius:12px; background:#fff;
  font:inherit; font-size:15px; color:var(--ink,#20241f); letter-spacing:.04em;
}
.edu-promo__input:focus{border-color:var(--forest,#284e3d); outline:none}
.edu-promo__ok,.edu-promo__usun{
  padding:13px 22px; border:0; border-radius:12px;
  background:var(--ink,#20241f); color:var(--paper,#faf9f6);
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:14.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.edu-promo__usun{background:transparent; color:var(--muted,#666a61); padding:6px 0; font-size:13.5px; text-decoration:underline}
.edu-promo__ok:hover{background:var(--forest,#284e3d)}
.edu-promo__status{margin:10px 0 0; font-size:13px; font-weight:600; color:var(--forest,#284e3d)}
.edu-promo__status[data-stan="blad"]{color:var(--danger,#9a3412)}

/* Wiersze rabatu w podsumowaniu koszyka — uklad jak w oryginalnym „Razem za boxy”. */
.basket-total .edu-rabat strong{color:var(--forest,#284e3d)}
.basket-total .edu-doplaty strong{font-size:1.15em}

@media (max-width:620px){
  .edu-promo__row{grid-template-columns:1fr}
  .edu-promo__top{gap:11px}
  .edu-promo__badge{font-size:15px; padding:7px 11px}
}

/* ── Ceny przekreslone + cena z kodem (promocja pazdziernik 2026) ───────
 * Aplikacja renderuje cene jako pojedynczy <strong>/<b>. Rozbilismy go na
 * dwa elementy: <s> ze stara cena i <span> z cena po rabacie.
 * Zmiana jest bliznacza w bundlu i w prerenderze - inaczej hydracja
 * zglasza React #418.
 *
 * PO PROMOCJI: cofnac oba pliki do pojedynczej ceny i usunac ten blok.
 */
.cena-zestaw{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.cena-zestaw s{
  color:#c0392b;
  text-decoration-line:line-through;
  text-decoration-color:#c0392b;
  text-decoration-thickness:2px;
  font-size:.58em;
  font-weight:600;
  opacity:.9;
}
.cena-zestaw span{color:inherit}
.contents-order .cena-zestaw{display:inline-flex}
.contents-order .cena-zestaw s{font-size:.82em}

/* Cena w hero i w duzej sekcji cenowej - ten sam uklad co na kartach. */
.cena-hero{align-items:baseline}
.cena-hero s{font-size:.5em}
.cena-hero small{flex-basis:100%; margin-top:2px}
.price-display{display:flex; align-items:baseline; gap:12px}
.price-display s{
  color:#c0392b; text-decoration-thickness:3px; font-size:.45em; font-weight:600; opacity:.9;
}
.price-display b{font-weight:inherit}

/* Wezwanie do dzialania w pasku - bez niego pasek tylko informuje. */
.promo-tresc a{
  background:var(--paper,#faf9f6);
  color:var(--ink,#20241f);
  text-decoration:none;
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:13.5px; font-weight:700;
  padding:8px 18px; border-radius:999px;
  white-space:nowrap;
  transition:transform .18s;
}
.promo-tresc a:hover{transform:translateY(-1px)}
.promo-tresc a:focus-visible{outline:3px solid var(--caramel,#e8b35d); outline-offset:3px}
.promo-tresc i{opacity:.85}

@media (max-width:820px){
  /* Odsuniecie naglowka liczy skrypt (zmienna --promo-h). */
  /* Termin ustepuje - na waskim ekranie licza sie kwota, kod i przycisk. */
  .promo-tresc i{display:none}
  .promo-tresc a{font-size:12.5px; padding:6px 14px}
}

/* ── Pływający przycisk „Zadzwoń" ──────────────────────────────
 * Prawy dolny róg, na każdej podstronie. Baner cookies siedzi po lewej
 * (z-index 120), więc tu zostajemy niżej — zgoda RODO ma pierwszeństwo.
 */
.edu-call{
  position:fixed; right:40px; bottom:44px; z-index:110;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  font-family:var(--body-font,Manrope,Arial,sans-serif);
}
.edu-call__przycisk{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--forest,#284e3d); color:#fff; text-decoration:none;
  padding:15px 24px; border-radius:999px;
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 12px 34px #20241f3d;
  transition:transform .18s, background .18s;
}
.edu-call__przycisk:hover{background:#1e3d2f; transform:translateY(-2px)}
.edu-call__przycisk:focus-visible{outline:3px solid var(--caramel,#e8b35d); outline-offset:3px}
.edu-call__przycisk svg{flex:none}

.edu-call__dymek{
  position:relative;
  width:min(272px, calc(100vw - 52px));
  background:var(--paper,#faf9f6);
  border:1px solid var(--line,#dedfd6);
  border-radius:18px;
  box-shadow:0 14px 40px #20241f26;
  padding:16px 34px 16px 18px;
  animation:edu-call-wjazd .28s ease-out;
}
.edu-call__dymek[hidden]{display:none}
/* Stan pomiarowy: dymek zajmuje miejsce w ukladzie, ale jest niewidoczny
   i nie trafia do drzewa dostepnosci. Uzywany, gdy baner cookies go zaslania. */
.edu-call__dymek--cichy{visibility:hidden}
.edu-call__dymek p{
  margin:0; font-size:13.5px; line-height:1.5; color:var(--muted,#666a61);
}
.edu-call__dymek strong{
  display:block; margin-bottom:3px;
  font-family:var(--title-font,Outfit,Arial,sans-serif);
  font-size:15px; font-weight:700; color:var(--ink,#20241f);
}
/* Ogonek dymka celujący w przycisk pod spodem. */
.edu-call__dymek::after{
  content:""; position:absolute; right:30px; bottom:-8px;
  width:14px; height:14px; transform:rotate(45deg);
  background:var(--paper,#faf9f6);
  border-right:1px solid var(--line,#dedfd6);
  border-bottom:1px solid var(--line,#dedfd6);
}
.edu-call__zamknij{
  position:absolute; top:7px; right:7px;
  width:24px; height:24px; padding:0;
  border:0; border-radius:50%; background:none; cursor:pointer;
  font:400 19px/1 var(--body-font,Manrope,Arial,sans-serif);
  color:var(--muted,#666a61);
}
.edu-call__zamknij:hover{background:var(--soft,#f0f1e9); color:var(--ink,#20241f)}

@keyframes edu-call-wjazd{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .edu-call__dymek{animation:none}
  .edu-call__przycisk{transition:none}
  .edu-call__przycisk:hover{transform:none}
}

/* Na wąskim ekranie baner cookies rozciąga się na całą szerokość dołu
   i przykryłby przycisk — podnosimy go ponad baner, dopóki ten wisi. */
@media (max-width:620px){
  .edu-call{right:20px; bottom:24px; gap:10px}
  .edu-call__przycisk{padding:14px 20px; font-size:15px}
  /* Wysokosc banera mierzy skrypt (--cookie-h); bez niego zostaje 0. */
  .edu-call{bottom:calc(24px + var(--cookie-h, 0px))}
}

/* ── Kalkulator kosztu na uczestnika (promocja pazdziernik 2026) ───────
 * Aplikacja renderowala jedna liczbe (cena katalogowa / liczba osob).
 * Rozbilismy ja na <s> z cena katalogowa i <b> z cena po rabacie.
 * PO PROMOCJI: cofnac bundle i prerender do jednej liczby, usunac ten blok.
 */
.calc-cena{display:inline-flex; align-items:baseline; gap:.28em}
.calc-cena s{
  color:#c0392b;
  text-decoration-line:line-through;
  text-decoration-color:#c0392b;
  text-decoration-thickness:3px;
  font-size:.52em;
  font-weight:600;
  opacity:.9;
}
.calc-cena b{font-weight:inherit; color:inherit}

/* ── Sekcja kinowa: zmiękczone krawędzie filmu ─────────────────
 * Film wchodził w stronę jako twardy prostokąt — ostra krawędź górna
 * i dwa pionowe cięcia po bokach. Maskujemy same media (wideo + poster),
 * więc obraz wytapia się w tło sekcji (#151b16 — ten sam kolor, co scena).
 *
 * Maska siedzi na .scroll-scrub__media, NIE na .scroll-scrub__stage:
 * pasek postępu i przyciski rozdziałów leżą wyżej (z-index 5 i 6)
 * i mają zostać ostre.
 *
 * Rampy są łamane na kilka przystanków zamiast jednego liniowego zjazdu.
 * Pierwsza wersja miała zejście 7%/8% liniowo — pomiar pikseli pokazał,
 * że przy jasnej zawartości kadru obraz wychodzi z tła w ~35 px i dalej
 * czyta się jak cięcie. Wieloprzystankowy spadek daje miękkie wejście.
 */
.edu-cinema{
  --edu-fade-x:linear-gradient(to right,
    #0000 0%, #0000002b 3%, #00000080 7%, #000000d9 12%, #000 17%,
    #000 83%, #000000d9 88%, #00000080 93%, #0000002b 97%, #0000 100%);
  --edu-fade-y:linear-gradient(to bottom,
    #0000 0%, #00000038 3%, #00000099 7%, #000 13%,
    #000 80%, #000000c4 88%, #00000059 94%, #0000 100%);
}
.edu-cinema .scroll-scrub__media{
  -webkit-mask-image:var(--edu-fade-x), var(--edu-fade-y);
  mask-image:var(--edu-fade-x), var(--edu-fade-y);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Delikatna winieta na wierzchu obrazu — zbiera rogi, które same rampy
   liniowe zostawiają jeszcze lekko kanciaste. */
.edu-cinema .scroll-scrub__stage::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:radial-gradient(125% 105% at 50% 45%,
    transparent 48%, #151b1699 76%, #151b16e6 92%, #151b16 100%);
}

/* Wąski ekran: kadr jest ciasny, więc zjazd po bokach mniejszy —
   inaczej maska zjadłaby to, co ma być widać. */
@media (max-width:820px){
  .edu-cinema{
    --edu-fade-x:linear-gradient(to right,
      #0000 0%, #00000040 3%, #000000b3 7%, #000 11%,
      #000 89%, #000000b3 93%, #00000040 97%, #0000 100%);
    --edu-fade-y:linear-gradient(to bottom,
      #0000 0%, #00000040 2%, #000000b3 5%, #000 9%,
      #000 86%, #000000c4 92%, #00000059 96%, #0000 100%);
  }
  .edu-cinema .scroll-scrub__stage::after{
    background:radial-gradient(135% 110% at 50% 45%,
      transparent 58%, #151b1680 82%, #151b16e6 95%, #151b16 100%);
  }
}

/* ── Prawdziwe zdjęcie boxów w hero ────────────────────────────
 * Czwarty element kolażu: fotografia obok trzech wizualizacji produktów.
 * Format poziomy, więc odróżnia się od kwadratowych kart — i o to chodzi,
 * ma czytać się jak zdjęcie, a nie jak kolejny render.
 * Bez podpisu i bez kliknięcia: to tło dowodowe, nie element nawigacji.
 */
.site .hero-real{
  position:absolute; z-index:4;
  top:0; left:49%; right:auto; width:26%;
  border:6px solid var(--paper,#faf9f6);
  border-radius:18px;
  box-shadow:0 22px 55px #20241f30;
  transform:rotate(5deg);
  object-fit:cover;
  height:auto;
}

@media (max-width:1024px){
  .site .hero-real{top:0; left:50%; width:27%}
}
@media (max-width:620px){
  .site .hero-real{top:77%; left:52%; width:29%; border-width:4px; border-radius:14px}
}