@charset "UTF-8";
/* ============================================================
   HERO - KAFELEK. Jedno pole siatki 3x3 (patrz acf/hero-siatka).
   Zdjęcie na całe pole, podpis wjeżdża od dołu przy najechaniu.
   Wariant „Pole markowe" (is-style-marka) = środkowy kwadrat logotypu.

   Selektory z podwojoną klasą (.tb-hero-kafelek .tb-hero-kafelek__blocks)
   świadomie - globalne `body img` / `body p` z theme-style.scss (0,1,1)
   przebijają pojedynczą klasę bloku.
   ============================================================ */
.tb-hero-kafelek {
  position: relative;
  display: block;
  /* Na froncie <article> jest wprost elementem siatki i rozciąga go wiersz.
     W edytorze Gutenberg wsuwa między siatkę a blok swój wrapper
     (.block-editor-block-list__block), więc article przestaje być elementem
     siatki - a że cała zawartość jest position:absolute, zapadłby się do
     zera. height/width 100% trzyma pole kwadratowe w obu kontekstach. */
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: clamp(var(--radius-sm), 1.3vw, var(--radius-md));
  overflow: hidden;
  background: var(--wp--preset--color--ink-2);
  border: 1px solid var(--line-d);
  /* Kafelki wjeżdżają kaskadą - --i ustawia acf/hero-siatka przez nth-child.
     Przygaszanie sąsiadów przy hoverze siatki idzie na filter (nie opacity) -
     powód w templates/blocks/layout/hero-siatka/style.scss. */
  opacity: 0;
  transform: scale(0.88) translate3d(0, 12px, 0);
  animation: tb-hero-tile-in 0.85s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 65ms + 260ms);
  transition: filter var(--transition);
  /* Zawartość wypełnia pole - obrazek i podpis nakładają się na siebie. */
}
.tb-hero-kafelek .tb-hero-kafelek__blocks {
  position: absolute;
  inset: 0;
}
.tb-hero-kafelek {
  /* ── zdjęcie ──────────────────────────────────────────── */
}
.tb-hero-kafelek .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}
.tb-hero-kafelek .wp-block-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.tb-hero-kafelek .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) brightness(0.94);
  transition: transform 1s var(--ease-out), filter var(--transition);
}
.tb-hero-kafelek:hover .wp-block-image img {
  transform: scale(1.09);
  filter: saturate(1.16) brightness(1.04);
}
.tb-hero-kafelek {
  /* ── podpis ───────────────────────────────────────────── */
}
.tb-hero-kafelek p {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  font-family: var(--ffont);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--paper);
  background: linear-gradient(0deg, rgba(6, 7, 12, 0.92), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}
.tb-hero-kafelek:hover p {
  opacity: 1;
  transform: none;
}
.tb-hero-kafelek {
  /* ══════════════════════════════════════════════════════
     WARIANT: POLE MARKOWE
     Odpowiednik środkowego kwadratu w znaku ART/OFF/ICE - zamiast
     produktu siedzi tu logo na gradiencie marki.
     ══════════════════════════════════════════════════════ */
}
.tb-hero-kafelek.is-style-marka {
  background: var(--grad-brand-v);
  border-color: transparent;
  /* .tb-hero-kafelek__blocks zapisane wprost, NIE przez `&__blocks` -
     tutaj `&` to już `.tb-hero-kafelek.is-style-marka`, więc `&__blocks`
     skleiłoby się w bezsensowne `.is-style-marka__blocks`. */
}
.tb-hero-kafelek.is-style-marka .tb-hero-kafelek__blocks {
  display: grid;
  place-content: center;
  justify-items: center;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  text-align: center;
}
.tb-hero-kafelek.is-style-marka .wp-block-image {
  width: clamp(52px, 7vw, 86px);
  height: auto;
  margin: 0;
}
.tb-hero-kafelek.is-style-marka .wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}
.tb-hero-kafelek.is-style-marka:hover .wp-block-image img {
  transform: none;
  filter: none;
}
.tb-hero-kafelek.is-style-marka {
  /* Podpis markowy jest zawsze widoczny i siedzi w środku, nie u dołu. */
}
.tb-hero-kafelek.is-style-marka p {
  position: static;
  padding: 0;
  background: none;
  opacity: 1;
  transform: none;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-on-dark);
  line-height: 1.3;
}

@keyframes tb-hero-tile-in {
  to {
    opacity: 1;
    transform: none;
  }
}