/* pozornice.hr — nine-panel category accordion
   Requires poz-tokens.css. Transfers as a component: identical behaviour
   wherever it is placed. Pure CSS hover/focus — no JS state to desync.

   <div class="poz-strip">
     <a class="poz-strip__panel poz-acc--stage-decks" href="/pozornice/">
       <img class="poz-strip__img" src="…" alt="…">
       <span class="poz-strip__veil"  aria-hidden="true"></span>
       <span class="poz-strip__tint"  aria-hidden="true"></span>
       <span class="poz-strip__num">01</span>
       <span class="poz-strip__vert">Pozornice</span>
       <span class="poz-strip__open">
         <span class="poz-strip__kicker">Fiksne, modularne i motorizirane</span>
         <span class="poz-strip__title">Pozornice i dodaci</span>
         <span class="poz-strip__spec">750 kg/m² · 20–200 cm</span>
         <span class="poz-strip__cta">Pogledaj kategoriju →</span>
       </span>
       <span class="poz-strip__bar" aria-hidden="true"></span>
     </a>
     … × 9
   </div> */

.poz-strip {
  position: relative; display: flex; align-items: stretch;
  height: clamp(400px, 52vh, 600px);
  background: var(--poz-page);
  border-top: 1px solid var(--poz-line);
  border-bottom: 1px solid var(--poz-line);
}

.poz-strip__panel {
  position: relative; display: block; flex: 1 1 0; min-width: 0;
  overflow: hidden; background: var(--poz-page);
  border-right: 1px solid var(--poz-line);
  text-decoration: none; color: inherit;
  transition: flex-grow 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-strip__panel:last-child { border-right: 0; }

.poz-strip__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  filter: grayscale(0.55) contrast(1.02) brightness(1.06);
  transform: scale(1.04);
  transition: filter 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 1.2s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-strip__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.55) 42%, rgba(255,255,255,0.97) 100%);
}
.poz-strip__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--acc); mix-blend-mode: multiply; opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-strip__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-strip__num {
  position: absolute; left: 16px; top: 18px;
  font: var(--poz-eyebrow); letter-spacing: 0.16em;
  color: var(--poz-text-2); transition: color 0.4s;
}
.poz-strip__vert {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font: var(--poz-eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--poz-text-2); white-space: nowrap;
  transition: opacity 0.5s;
}

.poz-strip__open {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 28px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2,0.8,0.2,1), transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-strip__kicker {
  display: block; font: var(--poz-eyebrow); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acc-ink);
}
.poz-strip__title {
  display: block; margin-top: 12px; max-width: 18ch;
  font: 400 clamp(15px, 1.35vw, 24px)/1.24 var(--poz-font-display);
  letter-spacing: 0.02em; color: var(--poz-text);
}
.poz-strip__spec {
  display: block; margin-top: 12px;
  font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--poz-text-2); white-space: nowrap;
}
.poz-strip__cta {
  display: block; margin-top: 18px;
  font: var(--poz-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--poz-text);
}

/* ——— open state: hover AND keyboard focus, identical ——— */
.poz-strip__panel:hover,
.poz-strip__panel:focus-visible,
.poz-strip__panel.is-open { flex-grow: 4.6; }
.poz-strip__panel:hover  .poz-strip__img,
.poz-strip__panel:focus-visible .poz-strip__img,
.poz-strip__panel.is-open .poz-strip__img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1); }
.poz-strip__panel:hover  .poz-strip__tint,
.poz-strip__panel:focus-visible .poz-strip__tint,
.poz-strip__panel.is-open .poz-strip__tint { opacity: 0.16; }
.poz-strip__panel:hover  .poz-strip__bar,
.poz-strip__panel:focus-visible .poz-strip__bar,
.poz-strip__panel.is-open .poz-strip__bar { transform: scaleX(1); }
.poz-strip__panel:hover  .poz-strip__num,
.poz-strip__panel:focus-visible .poz-strip__num,
.poz-strip__panel.is-open .poz-strip__num { color: var(--acc-ink); }
.poz-strip__panel:hover  .poz-strip__vert,
.poz-strip__panel:focus-visible .poz-strip__vert,
.poz-strip__panel.is-open .poz-strip__vert { opacity: 0; }
.poz-strip__panel:hover  .poz-strip__open,
.poz-strip__panel:focus-visible .poz-strip__open,
.poz-strip__panel.is-open .poz-strip__open { opacity: 1; transform: translateY(0); }

/* ——— the other eight recede: the open panel is the only lit one ——— */
.poz-strip:hover .poz-strip__panel:not(:hover) .poz-strip__img,
.poz-strip:focus-within .poz-strip__panel:not(:focus-visible) .poz-strip__img,
.poz-strip:not(:hover) .poz-strip__panel:not(.is-open) .poz-strip__img {
  filter: grayscale(0.9) contrast(1) brightness(1.12) opacity(0.5);
}
.poz-strip:hover .poz-strip__panel:not(:hover) .poz-strip__vert,
.poz-strip:focus-within .poz-strip__panel:not(:focus-visible) .poz-strip__vert { opacity: 0.5; }

/* ——— .is-open is the default/touch state ———
   Touch devices never fire :hover, so above 820px one panel must be open
   on load. poz-nav.js moves .is-open on tap; on a pointer device the CSS
   hover simply takes over. Put class="… is-open" on the first panel. */
@media (hover: hover) {
  /* on a real pointer, hovering any panel releases the default one */
  .poz-strip:hover .poz-strip__panel.is-open:not(:hover) { flex-grow: 1; }
  .poz-strip:hover .poz-strip__panel.is-open:not(:hover) .poz-strip__open { opacity: 0; transform: translateY(14px); }
  .poz-strip:hover .poz-strip__panel.is-open:not(:hover) .poz-strip__vert { opacity: 0.5; }
  .poz-strip:hover .poz-strip__panel.is-open:not(:hover) .poz-strip__bar { transform: scaleX(0); }
}

/* ——— below 820px: two-column grid, every panel permanently open ——— */
@media (max-width: 820px) {
  .poz-strip { flex-wrap: wrap; height: auto; }
  .poz-strip__panel { flex: 1 1 46%; min-height: 240px; border-bottom: 1px solid var(--poz-line); }
  .poz-strip__vert { display: none; }
  .poz-strip__open { opacity: 1; transform: none; }
  .poz-strip__img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1); }
  .poz-strip__bar { transform: scaleX(1); }
  .poz-strip__num { color: var(--acc-ink); }
}