/* ============================================================
   Blok „Zakładki IMM” (acf/imm-tabs-section) — wariant B.

   Wygląd robi ISTNIEJĄCY CSS motywu (style.css + assets/css/style-icons.css),
   bo markup bloku powtarza klasy Kadence. Ten plik dokłada wyłącznie to,
   co znikło razem z wtyczką:
     1) reguły bazowe z kadence-blocks/dist/style-blocks-tabs.css
        (arkusz jest ładowany warunkowo — po migracji nie ma go na stronie),
     2) inline-CSS generowany przez Kadence per blok (font-size zakładek,
        kolor tekstu, marginesy pozycji listy, min-height panelu).

   Selektory trzymane są na poziomie (0,2,0), żeby reguły motywu
   `.aside-tabs …` (0,3,0) nadal miały pierwszeństwo w swoich breakpointach.
   ============================================================ */

/* Korzeń bloku niesie klasę `aside-tabs`, żeby reguły motywu działały także
   poza sekcją strony głównej. Tło i padding samej sekcji gasimy — wewnątrz
   istniejącej grupy dublowałyby się. */
.imm-tabs-block.aside-tabs {
  background: none;
  padding: 0;
}

/* ── Reguły bazowe wtyczki Kadence ────────────────────────── */

/* Kadence układał kolumny na floatach. Tutaj robi to flex: daje ten sam podział
   30/70, ale nie wymaga clearfixa i nie rozsypuje się, gdy jakiś kontener
   nadrzędny (np. kanwa edytora) namiesza w kontekście formatowania. */
.imm-tabs-block .kt-tabs-wrap {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.imm-tabs-block .kt-tabs-content-wrap {
  position: relative;
}

.imm-tabs-block .kt-tabs-title-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.imm-tabs-block .kt-tabs-title-list * {
  box-sizing: border-box;
}

.imm-tabs-block .kt-tabs-title-list li {
  cursor: pointer;
  list-style: none;
}

.imm-tabs-block .kt-tabs-title-list li::before {
  display: none;
}

.imm-tabs-block .kt-tab-title {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.imm-tabs-block .kt-tab-title:hover,
.imm-tabs-block .kt-tab-title:focus {
  text-decoration: none;
}

.imm-tabs-block .kt-tabs-title-list li.kt-tab-title-active {
  z-index: 4;
  position: relative;
}

/* Układ pionowy. Specyficzność 0,2,0 – motyw podmienia to na 220px ≤1280px. */
.imm-tabs-block .kt-tabs-title-list {
  width: 30%;
  flex-direction: column;
  flex-shrink: 0;
}

.imm-tabs-block .kt-tabs-content-wrap {
  width: 70%;
  flex-grow: 1;
  min-width: 0;
}

/* Panele. display zamiast opacity/height z motywu – dzięki temu przeglądarka
   nie pobiera grafik nieaktywnych zakładek (loading="lazy" działa tylko wtedy,
   gdy element jest naprawdę poza układem). */
.imm-tabs-block .wp-block-kadence-tab {
  padding: 20px;
  text-align: left;
  display: none;
  /* Motyw ma tu `transition: all 1.5s` — przy przełączaniu przez display
     nic to nie animuje, a kolidowałoby z animacją poniżej. */
  transition: none;
}

.imm-tabs-block .wp-block-kadence-tab.kt-tab-content-active {
  display: block;
  animation: immTabsFade .28s ease both;
}

@keyframes immTabsFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Nagłówki akordeonu – widoczne dopiero na mobile. */
.imm-tabs-block .kt-tabs-accordion-title {
  display: none;
}

/* ── Przeniesione z inline-CSS Kadence ────────────────────── */

.imm-tabs-block .kt-tabs-title-list li,
.imm-tabs-block .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title {
  margin: 0 -4px 10px 0;
}

.imm-tabs-block .kt-tab-title {
  font-size: 17px;
  line-height: 1em;
  text-transform: none;
  color: #002752;
}

.imm-tabs-block .wp-block-kadence-tab {
  min-height: 400px;
}

/* ── Ikona zakładki z pola ACF ─────────────────────────────── */

/* Ikony pochodzą WYŁĄCZNIE z pola ACF. Blok nie emituje klas
   `kt-tab-title-1..8`, więc ikony zaszyte w style-icons.css po numerze pozycji
   nie mają do czego się podpiąć — koniec z rozjeżdżaniem się ikony z zakładką
   po zmianie kolejności. Pozycja identyczna jak dawne tło: 24×24 px, 14 px
   od lewej krawędzi (tekst startuje na 60 px, tak jak dotąd). */
.imm-tabs-block .kt-tab-title .imm-tab-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Bez wgranej ikony nie zostawiamy pustego wcięcia po dawnym tle.
   Selektory odwzorowują łańcuchy motywu i dokładają do nich zakres bloku, żeby
   pewnie przebić jego `padding … !important` — również w akordeonie, gdzie motyw
   ma aż pięć klas. Sama podwojona klasa tam nie wystarczała. */
.imm-tabs-block .kt-tabs-title-list .kt-tab-title:not(.has-imm-icon),
.imm-tabs-block .kt-tabs-mobile-layout-accordion > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title:not(.has-imm-icon) {
  padding-left: 16px !important;
}

/* ── Kolumny treści i stopki ──────────────────────────────── */

/* Odstęp kolumn. Zweryfikowane na produkcji: klasa `wp-container-…` generowana
   przez WordPress ustawia wyłącznie `flex-wrap:nowrap`, a sam odstęp daje reguła
   rdzenia `:where(.wp-block-columns.is-layout-flex){gap:2em}`. Powtarzamy ją
   w `:where()`, czyli z zerową specyficznością — jest tylko zabezpieczeniem,
   gdyby arkusz rdzenia nie doszedł, i nigdy nie przebije ustawień motywu. */
:where(.imm-tabs-block .wp-block-columns.is-layout-flex) {
  gap: 2em;
}

.imm-tabs-block .wp-block-image {
  margin: 0;
}

.imm-tabs-block .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.imm-tabs-block .kt-tab-inner-content-inner > .wp-block-columns {
  margin-bottom: 0;
}

.imm-tabs-block .aside-tabs-footeer {
  align-items: center;
  margin-top: 24px;
  margin-bottom: 0;
}

.imm-tabs-block .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.imm-tabs-block .wp-block-buttons {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.imm-tabs-block .wp-block-button[hidden] {
  display: none !important;
}

/* ── Mobile: akordeon (breakpoint wtyczki) ────────────────── */

@media (max-width: 767px) {
  .imm-tabs-block .kt-tabs-mobile-layout-accordion > .kt-tabs-title-list {
    display: none;
  }

  .imm-tabs-block .kt-tabs-mobile-layout-accordion > .kt-tabs-content-wrap > .kt-tabs-accordion-title {
    display: block;
  }

  .imm-tabs-block .kt-tabs-mobile-layout-accordion > .kt-tabs-content-wrap {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imm-tabs-block .kt-tab-title {
    transition: none;
  }

  .imm-tabs-block .wp-block-kadence-tab.kt-tab-content-active {
    animation: none;
  }
}