/**
 * Before-after: two photos of the same view compared with a slider. The
 * "before" photo lies on top and is cut at the handle, so dragging the
 * handle right shows more of it and dragging left more of the "after" photo.
 * For cleaning, renovation, repair and care work, or any edit to a photo.
 *
 * globalClass: before-after          (the frame, a GB container)
 *              before-after-before   (the first side, a GB container)
 *              before-after-after    (the second side, a GB container)
 *              before-after-label    (optional GB headline p on each side)
 *
 * Structure:
 *   .before-after.gb-container [data-start="30"] [data-label="Vertaa ..."]
 *     .before-after-before.gb-container
 *       figure.gb-block-image > img          the "before" photo (GB image)
 *       p.gb-headline.before-after-label     "Ennen"
 *     .before-after-after.gb-container
 *       figure.gb-block-image > img          the "after" photo (GB image)
 *       p.gb-headline.before-after-label     "Jälkeen"
 *   js/blocks/before-after.js appends .before-after-handle (the line) with
 *   .before-after-knob inside it; the knob is the role="slider" element.
 *   Both photos are cropped to --before-after-ratio, so the edges line up
 *   only when the photos are taken from the same spot with the same ratio.
 *   Give both images an alt text: they are the content.
 *
 * Without JS and in the editor the two sides sit next to each other (stacked
 * on phones), each with its label, so the photos are swapped as ordinary
 * image blocks. The comparison layout is under html.js, so it is in place on
 * the first paint, before the script adds the handle.
 *
 * Tuning: --before-after-start (where the handle starts, 50%; for one block
 *           the HTML attribute data-start="30", because GB drops a style
 *           attribute), --before-after-ratio (3 / 2),
 *         --before-after-max-width (960px), --before-after-radius (0),
 *         --before-after-gap (between the sides without JS, 16px)
 *
 * Motion: the handle follows a drag directly; a click or tap glides it to
 * the spot in 0.3 s, which prefers-reduced-motion turns off.
 *
 * Chain animations: the frame animates as one element (fadeIn, no movement
 * or scale) after the heading and text.
 *
 * Editor: GB lays the sides out on .block-editor-block-list__layout, so the
 * grid rules target that element too.
 */

.before-after {
    --before-after-start: 50%;
    --before-after-ratio: 3 / 2;
    --before-after-max-width: 960px;
    --before-after-radius: 0;
    --before-after-gap: 16px;
    width: 100%;
    max-width: var(--before-after-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Without JS and in the editor: the sides next to each other */
.before-after,
.before-after > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    gap: var(--before-after-gap);
}

.before-after > .block-editor-inner-blocks {
    width: 100%;
}

/* A side owns its box and the photo covers it (CLAUDE.md, image rule).
   The frame prefix outweighs base.css, which unsets nested container
   backgrounds inside the palette wrappers. */
.before-after .before-after-before,
.before-after .before-after-after {
    position: relative;
    aspect-ratio: var(--before-after-ratio);
    overflow: hidden;
    border-radius: var(--before-after-radius);
    background-color: var(--media-bg-clr);
}

.before-after figure.gb-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
}

.before-after figure.gb-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after .before-after-label {
    --heading-clr: var(--on-media-clr);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--media-bg-clr) 55%, transparent);
    color: var(--on-media-clr);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Comparison: the sides on top of each other, "before" cut at the handle */
html.js .before-after {
    display: block;
    position: relative;
    aspect-ratio: var(--before-after-ratio);
    overflow: hidden;
    border-radius: var(--before-after-radius);
    background-color: var(--media-bg-clr);
    cursor: ew-resize;
    /* Vertical swipes still scroll the page; sideways ones reach the script */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html.js .before-after .before-after-before,
html.js .before-after .before-after-after {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

html.js .before-after .before-after-before {
    z-index: 1;
    clip-path: inset(0 calc(100% - var(--before-after-pos, var(--before-after-start))) 0 0);
}

html.js .before-after .before-after-after .before-after-label {
    left: auto;
    right: 12px;
}

/* Handle: a full-size layer moved by the position, the line on its left
   edge, so the move is a transform and needs no layout. */
.before-after-handle {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translateX(var(--before-after-pos, var(--before-after-start)));
    pointer-events: none;
}

.before-after-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background-color: var(--on-media-clr);
    box-shadow: 0 0 6px color-mix(in srgb, var(--media-bg-clr) 40%, transparent);
}

.before-after-knob {
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--on-media-clr);
    color: var(--on-media-dark-clr);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--media-bg-clr) 35%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.before-after-knob svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dark ring between two light ones: visible on light and dark photos */
.before-after-knob:focus-visible {
    outline: 2px solid var(--on-media-dark-clr);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--on-media-clr);
}

@media (prefers-reduced-motion: no-preference) {
    html.js .before-after.is-gliding .before-after-before {
        transition: clip-path 0.3s var(--transition-timing-function);
    }

    .before-after.is-gliding .before-after-handle {
        transition: transform 0.3s var(--transition-timing-function);
    }
}

@media only screen and (min-width: 768px) {
    .before-after,
    .before-after > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: 1fr 1fr;
    }

    .before-after .before-after-label {
        top: 16px;
        left: 16px;
    }

    html.js .before-after .before-after-after .before-after-label {
        right: 16px;
    }
}