/**
 * ILISB — capa de presentación sobre Bootstrap 5 / Bootswatch spacelab
 *
 * Cargar DESPUÉS del CSS de Bootstrap.
 * Solo reglas que Bootstrap no cubre. Cada bloque cita punto ticket (§sección.subpunto).
 * KB: knowledge/projects/ilisb/01-frontend/ilisb-assets.md
 *
 * Convenciones UX:
 *   - Hover solo puntero fino: (hover: hover) and (pointer: fine)
 *   - prefers-reduced-motion: reduce → sin transform/transition
 *   - Variables del tema: var(--bs-primary-rgb), var(--bs-box-shadow), …
 */

/* ==========================================================================
   §3.8 — Cursos: parrilla catálogo (hover lift + zoom imagen)
   ========================================================================== */

.curso-card-media {
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .curso-card {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .curso-card-img {
        transition: transform 0.25s ease;
    }

    .curso-card:hover,
    .curso-card:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--bs-box-shadow);
    }

    .curso-card:hover .curso-card-img,
    .curso-card:focus-within .curso-card-img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .curso-card,
    .curso-card-img {
        transition: none;
    }

    .curso-card:hover,
    .curso-card:focus-within,
    .curso-card:hover .curso-card-img,
    .curso-card:focus-within .curso-card-img {
        transform: none;
    }
}

/* ==========================================================================
   §3.10 — Cursos: filtros sidebar (hover sombreado primary)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .filtro-sidebar-link:not(.bg-primary):hover {
        background-color: rgba(var(--bs-primary-rgb), 0.35);
    }
}

/* Reutilizado en intranet sidebar (#intranet-sidebar) — misma clase filtro-sidebar-link */

/* ==========================================================================
   §1.3 — Marketing: bandas footer (desplazamiento 1 slot)
   ========================================================================== */

.footer-banda-viewport {
    position: relative;
    overflow: hidden;
}

.footer-banda-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transition: transform 0.55s ease;
}

.footer-banda-slot {
    flex: 0 0 var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    width: var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    max-width: var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    min-width: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.footer-banda-img {
    max-height: var(--footer-banda-img-max-h, 360px);
    object-fit: contain;
}

.footer-banda-slot-clone {
    pointer-events: none;
}

.footer-banda-control {
    width: 3rem;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .footer-banda-track {
        transition: none;
    }
}