/* Matched frames keep their complete composition at every viewport size. */
.model-comparison { min-width: 0; align-self: start; }
.model-comparison-grade { position: absolute; pointer-events: none; }
/* Color only: both original files, their texture and their framing remain intact. */
.model-comparison-image img { filter: url(#home-model-natural-tone); }
.model-comparison-image { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: #ebe7e0; isolation: isolate; }
.model-comparison-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 320ms ease; }
.model-comparison-image img.is-selected { opacity: 1; }
.model-comparison-image::after { z-index: 2; }
/* P22: zapętlony film w polu porównania; wizualizacje zostają pod przyciskami modeli. */
.model-comparison-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms ease; background: #ebe7e0; }
.model-comparison[data-model="film"] .model-comparison-image video { opacity: 1; }
.model-comparison[data-model="film"] .model-comparison-note { display: none; }

.model-comparison-note { position: absolute; bottom: 12px; right: 14px; z-index: 2; color: #fff; font-size: 11px; letter-spacing: .025em; padding: 3px 7px; background: rgba(25,38,47,.68); border-radius: 2px; pointer-events: none; }
.model-comparison-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; }
.model-comparison-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #d4cfc8; border-radius: 6px; background: #f2efeb; }
.model-comparison-switch button { min-height: 44px; padding: 9px 18px; border: 1px solid transparent; border-radius: 3px; font-size: 14px; line-height: 1.4; font-weight: 650; color: #485661; background: transparent; cursor: pointer; }
.model-comparison-switch button[aria-pressed=true] { color: #fff; background: var(--ink); }
.model-comparison-switch button:hover:not([aria-pressed=true]) { background: #fff; color: var(--ink); }
.model-comparison-switch button:focus-visible { outline: 2px solid #a94b0a; outline-offset: 2px; }
.model-comparison-switch button[aria-busy=true] { border-color: #a94b0a; }
.model-comparison-hint { font-size: 13px; color: var(--muted); }
.model-comparison-error { color: #8e3b13; font-size: 14px; line-height: 1.5; margin-top: 12px; }
@media(max-width:700px) {
  .model-comparison { width: 100%; }
  .model-comparison-controls { margin-top: 12px; }
  .model-comparison-switch { flex: 1; }
  .model-comparison-switch button { flex: 1; padding-inline: 15px; }
  .model-comparison-hint { flex-basis: 100%; }
}
@media(prefers-reduced-motion:reduce) {
  .model-comparison-image img, .model-comparison-image video { transition: none; }
}