/* ============================================================
   Facebook Events Slider — style karuzeli
   Wersja 8.0.0 · 26 września 2026 (poprzednia: 5.0.0)
   Numer idzie w parze z numerem wtyczki: ten arkusz jest wpisywany do kolejki
   ze stałą FED_SLIDER_VERSION, więc rozjazd numerów każe przeglądarce rodzica
   serwować stary plik z pamięci i nowy układ nie wchodzi.
   🔴 5.0.0: styl przycisku „Zobacz więcej", który zastąpił wyjście na Facebooka.

   ⚠️ DLACZEGO KAŻDA REGUŁA JEST ZAGNIEŻDŻONA POD .fed-carousel-wrapper

   Wtyczka Facebook Events Display ładuje swój style.css na KAŻDEJ
   podstronie serwisu i zawiera między innymi:

       .fed-button { background:#1877f2; color:#fff !important; }

   Przy wspólnych nazwach klas napis na przycisku slidera stawał się
   biały na białym tle. Dlatego:

     1. przyciski slidera mają własne klasy fed-slider-btn*
     2. wszystkie reguły są zagnieżdżone pod .fed-carousel-wrapper,
        co daje specyficzność wyższą niż reguły Display niezależnie
        od kolejności ładowania arkuszy

   Nie spłaszczaj tych selektorów. Nie używaj klas .fed-button,
   .fed-button-fb, .fed-button-calendar ani .fed-event-actions —
   należą do wtyczki Display.

   Kolory i typografia: Skills/Style.md.
   Zasada nadrzędna: koral to jedyny kolor akcji i wyłącznie kolor
   rzeczy klikalnych. Kropki, ramki i ikony to --fed-sea lub --fed-buoy.
   ============================================================ */

.fed-carousel-wrapper {
    /* Tokeny powielone lokalnie — karuzela stoi poza kontenerem .np-home. */
    --fed-navy: #0B3954;
    --fed-sea: #1B7FB8;
    --fed-sky: #BFE4F5;
    --fed-mist: #EAF5FB;
    --fed-buoy: #FFC63B;
    /* 🔴 Koral systemowy ze Style.md 4.2, ten sam co w liście wydarzeń,
       w harmonogramie i na dwunastu podstronach. Do 4.3.1 suwak miał własny
       odcień #F2643F: ten sam przycisk na tej samej stronie świecił dwoma
       różnymi pomarańczami, zależnie od modułu, który go wyrenderował. */
    --fed-coral: #CF4A28;
    --fed-coral-dark: #A63821;
    --fed-coral-hover: #BE4526;
    --fed-paper: #F4FAFD;
    --fed-ink: #14303F;
    --fed-line: rgba(11, 57, 84, .14);
    --fed-r: 18px;
    --fed-shadow: 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-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--fed-font);
    color: var(--fed-ink);
    line-height: 1.6;
    box-sizing: border-box;
}

.fed-carousel-wrapper *,
.fed-carousel-wrapper *::before,
.fed-carousel-wrapper *::after {
    box-sizing: border-box;
}

/* ---------- Nagłówek (domyślnie wyłączony atrybutem naglowek="nie") ---------- */

.fed-carousel-wrapper .fed-carousel-header {
    margin-bottom: 22px;
}

.fed-carousel-wrapper .fed-carousel-title {
    font-family: var(--fed-font-display);
    font-weight: 800;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    color: var(--fed-navy);
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 8px;
}

.fed-carousel-wrapper .fed-carousel-all-link {
    color: var(--fed-coral);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.fed-carousel-wrapper .fed-carousel-all-link:hover {
    border-bottom-color: var(--fed-coral);
    color: var(--fed-coral);
}

/* ---------- Tor karuzeli ---------- */

.fed-carousel-wrapper .fed-carousel-container {
    overflow: hidden;
    /* Cień kart nie może być przycięty przez overflow. */
    margin: -10px;
    padding: 10px;
}

.fed-carousel-wrapper .fed-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    touch-action: pan-y;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fed-carousel-wrapper .fed-carousel-card {
    flex: 0 0 calc((100% - 40px) / 3);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--fed-line);
    border-radius: var(--fed-r);
    box-shadow: var(--fed-shadow);
    overflow: hidden;
}

/* ---------- Okładka i plakietka z datą ---------- */

.fed-carousel-wrapper .fed-card-image {
    position: relative;
    height: 150px;
    flex-shrink: 0;
    /* Gradient jest tłem zastępczym, gdy okładka z Facebooka się nie wczyta. */
    background: linear-gradient(135deg, var(--fed-sky), var(--fed-mist));
    overflow: hidden;
}

.fed-carousel-wrapper .fed-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* Adresy okładek z CDN Facebooka wygasają. Bez tego przeglądarka wypisuje
   surowy tekst alternatywny, który rozjeżdża kartę. */
.fed-carousel-wrapper .fed-card-image--broken img {
    display: none;
}

.fed-carousel-wrapper .fed-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fed-carousel-wrapper .placeholder-icon {
    font-size: 34px;
    opacity: .5;
}

.fed-carousel-wrapper .fed-card-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.fed-carousel-wrapper .badge-day {
    display: inline-block;
    background: var(--fed-buoy);
    color: var(--fed-navy);
    font-family: var(--fed-font);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(11, 57, 84, .18);
}

/* ---------- Treść karty ---------- */

.fed-carousel-wrapper .fed-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    gap: 10px;
}

.fed-carousel-wrapper .fed-card-datetime {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fed-sea);
}

.fed-carousel-wrapper .fed-card-datetime .fed-time {
    padding-left: 12px;
    border-left: 2px solid var(--fed-line);
}

.fed-carousel-wrapper .fed-card-title {
    font-family: var(--fed-font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    color: var(--fed-navy);
    /* Motyw TheGem wymusza wersaliki na nagłówkach — tu ich nie chcemy,
       bo nazwy wydarzeń z Facebooka bywają długie i stają się nieczytelne. */
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
    /* Nazwy typu „Balet dla Maluszków (3-4 lata) | Ząbki, Marki, Warszawa
       Targówek | Nad Przystanią" rozbijałyby wysokość kart. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fed-carousel-wrapper .fed-card-tooltip {
    font-size: 14px;
    color: var(--fed-ink);
    opacity: .85;
    margin: 0;
}

/* ---------- Przyciski ---------- */

/* Odznaka czasu. Plakietka z datą siedzi po lewej, ta idzie po prawej,
   żeby obie były czytelne na tym samym kadrze. Te same trzy warianty
   co na liście wydarzeń, patrz style.css wtyczki Facebook Events Display. */
.fed-carousel-wrapper .fed-time-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--fed-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(11, 57, 84, .18);
}

.fed-carousel-wrapper .fed-badge-today {
    background: var(--fed-coral);
    color: #fff;
}

.fed-carousel-wrapper .fed-badge-tomorrow {
    background: var(--fed-buoy);
    color: var(--fed-navy);
}

.fed-carousel-wrapper .fed-badge-week {
    background: #fff;
    color: var(--fed-navy);
}

.fed-carousel-wrapper .fed-slider-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Dosuwa przyciski do dołu, żeby karty o różnej długości kończyły się równo. */
    margin-top: auto;
    padding-top: 4px;
}

/* Przycisk zapisu pochodzi z wtyczki np-zapisy i ma własne, większe wymiary
   przewidziane pod sekcję na podstronie. W karcie karuzeli dostaje skórkę tego
   systemu, a nie odwrotnie — Style.md 12a.

   🔴 KOLOR AKCJI NALEŻY DO ZAPISU. Do 4.3.1 koral miał przycisk KALENDARZA
   (klasa `--save`, nazwa z czasów, gdy nazywał się „Zapisz termin"), a zapis
   był obrysowy. Czyli hierarchia stała na głowie: najgłośniejszy przycisk
   na karcie prowadził do pliku .ics, a nie do formularza zapisu. To jest
   dokładnie pomyłka z 19 września, tylko zapisana w CSS zamiast w etykiecie.
   Claude.md 5d: zapis pierwszy i jedyny w kolorze akcji. */
.fed-carousel-wrapper .fed-slider-actions .np-zap-btn {
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    font-family: var(--fed-font);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--fed-coral);
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 4px 0 var(--fed-coral-dark);
}

.fed-carousel-wrapper .fed-slider-actions .np-zap-btn:hover {
    background: var(--fed-coral-hover);
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--fed-coral-dark);
}

.fed-carousel-wrapper .fed-slider-actions .np-zap-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--fed-coral-dark);
}

/* Wariant D, wybrany 25 września: trzy wiersze pełnej szerokości, ikona przed
   napisem, treść dosunięta do lewej. Kciuk trafia w cały pasek, a ikona daje
   rozpoznanie szybciej niż czytanie etykiety. Ten sam układ ma harmonogram
   (`.nph--wd`), żeby te same zajęcia wyglądały tak samo w obu modułach. */
.fed-carousel-wrapper .fed-slider-btn {
    display: inline-flex;
    align-items: center;
    /* Etykiety WYŚRODKOWANE, decyzja właściciela z 26 września. Przy wyrównaniu
       do lewej napis bez ikony („Zobacz więcej") wisiał pod ikoną sąsiada
       i trzy przyciski jednej karty czytały się jak trzy różne komponenty. */
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 11px 18px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--fed-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

/* ⚠️ Nazwa klasy `--save` została z czasów, gdy przycisk nazywał się
   „Zapisz termin". Dziś to KALENDARZ i jest drugorzędny. Klasy nie zmieniamy,
   bo mogą na niej wisieć cudze style z serwera — Style.md 12a. */
.fed-carousel-wrapper .fed-slider-btn--save {
    background: var(--fed-mist);
    color: var(--fed-navy);
    border-color: var(--fed-sky);
    box-shadow: none;
}

.fed-carousel-wrapper .fed-slider-btn--save:hover,
.fed-carousel-wrapper .fed-slider-btn--save:focus {
    background: var(--fed-sky);
    border-color: var(--fed-sea);
    color: var(--fed-navy);
    transform: none;
    box-shadow: none;
}

/* Link wychodzący na Facebooka — świadomie drugorzędny wobec „Dodaj do kalendarza",
   ale na tyle wyraźny, żeby czytało się jako przycisk, a nie pusta ramka. */
.fed-carousel-wrapper .fed-slider-btn--fb {
    background: var(--fed-mist);
    color: var(--fed-navy);
    border-color: var(--fed-sky);
}

.fed-carousel-wrapper .fed-slider-btn--fb:hover,
.fed-carousel-wrapper .fed-slider-btn--fb:focus {
    background: var(--fed-sky);
    border-color: var(--fed-sea);
    color: var(--fed-navy);
}

/* „Zobacz więcej" zajmuje miejsce po przycisku Facebooka i wygląda tak samo:
   to nadal akcja drugorzędna, obok koralowego zapisu. Napis jest bez ikony,
   więc środkujemy go, zamiast zostawiać wcięcie po nieistniejącej ikonie. */
.fed-carousel-wrapper .fed-slider-btn--wiecej {
    background: var(--fed-mist);
    color: var(--fed-navy);
    border-color: var(--fed-sky);
    text-decoration: none;
}

.fed-carousel-wrapper .fed-slider-btn--wiecej:hover,
.fed-carousel-wrapper .fed-slider-btn--wiecej:focus {
    background: var(--fed-sky);
    border-color: var(--fed-sea);
    color: var(--fed-navy);
}

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

/* Zapis przychodzi z wtyczki zapisów i ma własne wyrównanie. Sprowadzamy go
   do wspólnego mianownika: od 6.0 wszystkie trzy etykiety są wyśrodkowane.
   ⛔ Żadnego `padding-left` na wyrównanie do ikony sąsiada: tak było do 5.0
   i przy dłuższej etykiecie napis wychodził poza środek przycisku. */
.fed-carousel-wrapper .fed-slider-actions .np-zap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.fed-carousel-wrapper .fed-slider-btn:focus-visible,
.fed-carousel-wrapper .fed-carousel-arrow:focus-visible,
.fed-carousel-wrapper .fed-carousel-dot:focus-visible {
    outline: 3px solid var(--fed-sea);
    outline-offset: 2px;
}

/* ---------- Rozwijane menu kalendarza ---------- */

.fed-carousel-wrapper .fed-slider-calendar-dropdown {
    position: relative;
}

/* ⛔ Lista kalendarzy rozwija się W UKŁADZIE, nie nad przyciskiem.
   Zgłoszenie z 27 września: na komputerze kliknięcie nie robiło nic, a na telefonie
   działało. Zmierzone na prawdziwym kodzie z produkcji: lista OTWIERAŁA się zawsze,
   tylko stała 52 px NAD górną krawędzią karty, a karta ma `overflow: hidden`,
   więc znikała. Na telefonie karta jest wyższa, lista się mieściła i działała.
   Pozycjonowanie bezwzględne w tym miejscu jest nie do uratowania: w karuzeli
   przycina je jeszcze tor z przewijaniem w poziomie, którego usunąć nie można.
   Rozwinięcie w układzie powiększa kartę i nie da się go przyciąć niczym. */
.fed-carousel-wrapper .fed-slider-calendar-options {
    display: none;
    position: static;
    margin-top: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--fed-line);
    border-radius: 14px;
    box-shadow: var(--fed-shadow);
    overflow: hidden;
}

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

.fed-carousel-wrapper .fed-slider-calendar-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fed-navy);
    text-decoration: none;
    text-transform: none;
    border-bottom: 1px solid var(--fed-line);
}

.fed-carousel-wrapper .fed-slider-calendar-option:last-child {
    border-bottom: none;
}

.fed-carousel-wrapper .fed-slider-calendar-option:hover {
    background: var(--fed-mist);
    color: var(--fed-navy);
}

.fed-carousel-wrapper .fed-apple-logo {
    flex-shrink: 0;
}

/* ---------- Nawigacja: strzałki i kropki pod karuzelą ---------- */

.fed-carousel-wrapper .fed-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}

.fed-carousel-wrapper .fed-carousel-arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--fed-line);
    border-radius: 50%;
    color: var(--fed-navy);
    font-size: 26px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.fed-carousel-wrapper .fed-carousel-arrow:hover:not(:disabled) {
    background: var(--fed-mist);
    border-color: var(--fed-sea);
}

.fed-carousel-wrapper .fed-carousel-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.fed-carousel-wrapper .fed-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fed-carousel-wrapper .fed-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Kropki to wskaźnik stanu, nie akcja — dlatego nie koral. */
    background: var(--fed-line);
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}

.fed-carousel-wrapper .fed-carousel-dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: var(--fed-sea);
}

/* ---------- Komunikat dla administratora ---------- */

.fed-carousel-no-events {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px;
    border: 2px dashed rgba(11, 57, 84, .14);
    border-radius: 18px;
    background: #F4FAFD;
    font-family: "Figtree", system-ui, sans-serif;
    color: #0B3954;
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
    .fed-carousel-wrapper .fed-carousel-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

/* ---------- Telefon ---------- */

@media (max-width: 767px) {
    .fed-carousel-wrapper {
        padding: 0 16px;
    }

    .fed-carousel-wrapper .fed-carousel-track {
        gap: 16px;
    }

    .fed-carousel-wrapper .fed-carousel-card {
        flex: 0 0 100%;
    }

    .fed-carousel-wrapper .fed-card-image {
        height: 170px;
    }

    .fed-carousel-wrapper .fed-card-title {
        font-size: 18px;
    }

    /* Kciukiem łatwiej trafić w większy cel. */
    .fed-carousel-wrapper .fed-carousel-arrow {
        width: 48px;
        height: 48px;
    }
}

/* ---------- Ograniczenie animacji ---------- */

@media (prefers-reduced-motion: reduce) {
    .fed-carousel-wrapper .fed-carousel-track,
    .fed-carousel-wrapper .fed-slider-btn,
    .fed-carousel-wrapper .fed-carousel-arrow,
    .fed-carousel-wrapper .fed-carousel-dot {
        transition: none !important;
    }
}