/*
 * 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;
    background-color: 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;
    background-color: var(--bs-body-bg, 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;
}

.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). Uses the
       theme background so the grip tracks dark mode together with its
       chevron icons (which use --bs-body-color), keeping contrast in both
       themes. Falls back to white when the Bootstrap variable is absent. */
    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: var(--bs-body-bg, 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;
}

.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. */
.before-after-image__handle-grip::before {
    border-width: 5px 7px 5px 0;
    border-color: transparent var(--bs-body-color, #212529) transparent transparent;
    margin-inline-end: 3px;
}

.before-after-image__handle-grip::after {
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--bs-body-color, #212529);
    margin-inline-start: 3px;
}

.before-after-image--vertical .before-after-image__handle-grip::before {
    border-width: 7px 5px 0 5px;
    border-color: var(--bs-body-color, #212529) transparent transparent transparent;
}

.before-after-image--vertical .before-after-image__handle-grip::after {
    border-width: 0 5px 7px 5px;
    border-color: transparent transparent var(--bs-body-color, #212529) 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: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-body-color, #212529);
}

.before-after-image__caption--below .before-after-image__caption-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: 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: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .before-after-image__handle,
    .before-after-image__after-wrap,
    .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: 0.8rem;
    line-height: 1.2;
    border-radius: 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;
}