/* =====================================================================
   RANGE STRIP v3 — eleven panels, product cut-outs (design A "Traka",
   2026-09-07). Scoped to .poz-strip.pzs3 so poz-accordion.css and
   poz-home-extra.css keep their rules for any other strip. The panel
   still opens by :hover / :focus-visible / .is-open (poz-nav.js), and the
   strip becomes a permanently-open grid below 820px.
   ===================================================================== */

.poz-strip.pzs3 {
	height: clamp(380px, 44vh, 460px);
	border: 1px solid var(--poz-line, #DFE3E7);
	background: var(--poz-panel, #F2F4F6);
}
.pzs3 .pzs3-p {
	--acc: #8B929E;
	position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden;
	background: var(--poz-panel, #F2F4F6);
	border-right: 1px solid var(--poz-line, #DFE3E7);
	color: var(--poz-text, #16171B);
	transition: flex-basis .8s cubic-bezier(.2, .8, .2, 1), flex-grow .8s cubic-bezier(.2, .8, .2, 1), background-color .6s ease;
}
.pzs3 .pzs3-p:last-child { border-right: 0; }

/* closed: a small cut-out, the number, the rotated name */
.pzs3 .pzs3-thumb {
	position: absolute; left: 50%; top: 22px; width: 104px; height: 78px; margin-left: -52px;
	object-fit: contain; mix-blend-mode: multiply; opacity: .85;
	transition: opacity .5s ease;
}
.pzs3 .pzs3-num {
	position: absolute; left: 0; right: 0; top: 118px; text-align: center;
	font: 400 11px/1 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .14em;
	color: var(--poz-text-2, #5F6772);
	transition: left .6s ease, top .6s ease, text-align 0s;
}
.pzs3 .pzs3-vert {
	position: absolute; left: 50%; bottom: 26px;
	transform: rotate(-90deg); transform-origin: 0 100%;
	white-space: nowrap;
	font: 400 12.5px/1.15 var(--poz-font-display, Michroma, sans-serif); letter-spacing: .14em;
	color: var(--poz-text, #16171B);
	transition: opacity .45s ease;
}
.pzs3 .pzs3-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--acc); opacity: .7; transition: opacity .5s ease; }

/* open: tinted ground, the big cut-out top-right, the copy bottom-left */
.pzs3 .pzs3-hero {
	position: absolute; right: 26px; top: 26px; width: 62%; max-width: 320px; height: 50%; max-height: 220px;
	object-fit: contain; object-position: right top; mix-blend-mode: multiply;
	opacity: 0; transform: translateY(10px);
	transition: opacity .55s cubic-bezier(.2, .8, .2, 1) .12s, transform .7s cubic-bezier(.2, .8, .2, 1) .12s;
}
.pzs3 .pzs3-open {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px 26px;
	display: flex; flex-direction: column; gap: 8px; max-width: 40ch;
	opacity: 0; transform: translateY(14px);
	transition: opacity .55s cubic-bezier(.2, .8, .2, 1) .1s, transform .7s cubic-bezier(.2, .8, .2, 1) .1s;
}
.pzs3 .pzs3-kicker { font: 500 10.5px/1 var(--poz-font-body, Sora, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--poz-text-2, #5F6772); }
.pzs3 .pzs3-title { font: 400 clamp(20px, 1.8vw, 26px)/1.1 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.02em; color: var(--poz-text, #16171B); text-wrap: balance; }
.pzs3 .pzs3-desc { font: 400 13px/1.55 var(--poz-font-body, Sora, sans-serif); color: var(--poz-text-2, #5F6772); }
.pzs3 .pzs3-spec { font: 400 11.5px/1.5 var(--poz-font-mono, 'IBM Plex Mono', monospace); color: var(--poz-text-2, #5F6772); }
.pzs3 .pzs3-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; font: 500 11px/1 var(--poz-font-body, Sora, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--poz-text, #16171B); }
.pzs3 .pzs3-cta i { font-style: normal; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pzs3 .pzs3-p:hover .pzs3-cta i { transform: translateX(5px); }

.pzs3 .pzs3-p:hover,
.pzs3 .pzs3-p:focus-visible,
.pzs3 .pzs3-p.is-open {
	flex: 0 0 clamp(340px, 35vw, 500px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, #FFFFFF) 0%, #FFFFFF 52%) !important;   /* poz-home-extra.css paints .poz-strip__panel.is-open white at higher specificity */
}
.pzs3 .pzs3-p:hover .pzs3-thumb, .pzs3 .pzs3-p:focus-visible .pzs3-thumb, .pzs3 .pzs3-p.is-open .pzs3-thumb { opacity: 0; }
.pzs3 .pzs3-p:hover .pzs3-vert,  .pzs3 .pzs3-p:focus-visible .pzs3-vert,  .pzs3 .pzs3-p.is-open .pzs3-vert  { opacity: 0; }
.pzs3 .pzs3-p:hover .pzs3-num,   .pzs3 .pzs3-p:focus-visible .pzs3-num,   .pzs3 .pzs3-p.is-open .pzs3-num   { left: 30px; right: auto; top: 24px; text-align: left; }
.pzs3 .pzs3-p:hover .pzs3-hero,  .pzs3 .pzs3-p:focus-visible .pzs3-hero,  .pzs3 .pzs3-p.is-open .pzs3-hero  { opacity: 1; transform: none; }
.pzs3 .pzs3-p:hover .pzs3-open,  .pzs3 .pzs3-p:focus-visible .pzs3-open,  .pzs3 .pzs3-p.is-open .pzs3-open  { opacity: 1; transform: none; }
.pzs3 .pzs3-p:hover .pzs3-bar,   .pzs3 .pzs3-p:focus-visible .pzs3-bar,   .pzs3 .pzs3-p.is-open .pzs3-bar   { opacity: 1; }
.pzs3 .pzs3-p:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

/* on a pointer device the first hover releases the rest state */
@media (hover: hover) {
	.pzs3:hover .pzs3-p.is-open:not(:hover) { flex: 1 1 0; background: var(--poz-panel, #F2F4F6) !important; }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-thumb { opacity: .85; }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-vert  { opacity: 1; }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-num   { left: 0; right: 0; top: 118px; text-align: center; }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-hero  { opacity: 0; transform: translateY(10px); }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-open  { opacity: 0; transform: translateY(14px); }
	.pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-bar   { opacity: .7; }
	.pzs3:hover .pzs3-p:not(:hover) .pzs3-thumb { opacity: .55; }
}

/* the eleven names that never see a pointer */
@media (max-width: 1180px) {
	.pzs3 .pzs3-vert { font-size: 11.5px; }
	.pzs3 .pzs3-thumb { width: 84px; height: 64px; margin-left: -42px; }
	.pzs3 .pzs3-num { top: 100px; }
}
@media (max-width: 820px) {
	.poz-strip.pzs3 { flex-wrap: wrap; height: auto; }
	.pzs3 .pzs3-p, .pzs3 .pzs3-p.is-open, .pzs3:hover .pzs3-p.is-open:not(:hover) { flex: 1 1 50%; min-height: 300px; border-bottom: 1px solid var(--poz-line, #DFE3E7); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, #FFFFFF) 0%, #FFFFFF 52%) !important; }
	.pzs3 .pzs3-p:nth-child(2n) { border-right: 0; }
	.pzs3 .pzs3-thumb, .pzs3 .pzs3-vert, .pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-thumb, .pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-vert { display: none; }
	.pzs3 .pzs3-num, .pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-num { left: 22px; right: auto; top: 20px; text-align: left; }
	.pzs3 .pzs3-hero, .pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-hero { opacity: 1; transform: none; right: 18px; top: 18px; width: 46%; max-height: 120px; }
	.pzs3 .pzs3-open, .pzs3:hover .pzs3-p.is-open:not(:hover) .pzs3-open { opacity: 1; transform: none; padding: 0 22px 22px; }
	.pzs3 .pzs3-bar { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.pzs3 .pzs3-p, .pzs3 .pzs3-thumb, .pzs3 .pzs3-num, .pzs3 .pzs3-vert, .pzs3 .pzs3-hero, .pzs3 .pzs3-open, .pzs3 .pzs3-bar, .pzs3 .pzs3-cta i { transition-duration: .01ms !important; }
}