/* Confronto prima/dopo: due foto sovrapposte, la seconda tagliata alla posizione del cursore.
   Il taglio e la maniglia li imposta lo script direttamente sugli elementi (non tramite variabile CSS):
   Safari non ridisegna clip-path quando cambia solo una variabile, e il confronto restava fermo. */

@layer components {
  .compare {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--tint-2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;

    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      -webkit-user-drag: none;
    }
  }

  .compare-after {
    position: absolute;
    inset: 0;
    -webkit-clip-path: inset(0 0 0 50%);
    clip-path: inset(0 0 0 50%);
  }

  /* Caricamento (v2.js): foto, scritte e cursore entrano insieme quando le due foto sono pronte.
     Senza JavaScript non si nasconde nulla. Lo spinner aspetta un momento: con le foto gia' in memoria non si vede. */
  .compare > :is(img, .compare-after, .badge, .compare-handle) { transition: opacity var(--dur) var(--ease); }
  @media (scripting: enabled) {
    .compare.is-loading > :is(img, .compare-after, .badge, .compare-handle) { opacity: 0; }
  }
  .compare-spinner {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    color: var(--ink-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
  }
  @media (scripting: enabled) {
    .compare.is-loading .compare-spinner { opacity: 1; transition-delay: .2s; }
  }

  .compare .badge { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; pointer-events: none; }
  .compare .badge.before { left: 14px; }
  .compare .badge.before { transform-origin: left bottom; }
  .compare .badge.after { right: 14px; transform-origin: right bottom; }
  .compare > .badge { transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease-spring); }
  /* Prima e Dopo: testo bianco in basso, senza il fondo del badge */
  .compare > .badge.before, .compare > .badge.after {
    top: auto;
    bottom: 14px;
    translate: none;
    padding: 0;
    background: none;
    color: var(--on-ink);
    font-size: calc(var(--step-small) * 2);
    text-shadow: 0 1px 8px rgb(0 0 0 / .45);
  }
  .compare.show-before .badge.before, .compare.show-after .badge.after { scale: 1.25; }
  .compare.show-before .badge.after, .compare.show-after .badge.before { opacity: 0; }

  .compare-handle {
    position: absolute;
    inset-block: 0;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--field-h);
    margin-left: calc(var(--field-h) / -2);
    cursor: ew-resize;
    outline: none;

    &::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--ground); }
  }

  .compare-knob {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ground);
    color: var(--accent);
    box-shadow: var(--shadow-pin);
    transition: transform var(--dur-fast) var(--ease);

    & .icon { width: 22px; height: 22px; stroke-width: 2; }
  }
  .compare:hover .compare-knob, .compare.dragging .compare-knob, .compare-handle:focus-visible .compare-knob { transform: scale(1.1); }
  .compare-handle:focus-visible .compare-knob { box-shadow: 0 0 0 3px var(--accent), var(--shadow-pin); }

  /* scelta dello stile (home staging) */
  .style-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    & button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: var(--control-h-sm);
      padding: 0 14px 0 10px;
      border: 0;
      border-radius: var(--r-pill);
      background: var(--tint);
      color: var(--ink);
      font: 500 var(--step-small) var(--font);
      cursor: pointer;
      transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    & button:hover { background: var(--tint-2); }
    & button[aria-pressed="true"] { background: var(--select); color: var(--on-ink); }
    & .sw { flex: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--a) 0 50%, var(--b) 0); box-shadow: 0 0 0 2px var(--ground); }
  }
}