/**
 * CORRECT Mobile Grid Fix for CyBehave index.php
 * Targets the actual class names: .articles-grid-wide and .insights-grid-wide
 */

/* ==================== Mobile Responsive Fixes ==================== */

@media (max-width: 968px) {
    /* Fix for articles-grid-wide - Force single column on mobile */
    .articles-grid-wide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Fix for insights-grid-wide - Force single column on mobile */
    .insights-grid-wide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Also fix the regular grid classes in case they're used elsewhere */
    .articles-grid,
    .insights-grid,
    .resources-grid,
    .education-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Ensure all article and insight cards take full width */
    .article-card,
    .insight-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix hero content width on mobile */
    .hero-compact,
    .hero-content {
        max-width: 100% !important;
    }

    /* Fix container widths on mobile */
    .container-wide,
    .container-extra-wide {
        padding: 2rem 5% !important;
    }
}

@media (max-width: 768px) {
    /* Tablet and smaller devices */
    .articles-grid-wide,
    .insights-grid-wide {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Reduce card image height on smaller screens */
    .article-card-image,
    .insight-card-image {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile devices */
    .articles-grid-wide,
    .insights-grid-wide {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Further reduce card image height */
    .article-card-image,
    .insight-card-image {
        height: 160px !important;
    }

    /* Adjust card padding on very small screens */
    .article-card-content,
    .insight-card-content {
        padding: 1.5rem !important;
    }

    /* Make card titles smaller on small screens */
    .article-card h3,
    .insight-card h3 {
        font-size: 1.3rem !important;
    }
}