/* ================================================================
   PLDV — WSPÓLNY SYSTEM KART
   Wersja: 1.1.25-test

   ZASTOSOWANIE
   1. Ten plik zastępuje dotychczasowy snippet „ccs karty.css”.
   2. Wklej jego CAŁĄ zawartość do jednego snippetu CSS w WPCode.
   3. Nie kopiuj pojedynczych sekcji do widżetów Elementora.

   OBSŁUGIWANE KARTY
   - Nowe listingi JetEngine z .pldv-jet-card
   - Starsze listingi JetEngine z .pldv-hover-card
   - Kluby Showcase 2.8.0+
   - PLDV Facebook Feed 1.1.0+
   - Kafelki profili (.pldv-card-shell + .bg_css + .kafel-hover)

   PODZIAŁ ODPOWIEDZIALNOŚCI
   Elementor / JetEngine kontroluje: typografię, odstępy, wysokość
   zdjęcia, szerokości i podstawowy układ treści.

   Ten arkusz kontroluje wyłącznie elementy wspólne lub niedostępne
   w interfejsie: skosy, animacje, czerwoną warstwę, ikonę przycisku,
   wyrównanie wysokości kart JetEngine i zgodność wtyczek.

   ZASADA ZMIAN
   Najczęściej zmieniane wartości są w sekcji 1 jako zmienne.
   Reguły poniżej korzystają z tych zmiennych, dzięki czemu jeden
   parametr nie jest powtarzany w wielu miejscach.
   ================================================================ */


/* ================================================================
   1. ZMIENNE GLOBALNE — PANEL STEROWANIA
   ================================================================ */

:root {
  /* Kolory pobierane z globalnych kolorów Elementora. */
  --pldv-card-color-ink: var(--e-global-color-text, #17171a);
  --pldv-card-color-muted: #6e6e73;
  --pldv-card-color-surface: #ffffff;
  --pldv-card-color-soft: #eeeef1;
  --pldv-card-color-soft-hover: #f5f5f7;
  --pldv-card-color-navy: var(--e-global-color-secondary, #00273f);
  --pldv-card-color-accent: var(--e-global-color-accent, #ae1b20);

  /* Typografia kart. */
  --pldv-card-font-body: "Din", sans-serif;
  --pldv-card-font-heading: "Yanone Kaffeesatz", sans-serif;

  /*
   * KĄT WSZYSTKICH SKOSÓW
   *
   * Wartość jest stosunkiem pionowego obniżenia do szerokości
   * elementu. Skrypt PLDV mierzy szerokość karty, zdjęcia i przycisku,
   * a następnie zamienia tę wartość na właściwą liczbę pikseli.
   *
   * 0.10 = łagodny skos
   * 0.14 = skos domyślny
   * 0.18 = mocniejszy skos
   *
   * Zmieniaj wyłącznie tę wartość, jeżeli wszystkie skosy mają
   * stać się łagodniejsze albo mocniejsze.
   */
  --pldv-card-slope: 0.14;

  /*
   * WARTOŚCI AWARYJNE
   * Używane tylko przed uruchomieniem JavaScriptu albo wtedy, gdy
   * przeglądarka blokuje skrypty. Nie sterują kątem po załadowaniu.
   */
  --pldv-card-cut: 12%;

  /* Awaryjny skos przycisku — analogicznie jak wyżej. */
  --pldv-card-action-cut: 30%;

  /* Obramowanie i cień. */
  --pldv-card-border-width: 0px;
  --pldv-card-border-color: color-mix(
    in srgb,
    var(--pldv-card-color-navy) 10%,
    transparent
  );
  --pldv-card-shadow-rest: 0 10px 22px rgba(0, 39, 63, 0.10);
  --pldv-card-shadow-hover: 0 18px 32px rgba(0, 39, 63, 0.17);

  /*
   * Ruch i skala.
   * -8px = karta przesuwa się o 8 px do góry.
   * 1.06 = zdjęcie powiększa się o 6%.
   */
  --pldv-card-lift: -8px;
  --pldv-card-image-scale: 1.06;

  /* Czasy i przebiegi animacji. */
  --pldv-card-motion-duration: 350ms;
  --pldv-card-image-duration: 550ms;
  --pldv-card-line-duration: 280ms;
  --pldv-card-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pldv-card-ease-soft: ease-in-out;

  /* Wspólny wygląd przycisku. */
  --pldv-card-action-gap: 12px;
  --pldv-card-action-padding: 10px 10px 20px 10px;
  --pldv-card-action-font-size: 12px;
  --pldv-card-action-icon-size: 20px;

  /*
   * Drobna korekta pionowa ikony Captain względem tekstu przycisku.
   * Podstawowe wyrównanie wykonuje flex-start w sekcji przycisku.
   * Zmieniaj tę wartość tylko wtedy, gdy konkretny krój fontu
   * wymaga optycznej korekty o 1–2 px.
   */
  --pldv-card-action-icon-offset-y: 0px;

  /* Facebook: bezpieczna przestrzeń nad ukośnym dołem karty. */
  --pldv-fb-body-bottom-space: 84px;

  /*
   * Facebook Feed — odstępy między kartami.
   * column-gap = odstęp poziomy pomiędzy kartami w jednym rzędzie.
   * row-gap    = odstęp pionowy pomiędzy kolejnymi rzędami.
   */
  --pldv-fb-card-column-gap: 24px;
  --pldv-fb-card-row-gap: 32px;

  /* Paginacja Facebook Feed. */
  --pldv-pagination-gap: 0px;
  --pldv-pagination-padding: 6px 12px;
  --pldv-pagination-radius: 999px;
  --pldv-pagination-control-size: 34px;
  --pldv-pagination-color: #ffffff;
  --pldv-pagination-active-color: var(--e-global-color-a808aec, #ffffff);
}


/* ================================================================
   2. POWŁOKA KARTY I CZERWONA WARSTWA POD KARTĄ

   Wtyczki dodają klasę .pldv-card-shell automatycznie.
   Dla JetEngine rolę powłoki pełni istniejący kontener overlay.
   ================================================================ */

.pldv-card-shell,
.jet-engine-listing-overlay-wrap:has(.pldv-hover-card) {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  overflow: visible;

  /*
   * Pomiar szerokości wykonujemy na technicznej powłoce, a nie na
   * samej karcie. Zapobiega to kolizji z obliczeniami JetEngine.
   */
  container-type: inline-size;
  container-name: pldv-card;
}

/*
 * NOWY LISTING JETENGINE
 * W nowym szablonie .pldv-jet-card jest bezpośrednio wewnątrz
 * kontenera .elementor, bez starego overlay-wrap. Ten kontener pełni
 * więc rolę powłoki dla czerwonej warstwy.
 */
.jet-listing-grid__item:has(.pldv-jet-card) > .elementor {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: visible;

  /* Powłoka aktualnego wariantu kart JetEngine. */
  container-type: inline-size;
  container-name: pldv-card;
}

.pldv-card-shell::before,
.jet-engine-listing-overlay-wrap:has(.pldv-hover-card)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background: var(--pldv-card-color-accent);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  );

  opacity: 0;
  transition: opacity var(--pldv-card-line-duration) var(--pldv-card-ease-soft);
}

.jet-listing-grid__item:has(.pldv-jet-card) > .elementor::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: var(--pldv-card-color-accent);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  );
  opacity: 0;
  transition: opacity var(--pldv-card-line-duration) var(--pldv-card-ease-soft);
}

.pldv-card-shell:hover::before,
.pldv-card-shell:focus-within::before,
.jet-engine-listing-overlay-wrap:has(.pldv-hover-card):hover::before,
.jet-engine-listing-overlay-wrap:has(.pldv-hover-card):focus-within::before {
  opacity: 1;
}

.jet-listing-grid__item:has(.pldv-jet-card):hover > .elementor::before,
.jet-listing-grid__item:has(.pldv-jet-card):focus-within > .elementor::before {
  opacity: 1;
}

/* Karta Elementora musi leżeć nad czerwoną warstwą. */
.jet-engine-listing-overlay-wrap:has(.pldv-hover-card) > .elementor {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100%;
}


/* ================================================================
   3. WSPÓLNY RDZEŃ KARTY

   .pldv-card       — klasa dodawana przez nasze wtyczki.
   .pldv-jet-card   — aktualny wzór listingów JetEngine.
   .pldv-hover-card — klasa zgodności starszych listingów JetEngine.
   ================================================================ */

:is(.pldv-card.pldv-card, .pldv-hover-card, .pldv-jet-card) {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;

  border: var(--pldv-card-border-width) solid var(--pldv-card-border-color) !important;
  border-radius: 0 !important;
  background: var(--pldv-card-color-surface) !important;
  color: var(--pldv-card-color-ink) !important;

  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  ) !important;

  filter: drop-shadow(var(--pldv-card-shadow-rest));
  transform: translateY(0);
  transform-origin: center center;
  transition:
    transform var(--pldv-card-motion-duration) var(--pldv-card-ease),
    filter var(--pldv-card-motion-duration) ease !important;
}

/*
 * Ruch jest włączony wyłącznie na urządzeniach z prawdziwym hoverem.
 * Dzięki temu telefon nie zapamiętuje przypadkowego stanu hover.
 */
@media (hover: hover) and (pointer: fine) {
  :is(.pldv-card.pldv-card, .pldv-hover-card, .pldv-jet-card):hover,
  :is(.pldv-card.pldv-card, .pldv-hover-card, .pldv-jet-card):focus-within {
    transform: translateY(var(--pldv-card-lift)) !important;
    filter: drop-shadow(var(--pldv-card-shadow-hover));
  }
}


/* ================================================================
   4. ZDJĘCIE / TŁO KARTY

   Nowy JetEngine: kontener zdjęcia ma klasę pldv-jet-card__media,
   a widżet Dynamic Image klasę pldv-jet-card__image.

   WAŻNE: wysokość pldv-jet-card__media oraz wysokość Dynamic Image
   ustawiamy w Elementorze. CSS nie może nadpisywać ich przez 100%.

   Starszy JetEngine używa klasy pldv-hover-card__image.
   Wtyczki dodają .pldv-card__media i .pldv-card__image same.
   ================================================================ */

.pldv-card__media,
.pldv-jet-card .pldv-jet-card__media,
.pldv-hover-card .pldv-hover-card__image {
  position: relative;
  overflow: hidden;
}

/* Skos dolnej krawędzi zdjęcia w nowym wzorze JetEngine. */
.pldv-jet-card .pldv-jet-card__media {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  );
}

.pldv-card__image,
.pldv-card__media img,
.pldv-jet-card .pldv-jet-card__image,
.pldv-hover-card .pldv-hover-card__image,
.pldv-hover-card .pldv-hover-card__image img {
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--pldv-card-image-duration) var(--pldv-card-ease) !important;
}

.pldv-card__image,
.pldv-card__media img,
.pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Nowy JetEngine: tylko szerokość i sposób kadrowania.
 * Brak height: 100% jest celowy — wysokość pozostaje w Elementorze.
 */
.pldv-jet-card .pldv-jet-card__image,
.pldv-jet-card .pldv-jet-card__image img,
.pldv-jet-card .pldv-jet-card__media img {
  display: block;
  width: 100%;
  max-width: none;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .pldv-card:hover :is(.pldv-card__image, .pldv-card__media img),
  .pldv-card:focus-within :is(.pldv-card__image, .pldv-card__media img),
  .pldv-jet-card:hover .pldv-jet-card__image,
  .pldv-jet-card:focus-within .pldv-jet-card__image,
  .pldv-hover-card:hover .pldv-hover-card__image,
  .pldv-hover-card:hover .pldv-hover-card__image img,
  .pldv-hover-card:focus-within .pldv-hover-card__image,
  .pldv-hover-card:focus-within .pldv-hover-card__image img {
    transform: scale(var(--pldv-card-image-scale)) !important;
  }
}


/* ================================================================
   5. TREŚĆ I TYPOGRAFIA WSPÓLNA

   Nie narzucamy jednego rozmiaru wszystkim tytułom. Elementor może
   nadal sterować typografią nazwisk. Wspólne są kolor, łamanie tekstu
   oraz bezpieczne zachowanie długich treści.
   ================================================================ */

.pldv-card__body,
.pldv-jet-card .pldv-jet-card__body {
  min-width: 0;
  font-family: var(--pldv-card-font-body);
}

.pldv-card__title {
  color: var(--pldv-card-color-ink);
  overflow-wrap: anywhere;
  white-space: normal;
}

.pldv-card__text {
  color: var(--pldv-card-color-muted);
  font-family: var(--pldv-card-font-body);
  overflow-wrap: anywhere;
  white-space: normal;
}


/* ================================================================
   6. WSPÓLNY PRZYCISK KARTY

   Obsługuje:
   - .pldv-card__action w naszych wtyczkach,
   - każdy Dynamic Link JetEngine wewnątrz .pldv-hover-card.

   UWAGA
   Klasa .clip-path1 nie jest już wymagana. Dzięki temu identyczny
   przycisk działa także w listingach „Projekty edukacyjne” i innych
   kartach JetEngine korzystających z .pldv-hover-card.
   ================================================================ */

.pldv-hover-card .elementor-widget-jet-listing-dynamic-link {
  clip-path: none !important;
  overflow: visible !important;
}

.pldv-hover-card .jet-listing-dynamic-link {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.pldv-card__action,
.pldv-hover-card .jet-listing-dynamic-link__link {
  display: inline-flex !important;
  flex-direction: row !important;
  /* Tekst i znak + rozpoczynają się na tej samej wysokości. */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: flex-start;
  direction: ltr !important;

  gap: var(--pldv-card-action-gap) !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 32px !important;
  margin-top: 10px !important;
  padding: var(--pldv-card-action-padding) !important;
  box-sizing: border-box;

  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-action-cut-px, var(--pldv-card-action-cut)))
  ) !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: var(--pldv-card-color-soft) !important;
  color: var(--pldv-card-color-ink) !important;
  box-shadow: none !important;
  filter: none;

  font-family: "Din", sans-serif !important;
  font-size: var(--pldv-card-action-font-size) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-align: left !important;
  text-decoration: none !important;

  transition:
    background-color 250ms ease,
    color 250ms ease,
    filter 250ms ease !important;
}

.pldv-card__action:hover,
.pldv-card__action:focus-visible,
.pldv-hover-card .jet-listing-dynamic-link__link:hover,
.pldv-hover-card .jet-listing-dynamic-link__link:focus-visible {
  background: var(--pldv-card-color-soft-hover) !important;
  color: var(--pldv-card-color-ink) !important;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
  text-decoration: none !important;
}

.pldv-card__action:focus-visible,
.pldv-hover-card .jet-listing-dynamic-link__link:focus-visible {
  outline: 2px solid var(--pldv-card-color-accent);
  outline-offset: 3px;
}


/* ================================================================
   7. IKONA „+” I JEJ ANIMACJA
   ================================================================ */

/*
 * Kluby Showcase i Facebook Feed drukują w HTML zwykły znak „+”.
 * Zerowa wielkość pisma ukrywa ten znak wizualnie, a ::before
 * zastępuje go ikoną xlcaptain-059 z fontu Captain.
 */
.pldv-card--club .club-tile-action-label,
.pldv-card--club .club-tile-action-icon {
  margin-top: 0 !important;
}

.pldv-card--club .club-tile-action-icon,
.pldv-card--facebook .pldv-ff__more > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  /* Pudełko ma wysokość samej ikony, więc nie spycha jej w dół. */
  height: var(--pldv-card-action-icon-size);
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  background: none !important;
  color: var(--pldv-card-color-ink);
  font-size: 0 !important;
  line-height: 1;
}

.pldv-card--club .club-tile-action-icon::before,
.pldv-card--facebook .pldv-ff__more > span:last-child::before {
  content: "\e63a";
  display: inline-block;
  color: var(--pldv-card-color-ink);
  font-family: "captain" !important;
  font-size: var(--pldv-card-action-icon-size) !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  transform:
    translateY(var(--pldv-card-action-icon-offset-y))
    rotate(0deg)
    scale(1);
  transform-origin: 50% 50%;
  transition: transform var(--pldv-card-motion-duration) var(--pldv-card-ease);
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Wszystkie listingi JetEngine oznaczone .pldv-hover-card.
 * Selektor celowo nie zawiera .clip-path1 — różne listingi mają
 * różną strukturę, ale zawsze korzystają z Dynamic Link.
 */
.pldv-hover-card .jet-listing-dynamic-link__link::after {
  content: "\e63a";
  order: 2 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  /* Pudełko ma wysokość samej ikony, więc nie spycha jej w dół. */
  height: var(--pldv-card-action-icon-size);
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--pldv-card-color-ink);
  font-family: "captain" !important;
  font-size: var(--pldv-card-action-icon-size);
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  transform:
    translateY(var(--pldv-card-action-icon-offset-y))
    rotate(0deg)
    scale(1);
  transform-origin: 50% 50%;
  transition: transform var(--pldv-card-motion-duration) var(--pldv-card-ease);
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Obrót następuje tylko po wskazaniu przycisku, nie całej karty. */
.pldv-card__action:hover .club-tile-action-icon::before,
.pldv-card__action:focus-visible .club-tile-action-icon::before,
.pldv-card--facebook .pldv-card__action:hover > span:last-child::before,
.pldv-card--facebook .pldv-card__action:focus-visible > span:last-child::before,
.pldv-hover-card .jet-listing-dynamic-link__link:hover::after,
.pldv-hover-card .jet-listing-dynamic-link__link:focus-visible::after {
  transform:
    translateY(var(--pldv-card-action-icon-offset-y))
    rotate(45deg)
    scale(1.06);
}

/*
 * BARDZO WĄSKIE KARTY
 *
 * Gdy rzeczywista szerokość karty spadnie do 230 px lub mniej,
 * ukrywamy znak „+”, aby tekst przycisku nie był przycinany.
 * Reguła obejmuje Kluby Showcase, Facebook Feed oraz listingi Jet.
 *
 * Aby zmienić moment ukrywania ikony, zmień wyłącznie 230px poniżej.
 */
@container pldv-card (max-width: 250px) {
  .pldv-card--club .club-tile-action-icon,
  .pldv-card--facebook .pldv-ff__more > span:last-child,
  .pldv-hover-card .jet-listing-dynamic-link__link::after,
  .pldv-jet-card .jet-listing-dynamic-link__link::after {
    display: none !important;
    content: none !important;
  }
}


/* ================================================================
   8. WARIANT: KLUBY SHOWCASE
   ================================================================ */

.pldv-card-shell--club,
.pldv-card--club {
  min-height: 400px;
}

.kluby-showcase .pldv-card.pldv-card--club {
  width: 100%;
  filter: drop-shadow(var(--pldv-card-shadow-rest));
}

.pldv-card--club .pldv-card__media {
  clip-path: none;
}


/* ================================================================
   9. WARIANT: FACEBOOK
   ================================================================ */

/*
 * Wtyczka korzysta z gap: var(--pldv-ff-gap), lecz brak tej zmiennej
 * unieważnia całą deklarację. Ustawiamy więc oba odstępy bezpośrednio
 * i niezależnie od arkusza wtyczki oraz optymalizacji LiteSpeed.
 */
.pldv-ff__grid {
  column-gap: var(--pldv-fb-card-column-gap) !important;
  row-gap: var(--pldv-fb-card-row-gap) !important;
}

.pldv-card-shell--facebook,
.pldv-card--facebook,
.pldv-card--facebook .pldv-ff__link {
  height: 100%;
}

.pldv-card--facebook .pldv-ff__link {
  color: inherit !important;
  text-decoration: none !important;
}

.pldv-card--facebook .pldv-ff__body {
  /* Dodatkowe miejsce chroni treść przed ukośnym dołem. */
  padding-bottom: var(--pldv-fb-body-bottom-space);
  font-family: var(--pldv-card-font-body);
}

/*
 * Zdjęcie ma ten sam zapis clip-path co cała karta.
 * Dzięki temu jego dolna krawędź powtarza kierunek skosu karty.
 */
.pldv-card--facebook .pldv-card__media {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  ) !important;
}

/*
 * Wyłączenie starej czerwonej linii dodawanej do samego zdjęcia
 * przez bazowy arkusz wtyczki. Czerwona warstwa pozostaje wyłącznie
 * pod całą kartą — tworzy ją .pldv-card-shell::before.
 */
.pldv-card--facebook .pldv-ff__media::after {
  content: none !important;
  display: none !important;
}

/* Opis posta, data i przycisk używają kroju DIN. */
.pldv-card--facebook :is(
  .pldv-ff__date,
  .pldv-ff__text,
  .pldv-ff__more
) {
  font-family: var(--pldv-card-font-body);
  font-weight: 300;
}

/* Tylko nazwa obok znaku Facebooka używa Yanone Kaffeesatz. */
.pldv-card--facebook .pldv-ff__source {
  font-family: var(--pldv-card-font-heading);
  text-transform: uppercase;
}

.pldv-card--facebook .pldv-ff__more {
  color: var(--pldv-card-color-ink);
}

/* Oryginalny znak Facebooka — bez zmiany proporcji, koloru i kroju. */
.pldv-card--facebook .pldv-ff__facebook-mark {
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background: none !important;
  border-radius: 0;
  color: inherit;
  font: inherit;
}

.pldv-card--facebook .pldv-ff__facebook-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ================================================================
   9A. PAGINACJA FACEBOOK FEED

   Tło pochodzi z istniejącej klasy .bg_css. Układ kapsuły jest
   zgodny z klasą .pagination_fit używaną przez JetSmartFilters.
   1.1.24: typografia, odstępy i aktywna strona jak w sekcji Sukcesy
   na /la (widget 558c98e1); reguły ograniczone do Facebook Feed.
   ================================================================ */

.pldv-ff__pagination.pagination_fit {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 28px auto 0 !important;
  padding: var(--pldv-pagination-padding) !important;
  overflow: hidden;
  border-radius: var(--pldv-pagination-radius) !important;
  box-sizing: border-box;
}

.pldv-ff__pagination .jet-smart-filters-pagination,
.pldv-ff__pagination .jet-filters-pagination {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

.pldv-ff__pagination .jet-filters-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pldv-pagination-gap);
}

/* Przycisk feedu odpowiada linkowi wewnątrz elementu JetSmartFilters. */
.pldv-ff__pagination .jet-filters-pagination__item {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 5px 13px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--e-global-color-a808aec, #ffffff);
  font-family: "Din", var(--pldv-card-font-body);
  font-size: clamp(0.80rem, calc(0.886rem + 0.568vw), 1.00rem);
  font-weight: 300;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.pldv-ff__pagination .jet-filters-pagination {
  column-gap: var(--pldv-pagination-gap);
  row-gap: 6px;
}

.pldv-ff__pagination .jet-filters-pagination__item:hover,
.pldv-ff__pagination .jet-filters-pagination__item:focus {
  background: transparent;
  color: var(--e-global-color-a808aec, #ffffff);
  box-shadow: none;
}

.pldv-ff__pagination .jet-filters-pagination__item.active,
.pldv-ff__pagination .jet-filters-pagination__item[aria-current="page"] {
  background-color: var(--e-global-color-accent, var(--pldv-card-color-accent));
  color: var(--pldv-pagination-active-color);
}

.pldv-ff__pagination .jet-filters-pagination__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Strzałki jak w Sukcesach: < i > zamiast znaków ‹ i › z wtyczki.
   Etykiety aria-label i obsługa kliknięć pozostają na przyciskach. */
.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Poprzednia strona postów"],
.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Następna strona postów"] {
  font-size: 0;
}

.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Poprzednia strona postów"]::before,
.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Następna strona postów"]::before {
  font-size: clamp(0.80rem, calc(0.886rem + 0.568vw), 1.00rem);
  line-height: 1.5;
}

.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Poprzednia strona postów"]::before {
  content: "<";
}

.pldv-ff__pagination .jet-filters-pagination__item[aria-label="Następna strona postów"]::before {
  content: ">";
}

/* JetSmartFilters ukrywa nieaktywną strzałkę na pierwszej/ostatniej stronie. */
.pldv-ff__pagination .jet-filters-pagination__item:disabled {
  display: none;
}

.pldv-card-shell--facebook[hidden],
.pldv-ff__pagination[hidden] {
  display: none !important;
}


/* ================================================================
   10. WARIANT: NAUCZYCIELE — IMIĘ I NAZWISKO
   ================================================================ */

.pldv-hover-card :is(.teacher-card__name, .elementor-element-7eba758) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  align-content: flex-start !important;
  column-gap: 6px !important;
  row-gap: 0 !important;
  width: 100% !important;
}

.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758)
> .elementor-widget-jet-listing-dynamic-field {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758)
:is(.jet-listing-dynamic-field, .jet-listing-dynamic-field__inline-wrap) {
  width: max-content !important;
  max-width: 100% !important;
}

.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758)
.jet-listing-dynamic-field__content {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* ================================================================
   11. WYJĄTKI: BARDZO DŁUGIE NAZWISKA

   WAŻNE
   Numerów postów nie wpisujemy już w tym pliku CSS.

   Dopisujemy wyłącznie sam numer w tablicy:
   $pldv_long_name_post_ids
   znajdującej się w osobnym snippecie PHP:
   „PLDV — karty z długimi nazwiskami”.

   PHP nadaje odpowiedniej karcie klasę:
   .pldv-card--long-name

   Dzięki temu wszystkie poniższe korekty są zdefiniowane tylko raz.
   ================================================================ */

.pldv-card--long-name
.pldv-hover-card
.clip-path1
.jet-listing-dynamic-link__link {
  margin-top: 0 !important;
}

.pldv-card--long-name
.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758) {
  row-gap: 0 !important;
}

.pldv-card--long-name
.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758)
.jet-listing-dynamic-field__content {
  line-height: 1.1 !important;
}

.pldv-card--long-name
.pldv-hover-card
:is(.teacher-card__name, .elementor-element-7eba758)
> .elementor-widget-jet-listing-dynamic-field:nth-child(2) {
  margin-top: 10px !important;
}


/* ================================================================
   12. KONTENER LISTINGU

   Klasa wpisywana w Elementorze: listing
   To tło całego listingu, a nie pojedynczej karty.
   ================================================================ */

.listing {
  background-color: rgba(0, 39, 63, 0.05);
  border: 1px solid rgba(0, 39, 63, 0.10);
  background-color: color-mix(
    in srgb,
    var(--pldv-card-color-navy) 5%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--pldv-card-color-navy) 10%,
    transparent
  );
}


/* ================================================================
   12A. RÓWNA WYSOKOŚĆ KART JETENGINE

   WAŻNE
   Liczbą kolumn, szerokościami elementów, trybem karuzeli oraz opcją
   Equal columns height steruje wyłącznie widżet Listing Grid.

   Ten arkusz nie zmienia display kontenera listingu, szerokości
   elementów ani wartości flex-basis. Rozciąga jedynie warstwy
   znajdujące się wewnątrz pojedynczego elementu listingu.

   W każdym zwykłym Listingu Grid wykorzystującym ten wzór karty
   włącz: Ogólne -> Equal columns height.

   Na telefonie (1 kolumna, max 767 px) zbijamy pusty rząd pod siatką.
   Szerokości komórek i ujemnych marginesów Jet nie ruszamy.
   ================================================================ */

/* Pojedynczy element zwykłego listingu lub slajd karuzeli. */
.jet-listing-grid__item:has(.pldv-jet-card) {
  min-width: 0;
  height: auto;
}

/* Warstwa szablonu Elementora wypełnia wysokość nadaną przez JetEngine. */
.jet-listing-grid__item:has(.pldv-jet-card) > .elementor {
  display: flex !important;
  width: 100% !important;
  min-width: 0;
  height: 100%;
}

/* Główna karta wypełnia całą dostępną powierzchnię elementu. */
.jet-listing-grid__item:has(.pldv-jet-card) .pldv-jet-card {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
}


/* ================================================================
   13. TELEFONY I TABLETY
   ================================================================ */

/*
 * TABLET — zdjęcie nauczyciela bez białych pasów po bokach.
 *
 * Zakres 641–1024 px nie obejmuje telefonu ani laptopa/desktopu.
 * Źródłem odstępu jest ustawione przez Elementor tabletowe
 * --container-max-width: 90% na głównym kontenerze karty typu boxed.
 * Bezpośredni .e-con-inner zajmuje wtedy tylko 90% szerokości karty.
 * Przywracamy mu 100%, a następnie zerujemy odstępy warstwy zdjęcia.
 *
 * Jeżeli kiedyś zmienisz nazwę tej klasy w szablonie listingu,
 * trzeba zmienić ją również w poniższych selektorach.
 */
@media (min-width: 641px) and (max-width: 1024px) {
	:root {
    /* Łagodniejszy skos i krótszy ruch na małym ekranie. */
    --pldv-card-cut: 12%;
    --pldv-card-lift: -5px;
    --pldv-card-image-scale: 1.035;
    --pldv-card-action-cut: 45%;
  --pldv-card-action-padding: 10px 10px 20px 10px;
    --pldv-fb-body-bottom-space: 72px;
    --pldv-pagination-control-size: 32px;		
	}
	
  .pldv-hover-card:not(.pldv-jet-card) {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
  }

  .pldv-hover-card:not(.pldv-jet-card) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image > .e-con-inner,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image .elementor-widget-image,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image .elementor-widget-image > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
  }

  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image .elementor-widget-image,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image .elementor-widget-image > .elementor-widget-container,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image a,
  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image picture {
    display: block;
    width: 100% !important;
    max-width: none !important;
  }

  .pldv-hover-card:not(.pldv-jet-card) .pldv-hover-card__image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
  }
}

@media (max-width: 640px) {
  :root {
    /* Łagodniejszy skos i krótszy ruch na małym ekranie. */
    --pldv-card-cut: 12%;
    --pldv-card-lift: -5px;
    --pldv-card-image-scale: 1.035;
    --pldv-card-action-cut: 38%;
  --pldv-card-action-padding: 10px 10px 20px 10px;
    --pldv-fb-body-bottom-space: 72px;
    --pldv-pagination-control-size: 32px;
  }

		
  .pldv-hover-card
  :is(.teacher-card__name, .elementor-element-7eba758)
  .jet-listing-dynamic-field__content {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual;
  }
}

/*
 * TELEFON ELEMENTORA — 1 kolumna (do 767 px)
 *
 * Pusty rząd pod siatką (~1 karta) to cykl height:100% w flexie
 * Elementora. Łamie go width:100% na SAMYM widżecie Listing Grid.
 *
 * 1.1.21: align-self:start + display:block zwijały komórkę do ~40 px.
 * 1.1.22: width:100% na .jet-listing-grid__items zjadało ujemne
 *         marginesy kolumn Jeta (−10 px) i zwężało karty o ~20 px.
 *
 * Nie ustawiamy width na siatce, itemach ani karcie.
 * Nie ruszamy flex-grow / align-self (zostają z Elementora).
 * height:auto zostaje na wypadek wysokości po zmianie strony paginacji.
 * Karuzele/Swiper bez zmian. Klasa .listing nie jest wymagana.
 */
@media (max-width: 767px) {
  .elementor-widget-jet-listing-grid:not(:has(.jet-listing-grid__slider)):has(.pldv-jet-card) {
    width: 100% !important;
    height: auto !important;
    block-size: auto !important;
    min-height: 0 !important;
  }

  .elementor-widget-jet-listing-grid:not(:has(.jet-listing-grid__slider)):has(.pldv-jet-card)
    > .elementor-widget-container,
  .elementor-widget-jet-listing-grid:not(:has(.jet-listing-grid__slider)):has(.pldv-jet-card)
    .jet-listing-grid,
  .elementor-widget-jet-listing-grid:not(:has(.jet-listing-grid__slider)):has(.pldv-jet-card)
    .jet-listing-grid__items {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .pldv-card-shell:hover::before,
  .jet-engine-listing-overlay-wrap:has(.pldv-hover-card):hover::before,
  .jet-listing-grid__item:has(.pldv-jet-card):hover > .elementor::before {
    opacity: 0;
  }

  .pldv-card-shell:focus-within::before,
  .jet-engine-listing-overlay-wrap:has(.pldv-hover-card):focus-within::before,
  .jet-listing-grid__item:has(.pldv-jet-card):focus-within > .elementor::before {
    opacity: 1;
  }

  .pldv-card__action:hover,
  .pldv-hover-card .jet-listing-dynamic-link__link:hover {
    background: var(--pldv-card-color-soft) !important;
    filter: none;
  }
}


/* ================================================================
   14. DOSTĘPNOŚĆ — OGRANICZENIE RUCHU
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .pldv-card-shell::before,
  .jet-engine-listing-overlay-wrap:has(.pldv-hover-card)::before,
  .jet-listing-grid__item:has(.pldv-jet-card) > .elementor::before,
  :is(.pldv-card.pldv-card, .pldv-hover-card, .pldv-jet-card),
  .pldv-card__image,
  .pldv-card__media img,
  .pldv-hover-card .pldv-hover-card__image,
  .pldv-hover-card .pldv-hover-card__image img,
  .pldv-jet-card .pldv-jet-card__image,
  .pldv-card__action,
  .pldv-card__action *,
  .pldv-hover-card .jet-listing-dynamic-link__link,
  .pldv-hover-card .jet-listing-dynamic-link__link::after,
  .pldv-card--club .club-tile-action-icon::before,
  .pldv-card--facebook .pldv-ff__more > span:last-child::before {
    transition: none !important;
  }

  :is(.pldv-card.pldv-card, .pldv-hover-card, .pldv-jet-card),
  .pldv-card__image,
  .pldv-card__media img,
  .pldv-hover-card .pldv-hover-card__image,
  .pldv-hover-card .pldv-hover-card__image img,
  .pldv-jet-card .pldv-jet-card__image {
    transform: none !important;
  }
}


/* ================================================================
   15. WARIANT: KAFELKI PROFILI

   Kadra (JetEngine):
     .jet-listing-grid__item            ← szerokość komórki
       └── .elementor                   ← powłoka: czerwień + pomiar skosu
             └── .pldv-jet-card         ← twarz: lift + clip-path

   Profile (Elementor, bez Jet):
     Kolumna                            ← szerokość komórki (Elementor)
       └── .pldv-card-shell             ← ta sama powłoka co sekcja 2
             └── .bg_css                ← twarz (gradient), NIE .pldv-hover-card
                   └── .kafel-hover     ← wideo i tekst

   .pldv-hover-card / .pldv-jet-card są celowo pominięte:
   sekcja 3 maluje białe tło, tusz i cień listingów.
   Czerwień i --pldv-card-cut-px biorą się z .pldv-card-shell
   (sekcja 2 + skrypt skosów). Tu tylko lift i skos twarzy.
   ================================================================ */

.pldv-card-shell:has(.kafel-hover) {
  padding: 0;
  gap: 0;
  min-height: 0;
}

.pldv-card-shell:has(.kafel-hover) > .bg_css {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  );
  transform: translateY(0);
  transform-origin: center center;
  transition: transform var(--pldv-card-motion-duration) var(--pldv-card-ease);
}

@media (hover: hover) and (pointer: fine) {
  .pldv-card-shell:has(.kafel-hover):hover > .bg_css,
  .pldv-card-shell:has(.kafel-hover):focus-within > .bg_css {
    transform: translateY(var(--pldv-card-lift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pldv-card-shell:has(.kafel-hover) > .bg_css {
    transition: none;
    transform: none;
  }
}

.kafel-hover {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* dual diploma */

.pldv-card-shell:has(.kafel-hover-pdd) {
  padding: 0;
  gap: 0;
  min-height: 0;
}

.pldv-card-shell:has(.kafel-hover-pdd) > .bg_css {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--pldv-card-cut-px, var(--pldv-card-cut)))
  );
  transform: translateY(0);
  transform-origin: center center;
  transition: transform var(--pldv-card-motion-duration) var(--pldv-card-ease);
}

@media (hover: hover) and (pointer: fine) {
  .pldv-card-shell:has(.kafel-hover-pdd):hover > .bg_css,
  .pldv-card-shell:has(.kafel-hover-pdd):focus-within > .bg_css {
    transform: translateY(var(--pldv-card-lift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pldv-card-shell:has(.kafel-hover-pdd) > .bg_css {
    transition: none;
    transform: none;
  }
}

.kafel-hover-pdd {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* ================================================================
   FACEBOOK FEED — TYPOGRAFIA OPISU

   Steruje wyłącznie:
   1. opisem widocznym na karcie,
   2. pełnym opisem w oknie popup.
   ================================================================ */

:root {
  /* Opis na karcie Facebook Feed */
  --pldv-ff-card-text-size: clamp(0.80rem, calc(0.886rem + 0.568vw), 1.00rem);
  --pldv-ff-card-text-line-height: 1.5;

  /* Pełny opis w popupie */
  --pldv-ff-popup-text-size: clamp(0.80rem, calc(0.886rem + 0.568vw), 1.00rem);
  --pldv-ff-popup-text-line-height: 1.55;
}

/* Opis na karcie */
.pldv-card.pldv-ff__card .pldv-ff__text,
.pldv-ff__card .pldv-card__text {
  font-size: var(--pldv-ff-card-text-size) !important;
  line-height: var(--pldv-ff-card-text-line-height) !important;
}

/* Opis w popupie */
.pldv-ff-modal .pldv-ff-detail__text {
  font-size: var(--pldv-ff-popup-text-size) !important;
  line-height: var(--pldv-ff-popup-text-line-height) !important;
}
/* ================================================================
   TEST 1.1.25 — Facebook: CTA w prawym dolnym narożniku.
   Pełny arkusz zastępujący 1.1.24 tylko na czas testu.
   Szerokość tekstu „Dowiedz się więcej” w DIN Light: 8.5033em
   (102.04px przy 12px), plus wspólny gap, ikona 21px i padding.
   Content-box dolicza aktualny padding z reguł responsywnych.
   Skos, kolory, animacja ikony i reduced-motion pozostają wspólne.
   ================================================================ */
.pldv-card--facebook .pldv-ff__link {
  position: relative;
}

.pldv-card--facebook .pldv-ff__body {
  position: static;
  padding-bottom: max(var(--pldv-fb-body-bottom-space), 84px);
}

.pldv-card--facebook .pldv-ff__more.pldv-card__action {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  margin: 0 !important;
  box-sizing: content-box;
  width: calc(8.5033em + var(--pldv-card-action-gap) + 21px) !important;
  max-width: calc(100% - 40px) !important;
  min-height: var(--pldv-card-action-icon-size) !important;
  justify-content: space-between !important;
}