/* 24-before-after.css — Before/After comparison cards (gallery page) */

.ba-section__header{text-align:center;margin-bottom:var(--space-10);}
.ba-section__sub{max-width:var(--container-narrow);margin-inline:auto;margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-base);line-height:var(--leading-normal);}

.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}

/* ---- card shell ---- */
.ba-card{position:relative;overflow:hidden;border-radius:var(--radius-md);cursor:col-resize;background:var(--color-bg-alt);touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);}
.ba-card:hover{box-shadow:var(--shadow-card-hover);}

/* ---- images ---- */
/* After image sits in normal flow → sets the card's natural height */
.ba-card__after{display:block;width:100%;height:auto;pointer-events:none;}
/* Before image overlays it and gets clipped */
.ba-card__before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;clip-path:inset(0 50% 0 0);}

/* ---- placeholder gradient (shown when no real images are loaded) ---- */
.ba-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-muted);letter-spacing:var(--tracking-wide);}
.ba-card__placeholder--after{background:linear-gradient(135deg,var(--color-bg-alt) 0%,#dde3e8 100%);}
.ba-card__placeholder--before{background:linear-gradient(135deg,#c4cdd5 0%,#a8b5c0 100%);clip-path:inset(0 50% 0 0);}

/* ---- divider handle ---- */
.ba-card__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--color-bg-white);transform:translateX(-50%);z-index:3;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,0.25);}
.ba-card__handle::after{content:'';position:absolute;top:50%;left:50%;width:36px;height:36px;transform:translate(-50%,-50%);border-radius:var(--radius-full);background:var(--color-bg-white);box-shadow:0 2px 8px rgba(0,0,0,0.20);pointer-events:auto;cursor:col-resize;}
.ba-card__handle-arrows{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:4px;pointer-events:none;color:var(--color-action-deep);}
.ba-card__handle-arrows svg{width:10px;height:10px;fill:currentColor;}

/* ---- labels ---- */
.ba-card__label{position:absolute;bottom:var(--space-3);z-index:2;padding:var(--space-1) var(--space-3);font-family:var(--font-heading);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-full);pointer-events:none;}
.ba-card__label--before{left:var(--space-3);background:rgba(0,0,0,0.55);color:var(--color-text-inverse);}
.ba-card__label--after{right:var(--space-3);background:var(--color-action-deep);color:var(--color-text-inverse);}

/* ---- caption beneath card ---- */
.ba-card__caption{display:block;margin-top:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-muted);text-align:center;}

/* ---- responsive ---- */
@media(max-width:991px){.ba-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.ba-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
/* ── Added for Boulder build ──────────────────────────────────────────────
   The "after" image sits in normal flow and sets each card's height, so a row
   of cards built from images with different aspect ratios ends up ragged.
   Locking the card to 4:3 keeps the grid even regardless of source dimensions.
   Remove this block if you'd rather cards follow their image's native ratio. */
.ba-card{aspect-ratio:4/3;}
.ba-card__after{height:100%;object-fit:cover;}