@charset "UTF-8";
/* ============================================================
   KATALOG - jedna okładka w karuzeli katalogów (patrz acf/katalogi).
   Własny komponent, nie współdzielony z kaflami oferty: okładka ma bronić
   się sama, więc karta idzie bez przyciemnienia. Przygaszenie sięga tylko
   tam, gdzie leży podpis.

   Proporcja karty jest metryką kompozycji (okładki są pionowe 532x688),
   stąd wartość wprost, nie token.
   ============================================================ */
.tb-katalog {
  position: relative;
  isolation: isolate;
  counter-increment: tb-katalog;
  display: grid;
  aspect-ratio: 532/688;
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--ink-2);
  overflow: hidden;
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, 0.85);
  transition: box-shadow 0.5s var(--ease-out);
}
.tb-katalog:hover {
  box-shadow: 0 40px 80px -26px rgba(0, 0, 0, 0.95);
}
.tb-katalog {
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. Dzięki temu cover wypełnia kartę w całości. */
}
.tb-katalog .tb-katalog__scena, .tb-katalog .tb-katalog__blocks {
  display: contents;
}
.tb-katalog .wp-block-cover {
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tb-katalog {
  /* Przyciemnienie coveru zdejmujemy do zera - okładka to grafika, która
     ma zostać czysta. Czytelność podpisu daje gradient niżej. */
}
.tb-katalog .wp-block-cover__background {
  opacity: 0 !important;
}
.tb-katalog {
  /* Warstwa treści siedzi przy dole i niesie własny gradient - tekst leży
     wtedy zawsze nad swoim tłem, bez licytacji z-index z rdzeniem
     (core: `.wp-block-cover .wp-block-cover__inner-container { z-index: 1 }`
     ładowane PO stylu bloku, stąd trzy klasy w selektorze).

     Podpis pokazuje tylko okładka na środku karuzeli - boczne mają zostać
     samą grafiką z numerem, jak w makiecie. */
}
.tb-katalog .wp-block-cover .wp-block-cover__inner-container {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out);
  position: relative;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: var(--space-3xl) var(--space-md) var(--space-md);
  background: linear-gradient(180deg, transparent, rgba(6, 7, 12, 0.94));
}
.tb-katalog .wp-block-cover .wp-block-cover__inner-container > * {
  margin-block: 0;
  max-width: none;
}
.tb-katalog .tb-katalog__podpis {
  color: var(--wp--preset--color--text-on-dark);
  line-height: 1.3;
}
.tb-katalog {
  /* Numer widoczny na każdej okładce, także tej przy krawędzi kadru. */
}
.tb-katalog__nr {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  z-index: 4;
  font-size: 12px;
  color: var(--wp--preset--color--paper);
  text-shadow: 0 1px 8px rgba(6, 7, 12, 0.9);
}
.tb-katalog__nr::before {
  content: counter(tb-katalog, decimal-leading-zero);
}
.tb-katalog__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.tb-katalog__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--paper);
  outline-offset: -4px;
}

/* Aktywna okładka: podpis wjeżdża, cień się pogłębia. Klasę `is-aktywna`
   ustawia assets/js/karuzela.js. */
.tb-katalog.is-aktywna {
  box-shadow: 0 40px 80px -26px rgba(0, 0, 0, 0.95);
}
.tb-katalog.is-aktywna .wp-block-cover .wp-block-cover__inner-container {
  opacity: 1;
  transform: none;
}

/* W kanwie edytora karuzela nie chodzi, więc żadna okładka nie jest aktywna -
   podpisy muszą być widoczne, inaczej blok wygląda na pusty. */
.is-root-container .tb-katalog .wp-block-cover__inner-container,
.block-editor-block-list__layout .tb-katalog .wp-block-cover__inner-container {
  opacity: 1;
  transform: none;
}

/* Wyzwalacz podglądu przykrywa całą kartę, a w kanwie leżałby na coverze -
   czyli na jedynym miejscu, w którym wybiera się okładkę i pisze tytuł.
   Podgląd i tak działa wyłącznie na froncie, więc w edytorze go nie ma. */
.is-root-container .tb-katalog__link,
.block-editor-block-list__layout .tb-katalog__link {
  display: none;
}

/* Na jasnym tle sekcji (podstrony kategorii, hub) ciężki cień z ciemnej
   karuzeli strony głównej robił się brudną plamą pod dolną krawędzią.
   Jasny wariant sekcji dostaje zwykłą elewację z tokenów.
   Pełne nazwy klas: blok z modyfikatorem, patrz JAK-BUDOWAC. */
.tb-katalogi--jasna .tb-katalog {
  box-shadow: var(--shadow-sm), var(--shadow-md);
}
.tb-katalogi--jasna .tb-katalog:hover {
  box-shadow: var(--shadow-sm), var(--shadow-lg);
}