/**
 * Card Slider Component Styles
 * Slider de tarjetas con paginacion dots y flechas de navegacion
 * Basado en Figma: node 1019-30780
 */

.menudos-card-slider {
    position: relative;
    width: 100%;
}

/* Splide Container */
.card-slider__splide {
    position: relative;
    width: 100%;
}

.card-slider__splide .splide__track {
    overflow: hidden;
    /* border-radius: 8px; */
}

/* Slide */
.card-slider__splide .splide__slide {
    padding: 0;
}

/* Card */
.card-slider__card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 400px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--wp--preset--color--secondary, #787878);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Overlay for images */
.card-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Content */
.card-slider__content {
    position: relative;
    z-index: 2;
    padding: 24px;
    color: var(--wp--preset--color--white, #FFFFFF);
}

.card-slider__title {
    margin: 0 0 8px 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.card-slider__description {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* Custom controls container - created by JS after Splide init */
.card-slider__controls-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(51, 51, 51, 0.7);
    z-index: 10;
    /* border-radius: 0 0 8px 8px; */
}

/* Splide default pagination - position inside slider */
.card-slider__splide .splide__pagination {
    position: absolute;
    bottom: 18px;
    right: 110px;
    left: auto;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-slider__splide:hover .splide__pagination {
    opacity: 1;
}

.card-slider__splide .splide__pagination__page {
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background-color: var(--wp--preset--color--secondary, #787878);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 1;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.card-slider__splide .splide__pagination__page.is-active {
    width: 33px;
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

/* Splide arrows - position inside slider */
.card-slider__splide .splide__arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    z-index: 11;
}

.card-slider__splide .splide__arrow {
    position: static;
    transform: none;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 16px;
    background-color: var(--wp--preset--color--white, #FFFFFF);
    border: none;
    cursor: pointer;
    box-shadow: 0px 14px 24px 0px rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s ease, transform 0.2s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

/* Hide default Splide arrow SVG */
.card-slider__splide .splide__arrow svg {
    display: none;
}

/* Prev arrow - CaretLeft icon */
.card-slider__splide .splide__arrow--prev {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.119 22.1309C18.2003 22.2122 18.2648 22.3087 18.3088 22.415C18.3528 22.5212 18.3754 22.635 18.3754 22.75C18.3754 22.865 18.3528 22.9788 18.3088 23.085C18.2648 23.1913 18.2003 23.2878 18.119 23.3691C18.0377 23.4504 17.9412 23.5148 17.835 23.5588C17.7288 23.6028 17.6149 23.6255 17.5 23.6255C17.385 23.6255 17.2711 23.6028 17.1649 23.5588C17.0587 23.5148 16.9622 23.4504 16.8809 23.3691L8.13089 14.6191C8.04954 14.5378 7.985 14.4413 7.94097 14.3351C7.89693 14.2288 7.87427 14.115 7.87427 14C7.87427 13.885 7.89693 13.7711 7.94097 13.6649C7.985 13.5587 8.04954 13.4622 8.13089 13.3809L16.8809 4.63094C17.0451 4.46675 17.2678 4.37451 17.5 4.37451C17.7321 4.37451 17.9548 4.46675 18.119 4.63094C18.2832 4.79512 18.3754 5.0178 18.3754 5.25C18.3754 5.48219 18.2832 5.70487 18.119 5.86906L9.98699 14L18.119 22.1309Z' fill='black'/%3E%3C/svg%3E");
}

/* Next arrow - CaretRight icon */
.card-slider__splide .splide__arrow--next {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0306 12.5306L9.53061 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5986 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03063C8.32863 4.8899 8.24957 4.69903 8.24957 4.50001C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82865 8.80097 3.74959 8.99999 3.74959C9.19901 3.74959 9.38988 3.82865 9.53061 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6218 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z' fill='black'/%3E%3C/svg%3E");
}

.card-slider__splide .splide__arrow:hover {
    background-color: var(--wp--preset--color--light-gray, #F5F5F5);
}

.card-slider__splide .splide__arrow:active {
    transform: scale(0.95);
}

.card-slider__splide .splide__arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Controls background bar */
.card-slider__splide::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    background-color: transparent;
    border-radius: 0 0 0 0;
    z-index: 10;
    pointer-events: none;
    transition: .3s background ease-in;
}
.card-slider__splide:hover.card-slider__splide::after{
   background-color: rgba(51, 51, 51, 0.30);
}

/* Hide franja when no controls */
.card-slider__splide--no-controls::after {
    display: none;
}

/* Expand / Lightbox Button */
.card-slider__expand-btn {
    position: absolute;
    bottom: 8px;
    left: 16px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 16px;
    background-color: var(--wp--preset--color--white, #FFFFFF);
    border: none;
    cursor: pointer;
    box-shadow: 0px 14px 24px 0px rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: #000;
}

.card-slider__expand-btn:hover {
    background-color: var(--wp--preset--color--light-gray, #F5F5F5);
}

.card-slider__expand-btn:active {
    transform: scale(0.95);
}

/* Lightbox Modal */
.card-slider__lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-slider__lightbox[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.card-slider__lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.card-slider__lightbox-content {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-slider__lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.2s ease;
}

.card-slider__lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Lightbox Splide */
.card-slider__lightbox-slider {
    width: 100%;
    height: 100%;
}

.card-slider__lightbox-slider .splide__track {
    height: 100%;
}

.card-slider__lightbox-slider .splide__list {
    height: 100%;
}

.card-slider__lightbox-slider .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.card-slider__lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-slider__lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Lightbox Arrows */
.card-slider__lightbox-slider .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.card-slider__lightbox-slider .splide__arrow:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.card-slider__lightbox-slider .splide__arrow svg {
    display: none;
}

/* Prev arrow - CaretLeft white */
.card-slider__lightbox-slider .splide__arrow--prev {
    left: -60px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.119 22.1309C18.2003 22.2122 18.2648 22.3087 18.3088 22.415C18.3528 22.5212 18.3754 22.635 18.3754 22.75C18.3754 22.865 18.3528 22.9788 18.3088 23.085C18.2648 23.1913 18.2003 23.2878 18.119 23.3691C18.0377 23.4504 17.9412 23.5148 17.835 23.5588C17.7288 23.6028 17.6149 23.6255 17.5 23.6255C17.385 23.6255 17.2711 23.6028 17.1649 23.5588C17.0587 23.5148 16.9622 23.4504 16.8809 23.3691L8.13089 14.6191C8.04954 14.5378 7.985 14.4413 7.94097 14.3351C7.89693 14.2288 7.87427 14.115 7.87427 14C7.87427 13.885 7.89693 13.7711 7.94097 13.6649C7.985 13.5587 8.04954 13.4622 8.13089 13.3809L16.8809 4.63094C17.0451 4.46675 17.2678 4.37451 17.5 4.37451C17.7321 4.37451 17.9548 4.46675 18.119 4.63094C18.2832 4.79512 18.3754 5.0178 18.3754 5.25C18.3754 5.48219 18.2832 5.70487 18.119 5.86906L9.98699 14L18.119 22.1309Z' fill='white'/%3E%3C/svg%3E");
}

/* Next arrow - CaretRight white */
.card-slider__lightbox-slider .splide__arrow--next {
    right: -60px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0306 12.5306L9.53061 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5986 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03063C8.32863 4.8899 8.24957 4.69903 8.24957 4.50001C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82865 8.80097 3.74959 8.99999 3.74959C9.19901 3.74959 9.38988 3.82865 9.53061 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6218 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z' fill='white'/%3E%3C/svg%3E");
}

/* Lightbox Counter */
.card-slider__lightbox-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

/* Empty State */
.card-slider__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: var(--wp--preset--color--light-gray, #F5F5F5);
    border-radius: 8px;
    padding: 24px;
    border: 1px dashed var(--wp--preset--color--secondary, #787878);
}

.card-slider__empty p {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 14px;
    color: var(--wp--preset--color--text-light, #787878);
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .card-slider__card {
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .card-slider__card {
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }

    .card-slider__title {
        font-size: 20px;
    }

    .card-slider__description {
        font-size: 14px;
    }

    .card-slider__splide .splide__pagination {
        right: 100px;
    }

    .card-slider__splide .splide__arrow {
        width: 32px;
        height: 32px;
        border-radius: 12px;
    }

    .card-slider__splide .splide__pagination__page.is-active {
        width: 24px;
    }

    .card-slider__expand-btn {
        width: 32px;
        height: 32px;
        border-radius: 12px;
    }

    .card-slider__expand-btn svg {
        width: 16px;
        height: 16px;
    }

    .card-slider__lightbox-content {
        width: 95vw;
        height: 70vh;
    }

    .card-slider__lightbox-slider .splide__arrow {
        width: 40px;
        height: 40px;
    }

    .card-slider__lightbox-slider .splide__arrow--prev {
        left: 8px;
    }

    .card-slider__lightbox-slider .splide__arrow--next {
        right: 8px;
    }

    .card-slider__lightbox-close {
        top: -44px;
        right: 0;
    }
}

@media (max-width: 480px) {
    .card-slider__card {
        min-height: 250px;
    }

    .card-slider__content {
        padding: 16px;
    }

    .card-slider__title {
        font-size: 18px;
    }
}

/* Editor Styles */
.is-admin .menudos-card-slider,
.block-editor-block-list__block .menudos-card-slider {
    min-height: 350px;
}

/* Full width alignment */
.menudos-card-slider.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.menudos-card-slider.alignwide {
    width: calc(100% + 100px);
    max-width: 1400px;
    margin-left: -50px;
    margin-right: -50px;
}