/**
 * Facebook Events Display - lista wydarzen
 * WERSJA 4.9.0 - 20 wrzesnia 2026
 * Dopisany przycisk .fed-wiecej i zwijanie listy do trzech kart na telefonie.
 *
 * Skorka zgodna ze Skills/Style.md.
 *
 * Co sie zmienilo wobec 3.6:
 *  - zniknal niebieski Facebooka #1877f2 i zielony przycisk kalendarza #4CAF50
 *  - zniknal .fed-button{color:#fff !important}, ktory psul przycisk karuzeli
 *    na stronie glownej (Style.md 12a) - wygrywal z kazda regula slidera
 *  - zniknal blok prefers-color-scheme:dark, ktory u czesci rodzicow wywracal
 *    karty na czarno, podczas gdy reszta strony zostawala jasna
 *  - wszystkie reguly zagniezdzone pod .fed-wrapper, wiec modul nie moze juz
 *    wplynac na zaden inny element serwisu
 *  - tokeny lokalne z prefiksem --fed-, bo modul stoi poza kontenerem strony
 *    i nie widzi zmiennych CSS podstrony
 *  - text-transform:none na naglowkach, bo TheGem wymusza wersaliki
 */

.fed-wrapper {
    --fed-navy: #0B3954;
    --fed-sea: #17739F;
    --fed-sky: #BFE4F5;
    --fed-mist: #EAF5FB;
    --fed-buoy: #FFC63B;
    --fed-coral: #CF4A28;
    --fed-coral-cien: #A63821;
    --fed-paper: #F4FAFD;
    --fed-ink: #14303F;
    --fed-szary: #5A7385;
    --fed-line: rgba(11, 57, 84, .14);
    --fed-r: 18px;
    --fed-cien: 0 2px 4px rgba(11, 57, 84, .05), 0 12px 32px -8px rgba(11, 57, 84, .16);
    --fed-font: "Figtree", system-ui, -apple-system, sans-serif;
    --fed-font-d: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0 4px;
    font-family: var(--fed-font);
    color: var(--fed-ink);
}

/* Reset przez :where(), zeby nie kasowal klas komponentow (Style.md 3 i 12.14) */
.fed-wrapper :where(p, ul, li) { margin: 0; padding: 0; }
.fed-wrapper :where(h3) {
    font-family: var(--fed-font-d);
    font-weight: 800;
    color: var(--fed-navy);
    margin: 0;
    letter-spacing: -.015em;
    text-transform: none;
}
.fed-wrapper *, .fed-wrapper *::before, .fed-wrapper *::after { box-sizing: border-box; }
.fed-wrapper :focus-visible { outline: 3px solid var(--fed-coral); outline-offset: 3px; border-radius: 6px; }

.fed-wrapper .fed-ikona { flex: none; }

/* ------------------------------------------------------------------
   Filtry
   ------------------------------------------------------------------ */
.fed-wrapper .fed-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
    flex-wrap: wrap;
    justify-content: center;
}

.fed-wrapper .fed-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    background: #fff;
    border: 1px solid var(--fed-line);
    color: var(--fed-navy);
    padding: 11px 20px;
    font-family: var(--fed-font);
    font-size: 15.5px;
    font-weight: 700;
    border-radius: 100px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.fed-wrapper .fed-filter-btn:hover {
    background: var(--fed-mist);
    border-color: var(--fed-sea);
}

.fed-wrapper .fed-filter-btn.fed-filter-active {
    background: var(--fed-navy);
    border-color: var(--fed-navy);
    color: #fff;
}

.fed-wrapper .fed-licznik {
    font-variant-numeric: tabular-nums;
    background: var(--fed-mist);
    color: var(--fed-navy);
    border-radius: 100px;
    padding: 2px 9px;
    font-size: 13.5px;
}

.fed-wrapper .fed-filter-btn.fed-filter-active .fed-licznik {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.fed-wrapper .fed-loading {
    text-align: center;
    font-size: 16px;
    padding: 40px 20px;
    color: var(--fed-szary);
}

.fed-wrapper .fed-loading[hidden] { display: none; }

/* ------------------------------------------------------------------
   Siatka wydarzen
   ------------------------------------------------------------------ */
.fed-wrapper .fed-events-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 22px;
}

.fed-wrapper .fed-events-container[hidden] { display: none; }

.fed-wrapper .fed-event {
    background: #fff;
    border: 1px solid var(--fed-line);
    border-radius: var(--fed-r);
    overflow: hidden;
    box-shadow: var(--fed-cien);
    display: flex;
    flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
}

.fed-wrapper .fed-event:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(11, 57, 84, .07), 0 18px 40px -10px rgba(11, 57, 84, .22);
}

/* Okladka. Tlo zastepcze zostaje widoczne, gdy obrazek sie nie wczyta -
   bez tego przegladarka wypisuje surowy tekst alternatywny i rozpycha karte. */
.fed-wrapper .fed-event-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(150deg, var(--fed-mist), var(--fed-sky));
}

.fed-wrapper .fed-event-image a { display: block; height: 100%; }

.fed-wrapper .fed-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.fed-wrapper .fed-event:hover .fed-event-image img { transform: scale(1.04); }

/* Karta bez lokalnej okladki. Adres z Facebooka po dacie waznosci zwraca 403,
   a zepsuta ikona zdjecia wyglada dla rodzica jak awaria strony. Spokojna
   ramka w tokenach systemu jest uczciwsza i nie odciaga uwagi od tresci. */
.fed-wrapper .fed-cover-brak {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, var(--fed-mist), var(--fed-sky));
}

.fed-wrapper .fed-cover-brak-tekst {
    font-family: var(--fed-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fed-navy);
    opacity: .55;
}

.fed-wrapper .fed-event-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fed-wrapper .fed-event-title {
    font-size: 19px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fed-wrapper .fed-event-title a { color: var(--fed-navy); text-decoration: none; }
.fed-wrapper .fed-event-title a:hover { color: var(--fed-sea); }

/* Data i miejsce. Tresc w <span>, bo flex z gap rozbija goly tekst (Style.md 12.4) */
.fed-wrapper .fed-event-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--fed-sea);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fed-wrapper .fed-event-place {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--fed-szary);
    font-size: 14px;
}

.fed-wrapper .fed-event-place .fed-ikona { margin-top: 1px; }

.fed-wrapper .fed-event-updated {
    color: #7E97A6;
    font-size: 12.5px;
    margin-top: -4px;
}

/* <small> renderuje sie jako ~0.83em, czyli z 12.5 px robilo 10 px. Pomiar 20 wrzesnia.
   12 px to prog, ponizej ktorego Google zglasza tekst jako nieczytelny na telefonie. */
.fed-wrapper .fed-event-updated small { font-size: 12px; }

/* Odznaka czasu */
.fed-wrapper .fed-time-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.fed-wrapper .fed-badge-today { background: var(--fed-coral); color: #fff; }
.fed-wrapper .fed-badge-tomorrow { background: var(--fed-buoy); color: var(--fed-navy); }
.fed-wrapper .fed-badge-week { background: var(--fed-mist); color: var(--fed-navy); }

/* ------------------------------------------------------------------
   Opis
   Pelna tresc jest zawsze w kodzie strony. Klasa is-zwiniety ogranicza
   wylacznie wysokosc, wiec wyszukiwarka i czytnik ekranu widza calosc.
   ------------------------------------------------------------------ */
.fed-wrapper .fed-event-description {
    color: var(--fed-ink);
    font-size: 14.5px;
    line-height: 1.62;
    flex: 1;
}

.fed-wrapper .fed-desc-tresc { max-height: none; overflow: visible; }

.fed-wrapper .fed-event-description.is-zwiniety .fed-desc-tresc {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fed-wrapper .fed-desc-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--fed-sea);
    font-family: var(--fed-font);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fed-wrapper .fed-desc-toggle[hidden] { display: none; }
.fed-wrapper .fed-desc-toggle:hover { color: var(--fed-navy); }

/* ------------------------------------------------------------------
   Przyciski akcji
   Koral dostaje akcja, ktora zatrzymuje rodzica u nas, czyli zapisanie
   terminu. Wyjscie na Facebooka jest drugorzedne (Style.md 12a).
   ------------------------------------------------------------------ */
.fed-wrapper .fed-event-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    flex-wrap: wrap;
}

.fed-wrapper .fed-event-actions > a,
.fed-wrapper .fed-event-actions > .fed-calendar-dropdown,
.fed-wrapper .fed-event-actions > .np-zap-btn {
    flex: 1 1 140px;
    min-width: 0;
}

/* Przycisk zapisu pochodzi z wtyczki np-zapisy i ma własne, większe wymiary
   przewidziane pod sekcję na podstronie. W rzędzie akcji musi wyglądać jak
   pozostałe dwa przyciski. Patrz Style.md 12a: moduł zewnętrzny dostaje
   skórkę tego systemu, a nie odwrotnie. */
.fed-wrapper .fed-event-actions > .np-zap-btn {
    min-height: 0;
    padding: 12px 18px;
    font-family: var(--fed-font);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--fed-mist);
    color: var(--fed-navy);
    border: 2px solid var(--fed-sea);
    box-shadow: none;
}

.fed-wrapper .fed-event-actions > .np-zap-btn:hover {
    background: var(--fed-sky);
    color: var(--fed-navy);
    transform: none;
    box-shadow: none;
}

.fed-wrapper .fed-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-family: var(--fed-font);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.fed-wrapper .fed-button-calendar {
    background: var(--fed-coral);
    color: #fff;
    box-shadow: 0 4px 0 var(--fed-coral-cien);
}

.fed-wrapper .fed-button-calendar:hover { background: #BE4526; color: #fff; }

.fed-wrapper .fed-button-fb {
    background: var(--fed-mist);
    color: var(--fed-navy);
    border-color: var(--fed-line);
}

.fed-wrapper .fed-button-fb:hover {
    background: var(--fed-sky);
    border-color: var(--fed-sea);
    color: var(--fed-navy);
}

/* ------------------------------------------------------------------
   Lista kalendarzy
   ------------------------------------------------------------------ */
.fed-wrapper .fed-calendar-dropdown { position: relative; }

.fed-wrapper .fed-calendar-options {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--fed-line);
    border-radius: 14px;
    box-shadow: var(--fed-cien);
    min-width: 230px;
    z-index: 40;
    overflow: hidden;
}

.fed-wrapper .fed-calendar-dropdown.active .fed-calendar-options { display: block; }

.fed-wrapper .fed-calendar-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 16px;
    color: var(--fed-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fed-line);
    font-size: 14.5px;
    transition: background .15s;
}

.fed-wrapper .fed-calendar-option:last-child { border-bottom: none; }
.fed-wrapper .fed-calendar-option:hover { background: var(--fed-mist); }

.fed-wrapper .fed-calendar-option img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.fed-wrapper .fed-calendar-error {
    padding: 12px 16px;
    color: var(--fed-szary);
    font-size: 13px;
}

/* ------------------------------------------------------------------
   Brak wydarzen
   ------------------------------------------------------------------ */
.fed-wrapper .fed-no-events {
    grid-column: 1 / -1;
    text-align: center;
    padding: 44px 20px;
    background: var(--fed-mist);
    border-radius: var(--fed-r);
}

.fed-wrapper .fed-no-events p {
    font-size: 16.5px;
    color: var(--fed-szary);
}

/* ------------------------------------------------------------------
   Przycisk "Pokaz pozostale N"
   Istnieje wylacznie na telefonie. Na komputerze lista jest juz krotka,
   bo domyslny zakres to najblizszy tydzien, a nie caly kwartal.
   ------------------------------------------------------------------ */
.fed-wrapper .fed-wiecej {
    display: none;
    width: 100%;
    margin-top: 18px;
    padding: 15px 22px;
    min-height: 44px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--fed-navy, #0B3954);
    background: transparent;
    border: 2px solid rgba(11, 57, 84, .22);
    border-radius: 100px;
    cursor: pointer;
}

.fed-wrapper .fed-wiecej:hover {
    background: var(--fed-mist, #EAF5FB);
    border-color: var(--fed-sea, #17739F);
}

/* ------------------------------------------------------------------
   Telefon - trzy zakresy zgodnie ze Style.md 9
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .fed-wrapper .fed-events-container { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 680px) {
    .fed-wrapper .fed-events-container { grid-template-columns: 1fr; gap: 18px; }

    /* Zwijanie listy. Karty poza limitem oznacza PHP klasa fed-poza-limitem,
       wiec rodzic nigdy nie widzi pelnej listy migajacej przed zwinieciem.
       Skrypt tylko zdejmuje fed-zwiniete po kliknieciu. */
    .fed-wrapper.fed-zwiniete .fed-poza-limitem { display: none; }
    .fed-wrapper .fed-wiecej { display: block; }
    .fed-wrapper:not(.fed-zwiniete) .fed-wiecej { display: none; }

    .fed-wrapper .fed-filters { gap: 8px; }
    .fed-wrapper .fed-filter-btn { flex: 1 1 100%; justify-content: center; }
    .fed-wrapper .fed-event-title { font-size: 18px; }
    .fed-wrapper .fed-event-actions { flex-direction: column; }
    .fed-wrapper .fed-event-actions > a,
    .fed-wrapper .fed-event-actions > .fed-calendar-dropdown { flex: 1 1 auto; }

    /* Lista kalendarzy jako panel od dolu ekranu - przy jednej kolumnie
       rozwijana lista wychodzila poza karte. */
    .fed-wrapper .fed-calendar-options {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        z-index: 100;
    }
}

@media (max-width: 420px) {
    .fed-wrapper .fed-event-content { padding: 17px; }
    .fed-wrapper .fed-event-title { font-size: 17px; }
    .fed-wrapper .fed-event-description { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .fed-wrapper .fed-event,
    .fed-wrapper .fed-event-image img,
    .fed-wrapper .fed-button,
    .fed-wrapper .fed-filter-btn { transition: none; }
    .fed-wrapper .fed-event:hover { transform: none; }
    .fed-wrapper .fed-event:hover .fed-event-image img { transform: none; }
}