/*
 * carousel.css — Mi Carousel
 *
 * Filosofía: este archivo controla SOLO el comportamiento del carousel
 * (layout, scroll, transiciones). El diseño visual (colores, tipografía,
 * bordes, sombras) lo heredan las tarjetas de tu tema.
 *
 * Para personalizar el carousel, buscá las secciones marcadas con 🎛️
 */


/* =====================================================================
   1. CONTENEDOR PRINCIPAL
   El Group block de WordPress al que le ponés la clase "mi-carousel"
   ===================================================================== */

.mi-carousel {
    position: relative;    /* necesario para posicionar las flechas de nav */
    overflow: hidden;      /* oculta las tarjetas que salen del área visible */
    /* 🎛️ Ajustá este padding si las flechas de navegación tapan el contenido */
    padding: 0 0 1rem 0;
}


/* =====================================================================
   2. TRACK (la cinta que se mueve)
   El JS crea este div automáticamente y mueve las tarjetas adentro.
   No deberías necesitar tocar esto, pero está comentado por si acaso.
   ===================================================================== */

.mi-carousel__track {
    display: flex;
    /* La transición controla la velocidad y curva del movimiento al navegar */
    /* 🎛️ Cambiá "0.4s ease" para ajustar velocidad: ej. "0.6s ease-in-out" */
    transition: transform 0.4s ease;

    /* Permite que el usuario arrastre sin seleccionar texto */
    user-select: none;
    -webkit-user-select: none;

    /* Cursor de "agarrar" para indicar que es arrastrable */
    cursor: grab;
}

/* Cuando el usuario está arrastrando */
.mi-carousel__track--dragging {
    cursor: grabbing;
    /* Desactivamos la transición mientras se arrastra para que siga al dedo */
    transition: none;
}


/* =====================================================================
   3. TARJETAS (los Group blocks hijos directos)
   La clave está en el width: usamos CSS custom properties para que
   el JS pueda controlar cuántas tarjetas se ven por pantalla.
   ===================================================================== */

.mi-carousel > .wp-block-group,           /* WordPress 6.x */
.mi-carousel > .wp-block-group.alignnone, /* variante con clase de alineación */
.mi-carousel__track > .wp-block-group {   /* después de que el JS mueve las tarjetas al track */

    /* 🎛️ CANTIDAD DE TARJETAS VISIBLES
       La variable --carousel-visible la setea el JS (default: 3.25)
       El 0.25 es el "peek" que muestra el borde de la 4ta tarjeta
       Podés cambiarlo directamente en carousel.js → CONFIG.visibleCards */
    flex: 0 0 calc(100% / var(--carousel-visible, 3.25));
    width: calc(100% / var(--carousel-visible, 3.25));

    /* 🎛️ Espacio entre tarjetas */
    padding: 0 0.5rem;
    box-sizing: border-box;
}


/* =====================================================================
   4. FLECHAS DE NAVEGACIÓN
   Si preferís no usar flechas y solo dejar touch/teclado, podés
   setear showArrows: false en carousel.js → CONFIG
   ===================================================================== */

.mi-carousel__btn {
    /* Posicionamiento sobre el carousel */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    /* Aspecto neutral — heredá colores del tema o cambiá acá */
    /* 🎛️ Personalizá el botón de navegación */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    /* Colores: usamos variables de Gutenberg si existen, sino fallback */
    background-color: var(--wp--preset--color--primary, rgba(0, 0, 0, 0.7));
    color: var(--wp--preset--color--background, #fff);

    /* Transición suave al hacer hover */
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.mi-carousel__btn:hover,
.mi-carousel__btn:focus-visible {
    opacity: 0.85;
    /* 🎛️ Color al hacer hover */
    background-color: var(--wp--preset--color--primary, rgba(0, 0, 0, 0.9));
    /* Foco visible para accesibilidad con teclado */
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Estado deshabilitado (cuando llegaste al principio o al final) */
.mi-carousel__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mi-carousel__btn--prev { left: 0.5rem; }
.mi-carousel__btn--next { right: 0.5rem; }

/* SVG de las flechas */
.mi-carousel__btn svg {
    width: 1.2rem;
    height: 1.2rem;
    pointer-events: none;
}


/* =====================================================================
   5. DOTS (puntitos indicadores de posición)
   Si no los querés, seteá showDots: false en carousel.js → CONFIG
   ===================================================================== */

.mi-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mi-carousel__dot {
    /* 🎛️ Tamaño y forma de los dots */
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;

    /* Dot inactivo */
    background-color: var(--wp--preset--color--primary, #ccc);
    opacity: 0.4;
}

.mi-carousel__dot--active {
    /* 🎛️ Color y tamaño del dot activo */
    opacity: 1;
    transform: scale(1.3);
}

/* Foco visible para accesibilidad */
.mi-carousel__dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* =====================================================================
   6. RESPONSIVE
   En tablet se muestran 2 tarjetas, en mobile 1 (+ peek)
   Estos breakpoints los podés ajustar en carousel.js → CONFIG.breakpoints
   ===================================================================== */

@media (max-width: 768px) {
    /* En tablet: 2 tarjetas + peek */
    .mi-carousel > .wp-block-group,
    .mi-carousel__track > .wp-block-group {
        flex: 0 0 calc(100% / var(--carousel-visible, 2.15));
        width: calc(100% / var(--carousel-visible, 2.15));
    }
}

@media (max-width: 480px) {
    /* En mobile: 1 tarjeta + peek */
    .mi-carousel > .wp-block-group,
    .mi-carousel__track > .wp-block-group {
        flex: 0 0 calc(100% / var(--carousel-visible, 1.1));
        width: calc(100% / var(--carousel-visible, 1.1));
    }

    /* Las flechas en mobile ocupan mucho espacio, las achicamos */
    .mi-carousel__btn {
        width: 2rem;
        height: 2rem;
    }
}


/* =====================================================================
   7. ACCESIBILIDAD — reducción de movimiento
   Si el sistema operativo del usuario tiene activado "reducir movimiento",
   desactivamos las animaciones (importante para personas con vestibular disorder)
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mi-carousel__track {
        transition: none;
    }
    .mi-carousel__btn,
    .mi-carousel__dot {
        transition: none;
    }
}



/** TARJETAS */

/* .mi-carousel .tarjeta {
    border: 1px solid red;
} */

.mi-carousel .tarjeta .tarjeta-inner{
    background-color: white;
    min-height: 100%;
    padding: 1rem;
    border: 1px solid var(--wp--preset--color--contrast);
}

.mi-carousel .tarjeta .tarjeta-inner p {
    font-size: 1rem;
    color: var(--wp--preset--color--contrast);
}