@charset "UTF-8";
/* ============================================================
   ZNAKOWANIE - przełącznik technik (acf/technika), jasny.

   Sekcja stoi zaraz pod katalogami i odpowiada na pytanie, które rodzi się
   po ich przejrzeniu: czy to, co zapisałem, da się oznakować tak, jak chcę.
   Zamiast czterech kart tekstu naraz - jeden konfigurator: menu technik po
   lewej, po prawej scena z dużą fotografią próbki i faktami. Klient ogląda
   jedną technikę naraz, jak wybieranie wariantu produktu w sklepie.

   Pozycja menu to miniatura zdjęcia sceny + nazwa + materiały (wszystko
   skleja JS z treści kart - redaktor edytuje jedno miejsce). Gdy scena nie
   ma zdjęcia, w miniaturę wchodzi numer w konturze.

   Tryby:
   - bazowy (bez JS, kanwa edytora): menu schowane (atrybut hidden),
     karty jedna pod drugą, każda ze swoim nagłówkiem;
   - `--zywy` (dokłada JS): dwie kolumny, widoczna tylko aktywna karta.

   Modyfikator pisze elementy PEŁNĄ nazwą bazową - `& &__el` w bloku
   z modyfikatorem daje złą klasę (patrz JAK-BUDOWAC).
   ============================================================ */
.tb-znakowanie {
  display: grid;
  gap: var(--space-2xl);
  /* ── menu technik (buduje JS) ─────────────────────────── */
}
.tb-znakowanie .tb-znakowanie__menu {
  display: grid;
  gap: var(--space-sm);
  align-self: start;
  align-content: start;
  /* `[hidden]` przeglądarki ma niższą specyficzność niż ta klasa -
     bez tej reguły menu-szkielet byłoby widoczne przed startem JS
     (ta sama pułapka co w module zapytania, patrz JAK-BUDOWAC). */
}
.tb-znakowanie .tb-znakowanie__menu[hidden] {
  display: none;
}
.tb-znakowanie__pozycja {
  --mini: 56px;
  position: relative;
  display: grid;
  grid-template-columns: var(--mini) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-md);
  align-items: center;
  align-content: center;
  padding: var(--space-md);
  padding-right: calc(var(--space-lg) + 20px);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.tb-znakowanie__pozycja:hover {
  border-color: var(--wp--preset--color--paper-3);
  box-shadow: var(--shadow-sm);
}
.tb-znakowanie {
  /* Miniatura sceny: mały kadr zdjęcia próbki. Nieaktywna jest lekko
     wygaszona - kolor wraca razem z wyborem. */
}
.tb-znakowanie__pozycja-mini {
  grid-row: 1/span 2;
  width: var(--mini);
  height: var(--mini);
  border-radius: var(--radius-sm);
  object-fit: cover;
  filter: saturate(0.35) contrast(0.92);
  transition: filter var(--transition);
}
.tb-znakowanie {
  /* Zastępnik miniatury, gdy scena nie ma zdjęcia: numer w konturze. */
}
.tb-znakowanie__pozycja-nr {
  grid-row: 1/span 2;
  display: grid;
  place-items: center;
  width: var(--mini);
  height: var(--mini);
  border-radius: var(--radius-sm);
  background: var(--wp--preset--color--paper-1);
  font-family: var(--ffont);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(11, 13, 22, 0.28);
}
.tb-znakowanie__pozycja-nazwa {
  grid-column: 2;
  align-self: end;
  font-family: var(--ffont);
  font-weight: 700;
  color: var(--wp--preset--color--text-muted);
  transition: color var(--transition-fast);
}
.tb-znakowanie {
  /* Materiały pod nazwą - z chipów karty, skleja JS. */
}
.tb-znakowanie__pozycja-mat {
  grid-column: 2;
  align-self: start;
  margin-top: 2px;
  font-family: var(--ffont);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-soft);
}
.tb-znakowanie {
  /* Strzałka zaproszenia przy prawej krawędzi - pojawia się z wyborem. */
}
.tb-znakowanie__pozycja::after {
  content: "";
  position: absolute;
  right: var(--space-md);
  top: 50%;
  width: 18px;
  height: 18px;
  translate: -6px -50%;
  opacity: 0;
  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="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></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="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
  transition: opacity var(--transition-fast), translate var(--transition-fast);
}
.tb-znakowanie__pozycja.is-active {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  /* Gradientowa obwódka: ramka malowana dwoma tłami (padding-box pod
     spodem paper, border-box gradientem marki). */
  border: 1px solid transparent;
  background: linear-gradient(var(--wp--preset--color--paper), var(--wp--preset--color--paper)) padding-box, var(--grad-brand) border-box;
}
.tb-znakowanie__pozycja.is-active::after {
  opacity: 1;
  translate: 0 -50%;
}
.tb-znakowanie__pozycja.is-active .tb-znakowanie__pozycja-nazwa {
  color: var(--wp--preset--color--text);
}
.tb-znakowanie__pozycja.is-active .tb-znakowanie__pozycja-mini {
  filter: none;
}
.tb-znakowanie__pozycja.is-active .tb-znakowanie__pozycja-nr {
  -webkit-text-stroke-color: var(--wp--preset--color--iris);
}
.tb-znakowanie {
  /* Div, który ACF robi z <InnerBlocks/>, jest przezroczysty dla siatki -
     dziećmi siatki kontenera są wprost karty technik. */
}
.tb-znakowanie .tb-znakowanie__blocks {
  display: contents;
}

/* ── tryb żywy (JS wstał, menu zbudowane) ─────────────────── */
.tb-znakowanie--zywy {
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  align-items: start;
  /* Wszystkie karty w tej samej komórce; widać tylko aktywną. */
}
.tb-znakowanie--zywy .tb-technika {
  grid-column: 2;
  grid-row: 1;
  display: none;
}
.tb-znakowanie--zywy .tb-technika.is-active {
  display: grid;
  animation: tb-znakowanie-wjazd 0.45s var(--ease-out);
}
.tb-znakowanie--zywy {
  /* Nazwę techniki niesie menu - w scenie zostaje tylko dla czytnika. */
}
.tb-znakowanie--zywy .tb-technika .tb-technika__nazwa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tb-znakowanie--zywy {
  /* Materiały też niesie menu (wiersz pod nazwą pozycji) - chipy w scenie
     byłyby tym samym drugi raz. Fakty układają się wtedy w dwie kolumny. */
}
.tb-znakowanie--zywy .tb-technika {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "nazwa nazwa" "probka probka" "opis opis" "plusy uwaga";
}
.tb-znakowanie--zywy .tb-technika .tb-technika__materialy {
  display: none;
}

@keyframes tb-znakowanie-wjazd {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ── wąski ekran: menu jako poziome kafle nad sceną ───────── */
@media only screen and (max-width: 900px) {
  .tb-znakowanie--zywy {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-znakowanie--zywy .tb-technika {
    grid-column: 1;
    grid-row: 2;
  }
  .tb-znakowanie--zywy .tb-znakowanie__menu {
    grid-row: 1;
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
  }
  .tb-znakowanie--zywy .tb-znakowanie__pozycja {
    --mini: 34px;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
  }
  .tb-znakowanie--zywy .tb-znakowanie__pozycja::after {
    display: none;
  }
  .tb-znakowanie--zywy .tb-znakowanie__pozycja-mini,
  .tb-znakowanie--zywy .tb-znakowanie__pozycja-nr {
    border-radius: var(--radius-full);
  }
  .tb-znakowanie--zywy .tb-znakowanie__pozycja-nr {
    font-size: 14px;
  }
  .tb-znakowanie--zywy {
    /* Kafel mieści miniaturę i nazwę; materiały widać w scenie. */
  }
  .tb-znakowanie--zywy .tb-znakowanie__pozycja-mat {
    display: none;
  }
  .tb-znakowanie--zywy {
    /* Piguły nie mieszczą materiałów, więc chipy wracają do sceny
       i fakty jadą jedną kolumną. */
  }
  .tb-znakowanie--zywy .tb-technika {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nazwa" "probka" "opis" "plusy" "materialy" "uwaga";
  }
  .tb-znakowanie--zywy .tb-technika .tb-technika__materialy {
    display: block;
  }
}