/**
 * Canpaplas · Componentes - estilos base
 *
 * Los colores, tamaños y espaciados configurables los inyecta Creative
 * Elements como CSS propio del elemento; aquí solo va la estructura.
 */

/* ---------------------------------------------------------------------------
 * Carrusel: estructura
 * ------------------------------------------------------------------------ */

.cpp-carousel {
    position: relative;
}

/**
 * Sin JavaScript el carrusel se recorre con el scroll nativo del navegador,
 * así que el contenido nunca queda inaccesible. Cuando Embla toma el control
 * añade .cpp-carousel--ready y entran en juego sus propios controles.
 */
.cpp-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.cpp-carousel--ready .cpp-carousel__viewport {
    overflow: hidden;
    scroll-snap-type: none;
}

/**
 * La separación va con `gap`, no con margen negativo más relleno. Es
 * importante: Embla mide las diapositivas para decidir cuántas caben, y con
 * el relleno la suma se pasaba del ancho visible justo por el valor de la
 * separación, así que agrupaba una menos de las que se veían y al avanzar
 * seguía asomando la anterior.
 *
 * --cpp-gap y --cpp-per-view las escribe el editor desde los controles
 * (también por dispositivo), y así el ancho de diapositiva descuenta las
 * separaciones: N diapositivas + (N-1) separaciones = ancho visible exacto.
 */
.cpp-carousel__container {
    display: flex;
    /* El desplazamiento vertical de la página sigue funcionando sobre el carrusel */
    touch-action: pan-y pinch-zoom;
    gap: var(--cpp-gap, 16px);
    backface-visibility: hidden;
}

.cpp-carousel__slide {
    position: relative;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
}

.cpp-carousel--fixed .cpp-carousel__slide {
    flex: 0 0 calc(
        (100% - (var(--cpp-per-view, 1) - 1) * var(--cpp-gap, 16px))
        / var(--cpp-per-view, 1)
    );
}

.cpp-carousel__inner {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.cpp-carousel__media {
    display: block;
    position: relative;
    flex: 0 0 auto;
    min-height: 0;
}

.cpp-carousel__media img {
    display: block;
}

/* ---------------------------------------------------------------------------
 * Ajuste de la imagen: los tres modos son excluyentes
 * ------------------------------------------------------------------------ */

/**
 * Completa: la imagen se ve entera y su proporción marca el alto. No hay
 * recorte ni alto impuesto, así que tampoco hacen falta cálculos. El
 * contenedor toma el alto de la diapositiva más alta y todas se alinean
 * arriba.
 */
.cpp-carousel--fit-full .cpp-carousel__container {
    align-items: flex-start;
}

.cpp-carousel--fit-full .cpp-carousel__media img {
    width: 100%;
    height: auto;
}

/* Recortada o encajada: manda el alto del control (--cpp-height) */
.cpp-carousel--fit-cover .cpp-carousel__media,
.cpp-carousel--fit-contain .cpp-carousel__media {
    height: var(--cpp-height, 320px);
}

.cpp-carousel--fit-cover .cpp-carousel__media img,
.cpp-carousel--fit-contain .cpp-carousel__media img {
    width: 100%;
    height: 100%;
}

.cpp-carousel--fit-cover .cpp-carousel__media img {
    object-fit: cover;
}

.cpp-carousel--fit-contain .cpp-carousel__media img {
    object-fit: contain;
}

/**
 * Ancho automático: cada diapositiva ocupa lo que ocupe su imagen. Necesita
 * la proporción real del fichero (--cpp-ratio, que calcula el PHP), porque
 * si no el navegador dimensiona la diapositiva con el tamaño intrínseco del
 * JPG en vez de con el ancho de la imagen ya escalada, y la caja sale mucho
 * más ancha que lo que se ve.
 */
.cpp-carousel--auto .cpp-carousel__slide {
    flex: 0 0 auto;
    max-width: 100%;
}

.cpp-carousel--auto.cpp-carousel--fit-cover .cpp-carousel__media,
.cpp-carousel--auto.cpp-carousel--fit-contain .cpp-carousel__media {
    width: auto;
    aspect-ratio: var(--cpp-ratio, auto);
}

.cpp-carousel--auto.cpp-carousel--fit-cover .cpp-carousel__media img,
.cpp-carousel--auto.cpp-carousel--fit-contain .cpp-carousel__media img {
    width: auto;
    max-width: none;
}

/* ---------------------------------------------------------------------------
 * Texto sobre la imagen
 * ------------------------------------------------------------------------ */

.cpp-carousel__caption,
.cpp-carousel__title,
.cpp-carousel__text {
    display: block;
}

.cpp-carousel__title {
    font-weight: 600;
}

/**
 * El texto flota en su propia caja, ajustada a su ancho y alto. La capa
 * exterior (.cpp-carousel__caption) solo sirve para colocarla, y como la
 * caja es inline-block, el control de alineación del editor (que escribe
 * text-align en esa capa) la mueve a izquierda, centro o derecha.
 *
 * Fondo corporativo semitransparente (#d75537 al 90 %). Con texto blanco
 * encima da 4,8:1 sobre una imagen oscura y 3,5:1 sobre una clara: vale para
 * el título (negrita, tamaño grande), corto para texto pequeño. Si hace falta
 * asegurarlo, «Fondo del texto» admite #c94f33 opaco, que da 4,5:1.
 */
.cpp-carousel__caption-box {
    display: inline-block;
    max-width: 100%;
    padding: 12px 16px;
    color: #fff;
    background-color: rgba(215, 85, 55, .9);
}

.cpp-carousel--caption-bottom .cpp-carousel__caption,
.cpp-carousel--caption-center .cpp-carousel__caption {
    position: absolute;
    left: 0;
    right: 0;
    /* Separado del borde, para que se lea como una caja flotante */
    padding: 0 16px;
    /* La capa no debe tapar el enlace ni el arrastre */
    pointer-events: none;
}

.cpp-carousel--caption-bottom .cpp-carousel__caption {
    bottom: 16px;
}

.cpp-carousel--caption-center .cpp-carousel__caption {
    top: 50%;
    transform: translateY(-50%);
}

.cpp-carousel--caption-below .cpp-carousel__caption {
    padding: 12px 0 0;
}

/* ---------------------------------------------------------------------------
 * Controles: ocultos hasta que Embla los hace operativos
 * ------------------------------------------------------------------------ */

.cpp-carousel__arrow,
.cpp-carousel__dots {
    display: none;
}

.cpp-carousel--ready .cpp-carousel__arrow,
.cpp-carousel--ready .cpp-carousel__dots {
    display: flex;
}

/* Sin nada que desplazar, los controles desaparecen (los oculta el JS) */
.cpp-carousel--ready .cpp-carousel__arrow[hidden],
.cpp-carousel--ready .cpp-carousel__dots[hidden] {
    display: none;
}

/* Flechas */

.cpp-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    /* 44 px = tamaño mínimo de objetivo recomendado (WCAG 2.2 AA) */
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    cursor: pointer;
    z-index: 2;
}

.cpp-carousel__arrow--prev {
    left: 8px;
}

.cpp-carousel__arrow--next {
    right: 8px;
}

.cpp-carousel__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.cpp-carousel__arrow:not([disabled]):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
}

/* Puntos */

.cpp-carousel__dots {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
}

.cpp-carousel__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.cpp-carousel__dot::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #c4c4c4;
    transition: transform .2s ease;
}

.cpp-carousel__dot[aria-current="true"]::before {
    background-color: #1a1a1a;
    transform: scale(1.3);
}

/* ---------------------------------------------------------------------------
 * Foco y movimiento
 * ------------------------------------------------------------------------ */

.cpp-carousel__arrow:focus-visible,
.cpp-carousel__dot:focus-visible,
.cpp-carousel__inner:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cpp-carousel__dot::before {
        transition: none;
    }
}