/* ============================================================
   Módulo Projects — Feature "Antes y Después"
   Se carga condicionalmente solo cuando el proyecto tiene pares.
   ============================================================ */

.project-before-after { margin-top: 1rem; }

.project-ba-title {
    font-size: 1.6rem;
    letter-spacing: -.01em;
}

.ba-pair { margin: 0 0 2rem; }

.ba-slider {
    --divider-width: 3px;
    --divider-color: #ffffff;
    --divider-shadow: 0 0 8px rgba(0, 0, 0, .35);
    --default-handle-color: #ffffff;
    --default-handle-opacity: 1;
    --default-handle-width: 48px;
    display: block;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    background: #0f1923;
}

/*
 El aspect-ratio va en las imágenes slotted (no en el host) porque
 el shadow DOM del web component tiene `.first` con height:100% y
 `.second` sin height. Si el aspect-ratio lo imponemos en el host,
 solo .first respeta la altura y .second queda al tamaño natural →
 la imagen "después" aparece más corta y se ve fondo oscuro abajo.
 Aplicando aspect-ratio a las imgs, ambas slotted tienen la misma
 altura computada y el host crece para contenerlas.
*/
.ba-slider img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* Fallback sin JS o antes de que el web component se defina */
.ba-slider:not(:defined) {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

.ba-slider:not(:defined) img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin-bottom: .5rem;
    border-radius: .5rem;
}

.ba-pair figcaption {
    font-size: .95rem;
    color: #6c757d;
    margin-top: .5rem;
}

@media (max-width: 576px) {
    .ba-slider img { aspect-ratio: 4 / 5; }
    .project-ba-title { font-size: 1.35rem; }
}