/* Karty informacyjne na zdjęciu (K26, task03.16) — blok feuer/karty-informacyjne; front i edytor.
   Wg FeuerDS: „Dlaczeg my 1" 7:6396, „Dlaczeg my 2" 7:5551, mobile 7:6439 / 7:6469, hero strony
   głównej „Hero Banner" 7:6012 / mobile 7:5899. Karuzela kart Swiper wyłącznie na froncie (view.js
   bloku, CSS Swipera tylko na froncie); w edytorze rząd kart zawija się — wszystkie karty widoczne.
   Pas zdjęcia w przepływie o wysokości z ustawienia proporcji (2,9:1 = 494 domyślnie, 21:9 = 617,
   16:9 = 810; mobile zawsze 340), woal 35 %, nagłówek absolutnie w pasie, karty nachodzą stałe 178
   (mobile 62) pod pas. Medium = zdjęcie (<picture>, osobne zdjęcie mobile) albo film w pętli
   (<video>, plik mobile podmienia view.js). Karty nieklikalne: bez hovera i bez efektu naciśnięcia —
   poza kartami z linkiem odmiany hero (hover wg ustawienia bloku).
   Odmiana hero (.karty-informacyjne-hero): nagłówek od 64 (mobile 16), tekst 64 Bold (A19),
   akcent = słowo większe 100 (A18), lead A30; położenie w pionie — puste linie przed tekstem.
   Wartości px z Figmy zapisane w rem (baza 16). */

.karty-informacyjne {
  position: relative;
  max-width: 90rem;                       /* stop skali (siatka) */
  margin-inline: auto;
  padding-bottom: var(--odstep-8);        /* 64 pod kartami */
  overflow: hidden;                       /* karty spoza kontenera ucina krawędź sekcji */
}

/* Pas w przepływie: wysokość z ustawienia proporcji, medium cover, woal 35 %. */
.karty-informacyjne-scena {
  position: relative;
  height: 30.875rem;                      /* 494 — 2,9:1 przy 1440 */
  overflow: hidden;
}

.karty-informacyjne-pas-21-9 .karty-informacyjne-scena { height: 38.5625rem; }   /* 617 */
.karty-informacyjne-pas-16-9 .karty-informacyjne-scena { height: 50.625rem; }    /* 810 */

.karty-informacyjne-scena img,
.karty-informacyjne-scena video,
.karty-informacyjne-medium {
  position: absolute;
  inset: 0;
  z-index: 0;                             /* warstwy: medium 0, woal i gradient 1, nagłówek 2 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Medium z brakującą kreacją (albo edytor): osobne warstwy desktop i mobile, przełączane szerokością;
   brak pliku = obraz zastępczy (reguła „Pola obowiązkowe"). */
.karty-informacyjne-medium-mobile { display: none; }

.karty-informacyjne-scena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--kolor-przyciemnienia-zdjecia);
}

/* Rząd kart: nachodzi stałe 178 pod pas, nad woalem (na froncie także .swiper Swipera ma z-index 1). */
.karty-informacyjne > .kontener {
  position: relative;
  z-index: 1;
  margin-top: -11.125rem;                 /* 178 */
}

/* Nagłówek na zdjęciu (od 220): napis z lewej, kreski z prawej na linii dołu napisu. Klasa tła
   ciemnego niesie mapowanie tokenów (biały tekst, białe nieaktywne kreski); tło klasy wyłączone. */
.karty-informacyjne-naglowek {
  position: absolute;
  inset: 13.75rem 0 auto;                 /* 220 */
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--odstep-4);
}

.karty-informacyjne .karty-informacyjne-naglowek.tlo-ciemne { background-color: transparent; }   /* tłem jest medium; motyw ładuje się po stylu bloku */

.karty-informacyjne-tytul {
  margin: 0;
  font-size: var(--tekst-32);             /* A24 32/44.8 */
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

.karty-informacyjne-lead {
  margin: var(--odstep-3) 0 0;            /* 24 pod tekstem głównym */
  max-width: 29rem;                       /* 464 (ramka hero 7:6019) */
}

/* Edytor: każda linia pola to osobny element — odstęp tylko przed pierwszą linią leadu. */
.karty-informacyjne-lead + .karty-informacyjne-lead { margin-top: 0; }

/* Odmiana hero: nagłówek zakotwiczony wysoko, tekst 64 Bold, akcent = słowo większe 100. */
.karty-informacyjne-hero .karty-informacyjne-naglowek { top: var(--odstep-8); }   /* 64 */

.karty-informacyjne-hero .karty-informacyjne-tytul {
  font-size: var(--tekst-64);
  line-height: var(--interlinia-64);
  font-weight: var(--waga-gruba);
}

.karty-informacyjne-hero .karty-informacyjne-tytul .akcent {
  font-size: var(--tekst-100);
  line-height: var(--interlinia-100);
  font-weight: inherit;
}

.karty-informacyjne .karty-informacyjne-naglowek .wskazniki-karuzeli {
  flex: none;
  width: auto;                            /* Swiper daje paginacji width: 100% — tu szerokość z kresek */
  margin-bottom: 0.375rem;                /* kreski 6 nad dołem napisu */
}

/* Wszystkie karty w widoku = bez kresek (blokada paginacji Swipera; atom kresek ładuje się później). */
.karty-informacyjne .wskazniki-karuzeli.swiper-pagination-lock { display: none; }

/* Karuzela: karty o stałej szerokości, kolejne wystają poza kontener w prawo. */
.karty-informacyjne .swiper { overflow: visible; }

.karty-informacyjne-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Edytor (bez Swipera): rząd kart zawijany, odstęp jak spaceBetween karuzeli. */
.karty-informacyjne-lista.block-editor-block-list__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Edytor: przycisk „Dodaj kartę" jako pozycja rzędu (do limitu 10 kart); opakowanie appendera
   WordPress pozycjonuje absolutnie w rogu bloku. */
.karty-informacyjne .karty-informacyjne-lista > .block-list-appender { position: static; }

.karty-informacyjne-dodaj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.3125rem;
  min-height: 6rem;
  border: 1px dashed var(--kolor-linii);
  list-style: none;
}

/* Specyficzność ponad CSS Swipera (.swiper-slide, paginacja) — ładuje się po stylu bloku. */
.karty-informacyjne .karta-informacyjna {
  flex-shrink: 0;
  width: 17.3125rem;                      /* 277 = 3 kolumny siatki */
  height: auto;                           /* karty w rzędzie równe najwyższej */
}

/* Karta: tło wyróżnione, czerwona linia dołem, wysokość za treścią; nieklikalna. */
.karta-informacyjna-pole {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: var(--odstep-3);               /* 24 */
  border-bottom: 1px solid var(--kolor-marki);
  background: var(--kolor-tla-wyroznionego);
  color: var(--kolor-tekstu);
  overflow: hidden;
}

.karta-informacyjna-tytul {
  display: block;
  margin: 0 0 var(--odstep-2);            /* H3 26/36.4 ExtraBold; 16 do tekstu */
  font-size: var(--tekst-26);
  line-height: var(--interlinia-26);
  font-weight: var(--waga-najgrubsza);
}

.karta-informacyjna-tekst {
  display: block;
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
}

/* Karta z linkiem (tylko odmiana hero): całe pole karty jest linkiem. Hover wg ustawienia bloku —
   zwykłe: tytuł w kolorze marki (reguła „Hover bez projektu w DS" — docs/spojnosc-designu.md);
   czerwone: cała karta czerwona, tekst biały (DS „Dlaczeg my 1/2"). */
a.karta-informacyjna-pole { text-decoration: none; }
a.karta-informacyjna-pole:hover .karta-informacyjna-tytul { color: var(--kolor-marki); }

.karty-informacyjne-podswietlenie-czerwone a.karta-informacyjna-pole:hover {
  background: var(--kolor-marki);
  color: var(--kolor-tekstu-odwrocony);
}

.karty-informacyjne-podswietlenie-czerwone a.karta-informacyjna-pole:hover .karta-informacyjna-tytul { color: inherit; }

/* Komunikaty dla redakcji w bloku (tylko edytor): brak kreacji mobile, film powyżej 8 MB. */
.karty-informacyjne-komunikaty {
  position: absolute;
  inset: auto var(--odstep-2) var(--odstep-2) auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--odstep-1);
  max-width: 30rem;
}

.karty-informacyjne-komunikaty p {
  margin: 0;
  padding: var(--odstep-1) var(--odstep-2);
  background: var(--kolor-tla);
  color: var(--kolor-marki);
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  font-weight: var(--waga-gruba);
}

/* ---- Tablet i mobile ---- */

@media (max-width: 1023px) {
  .karty-informacyjne-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold */
    line-height: var(--interlinia-28);
  }

  /* Hero: typografia mobilna także na tablecie. */
  .karty-informacyjne-hero .karty-informacyjne-tytul {
    font-size: var(--tekst-32);           /* 32/44.8 */
    line-height: var(--interlinia-32);
  }

  .karty-informacyjne-hero .karty-informacyjne-tytul .akcent {
    display: block;
    font-size: var(--tekst-54);           /* 54/75.6 */
    line-height: var(--interlinia-54);
  }
}

/* ---- Mobile: pas 340, nagłówek od 142, kreski rozciągnięte na kontener 32 pod napisem,
   karty 320 z wystającą kolejną; gradient czerni u góry pasa. ---- */

@media (max-width: 639px) {
  .karty-informacyjne .karty-informacyjne-scena { height: 21.25rem; }   /* 340 — niezależnie od proporcji */
  .karty-informacyjne > .kontener { margin-top: -3.875rem; }           /* karty nachodzą 62 */

  .karty-informacyjne-medium-desktop { display: none; }
  .karty-informacyjne-medium-mobile { display: block; }

  .karty-informacyjne-scena::after {                          /* czerń 60 % → 0 na 288 */
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 18rem;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  }

  .karty-informacyjne-naglowek {
    top: 8.875rem;                                            /* 142 */
    flex-direction: column;
    align-items: stretch;
    gap: var(--odstep-4);                                     /* 32 napis → kreski */
  }

  .karty-informacyjne-hero .karty-informacyjne-naglowek { top: var(--odstep-2); gap: var(--odstep-2); }   /* 16 */
  .karty-informacyjne-lead { margin-top: var(--odstep-2); max-width: none; }

  .karty-informacyjne .karty-informacyjne-naglowek .wskazniki-karuzeli { width: 100%; margin-bottom: 0; }
  .karty-informacyjne-naglowek .wskazniki-karuzeli .wskaznik { flex: 1; width: auto; }

  .karty-informacyjne-lista.block-editor-block-list__layout { gap: 1rem; }
  .karty-informacyjne .karta-informacyjna { width: 20rem; }                       /* 320 */
}