/* Casting Pumpún — Enfold Module CSS */

.cp-esp-wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.cp-esp-wrapper * {
    box-sizing: border-box;
}

/* Loading State */
.cp-esp-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Scroll behavior for carousel */
.cp-esp-carousel-track {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.cp-esp-carousel-track::-webkit-scrollbar {
    height: 6px;
}

.cp-esp-carousel-track::-webkit-scrollbar-track {
    background: transparent;
}

.cp-esp-carousel-track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.cp-esp-carousel-track::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Touch support for carousel */
@media (hover: none) and (pointer: coarse) {
    .cp-esp-carousel-track {
        scroll-snap-type: x mandatory;
    }

    .cp-esp-carousel-track .cp-esp-card {
        scroll-snap-align: start;
    }

    .cp-esp-carousel-nav {
        display: none;
    }
}

/* ── RESPONSIVE BREAKPOINTS ─────────────────────────────── */

/* Tablet landscape: 4-col → 3-col */
@media (max-width: 1100px) {
    .cp-esp-grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet portrait: collapse to 2-col */
@media (max-width: 860px) {
    .cp-esp-grid-4,
    .cp-esp-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .cp-esp-card {
        min-height: 180px !important;
    }
    .cp-esp-carousel-track .cp-esp-card {
        flex: 0 0 calc(50% - 10px);
        min-width: 220px;
    }
}

/* Large phones (481-600px): 2-col grids */
@media (max-width: 600px) {
    .cp-esp-grid-4,
    .cp-esp-grid-3,
    .cp-esp-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .cp-esp-card {
        min-height: 150px !important;
        border-radius: 8px;
    }
    .cp-esp-card-title {
        font-size: 14px !important;
    }
    .cp-esp-card-count {
        font-size: 12px !important;
    }
    .cp-esp-carousel-track .cp-esp-card {
        flex: 0 0 calc(70% - 8px);
        min-width: 200px;
    }
}

/* Small phones (≤480px): 2-col but smaller */
@media (max-width: 480px) {
    .cp-esp-grid-4,
    .cp-esp-grid-3,
    .cp-esp-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .cp-esp-container {
        padding: 0;
    }
    .cp-esp-card {
        min-height: 130px !important;
        border-radius: 6px;
    }
    .cp-esp-card-title {
        font-size: 13px !important;
        padding: 8px !important;
    }
    .cp-esp-carousel-track {
        gap: 8px !important;
    }
    .cp-esp-carousel-track .cp-esp-card {
        flex: 0 0 calc(80% - 4px);
        min-width: 180px;
        min-height: 130px !important;
    }
    /* Mostrar flechas también en móvil pequeño para carousel */
    .cp-esp-carousel-nav {
        display: flex !important;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* Hover: disable transform on touch devices */
@media (hover: none) {
    .cp-esp-card:active {
        transform: scale(0.97);
    }
    .cp-esp-hover-zoom .cp-esp-card-image {
        transform: none !important;
    }
    .cp-esp-hover-zoom:active .cp-esp-card-image {
        transform: scale(1.04) !important;
    }
}

/* Accessibility */
.cp-esp-card:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* No image fallback */
.cp-esp-card:not([style*="background-image"]) .cp-esp-card-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Animation for initial load */
.cp-esp-card {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cp-esp-card:nth-child(1) { animation-delay: 0.05s; }
.cp-esp-card:nth-child(2) { animation-delay: 0.1s; }
.cp-esp-card:nth-child(3) { animation-delay: 0.15s; }
.cp-esp-card:nth-child(4) { animation-delay: 0.2s; }
.cp-esp-card:nth-child(5) { animation-delay: 0.25s; }
.cp-esp-card:nth-child(6) { animation-delay: 0.3s; }
.cp-esp-card:nth-child(n+7) { animation-delay: 0.35s; }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .cp-esp-carousel-nav {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .cp-esp-carousel-nav:hover {
        background: rgba(255, 255, 255, 0.4);
    }
}

/* Print styles */
@media print {
    .cp-esp-carousel-nav {
        display: none;
    }

    .cp-esp-container {
        grid-template-columns: 1fr !important;
    }
}