/*
 * Virgo CMS - Before/After Image module styles.
 *
 * Draggable comparison slider. Each pair is a stage with two stacked images
 * (before = base layer, after = overlay clipped by the handle position) plus a
 * drag handle. The stage always pins a fixed image height (--ba-height) and
 * derives its width from the aspect ratio (--ba-aspect), mirroring the coverflow
 * carousel layout model. Orientation (horizontal/vertical) and hover-vs-drag
 * mode are modifier classes on the root. RTL mirrors via logical properties
 * (inset-inline-start) — no JS branching needed.
 *
 * Runtime values come from CSS custom properties set inline by the renderer
 * (the only sanctioned inline-style use): --ba-initial, --ba-handle-width,
 * --ba-radius, --ba-height, --ba-aspect.
 */

.before-after-image {
    --ba-initial: 50%;
    --ba-handle-width: 4px;
    --ba-radius: 8px;
    --ba-height: 400px;
    --ba-aspect: 1 / 1;

    box-sizing: border-box;
    width: 100%;
}

.before-after-image *,
.before-after-image *::before,
.before-after-image *::after {
    box-sizing: border-box;
}

.before-after-image__pair {
    margin: 0;
    position: relative;
    width: 100%;
}

.before-after-image__stage {
    position: relative;
    /* Fixed-height stage. The height is set by --ba-height and the width is
       derived from the admin aspect_ratio via the CSS `aspect-ratio` property
       (mirrors the coverflow carousel layout model). */
    height: var(--ba-height);
    aspect-ratio: var(--ba-aspect);
    max-width: 100%;
    border-radius: var(--ba-radius);
    overflow: hidden;
    /* Stage loading surface. Token-first (Living Archive palette carries the
       correct dark-mode value), Bootstrap var as fallback when the token set
       is absent. */
    background-color: var(--surface-sunken, var(--bs-tertiary-bg, #f8f9fa));
    /* Interaction disabled until both images decode (.is-ready enables it). */
    pointer-events: none;
    touch-action: none;
    user-select: none;
}

.before-after-image__stage.is-ready {
    pointer-events: auto;
}

/* Both images cover-fill the fixed-height stage box. */
.before-after-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Before image: base layer. */
.before-after-image__img--before {
    z-index: 1;
}

/* After image: overlay inside its wrapper (clipped). */
.before-after-image__img--after {
    z-index: 1;
}

/* The after-image wrapper is clipped by the current handle position. Its image
   is absolutely sized to the stage so the clip reveals/hides predictably. */
.before-after-image__after-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

.before-after-image__handle {
    position: absolute;
    z-index: 3;
    /* horizontal: full-height vertical bar at inset-inline-start; vertical: full-width horizontal bar at top */
    width: var(--ba-handle-width);
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border: 0;
    padding: 0;
    margin: 0;
    /* The divider bar sits over arbitrary imagery. A translucent fill (not a
       flat solid) lets a hint of the image through while the border + shadow
       carry the contrast, mirroring the carousel nav controls. The fill tracks
       the theme so the bar belongs to the page in dark mode rather than
       punching through it as a bright white stripe. */
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 6px rgba(0, 0, 0, 0.25);
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode: dark translucent face so the divider reads as part of the page,
   not a bright mark. The chevrons invert to a light tint (see grip rules). */
[data-bs-theme="dark"] .before-after-image__handle {
    background-color: rgba(30, 30, 30, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 6px rgba(0, 0, 0, 0.45);
}

/* Visible focus ring on the handle button (it is a real focusable control).
   Uses the brand primary so keyboard users get the same on-brand indicator as
   every other interactive element. outline-offset keeps the ring off the bar. */
.before-after-image__handle:focus-visible {
    outline: 2px solid var(--primary-color, #1d6b5e);
    outline-offset: 2px;
}

.before-after-image--vertical .before-after-image__handle {
    width: 100%;
    height: var(--ba-handle-width);
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    cursor: ns-resize;
}

/* Hover mode keeps the handle visible as a divider indicator (the cursor
   position drives the slider, not the handle). It only stops being a drag
   target — pointer-events is disabled so it never intercepts pointermove.
   When the handle width is 0 the divider is hidden entirely (see below). */
.before-after-image--hover .before-after-image__handle {
    pointer-events: none;
    cursor: default;
}

/* A 0px handle hides the divider bar AND its grip completely — hover or drag
   mode alike. The slider still works (drag mode: stage pointerdown jump; hover
   mode: pointermove), there is simply no visible handle. */
.before-after-image--handle-hidden .before-after-image__handle {
    display: none;
}

/* "Tutma Yeri" off: hide only the round grip knob (and its chevrons), keeping
   the thin divider bar visible as a plain separator line. The slider still
   works exactly the same. */
.before-after-image--no-grip .before-after-image__handle-grip {
    display: none;
}

.before-after-image__handle-grip {
    /* Center grip (round knob). Sized 20% larger (28px -> 34px). Translucent
       face + border/shadow carry the contrast over arbitrary imagery while
       letting the theme track through (dark face in dark mode, like the handle
       bar and carousel nav). */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* The handle bar is only --ba-handle-width thin (4px default) yet hosts
       this 34px knob as a flex child. Flex items shrink by default, so without
       this the knob gets squeezed into an oval along the bar's thin axis. Keep
       it circular regardless of the bar thickness. */
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[data-bs-theme="dark"] .before-after-image__handle-grip {
    background-color: rgba(30, 30, 30, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.before-after-image__handle-grip::before,
.before-after-image__handle-grip::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Two small chevrons pointing left/right on the grip. They take the theme
   text color so they invert with the grip face — dark on the light knob,
   light on the dark knob. */
.before-after-image__handle-grip::before {
    border-width: 5px 7px 5px 0;
    border-color: transparent var(--text-ink, #1a2421) transparent transparent;
    margin-inline-end: 3px;
}

.before-after-image__handle-grip::after {
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--text-ink, #1a2421);
    margin-inline-start: 3px;
}

.before-after-image--vertical .before-after-image__handle-grip::before {
    border-width: 7px 5px 0 5px;
    border-color: var(--text-ink, #1a2421) transparent transparent transparent;
}

.before-after-image--vertical .before-after-image__handle-grip::after {
    border-width: 0 5px 7px 5px;
    border-color: transparent transparent var(--text-ink, #1a2421) transparent;
}

/* Dark mode: invert the chevrons to a light tint matching the dark grip face. */
[data-bs-theme="dark"] .before-after-image__handle-grip::before {
    border-color: transparent var(--text-color, #d7dedb) transparent transparent;
}

[data-bs-theme="dark"] .before-after-image__handle-grip::after {
    border-color: transparent transparent transparent var(--text-color, #d7dedb);
}

[data-bs-theme="dark"] .before-after-image--vertical .before-after-image__handle-grip::before {
    border-color: var(--text-color, #d7dedb) transparent transparent transparent;
}

[data-bs-theme="dark"] .before-after-image--vertical .before-after-image__handle-grip::after {
    border-color: transparent transparent var(--text-color, #d7dedb) transparent;
}

/*
 * Caption (pair title + description body).
 *
 * The renderer emits the caption in two different DOM positions depending on
 * placement, so the band never overflows the image:
 *   - --below: after the stage, flows under the image (plain block, title
 *     emphasized, desc in the secondary text color).
 *   - --overlay: INSIDE the stage, so the absolute bottom band is clipped to
 *     the image bounds by the stage's overflow:hidden. Mirrors the photo-
 *     carousel caption one-to-one (uppercase bold white title + softer desc).
 *     pointer-events:none lets the band sit over the image without blocking the
 *     slider drag.
 */
.before-after-image__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Below (off-image): flows under the stage. */
.before-after-image__caption--below {
    margin-block-start: 0.5rem;
}

.before-after-image__caption--below .before-after-image__caption-title {
    font-size: var(--fs-body, 1rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color, var(--bs-body-color, #212529));
}

.before-after-image__caption--below .before-after-image__caption-desc {
    font-size: var(--fs-meta, 0.75rem);
    line-height: 1.4;
    color: var(--text-muted, var(--bs-secondary-color, #6c757d));
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Overlay (on-image): photo-carousel caption band, bire bir. */
.before-after-image__caption--overlay {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    color: #ffffff;
    /* pointer-events:none lets the band sit over the image without blocking
       the slider drag; the caption holds no links here so nothing needs to be
       re-enabled. */
    pointer-events: none;
}

.before-after-image__caption--overlay .before-after-image__caption-title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.before-after-image__caption--overlay .before-after-image__caption-desc {
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 15px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Drag mode: the whole stage is draggable (any pointer down starts a drag),
   so show a grab cursor across it; the handle keeps its resize cursor. Hover
   mode drives the slider by pointer position, so no affordance cursor there. */
.before-after-image:not(.before-after-image--hover) .before-after-image__stage.is-ready {
    cursor: grab;
}

/* Drag visual cue. */
.before-after-image__pair.is-dragging .before-after-image__stage {
    cursor: grabbing;
}

/* Overlay caption band responsive tightening (photo-carousel pattern). */
@media (max-width: 767px) {
    .before-after-image__caption--overlay {
        padding: 30px 12px 12px;
    }

    .before-after-image__caption--overlay .before-after-image__caption-title {
        font-size: var(--fs-subtitle, 0.9rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .before-after-image__label {
        transition: none;
    }
}

/* Hover labels (optional, per pair). Rendered only when "Etiketleri Göster" is
   on. Each label sits at a corner of the stage, hidden until the stage is
   hovered, then fades in. pointer-events stays none so a label never steals the
   slider drag. Logical insets keep the start/end edge correct under RTL. */
.before-after-image__label {
    position: absolute;
    top: 8px;
    z-index: 4;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--fs-meta, 0.75rem);
    line-height: 1.2;
    border-radius: var(--radius-pill, 999px);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.before-after-image__label--before {
    inset-inline-start: 8px;
}

.before-after-image__label--after {
    inset-inline-end: 8px;
}

.before-after-image__stage:hover .before-after-image__label {
    opacity: 1;
}

/* While dragging, the labels fade back out so they never obscure the image
   being compared. The :hover state persists during a drag (the pointer is
   still over the stage), so this must override it — placed after the hover
   rule with equal specificity to win by source order. */
.before-after-image__pair.is-dragging .before-after-image__label {
    opacity: 0;
}