/* carousel.css - genérico para todos los carousels */

/* Base container */
.multi-carousel-container {
    cursor: grab;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

/* dragging state */
.multi-carousel-container.dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

/* viewport and track */
.multi-carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.multi-carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* items and clones */
.multi-carousel-item,
.multi-carousel-track .clone {
    box-sizing: border-box;
    flex: 0 0 auto;
    /* width se calcula en JS o por CSS en desktop */
    position: relative;
}

/* default item width: fallback to 25% (4 items) */
.multi-carousel-item {
    flex-basis: 25%;
}

/* controls (prev/next) */
.multi-carousel-control {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
    width: 40px;
    z-index: 10;
}

.multi-carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.multi-carousel-control.prev {
    left: 10px;
}

.multi-carousel-control.next {
    right: 10px;
}

/* image container */
.img-container {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.img-container img {
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
    width: 100%;
    -webkit-user-drag: none;
    transition: transform 0.3s ease;
    display: block;
}

.img-container:hover img {
    transform: translateZ(0) scale(1.02);
}

/* item-number helpers (posicionamiento garantizado) */
.item-number {
    align-items: center;
    display: inline-flex;
    font-size: 1.6rem;
    font-weight: 900;
    left: 2rem;
    position: absolute;
    bottom: 1rem;
    width: auto;
    z-index: 2;
    isolation: isolate;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.6rem;
}

.item-number-sub {
    align-items: center;
    display: inline-flex;
    font-size: 1.0rem;
    font-weight: 300;
    left: 2rem;
    position: absolute;
    bottom: 3.2rem;
    width: auto;
    z-index: 2;
    isolation: isolate;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.0rem;
}

/* Per-type defaults: define min visible via CSS variable (overridable) */
.carousel-1 {
    --min-visible: 6;
}

/* imágenes 500x930 y 760x950 */
.carousel-2,
.carousel-3 {
    --min-visible: 4;
}

/* imágenes 640x640 */

/* Desktop: calcular ancho por min-visible si no lo gestiona JS */
@media (min-width: 768px) {
    /* .multi-carousel-container {
        si no se setea por JS, el navegador usará esta regla 
    } */

    .multi-carousel-container[data-min-visible] .multi-carousel-item {
        width: calc(100% / var(--min-visible));
        flex: 0 0 calc(100% / var(--min-visible));
    }

    /* fallback: si no hay data-min-visible, usar la variable CSS del tipo */
    .multi-carousel-container.carousel-1 .multi-carousel-item {
        width: calc(100% / var(--min-visible));
        flex: 0 0 calc(100% / var(--min-visible));
    }

    .multi-carousel-container.carousel-2 .multi-carousel-item {
        width: calc(100% / var(--min-visible));
        flex: 0 0 calc(100% / var(--min-visible));
    }

    .multi-carousel-container.carousel-3 .multi-carousel-item {
        width: calc(100% / var(--min-visible));
        flex: 0 0 calc(100% / var(--min-visible));
    }
}

/* Mobile: siempre 1 item visible */
@media (max-width: 767.98px) {

    .multi-carousel-item,
    .multi-carousel-track .clone {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Accessibility / focus */
.multi-carousel-control:focus {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* Small utility tweaks */
.multi-carousel-container .img-container-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 1.1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
}

.multi-carousel-container .item-title,
.multi-carousel-container,
.multi-carousel-container .item-volanta {
    font-size: 1.4rem;
    z-index: 2;
    isolation: isolate;
    color: white;
    text-shadow: 0px 0px 5px rgb(0, 0, 0, 5);
    line-height: 1.7rem !important;
    text-transform: uppercase;
}

.item-subtitle {
    font-size: 1.25rem;
    z-index: 2;
    isolation: isolate;
    color: white;
    text-shadow: 0px 0px 5px rgb(0, 0, 0, 5);
    line-height: 1.7rem !important;
    text-transform: uppercase;

}

.multi-carousel-container .item-title {
    font-weight: 700;
}

.multi-carousel-container .item-subtitle,
.multi-carousel-container .item-volanta {
    font-weight: 300;
}

/* If you want to visually hide controls on touch devices, uncomment:
@media (max-width: 767.98px) {
  .multi-carousel-control { display: none; }
}
*/

/* Optional: small transition tweak for smoother snapping */
.multi-carousel-track {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure images don't cause layout shift: set a default aspect ratio per carousel type */
/* carousel-1: 500x930 ~ aspect-ratio: 500/930 */
.carousel-1 .img-container {
    aspect-ratio: 500 / 930;
}

/* carousel-2: 760x950 */
.carousel-2 .img-container {
    aspect-ratio: 760 / 950;
}

/* carousel-3: 640x640 */
.carousel-3 .img-container {
    aspect-ratio: 1 / 1;
}

/* If browser doesn't support aspect-ratio, you can fallback with padding-top trick per type */
/* .carousel-1 .img-container { padding-top: calc(930 / 500 * 100%); } etc. */