/* WEJŚCIA — siedem kafli, od których zaczyna się praca w panelu.
   ─────────────────────────────────────────────────────────────────────────
   Wyjęte 29.08.2026 ze strony Asystenta Generalnego do pliku wspólnego,
   bo ks. Andrzej poprosił, żeby formacja stała na górze także w kokpicie
   i w panelu AG. Trzy kopie tego samego układu rozjechałyby się przy
   pierwszej poprawce — tak właśnie rozjechał się kiedyś podręcznik.

   Układ w duchu, o który prosił ks. Andrzej: dużo powietrza, miękkie krawędzie,
   cień zamiast ramki, delikatne uniesienie pod kursorem. Kafel jest jednym
   przyciskiem — obraz i tekst reagują razem, bo są jedną rzeczą do kliknięcia. */
.trzy-wejscia{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  margin:4px 0 26px}
.we3{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--t-plansza,#fff);border-radius:22px;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.14);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1)}
.we3:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(16,24,40,.07), 0 22px 44px -12px rgba(16,24,40,.26)}
.we3:focus-visible{outline:3px solid var(--ac);outline-offset:3px}

.we3-obraz{display:block;aspect-ratio:16/10;overflow:hidden;background:#f2f2f4;position:relative}
.we3-obraz img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.we3:hover .we3-obraz img{transform:scale(1.05)}

/* ── ANIMACJE NA KAFLACH ────────────────────────────────────────────────
   Ks. Andrzej, 29.08.2026: „na tych kafelkach zrób ciekawe animacje".

   Trzy ruchy, każdy w innym momencie i każdy z powodem — nie trzy efekty
   naraz. Ten sam język, którym mówi prezentacja: powolne światło i jeden
   przebieg promienia, a nie miganie.

   1. WEJŚCIE PO KOLEI. Kafle pojawiają się jeden po drugim, co 70 ms.
      Siedem rzeczy wjeżdżających równocześnie to ściana; siedem
      wjeżdżających po kolei to rząd, po którym oko idzie samo.
   2. PROMIEŃ PO OKŁADCE przy najechaniu — jeden przebieg złotej kreski
      w poprzek grafiki. Mówi „to jest żywe", a nie „to jest reklama".
   3. ŁUNA POD SPODEM. Delikatna poświata w barwie wiodącej kafla,
      zapalająca się razem z uniesieniem. To ona wiąże obraz z tekstem.

   NIC SIĘ NIE RUSZA SAMO Z SIEBIE. Panel jest miejscem pracy — kafel
   pulsujący w kółko odbiera uwagę temu, co człowiek właśnie czyta. */
.we3-obraz::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-115%);opacity:0}
.we3:hover .we3-obraz::before,
.we3:focus-visible .we3-obraz::before{animation:we3-promien .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes we3-promien{
  0%{transform:translateX(-115%);opacity:0}
  25%{opacity:1}
  100%{transform:translateX(115%);opacity:0}
}

.we3::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:22px;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--ac),transparent);
  opacity:0;filter:blur(10px);transition:opacity .3s cubic-bezier(.2,.7,.3,1)}
.we3:hover::after,.we3:focus-visible::after{opacity:.32}

/* Wejście po kolei.
   `backwards`, NIE `both` — i to jest poprawka po własnym błędzie. Przy `both`
   animacja zostaje „przyklejona" po zakończeniu i jej ostatnia klatka
   (`transform:none`) BIJE regułę `:hover{transform:translateY(-4px)}`,
   bo animacje wygrywają w kaskadzie ze zwykłymi deklaracjami. Zmierzone:
   po najechaniu kafel miał przekształcenie tożsamościowe, czyli uniesienie
   przestało działać na wszystkich siedmiu.
   `backwards` trzyma tylko klatkę POCZĄTKOWĄ przed startem — po zakończeniu
   element wraca do swoich zwykłych stylów i `:hover` znów działa. */
.trzy-wejscia .we3{animation:we3-wejscie .5s cubic-bezier(.16,1,.3,1) backwards}
.trzy-wejscia .we3:nth-child(1){animation-delay:.00s}
.trzy-wejscia .we3:nth-child(2){animation-delay:.07s}
.trzy-wejscia .we3:nth-child(3){animation-delay:.14s}
.trzy-wejscia .we3:nth-child(4){animation-delay:.21s}
.trzy-wejscia .we3:nth-child(5){animation-delay:.28s}
.trzy-wejscia .we3:nth-child(6){animation-delay:.35s}
.trzy-wejscia .we3:nth-child(7){animation-delay:.42s}
@keyframes we3-wejscie{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
/* Delikatne przyciemnienie u dołu obrazu — nadpis nad tytułem musi być czytelny
   na każdej okładce, a te są jasne i ciemne naprzemiennie. */
.we3-obraz::after{display:none}   /* okładki są własne i ciemne — patrz wyżej */
/* Godło zamiast okładki — Podręcznik nie ma zdjęcia i nie wymyślamy mu takiego.
   TŁO CIEMNE, BO GODŁO JEST BIAŁO-ZŁOTE. Na jasnym gradiencie ginęło; to ta sama
   zasada, co przy znaku na pismach.
   WYMIAR PODANY W PIKSELACH, NIE W PROCENTACH. `height:62%` w siatce nie miało
   od czego liczyć — obraz rozdął się do tysiąca pikseli i został przycięty
   do pustego środka. Zmierzone: 635 px w kaflu o wysokości dwustu. */
.we3-godlo{display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 30%,#1b3157,#0b2242)}
.we3-godlo img{width:auto;height:auto;max-height:66%;max-width:52%;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))}
.we3-godlo::after{display:none}
:root[data-theme="dark"] .we3-godlo{background:radial-gradient(120% 120% at 50% 30%,#22304a,#141d2c)}

.we3-tresc{display:flex;flex-direction:column;gap:5px;padding:16px 18px 19px}
.we3-nad{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--ac)}
.we3 b{font-size:1.32rem;font-weight:600;letter-spacing:-.015em;line-height:1.15;
  color:var(--t-tekst,#1d1d1f)}
.we3-opis{font-size:.88rem;line-height:1.45;color:var(--t-tekst-2,#6e6e73)}

/* ── OBJAŚNIENIE PO NAJECHANIU ─────────────────────────────────────────
   Ks. Andrzej, 29.08.2026: „przy najeżdżaniu na te grafiki niech się
   pokazuje, co to jest i o co chodzi".

   NIE `title`. Atrybut `title` wychodzi dopiero po sekundzie, znika przy
   pierwszym drgnięciu myszy i nie istnieje ani pod palcem, ani pod klawiszem
   Tab. Objaśnienie jest więc częścią kafla: rozwija się płynnie przy
   najechaniu i przy przejściu klawiszem — animujemy siatkę, a nie `height`,
   bo `height:auto` nie da się animować, a sztywna wysokość ucinałaby dłuższy
   tekst na wąskim ekranie.

   NA DOTYKU NIE MA NAJECHANIA, więc tam objaśnienie stoi po prostu widoczne.
   Kafel jest wtedy wyższy i to jest w porządku — lepiej wyższy niż niemy. */
.we3-objasnienie{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1),
             opacity .26s ease, margin-top .34s cubic-bezier(.2,.7,.3,1);
  opacity:0;margin-top:0}
/* JEDNO OPAKOWANIE W ŚRODKU, a nie dwa elementy siatki obok siebie.
   Dwa powody, oba zmierzone 29.08.2026:
   • przy dwóch elementach `grid-template-rows:0fr` zerował tylko pierwszy
     wiersz — objaśnienie miało 76 px w stanie „zwiniętym", czyli nie było
     zwinięte wcale;
   • kreska i odstęp postawione na elemencie siatki nie znikają razem z jego
     treścią, bo `0fr` zeruje wysokość wiersza, a nie własny `padding` —
     zostawało 16 px pustego paska pod każdym kaflem.
   `min-height:0` jest konieczne: bez niego element siatki nie schodzi
   poniżej wysokości swojej treści. */
.we3-objasnienie > .we3-srodek{overflow:hidden;min-height:0}
.we3:hover .we3-objasnienie,
.we3:focus-visible .we3-objasnienie,
.we3:focus-within .we3-objasnienie{grid-template-rows:1fr;opacity:1;margin-top:9px}
.we3-srodek{display:block}
.we3-co,.we3-poco{display:block;font-size:.83rem;line-height:1.5;
  color:var(--t-tekst-2,#6e6e73)}
.we3-co{border-top:1px solid var(--t-linia,rgba(11,34,66,.13));padding-top:9px}
.we3-poco{margin-top:6px;color:var(--ac);font-weight:600}
@media (hover:none){
  .we3-objasnienie{grid-template-rows:1fr;opacity:1;margin-top:9px}
}
@media (prefers-reduced-motion:reduce){
  .we3-objasnienie{transition:none}
}

/* ── BARWA WIODĄCA KAŻDEGO WEJŚCIA ─────────────────────────────────────
   Bierze się z okładki, żeby nadpis nad tytułem i zdanie „po co to komu"
   grały z obrazem, a nie obok niego. */
.we3-slowo{--ac:#b8860b}
.we3-formacja{--ac:#1f8a4c}
.we3-podrecznik{--ac:#24487f}
.we3-repo{--ac:#8a5cd6}
.we3-pliki{--ac:#0f7b8a}
.we3-sprawy{--ac:#b3541e}
.we3-wydarzenia{--ac:#7a5c00}

:root[data-theme="dark"] .we3{background:#1b2230;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6)}
:root[data-theme="dark"] .we3:hover{box-shadow:0 2px 6px rgba(0,0,0,.5), 0 26px 50px -14px rgba(0,0,0,.75)}
:root[data-theme="dark"] .we3 b{color:#f2f5fa}
:root[data-theme="dark"] .we3-opis{color:#9aa7b8}
:root[data-theme="dark"] .we3-slowo{--ac:#e8c26e}
:root[data-theme="dark"] .we3-formacja{--ac:#68b58b}
:root[data-theme="dark"] .we3-podrecznik{--ac:#9dbbe8}
:root[data-theme="dark"] .we3-repo{--ac:#c0a3f0}
:root[data-theme="dark"] .we3-pliki{--ac:#7fd0dc}
:root[data-theme="dark"] .we3-sprawy{--ac:#f0a877}
:root[data-theme="dark"] .we3-wydarzenia{--ac:#e8c26e}
:root[data-theme="dark"] .we3-co,:root[data-theme="dark"] .we3-poco{color:#9aa7b8}
:root[data-theme="dark"] .we3-poco{color:var(--ac)}
:root[data-theme="dark"] .we3-co{border-top-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .we3-godlo{background:linear-gradient(160deg,#222c3c,#18202c)}

@media (prefers-reduced-motion:reduce){
  .we3,.we3-obraz img{transition:none}
  .we3:hover{transform:none}
  .we3:hover .we3-obraz img{transform:none}
  /* Wszystkie trzy ruchy znikają — łącznie z wejściem po kolei. Kafle
     są od razu na miejscu i widoczne. */
  .trzy-wejscia .we3{animation:none;opacity:1;transform:none}
  .we3-obraz::before{display:none}
  .we3::after{display:none}
}