/**
 * Responsive CSS — BetOpponent Redesign
 */

/* ==========================================================================
   TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .why-img {
        display: none;
    }

    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .gallery-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-large-row {
        flex-wrap: wrap;
    }

    .stat-large-sep {
        display: none;
    }

    .topbar-tagline {
        display: none;
    }
}

/* ==========================================================================
   MOBILE (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Header */
    .navbar-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Hero */
    .hero-minimal {
        padding: 3.5rem 0 3rem;
        max-height: none;
    }

    .hero-minimal-title {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    .hero-counters {
        gap: 1rem;
    }

    .hero-counter-divider {
        display: none;
    }

    .hero-counters {
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
    }

    /* Sections */
    .section {
        padding: 3.5rem 0;
    }

    .section-heading {
        font-size: var(--text-3xl);
    }

    .cat-showcase-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cat-showcase-card {
        height: 220px;
    }

    .gallery-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: 1;
        max-width: 100%;
    }

    .hero-minimal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        text-align: center;
        justify-content: center;
    }

    .cta-banner-actions {
        flex-direction: column;
    }

    .topics-chips {
        gap: 0.5rem;
    }

    .stat-large {
        min-width: 160px;
    }

    .why-features {
        gap: 1.5rem;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .cat-showcase-grid {
        grid-template-columns: 1fr;
    }

    .gallery-strip {
        grid-template-columns: 1fr 1fr;
    }

    .hero-minimal-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .topbar-cta {
        display: none;
    }

    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        font-size: var(--text-xs);
    }
}