/* Foto originale e render affiancati in una sola schermata (galleria della scheda e visore a tutto schermo).
   Originale a sinistra, render a destra; «Prima» e «Dopo» in basso verso il centro, la dicitura in alto al centro. */
@layer components {
  .render-pair {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    border-radius: inherit;
    overflow: hidden;
  }
  .render-pair-side { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; }
  .render-pair-side picture { display: contents; }
  .render-pair-side img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pair-badge,
  .pair-flag {
    position: absolute;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--ground);
    color: var(--ink);
    box-shadow: var(--shadow-pin);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
  }
  .pair-badge { bottom: 14px; }
  .pair-before { right: 10px; }
  .pair-after { left: 10px; }
  .pair-flag { top: 14px; left: 50%; translate: -50% 0; }
  /* Riquadri piccoli della galleria: niente scritte, due meta' bastano */
  @container (max-width: 299px) {
    .pair-badge, .pair-flag { display: none; }
  }
  @container (max-width: 479px) {
    .pair-flag { font-size: 11px; padding: 3px 9px; }
    .pair-badge { font-size: 11px; padding: 3px 9px; bottom: 10px; }
  }

  /* Visore a tutto schermo: originale e render nello stesso riquadro, con le proporzioni del render (--pair-ar, impostata da detail.js; 3:2 se non nota);
     le scritte stanno sopra la barra delle miniature, in basso a sinistra di ogni foto per non finire sotto il contatore al centro */
  .slide-stage > .slide-pair {
    --pair-h: calc(100dvh - 230px);
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 40px);
    translate: 0 -50%;
    height: auto;
    width: min(100%, calc(var(--pair-h) * var(--pair-ar, 1.5) * 2 + 6px));
    margin-inline: auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    user-select: none;
    & .render-pair-side { aspect-ratio: var(--pair-ar, 1.5); }
    & .render-pair-side img { width: 100%; height: 100%; object-fit: cover; }
    & .pair-badge { bottom: 12px; }
    & .pair-before, & .pair-after { left: 12px; right: auto; }
    & .pair-flag { top: 12px; }
    &[hidden] { display: none; }
    &.is-out { opacity: 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .slide-stage > .slide-pair { transition: opacity var(--dur-fast) var(--ease); }
  }
  .slide-stage > img[hidden] { display: none; }
}