/**
 * Fluid Framework - Before / After compare
 * @layer components
 *
 * Two photos of the same view with a divider you drag: a driveway before and
 * after cleaning, a kitchen before and after a renovation, a garden through
 * the seasons.
 *
 * Progressive enhancement: without JavaScript the two photos sit side by side
 * (stacked on a phone), each with its label. With assets/js/compare.js they
 * overlap and a slider moves the divider: drag or tap anywhere on the photo,
 * or focus it and use the arrow keys (Page Up / Page Down for big steps).
 * Printing shows both photos side by side again.
 *
 * Usage:
 *   <figure class="compare" data-compare>
 *     <div class="compare__stage">
 *       <div class="compare__before">
 *         <img src="driveway-before.jpg" alt="Driveway before cleaning, black mould along the joints"
 *              width="1200" height="800" loading="lazy">
 *         <span class="compare__label">Before</span>
 *       </div>
 *       <div class="compare__after">
 *         <img src="driveway-after.jpg" alt="The same driveway after cleaning"
 *              width="1200" height="800" loading="lazy">
 *         <span class="compare__label">After</span>
 *       </div>
 *     </div>
 *     <figcaption class="compare__caption">Driveway · Photos: the pro's own</figcaption>
 *   </figure>
 *   <script src="assets/js/compare.js" defer></script>
 *
 * Options on .compare:
 *   data-start="30"              where the divider starts, 0–100 (default 50)
 *   data-compare-label="…"       the slider's accessible name (default "Compare before and after")
 *   style="--compare-aspect: 4 / 3"   crop both photos to one shape (default: the photos' own)
 * Both photos should show the same view at the same size.
 */

@layer components {
  .compare {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  /* Without the script: side by side, stacked when narrow */
  .compare__stage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-3);
  }

  .compare__before,
  .compare__after {
    position: relative;
    margin: 0;
    min-inline-size: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
  }

  .compare__before img,
  .compare__after img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--compare-aspect, auto);
    object-fit: cover;
  }

  /* Photos vary, so labels carry their own dark backing: readable on any image */
  .compare__label {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: oklch(0% 0 0 / 0.65);
    color: oklch(100% 0 0);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .compare__caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
  }


  /* ========================================
     WITH THE SCRIPT: one frame, a divider
     ======================================== */

  .compare[data-compare-ready] .compare__stage {
    display: block;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
  }

  .compare[data-compare-ready] .compare__before,
  .compare[data-compare-ready] .compare__after {
    border-radius: 0;
  }

  .compare[data-compare-ready] .compare__after {
    position: absolute;
    inset: 0;
    /* clip-path has no logical form: the after photo shows on the inline-end side */
    clip-path: inset(0 0 0 var(--compare-pos, 50%));
  }

  .compare[data-compare-ready]:dir(rtl) .compare__after {
    clip-path: inset(0 var(--compare-pos, 50%) 0 0);
  }

  .compare[data-compare-ready] .compare__after img {
    block-size: 100%;
  }

  .compare[data-compare-ready] .compare__after .compare__label {
    inset-inline-start: auto;
    inset-inline-end: var(--space-2);
  }

  .compare__handle {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--compare-pos, 50%);
    z-index: 2;
    inline-size: 2px;
    margin-inline-start: -1px;
    display: flex;
    align-items: center;
    justify-content: center; /* the knob is wider than the line and overflows both sides equally */
    background: oklch(100% 0 0);
    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.35);
    pointer-events: none;
  }

  .compare__knob {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: var(--border-width-thick) solid oklch(100% 0 0);
    border-radius: var(--radius-full);
    background: oklch(0% 0 0 / 0.55);
    color: oklch(100% 0 0);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow-md);
  }

  /* The real control: a native range input over the whole photo, invisible */
  .compare .compare__range {
    position: absolute;
    inset: 0;
    z-index: 3;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y; /* a vertical swipe still scrolls the page */
  }

  .compare:has(.compare__range:hover) .compare__knob {
    background: oklch(0% 0 0 / 0.8);
  }

  /* White ring with a dark halo: visible on light and dark photos alike */
  .compare:has(.compare__range:focus-visible) .compare__knob {
    outline: 3px solid oklch(100% 0 0);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px oklch(0% 0 0 / 0.6);
  }

  @media (forced-colors: active) {
    .compare__handle {
      background: CanvasText;
    }

    .compare__knob,
    .compare__label {
      border: var(--border-width-thick) solid CanvasText;
      background: Canvas;
      color: CanvasText;
    }

    .compare:has(.compare__range:focus-visible) .compare__knob {
      outline-color: Highlight;
    }
  }

  @media print {
    .compare[data-compare-ready] .compare__stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
      overflow: visible;
    }

    .compare[data-compare-ready] .compare__after {
      position: relative;
      clip-path: none;
    }

    .compare[data-compare-ready] .compare__after .compare__label {
      inset-inline-start: var(--space-2);
      inset-inline-end: auto;
    }

    .compare__handle,
    .compare .compare__range {
      display: none;
    }
  }
}