@charset "UTF-8";
/* ============================================================
   TECHNIKA - scena jednej techniki w przełączniku znakowania.

   Jasna, jak reszta strony: dominuje PRÓBKA (duży pasek-symulacja logo na
   materiale), pod nią jedno zdanie i trzy kolumny faktów z etykietami
   malowanymi przez CSS. Zero ścian tekstu: ptaszki, chipy i jeden krzyżyk.

   Gridem jest sam <article>, a OBA wrappery InnerBlocks mają
   display:contents - dzięki temu próbka renderowana z PHP siada w polu
   siatki obok dzieci InnerBlocks (wzorzec: podziałka w layout/przebieg).

   Tryb pokazywania scen (wszystkie pod sobą vs jedna aktywna) ustawia
   kontener acf/znakowanie - ta karta go nie zna.

   Kolory w próbkach to KOLORY MATERIAŁÓW (stal, plastik, skóra), nie
   motywu - dlatego stoją tu wprost, jak gradienty czytelności na
   zdjęciach filarów.
   ============================================================ */
.tb-technika {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "nazwa nazwa nazwa" "probka probka probka" "opis opis opis" "plusy materialy uwaga";
  gap: var(--space-lg) var(--space-xl);
  /* Wrappery przezroczyste dla siatki - dziećmi sceny są wprost cegły. */
}
.tb-technika .tb-technika__wnetrze, .tb-technika .tb-technika__blocks {
  display: contents;
}
.tb-technika {
  /* Bloki core jadą w trybie flow i dokładają sobie margin-block.
     Odstępy daje siatka sceny. */
}
.tb-technika .tb-technika__nazwa, .tb-technika .tb-technika__opis, .tb-technika .tb-technika__materialy, .tb-technika .tb-technika__plusy, .tb-technika .tb-technika__uwaga {
  margin-block: 0;
}
.tb-technika .tb-technika__nazwa {
  grid-area: nazwa;
}
.tb-technika .tb-technika__opis {
  grid-area: opis;
  color: var(--wp--preset--color--text-muted);
}
.tb-technika {
  /* ── próbka efektu ────────────────────────────────────── */
  /* Duży pasek-symulacja. Metryki to kompozycja, nie odstępy. */
}
.tb-technika .tb-technika__probka {
  grid-area: probka;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(200px, 21vw, 270px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-l);
  overflow: hidden;
}
.tb-technika .tb-technika__probka-logo {
  font-family: var(--ffont);
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-technika .tb-technika__probka-podpis {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  font-family: var(--ffont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.tb-technika {
  /* ── próbka ze zdjęciem ───────────────────────────────── */
  /* Fotografia wypełnia pasek kadrem; podpis dostaje piguły, żeby nie
     zależał od jasności zdjęcia pod sobą. Wysokość i promień niesie
     bazowa .tb-technika__probka, warianty materiałowe zostają
     zastępnikiem, gdy zdjęcia brak. */
}
.tb-technika .tb-technika__probka-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tb-technika .tb-technika__probka--foto .tb-technika__probka-podpis, .tb-technika .tb-technika__probka--foto .tb-technika__probka-podpis {
  opacity: 1;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.78);
  color: #2b303b;
  backdrop-filter: blur(4px);
}
.tb-technika {
  /* ── etykiety kolumn faktów ───────────────────────────── */
  /* Maluje CSS, żeby redaktor nie utrzymywał trzech nagłówków w każdej
     karcie. Ten sam krój co etykiety wierszy statystyk. */
}
.tb-technika .tb-technika__plusy::before, .tb-technika .tb-technika__materialy::before, .tb-technika .tb-technika__uwaga::before {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--ffont);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-soft);
}
.tb-technika .tb-technika__plusy::before {
  content: "Co zyskujesz";
}
.tb-technika .tb-technika__materialy::before {
  content: "Na czym działa";
}
.tb-technika .tb-technika__uwaga::before {
  content: "Co wziąć pod uwagę";
  color: color-mix(in srgb, var(--wp--preset--color--plum) 72%, var(--wp--preset--color--text));
}
.tb-technika {
  /* ── plusy: ptaszki ───────────────────────────────────── */
}
.tb-technika .tb-technika__plusy {
  grid-area: plusy;
  padding: 0;
  list-style: none;
}
.tb-technika .tb-technika__plusy li {
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  color: var(--wp--preset--color--text-muted);
}
.tb-technika .tb-technika__plusy li:last-child {
  margin-bottom: 0;
}
.tb-technika .tb-technika__plusy li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 0.28em;
  background: var(--wp--preset--color--iris);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m20 6.5-11 11-5-5"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m20 6.5-11 11-5-5"/></svg>') center/contain no-repeat;
}
.tb-technika {
  /* ── materiały: chipy ─────────────────────────────────── */
}
.tb-technika .tb-technika__materialy {
  grid-area: materialy;
  padding: 0;
  list-style: none;
  /* Etykieta nad chipami, chipy w rzędzie pod nią. */
}
.tb-technika .tb-technika__materialy li {
  display: inline-block;
  margin: 0 var(--space-xs) var(--space-xs) 0;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  list-style: none;
  border: 1px solid var(--wp--preset--color--paper-3);
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper-1);
  color: var(--wp--preset--color--text-muted);
  font-family: var(--ffont);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tb-technika {
  /* ── ograniczenie ─────────────────────────────────────── */
  /* Sygnałem jest etykieta w plum - treść zostaje czystym zdaniem. */
}
.tb-technika .tb-technika__uwaga {
  grid-area: uwaga;
  color: var(--wp--preset--color--text-muted);
}

/* ── warianty próbki: kolory MATERIAŁÓW, nie motywu ───────── */
/* Grawer: szczotkowana stal, logo wyryte (jaśniejszy cień od dołu). */
.tb-technika--grawer .tb-technika__probka {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3px), linear-gradient(120deg, #ced2da 0%, #a2a8b4 42%, #bfc4ce 60%, #8f95a1 100%);
}
.tb-technika--grawer .tb-technika__probka .tb-technika__probka-logo {
  color: rgba(43, 48, 59, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.tb-technika--grawer .tb-technika__probka .tb-technika__probka-podpis {
  color: #2b303b;
}

/* Tampodruk: biały plastik, logo w jednym płaskim kolorze Pantone. */
.tb-technika--tampodruk .tb-technika__probka {
  background: linear-gradient(160deg, #ffffff 0%, #e9ebf2 100%);
}
.tb-technika--tampodruk .tb-technika__probka .tb-technika__probka-logo {
  color: var(--wp--preset--color--azure);
}
.tb-technika--tampodruk .tb-technika__probka .tb-technika__probka-podpis {
  color: #2b303b;
}

/* Nadruk UV: grafitowy korpus z połyskiem, logo w pełnym kolorze. */
.tb-technika--uv .tb-technika__probka {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.1) 46%, transparent 58%), linear-gradient(160deg, #2a2e38 0%, #15171e 100%);
}
.tb-technika--uv .tb-technika__probka .tb-technika__probka-logo {
  /* Jaśniejszy wariant gradientu - nasycony ginął na graficie. */
  background: var(--grad-brand-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tb-technika--uv .tb-technika__probka .tb-technika__probka-podpis {
  color: #ffffff;
}

/* Tłoczenie: skóra, ślepy tłok - logo w kolorze tła, wgniecione cieniami. */
.tb-technika--tloczenie .tb-technika__probka {
  background: radial-gradient(ellipse 120% 90% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(135deg, #3b2f25 0%, #221a12 100%);
}
.tb-technika--tloczenie .tb-technika__probka .tb-technika__probka-logo {
  color: #261d15;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15), 0 -1px 2px rgba(0, 0, 0, 0.75);
}
.tb-technika--tloczenie .tb-technika__probka .tb-technika__probka-podpis {
  color: #ffffff;
}

/* ── wąski ekran: fakty jedna kolumna ─────────────────────── */
@media only screen and (max-width: 720px) {
  .tb-technika {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nazwa" "probka" "opis" "plusy" "materialy" "uwaga";
    gap: var(--space-lg);
  }
}