@charset "UTF-8";
/* ============================================================
   FILAR - jeden panel „co robimy sami" (patrz acf/filary).
   Panel to core/cover: zdjęcie i przyciemnienie niesie natywny blok,
   my podmieniamy płaskie przyciemnienie na gradient czytelności i dokładamy
   numer (counter CSS) oraz kafel z ikoną. Numer liczy kontener, nie pole.

   Wysokość panelu i rozmiar kafla to metryki kompozycji, nie odstępy,
   stąd zmienne lokalne zamiast tokenów z theme.json.
   ============================================================ */
.tb-filar {
  --panel-h: clamp(420px, 44vw, 520px);
  --kafel: 62px;
  position: relative;
  isolation: isolate;
  counter-increment: tb-filar;
  display: grid;
  background: var(--wp--preset--color--ink);
  overflow: hidden;
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. Dzięki temu cover jest jedynym dzieckiem panelu
     i wypełnia go w całości. */
}
.tb-filar .tb-filar__scena, .tb-filar .tb-filar__blocks {
  display: contents;
}
.tb-filar {
  /* ── panel = core/cover ───────────────────────────────── */
  /* Górny padding rezerwuje pas na kafel z ikoną i numer - oba są
     `position: absolute`, więc nie zajmują miejsca w kolumnie same z siebie.
     Treść jest dociągnięta do dołu i rośnie w GÓRĘ, więc przy wąskim panelu
     (telefon, trzy kolumny na laptopie) nadnagłówek i tytuł wjeżdżały pod
     kafel. Pas = odsunięcie ikony + jej wysokość + odstęp. */
}
.tb-filar .wp-block-cover {
  min-height: var(--panel-h);
  height: 100%;
  margin: 0;
  padding: calc(var(--space-2xl) + var(--kafel) + var(--space-lg)) var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tb-filar {
  /* Cover maluje jednolite przyciemnienie inline (dimRatio). Podmieniamy je
     na gradient czytelności: góra przezroczysta, żeby zdjęcie żyło, dół pełny
     ink, żeby tekst nie walczył z fakturą fotografii. `!important`, bo
     przyciemnienie idzie stylem inline z atrybutów bloku. */
}
.tb-filar .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(6, 7, 12, 0.32) 0%, rgba(6, 7, 12, 0.74) 42%, rgba(6, 7, 12, 0.96) 78%, var(--wp--preset--color--ink) 100%), linear-gradient(120deg, rgba(24, 137, 203, 0.18), rgba(138, 69, 166, 0.18)) !important;
  opacity: 1 !important;
}
.tb-filar .wp-block-cover__image-background {
  opacity: 0.72;
  filter: grayscale(0.35) brightness(0.8);
  transform: scale(1.04);
  transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 1.3s var(--ease-out);
}
.tb-filar:hover .wp-block-cover__image-background {
  opacity: 1;
  filter: grayscale(0) brightness(0.9);
  transform: scale(1.1);
}
.tb-filar {
  /* ── treść w środku covera ────────────────────────────── */
}
.tb-filar .wp-block-cover__inner-container {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  /* Bloki core jadą w trybie flow i dokładają sobie margin-block.
     Odstęp daje siatka wyżej. */
}
.tb-filar .wp-block-cover__inner-container > * {
  margin-block: 0;
  max-width: none;
}
.tb-filar {
  /* ── numer panelu ─────────────────────────────────────── */
  /* Sam obrys, bez wypełnienia - numer ma porządkować, nie krzyczeć. */
}
.tb-filar__nr {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  z-index: 1;
  font-family: var(--ffont);
  font-size: clamp(5rem, 9vw, 9rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  user-select: none;
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.6s var(--ease-out);
}
.tb-filar__nr::before {
  content: counter(tb-filar, decimal-leading-zero);
}
.tb-filar:hover .tb-filar__nr {
  -webkit-text-stroke-color: rgba(159, 182, 242, 0.4);
}
.tb-filar {
  /* ── kafel z ikoną ────────────────────────────────────── */
}
.tb-filar__ikona {
  position: absolute;
  top: var(--space-2xl);
  left: var(--space-xl);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--kafel);
  height: var(--kafel);
  border-radius: var(--radius-md);
  background: var(--grad-brand);
  box-shadow: var(--shadow-glow);
  transition: transform 0.6s var(--ease-spring);
}
.tb-filar__ikona .icon {
  width: 34px;
  height: 34px;
  color: var(--wp--preset--color--paper);
}
.tb-filar:hover .tb-filar__ikona {
  transform: translateY(-3px) rotate(-4deg);
}
.tb-filar {
  /* ── konkret liczbowy ─────────────────────────────────── */
}
.tb-filar .tb-filar__fakt {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  width: 100%;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-d);
  color: var(--wp--preset--color--text-on-dark-soft);
  /* Liczba wyróżniona wprost w tekście: redaktor pogrubia ją w edytorze,
     gradient dokłada blok - stąd wyjątkowo kolor tutaj, a nie klasą. */
}
.tb-filar .tb-filar__fakt b,
.tb-filar .tb-filar__fakt strong {
  font-family: var(--ffont);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: var(--grad-brand-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 980px) {
  .tb-filar {
    --panel-h: clamp(360px, 70vw, 460px);
  }
  .tb-filar .wp-block-cover {
    padding: calc(var(--space-xl) + var(--kafel) + var(--space-md)) var(--space-lg) var(--space-xl);
  }
  .tb-filar .tb-filar__ikona {
    top: var(--space-xl);
    left: var(--space-lg);
  }
}