@charset "UTF-8";
/* ============================================================
   KATALOGI - okładki na karuzeli obok kolumny z tekstem.
   Sekcja jest niższa od pozostałych i o ton jaśniejsza (ink-1), bo dalej
   idzie ciemna sekcja realizacji - inaczej zlewałyby się w jedną płytę.

   Przewijanie jest natywne (`.szyna` z _szyna.scss), strzałki i pasek
   postępu obsługuje assets/js/szyna.js.
   ============================================================ */
/* Selektor z dwiema klasami - samo .tb-katalogi przegrywa z
   `body .section { padding-block: var(--sect-y) }` z _layout.scss. */
.tb-katalogi.section {
  padding-block: var(--sect-y-tight);
  background: var(--wp--preset--color--ink-1);
}

/* Wariant jasny (pole „Tło sekcji"). Tło zdejmujemy do `paper-1`, nie do
   czystej bieli: okładki katalogów są w większości jasne i na czystym białym
   gubiły krawędź. Modyfikator, nie block style - patrz fields.php. */
.tb-katalogi--jasna.section {
  background: var(--wp--preset--color--paper-1);
}

.tb-katalogi .tb-katalogi__uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  column-gap: var(--space-2xl);
  row-gap: var(--space-lg);
}
.tb-katalogi {
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. Dzięki temu kolumna tekstu i karuzela są jej
     dziećmi na równi ze strzałkami z PHP. */
}
.tb-katalogi .tb-katalogi__blocks-wrap, .tb-katalogi .tb-katalogi__blocks {
  display: contents;
}
.tb-katalogi {
  /* ── kolumna tekstu ───────────────────────────────────── */
}
.tb-katalogi__copy {
  grid-column: 1;
  grid-row: 1/span 2;
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}
.tb-katalogi__copy .wp-block-heading {
  max-width: 15ch;
}
.tb-katalogi__copy .lead {
  max-width: 44ch;
}
.tb-katalogi {
  /* ── karuzela okładek ─────────────────────────────────── */
  /* Sceną steruje assets/js/karuzela.js: karty leżą jedna na drugiej
     na środku, a skrypt rozsuwa je transformem (odwzorowanie efektu
     „carousel" z makiety - aktywna w pełnej skali, boczne mniejsze
     i przygaszone). Krzywa jak w makiecie: .carousel-fade. */
}
.tb-katalogi .tb-katalogi__karuzela {
  --okladka: clamp(230px, 26vw, 356px);
  --luz: var(--space-lg);
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: calc(var(--okladka) * 688 / 532 + var(--luz) * 2);
  margin: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.tb-katalogi .tb-katalogi__karuzela:active {
  cursor: grabbing;
}
.tb-katalogi .tb-katalogi__karuzela > * {
  position: absolute;
  top: var(--luz);
  left: 50%;
  width: var(--okladka);
  margin: 0;
  transform: translateX(-50%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tb-katalogi__ctl {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
}
.tb-katalogi {
  /* Karuzela jest core/group w trybie flow, więc jej dzieci łapią rytm
     pionowy z _layout.scss. Odstępy w pasie daje `gap`, nie marginesy. */
}
.tb-katalogi__copy > *, .tb-katalogi__karuzela > *, .tb-katalogi .tb-katalogi__blocks > * {
  margin-block: 0;
}

/* ── aurora sekcji ────────────────────────────────────────── */
/* Plamy zjeżdżają do krawędzi: kolor ma oświetlać karuzelę od tyłu,
   a nie prześwitywać przez okładki. Trzy klasy, bo bazowe położenie blobów
   siedzi w `body .aurora__blob--a` z _effects.scss. */
.tb-katalogi .aurora--katalogi {
  opacity: 0.85;
}

.tb-katalogi .aurora--katalogi .aurora__blob--a {
  width: 44vw;
  height: 44vw;
  left: -12vw;
  top: auto;
  bottom: -16vw;
}

.tb-katalogi .aurora--katalogi .aurora__blob--b {
  width: 42vw;
  height: 42vw;
  right: -6vw;
  top: -14vw;
}

.tb-katalogi .aurora--katalogi .aurora__blob--d {
  right: auto;
  bottom: auto;
  left: 20vw;
  top: -4vw;
  opacity: 0.7;
}

@media only screen and (max-width: 1000px) {
  /* W jednej kolumnie sekcja robi się dwa razy wyższa, a plamy liczone
     w vw kurczą się razem z szerokością - bez tego zostaje sam czarny
     prostokąt z odrobiną koloru przy górnej krawędzi. */
  .tb-katalogi .aurora--katalogi .aurora__blob--a {
    width: 115vw;
    height: 115vw;
    left: -35vw;
    bottom: -35vw;
  }
  .tb-katalogi .aurora--katalogi .aurora__blob--b {
    width: 105vw;
    height: 105vw;
    right: -30vw;
    top: -32vw;
  }
  .tb-katalogi .aurora--katalogi .aurora__blob--d {
    width: 62vw;
    height: 62vw;
    left: -14vw;
    top: 34%;
  }
}
@media only screen and (max-width: 980px) {
  .tb-katalogi .tb-katalogi__uklad {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-katalogi .tb-katalogi__copy,
  .tb-katalogi .tb-katalogi__karuzela,
  .tb-katalogi .tb-katalogi__ctl {
    grid-column: 1;
    grid-row: auto;
  }
}
/* ── kanwa edytora ────────────────────────────────────────────
   Bez JS karty leżałyby jedna na drugiej na środku sceny. W kanwie
   rozkładamy je w zwykły rządek, żeby dało się je edytować i przestawiać. */
.is-root-container .tb-katalogi__karuzela,
.block-editor-block-list__layout .tb-katalogi__karuzela {
  height: auto;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  cursor: auto;
}
.is-root-container .tb-katalogi__karuzela > *,
.block-editor-block-list__layout .tb-katalogi__karuzela > * {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 var(--okladka);
  transform: none;
}

/* ── wariant: siatka ──────────────────────────────────────── */
/* Podstrona kategorii pokazuje KOMPLET katalogów działu, więc karuzela
   zamienia się w siatkę: te same okładki, wszystkie naraz, bez sterowania.

   Karuzelę wyłącza też JS (assets/js/karuzela.js sprawdza `.is-style-siatka`),
   bo inaczej ustawiałby kartom `transform` inline i przebijał ten arkusz. */
.tb-katalogi.is-style-siatka .tb-katalogi__uklad {
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 4.5vw, 4.25rem);
}
.tb-katalogi.is-style-siatka {
  /* Nagłówek rozkłada się na prawo i lewo, jak `.sect-head--split` w każdej
     innej sekcji motywu: tytuł po lewej, akapit po prawej. W karuzeli tekst
     stoi w kolumnie obok okładek, więc tam jest jedną kolumną - tu okładki
     są pod spodem i pełna szerokość zostaje wolna. */
}
.tb-katalogi.is-style-siatka .tb-katalogi__copy {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 4rem);
}
@media only screen and (max-width: 900px) {
  .tb-katalogi.is-style-siatka .tb-katalogi__copy {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
.tb-katalogi.is-style-siatka .tb-katalogi__wstep {
  display: grid;
  gap: var(--space-md);
  align-content: end;
}
.tb-katalogi.is-style-siatka .tb-katalogi__wstep > *,
.tb-katalogi.is-style-siatka .tb-katalogi__copy > * {
  margin-block: 0;
}
.tb-katalogi.is-style-siatka .tb-katalogi__copy .wp-block-heading {
  max-width: 20ch;
}
.tb-katalogi.is-style-siatka .tb-katalogi__copy .lead {
  max-width: none;
}
.tb-katalogi.is-style-siatka .tb-katalogi__karuzela {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
  height: auto;
  overflow: visible;
  cursor: default;
}
.tb-katalogi.is-style-siatka .tb-katalogi__karuzela > * {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  transform: none;
  opacity: 1;
}
.tb-katalogi.is-style-siatka .tb-katalogi__ctl {
  display: none;
}

/* ── wariant: pas działu ──────────────────────────────────── */
/* Hub /katalogi/: zajawka działu przy kolumnie opisu. Dwie okładki
   i kafel „czytaj więcej" stoją OBOK SIEBIE, w pełnej krycie i bez
   transformów - talia z karuzeli przy trzech kartach nachodziła na
   siebie i klik zawsze trafiał wierzchnią, niezależnie od celu.

   Karuzelę wyłącza też JS (assets/js/karuzela.js sprawdza `.is-style-pas`),
   inaczej ustawiałby kartom `transform` inline i autoprzewijał talię. */
.tb-katalogi.is-style-pas .tb-katalogi__karuzela {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  height: auto;
  overflow: visible;
  cursor: default;
}
.tb-katalogi.is-style-pas .tb-katalogi__karuzela > * {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  transform: none;
  opacity: 1;
}
.tb-katalogi.is-style-pas .tb-katalogi__ctl {
  display: none;
}
.tb-katalogi.is-style-pas {
  /* Poniżej progu, przy którym układ i tak spada do jednej kolumny,
     trzy okładki obok siebie robią się za wąskie na podpisy. */
}
@media only screen and (max-width: 620px) {
  .tb-katalogi.is-style-pas .tb-katalogi__karuzela {
    grid-template-columns: minmax(0, 1fr);
  }
}