/*
** swipe-style.css
** Estilos para el sistema ymk-swipe (Slick via clases preset).
** Las clases ymk-* son leídas por ymk-swipe.js para configurar Slick.
** Este archivo define el layout base y los ajustes visuales del slider.
*/

/* ── Clases preset — declaradas para que el editor no las descarte ────────── */

.ymk-swipe,
.ymk-cols-2, .ymk-cols-3, .ymk-cols-4,
.ymk-tab-2, .ymk-tab-3,
.ymk-mob-2,
.ymk-arrows, .ymk-dots,
.ymk-autoplay, .ymk-infinite,
.ymk-fade, .ymk-fakescroll {}

/* ── Correcciones base de Slick en bloques WP ─────────────────────────────── */

.ymk-swipe .slick-list {
    overflow: hidden;
}

.ymk-swipe .slick-track {
    display: flex;
    align-items: stretch;
}

.ymk-swipe .slick-slide {
    height: auto;
}

/* Query Loop: los li del post-template son los slides */
.ymk-swipe .wp-block-post-template.slick-initialized {
    display: block; /* Slick necesita block, no grid */
}

.ymk-swipe .wp-block-post-template .slick-slide > * {
    height: 100%;
}

/* ── Overflow visible para sliders con cards que sobresalen ──────────────── */

.ymk-overflow .slick-list {
    overflow: visible;
}

/* ── Flechas de navegación ────────────────────────────────────────────────── */

.ymk-swipe .slick-prev,
.ymk-swipe .slick-next {
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--wp--preset--color--background, #fff);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s;
}

.ymk-swipe .slick-prev:hover,
.ymk-swipe .slick-next:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ymk-swipe .slick-prev { left: -1.25rem; }
.ymk-swipe .slick-next { right: -1.25rem; }

.ymk-swipe .slick-prev::before,
.ymk-swipe .slick-next::before {
    color: var(--wp--preset--color--contrast, #000);
    font-size: 1.2rem;
    opacity: 1;
}

/* ── Dots de paginación ───────────────────────────────────────────────────── */

.ymk-swipe .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 1rem;
    list-style: none;
    padding: 0;
    display: flex !important;
    justify-content: center;
    gap: 0.4rem;
}

.ymk-swipe .slick-dots li button::before {
    background: var(--wp--preset--color--contrast, #000);
    opacity: 0.3;
}

.ymk-swipe .slick-dots li.slick-active button::before {
    opacity: 1;
}

/* ── Fakescroll ───────────────────────────────────────────────────────────── */

.ymk-fakescroll .slick-fake-scrollbar {
    margin-top: 1rem;
}