/* =========================================================
   Before & After — showcase video + draggable wipe comparison.
   Ports Vercel src/components/sections/BeforeAfterSlider.tsx (grid)
   and the Mp4Player chrome that sits above it. Uses the shared theme
   design tokens from style.css (do not redefine them here).
   ========================================================= */

/* Showcase video wrapper — capped width, centered, breathing room
   before the comparison grid (Vercel: mx-auto mb-10 max-w-4xl). */
.ba-video {
    max-width: 56rem; /* 896px ≈ Tailwind max-w-4xl */
    margin: 0 auto 2.5rem;
}

/* ---------- Comparison grid ---------- */
.ba-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .ba-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ba-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Card ---------- */
.ba-card {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem; /* rounded-2xl */
    background: var(--twoa-dark-deep);
    /* ring-1 ring-border + shadow-lg (Vercel parity) */
    box-shadow:
        inset 0 0 0 1px var(--color-border),
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s var(--ease-out-cubic), transform 0.3s var(--ease-out-cubic);
}

.ba-card:hover {
    /* Subtle lift + deepened shadow (shadow-xl parity) */
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 1px var(--color-border),
        0 20px 25px -5px rgba(0, 0, 0, 0.18),
        0 8px 10px -6px rgba(0, 0, 0, 0.15);
}

.ba-card--hidden { display: none; }

/* In the tablet band (2-column grid, below the lg/desktop breakpoint) surface
   the 4th card so the block reads as a clean 2 columns × 2 rows. On desktop it
   stays part of the hidden set (tidy row of 3, Vercel parity); on phones the
   single column keeps the default first row. When "Show More" is expanded the
   card already has .ba-card--hidden removed, so it shows everywhere. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .ba-card--lg-extra.ba-card--hidden { display: block; }
}

.ba-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
}

.ba-after,
.ba-before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.ba-before-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* clip-path set inline + by JS: inset(0 <100-pos>% 0 0) */
}

/* ---------- Corner tags ---------- */
.ba-tag {
    position: absolute;
    top: 0.75rem;
    z-index: 2;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    pointer-events: none;
}

.ba-tag--before {
    left: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ba-tag--after {
    right: 0.75rem;
    /* bg-orange/90 */
    background: rgba(235, 93, 29, 0.9);
}

/* ---------- Divider line (JS sets left:%) ---------- */
.ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* ---------- Round grabber handle (also the a11y slider) ---------- */
.ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #fff;
    color: var(--twoa-dark);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
    cursor: ew-resize;
    pointer-events: auto;
    transition: transform 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic);
}

.ba-card:hover .ba-handle { transform: translate(-50%, -50%) scale(1.05); }

.ba-handle:hover { box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.1); }

.ba-handle:focus-visible {
    outline: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--twoa-orange);
}

.ba-handle svg { display: block; }

/* ---------- Caption ---------- */
.ba-label {
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
    color: #fff;
}

/* ---------- Show More / Less toggle ---------- */
.ba-toggle { min-width: 12rem; }

/* ---------- Reduced motion: kill the hover lift transform ---------- */
@media (prefers-reduced-motion: reduce) {
    .ba-card,
    .ba-card:hover { transform: none; }
}