/* =====================================================
   HOME V2 - MEJORAS DE RENDIMIENTO Y EXPERIENCIA
   Complementa home.css sin modificar la integración de AdSense.
===================================================== */

.educatic-home-shortcuts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: -16px 0 42px;
}

.educatic-home-shortcuts a {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    background: #fff;
    color: #26364a;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.educatic-home-shortcuts a:hover {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, .28);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.educatic-home-shortcuts i {
    font-size: 1.1rem;
    color: #0d6efd;
}

.educatic-home-shortcuts a:focus-visible,
.educatic-carousel-btn:focus-visible,
.educatic-course-card a:focus-visible,
.educatic-news-card a:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .35);
    outline-offset: 3px;
}

/* Reserva el espacio de las imágenes y reduce saltos de contenido. */
.educatic-course-image-wrap,
.educatic-news-image-wrap {
    aspect-ratio: 16 / 9;
}

.educatic-course-image,
.educatic-news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logo de plataforma: mantiene su proporción original sin deformarse. */
.educatic-platform-logo {
    width: 68px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 68px;
}

.educatic-platform-logo .udemy-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 68px;
    max-height: 28px;
    object-fit: contain;
    aspect-ratio: auto !important;
}

/*
   El navegador puede posponer el trabajo de renderizado de las secciones
   que todavía están fuera de pantalla. Esto mejora la carga percibida del Home.
*/
.educatic-home-section,
.educatic-learning-section,
.educatic-community-section {
    content-visibility: auto;
    contain-intrinsic-size: 760px;
    scroll-margin-top: 100px;
}

body.dark-mode .educatic-home-shortcuts a {
    background: #1f1f1f;
    border-color: #333;
    color: #e9ecef;
}

@media (max-width: 991px) {
    .educatic-home-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .educatic-home-shortcuts {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        margin-top: -8px;
        margin-bottom: 32px;
        padding: 2px 2px 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .educatic-home-shortcuts::-webkit-scrollbar {
        display: none;
    }

    .educatic-home-shortcuts a {
        flex: 0 0 auto;
        min-width: 145px;
        min-height: 54px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .educatic-home-shortcuts a,
    .educatic-course-image,
    .educatic-carousel-btn,
    .educatic-course-card,
    .educatic-news-card {
        transition: none !important;
    }

    .educatic-carousel {
        scroll-behavior: auto !important;
    }
}