/* UQ / Przed-Po PRO - slider centre stage, features flanking it.
   Self-contained: carries the slider mechanics itself, so it works whether or
   not the plain uq-przed-po block (and its CSS) is on the page. */

/* --- slider mechanics --- */
.uq-ppp .uq-przedpo{position:relative;overflow:hidden;aspect-ratio:var(--pp-ratio,1/1);user-select:none;background:var(--uq-cream)}
.uq-ppp .uq-pp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.uq-ppp .uq-pp-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.uq-ppp .uq-pp-label{position:absolute;top:12px;font-family:var(--uq-font-mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--uq-ink) 68%,transparent);padding:4px 9px;border-radius:var(--uq-r);pointer-events:none;z-index:3}
.uq-ppp .uq-pp-label--before{left:12px}
.uq-ppp .uq-pp-label--after{right:12px}
.uq-ppp .uq-pp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--uq-ink) 22%,transparent);z-index:2;pointer-events:none}
.uq-ppp .uq-pp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 2px 12px color-mix(in srgb,var(--uq-ink) 34%,transparent);display:flex;align-items:center;justify-content:center;gap:5px}
.uq-ppp .uq-pp-grip::before,.uq-ppp .uq-pp-grip::after{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.uq-ppp .uq-pp-grip::before{border-right:7px solid var(--uq-ink)}
.uq-ppp .uq-pp-grip::after{border-left:7px solid var(--uq-ink)}
.uq-ppp .uq-pp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.uq-ppp .uq-pp-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.uq-ppp .uq-pp-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}

/* --- section layout --- */
.uq-ppp-head{text-align:center;max-width:720px;margin:0 auto clamp(28px,4vw,52px)}
.uq-ppp-lead{font-size:1.05rem;color:var(--uq-ink-soft);margin:14px 0 0}

.uq-ppp-grid{display:grid;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:980px){
	.uq-ppp-grid{grid-template-columns:1fr minmax(380px,540px) 1fr;gap:clamp(26px,3.2vw,48px)}
}

.uq-ppp-col{display:flex;flex-direction:column;gap:clamp(24px,3.5vw,44px)}
/* Mobile: media first, then the callouts as a 2-up grid. */
@media(max-width:979px){
	.uq-ppp-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
	.uq-ppp-media{order:-1;max-width:520px}
}
@media(max-width:520px){.uq-ppp-col{grid-template-columns:1fr}}

.uq-ppp-feat{text-align:center}
@media(min-width:980px){
	.uq-ppp-col--left .uq-ppp-feat{text-align:right}
	.uq-ppp-col--right .uq-ppp-feat{text-align:left}
}
.uq-ppp-ic{width:2em;height:2em;color:var(--uq-brown);display:block;margin:0 auto 12px}
@media(min-width:980px){
	.uq-ppp-col--left .uq-ppp-ic{margin-right:0;margin-left:auto}
	.uq-ppp-col--right .uq-ppp-ic{margin-left:0;margin-right:auto}
}
.uq-ppp-feat h3{font-family:var(--uq-font-display);font-weight:700;font-size:1.08rem;margin:0 0 6px;color:var(--uq-ink)}
.uq-ppp-feat p{font-size:.93rem;line-height:1.55;color:var(--uq-ink-soft);margin:0}

/* --- media frame --- */
.uq-ppp-media{margin:0 auto;width:100%}
.uq-ppp-media--kolo{border-radius:50%}
/* Inside a circle the usable width narrows towards the edges - the labels sit
   higher and further in than in the square frame so they never get clipped. */
.uq-ppp-media--kolo .uq-pp-label{top:auto;bottom:26%}
.uq-ppp-media--kolo .uq-pp-label--before{left:14%}
.uq-ppp-media--kolo .uq-pp-label--after{right:14%}
.uq-ppp-media--kwadrat{border-radius:var(--uq-r);border:1px solid var(--uq-line)}