/* pozornice.hr — component patterns
   Requires poz-tokens.css. Class-based so the classes can be applied to
   existing staging markup without changing its structure or copy. */

/* ============================ 01 · BUTTON ============================
   <a class="poz-btn poz-btn--primary">Zatraži ponudu</a>
   Three variants, three states each. Square-ish (4px), never a pill. */

.poz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box; height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 4px;
  font: 400 9px/1 var(--poz-font-display);
  letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background 0.32s cubic-bezier(0.2,0.8,0.2,1), border-color 0.32s cubic-bezier(0.2,0.8,0.2,1),
              color 0.32s cubic-bezier(0.2,0.8,0.2,1), transform 0.16s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-btn--sm { height: 40px; padding: 0 18px; }
.poz-btn:active { transform: scale(0.98); }

.poz-btn--primary { background: var(--poz-text); border-color: var(--poz-text); color: #FFFFFF; }
.poz-btn--primary:hover,
.poz-btn--primary:focus-visible { background: var(--poz-accent); border-color: var(--poz-accent); color: #FFFFFF; }
.poz-btn--primary:active { background: var(--poz-accent-ink); border-color: var(--poz-accent-ink); }

.poz-btn--secondary { background: transparent; border-color: var(--poz-line); color: var(--poz-text); }
.poz-btn--secondary:hover,
.poz-btn--secondary:focus-visible { background: var(--poz-panel); border-color: var(--poz-accent); }
.poz-btn--secondary:active { background: #E4E9EE; border-color: var(--poz-accent-ink); }

.poz-btn--ghost { height: 46px; padding: 0; border: 0; color: var(--poz-text-2); }
.poz-btn--ghost:hover,
.poz-btn--ghost:focus-visible { color: var(--poz-text); }
.poz-btn--ghost:active { color: var(--poz-accent-ink); }
.poz-btn--ghost .poz-btn__arrow { font-family: var(--poz-font-mono); transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), color 0.3s; }
.poz-btn--ghost:hover .poz-btn__arrow,
.poz-btn--ghost:focus-visible .poz-btn__arrow { transform: translateX(6px); color: var(--poz-accent); }

/* On a dark band. */
.poz-btn--on-dark { background: #FFFFFF; border-color: #FFFFFF; color: var(--poz-text); }
.poz-btn--on-dark:hover,
.poz-btn--on-dark:focus-visible { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.poz-btn--outline-dark { background: transparent; border-color: var(--poz-text-muted-dark); color: #FFFFFF; }
.poz-btn--outline-dark:hover,
.poz-btn--outline-dark:focus-visible { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }

/* ============================ 02 · SPEC CHIP ============================
   <button class="poz-chip">2 × 1 m</button>
   <button class="poz-chip is-selected">1 × 1 m</button>
   <button class="poz-chip" disabled>0,5 × 0,5 m</button> */

.poz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  box-sizing: border-box; height: 32px; padding: 0 13px;
  border: 1px solid var(--poz-line); border-radius: 0;
  background: var(--poz-page); color: var(--poz-text-2);
  font: 400 9px/1 var(--poz-font-display); letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.28s, color 0.28s, background 0.28s;
}
.poz-chip:hover,
.poz-chip:focus-visible { border-color: #B3BAC5; color: var(--poz-text); }
.poz-chip.is-selected { border-color: var(--poz-text); background: var(--poz-text); color: #FFFFFF; }
.poz-chip.is-selected::before { content: ""; width: 5px; height: 5px; background: var(--acc, var(--poz-accent)); }
.poz-chip:disabled { border-style: dashed; border-color: var(--poz-line-soft); color: #C9CFD6; cursor: not-allowed; }

/* ============================ 03 · TABLE ROW ============================
   Fixed layout so every row shares one column grid.
   <table class="poz-table"> <colgroup>…  */

.poz-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.poz-table th {
  padding: 0 18px 12px 0; text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--poz-text);
  font: var(--poz-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--poz-text-2); font-weight: 400;
}
.poz-table td {
  padding: 17px 18px 17px 0; vertical-align: middle;
  border-bottom: 1px solid var(--poz-line-soft);
  font: 400 13px/1.6 var(--poz-font-body); color: var(--poz-text-2);
}
.poz-table td:first-child { font: 400 11px/1.4 var(--poz-font-display); color: var(--poz-text); }
.poz-table__num { font: 400 11px/1.4 var(--poz-font-mono); color: var(--poz-text); }
.poz-table__arrow { font: 400 12px/1 var(--poz-font-mono); color: var(--poz-text-2); transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), color 0.3s; }

.poz-table tbody tr {
  border-left: 2px solid transparent;
  transition: background 0.3s, border-left-color 0.3s;
}
.poz-table tbody tr:hover,
.poz-table tbody tr:focus-within { background: var(--poz-panel); border-left-color: var(--acc, var(--poz-accent)); }
.poz-table tbody tr:hover .poz-table__arrow,
.poz-table tbody tr:focus-within .poz-table__arrow { transform: translateX(5px); color: var(--acc-ink, var(--poz-accent-ink)); }
.poz-table tbody tr.is-selected { border-left-color: var(--acc, var(--poz-accent)); }
.poz-table tbody tr.is-selected td:first-child { color: var(--acc-ink, var(--poz-accent-ink)); }
.poz-table tbody tr.is-selected td { color: var(--poz-text); }

/* ============================ 04 · SECTION HEAD ============================
   The spine variant — accent rule runs the full height of the block.
   <div class="poz-sechead poz-acc--truss">
     <span class="poz-sechead__spine"></span>
     <div><span class="poz-sechead__eyebrow">…</span><h2 class="poz-sechead__title">…</h2>
          <p class="poz-sechead__lead">…</p></div>
   </div>
   Section content starts 32px below. */

.poz-sechead { display: grid; grid-template-columns: 2px 1fr; gap: 22px; }
.poz-sechead + * { margin-top: 32px; }
.poz-sechead__spine { display: block; background: var(--acc, var(--poz-accent)); }
.poz-sechead__eyebrow {
  display: block; font: var(--poz-eyebrow); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--poz-text-2);
}
.poz-sechead__title {
  margin: 16px 0 0; max-width: 22ch;
  font: 400 clamp(19px, 1.7vw, 30px)/1.24 var(--poz-font-display);
  letter-spacing: 0.02em; color: var(--poz-text); text-wrap: pretty;
}
.poz-sechead__lead {
  margin: 14px 0 0; max-width: 46ch;
  font: 400 14px/1.72 var(--poz-font-body); color: var(--poz-text-2);
}
.poz-dark .poz-sechead__eyebrow,
.poz-dark .poz-sechead__lead { color: var(--poz-text-3); }
.poz-dark .poz-sechead__title { color: #FFFFFF; }

/* ============================ 05 · CATEGORY TILE ============================
   Square white plate, photo CONTAINED not cropped, white vignette at the
   edges so a supplier cut-out with its own off-white background disappears.
   <a class="poz-tile poz-acc--laser"> … */

.poz-tile { display: block; text-decoration: none; color: inherit; }
.poz-tile__plate {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--poz-page); border: 1px solid var(--poz-line-soft);
}
.poz-tile__img {
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(0.94); transition: transform 1.1s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-tile:hover .poz-tile__img,
.poz-tile:focus-visible .poz-tile__img { transform: scale(0.99); }
.poz-tile__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(74% 64% at 50% 46%,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0.94) 100%);
}
.poz-tile__shadow {
  position: absolute; left: 14%; right: 14%; bottom: 11%; height: 10px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(12,13,16,0.16) 0%, rgba(12,13,16,0) 100%);
}
.poz-tile__num {
  position: absolute; right: 14px; bottom: 14px;
  font: var(--poz-eyebrow); letter-spacing: 0.16em; color: var(--poz-text-2);
}
.poz-tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 20px; }
.poz-tile__name { font: 400 12px/1.5 var(--poz-font-display); letter-spacing: 0.02em; }
.poz-tile__arrow { font: 400 13px/1 var(--poz-font-mono); color: var(--poz-text-2); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), color 0.3s; }
.poz-tile:hover .poz-tile__arrow,
.poz-tile:focus-visible .poz-tile__arrow { transform: translateX(6px); color: var(--acc-ink, var(--poz-accent-ink)); }
.poz-tile__specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 16px; background: var(--poz-line-soft); border: 1px solid var(--poz-line-soft);
}
.poz-tile__spec { display: block; padding: 11px 12px; background: var(--poz-page); }
.poz-tile__spec dt {
  margin: 0; font: var(--poz-eyebrow-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--poz-text-2);
}
.poz-tile__spec dd { margin: 6px 0 0; font: 400 12px/1 var(--poz-font-display); color: var(--poz-text); }

/* ============================ 06 · MOTION ============================
   Reveal on scroll. poz-nav.js adds .is-in when the element enters view. */

.poz-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); }
.poz-reveal.is-in { opacity: 1; transform: none; }
.poz-reveal--d1 { transition-delay: 0.08s; }
.poz-reveal--d2 { transition-delay: 0.16s; }
.poz-reveal--d3 { transition-delay: 0.24s; }

/* Product video: loops only while in view (poz-nav.js pauses it otherwise). */
.poz-video { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .poz-reveal { opacity: 1; transform: none; transition: none; }
  .poz-strip__panel, .poz-strip__img, .poz-tile__img,
  .poz-mega, .poz-drawer { transition-duration: 0.01ms !important; }
}

/* ============================ 07 · FOCUS ============================
   One visible ring everywhere. Never remove it. */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--poz-accent); outline-offset: 2px;
}
.poz-dark :where(a, button, [tabindex]):focus-visible { outline-color: #FFFFFF; }