/* ==========================================================================
   EduPlaner 2026 — uzupełnienie cieni
   Arkusz ładowany po sekcjach, więc przy równej szczegółowości wygrywa.

   Dwie rzeczy naraz:
   1. Elementy, które w szablonie źródłowym cienia nie dostały, a sąsiadują
      z takimi, które go mają — przyciski akordeonów, kafelki kroków,
      pigułki z ceną. Wartości są celowo płytkie: mają odklejać element
      od tła, a nie konkurować z kartami.
   2. Wersja mobilna. Cienie z szablonu są liczone pod szeroki ekran —
      mają duże rozmycie i mocno ujemny rozrost (np. `28px -16px`), przez co
      na wąskiej kolumnie chowają się całkowicie pod elementem. Poniżej
      1000 px podnosimy je o kilka pikseli i zmniejszamy ujemny rozrost.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brakujące cienie — wszystkie szerokości
   -------------------------------------------------------------------------- */

/* 1.1 Przyciski */

.ep-rozwin,
.ep-kafel-modulu__przycisk,
.ep-wybor__opcja,
.ep-hamburger,
.ep-produkt__krok,
.ep-spolecznosc {
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 5px 12px -7px rgba(51, 43, 84, 0.4);
}

.ep-rozwin:hover,
.ep-kafel-modulu__przycisk:hover,
.ep-hamburger:hover,
.ep-produkt__krok:hover,
.ep-spolecznosc:hover {
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
              0 9px 18px -8px rgba(51, 43, 84, 0.45);
}

/* Odznaka kategorii leży na zdjęciu produktu, a zdjęcia bywają jasne —
   cień odkleja ją od tła, żeby napis został czytelny na każdym. */
.ep-produkt__odznaka {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* Aktywna opcja ścieżki ma własny, mocniejszy cień w 05-sekcje-2.css —
   ten arkusz ładuje się później, więc trzeba go tu powtórzyć. */
.ep-wybor__opcja--aktywna {
  box-shadow: 0 10px 22px -12px rgba(51, 43, 84, 0.5);
}

/* Drugi przycisk sekcji CTA stoi na ciemnym tle — cień z fioletu byłby
   tam niewidoczny, stąd czerń. */
.ep-cta__drugi {
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55);
}
.ep-cta__drugi:hover {
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.6);
}

/* 1.2 Boksy */

.ep-przedsprzedaz__krok,
.ep-harmonogram {
  box-shadow: 0 1px 2px rgba(122, 36, 4, 0.05),
              0 10px 22px -14px rgba(122, 36, 4, 0.45);
}

.ep-filtr {
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 6px 14px -9px rgba(51, 43, 84, 0.4);
}

.ep-zam-aplikacja {
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.06),
              0 16px 30px -16px rgba(51, 43, 84, 0.42);
}

/* --------------------------------------------------------------------------
   2. Wersja mobilna — cienie krok mocniejsze
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

  /* Tokeny obsługują karty sklepu, panele i przyciski CTA. */
  :root {
    --ep-cien-karta:       0 1px 2px rgba(51, 43, 84, 0.07),
                           0 12px 24px -9px rgba(51, 43, 84, 0.30);
    --ep-cien-karta-hover: 0 3px 6px rgba(51, 43, 84, 0.09),
                           0 22px 38px -11px rgba(51, 43, 84, 0.38);
    --ep-cien-panel:       0 2px 4px rgba(51, 43, 84, 0.08),
                           0 24px 44px -15px rgba(51, 43, 84, 0.44);
    --ep-cien-mocny:       0 2px 4px rgba(51, 43, 84, 0.09),
                           0 30px 52px -17px rgba(51, 43, 84, 0.48);
    --ep-cien-cta:         0 10px 20px -7px rgba(122, 36, 4, 0.55), 0 3px 0 #A33005;
    --ep-cien-cta-hover:   0 14px 26px -7px rgba(122, 36, 4, 0.62), 0 2px 0 #A33005;
  }

  /* Reszta ma cienie wpisane na sztywno w arkuszach sekcji — te, które
     na wąskim ekranie znikały, dostają tu odpowiednik z mniejszym
     ujemnym rozrostem. Desktop zostaje nietknięty. */
  .ep-kafel-modulu {
    box-shadow: 0 1px 2px rgba(51, 43, 84, 0.06),
                0 12px 24px -10px rgba(51, 43, 84, 0.34);
  }
  .ep-statystyka {
    box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
                0 10px 22px -12px rgba(51, 43, 84, 0.45);
  }
  .ep-sciezka__lista {
    box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
                0 20px 38px -15px rgba(51, 43, 84, 0.4);
  }
  .ep-faq {
    box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
                0 22px 40px -16px rgba(51, 43, 84, 0.4);
  }

  /* Przyciski i boksy z punktu 1 — o włos głębiej, bo na telefonie
     patrzy się z bliska i płytki cień gubi się w tle. */
  .ep-rozwin,
  .ep-kafel-modulu__przycisk,
  .ep-wybor__opcja,
  .ep-hamburger,
  .ep-produkt__krok,
  .ep-spolecznosc {
    box-shadow: 0 1px 2px rgba(51, 43, 84, 0.06),
                0 7px 14px -7px rgba(51, 43, 84, 0.45);
  }
  /* Karta produktu jest na telefonie jedyną rzeczą w rzędzie — cień może
     być mocniejszy, bo nie konkuruje z sąsiadką. */
  .ep-produkt {
    box-shadow: 0 1px 2px rgba(51, 43, 84, 0.06),
                0 14px 28px -10px rgba(72, 55, 40, 0.32);
  }
  .ep-wybor__opcja--aktywna {
    box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
                0 12px 24px -10px rgba(51, 43, 84, 0.5);
  }
  .ep-przedsprzedaz__krok,
  .ep-harmonogram {
    box-shadow: 0 1px 2px rgba(122, 36, 4, 0.06),
                0 12px 24px -12px rgba(122, 36, 4, 0.5);
  }
}