/* ============================================================
   COINPLAY WordPress Theme - Responsive Stylesheet
   Auto-generated by generate_all_css.py
   Brand: COINPLAY | Primary: #F7931A | Accent: #4ECDC4
   Fonts: IBM Plex Mono + Work Sans
   ============================================================ */

/* ============================================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* === Layout === */
    .container { max-width: 100%; padding: 0 20px; }
    .row { margin: 0 -10px; }
    .col { padding: 0 10px; }
    .content-area { flex-direction: column; }
    .main-content { width: 100%; max-width: 100%; }
    .sidebar { width: 100%; max-width: 100%; margin-top: 30px; }

    /* === Header === */
    .header-top { padding: 10px 0; }
    .header-time { display: none; }
    .header-brand { font-size: 22px; }
    .header-logo { max-width: 120px; }
    .header-actions { gap: 8px; }
    .header-search { display: none; }
    .mobile-menu-toggle { display: flex; }

    /* === Navigation === */
    .main-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-nav::-webkit-scrollbar { display: none; }
    .nav-list { flex-wrap: nowrap; min-width: max-content; padding: 0 10px; }
    .nav-link { padding: 12px 8px; font-size: 11px; letter-spacing: 0.5px; }
    .nav-icon { width: 16px; height: 16px; }
    .nav-badge { font-size: 9px; padding: 2px 5px; }
    .dropdown-menu { min-width: 180px; }
    .mega-menu { padding: 20px; }
    .mega-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }

    /* === Hero / Scoreboard === */
    .stadium-hero { min-height: 350px; }
    .stadium-hero-content { padding: 30px; max-width: 600px; }
    .scoreboard-title { font-size: 36px; letter-spacing: 1px; }
    .scoreboard-subtitle { font-size: 14px; }
    .led-scoreboard { grid-template-columns: 1fr; gap: 15px; }
    .score-display { font-size: 40px; }
    .hero-cta { gap: 10px; }
    .hero-cta .btn { padding: 12px 24px; font-size: 13px; }
    .hero-overlay { opacity: 0.7; }

    /* === Live Matches === */
    .live-matches-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .match-card { padding: 15px; }
    .match-card-header { flex-direction: row; gap: 8px; }
    .match-card-body { padding: 10px 0; }
    .match-card-footer { flex-direction: row; justify-content: space-between; }
    .live-badge { font-size: 10px; padding: 3px 8px; }
    .match-time { font-size: 11px; }
    .match-odds { font-size: 13px; padding: 6px 10px; }

    /* === Schedule Timeline === */
    .schedule-timeline { padding-left: 60px; }
    .schedule-timeline::before { left: 30px; }
    .timeline-date-node {
        left: 30px;
        width: 50px;
        height: 50px;
    }
    .date-day { font-size: 16px; }
    .date-month { font-size: 10px; }
    .timeline-matches {
        flex-direction: column;
        padding-top: 70px;
        padding-left: 75px;
    }
    .timeline-match-card { padding: 12px; margin-bottom: 10px; }

    /* === Featured Sports === */
    .featured-sports-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .sport-card { padding: 20px 15px; }
    .sport-card-icon { width: 45px; height: 45px; }
    .sport-card-title { font-size: 14px; }
    .sport-card-count { font-size: 11px; }

    /* === Articles / Blog === */
    .article-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .article-card { margin-bottom: 0; }
    .article-card-image { height: 200px; }
    .article-card-body { padding: 15px; }
    .article-card-title { font-size: 16px; line-height: 1.4; }
    .article-card-excerpt { font-size: 13px; line-height: 1.5; }
    .article-card-meta { font-size: 11px; }
    .article-featured { grid-column: span 2; }
    .article-featured .article-card-image { height: 280px; }

    /* === Promotions === */
    .promos-grid { grid-template-columns: 1fr; gap: 20px; }
    .promo-card { padding: 25px; }
    .promo-card-image { height: 180px; }
    .promo-card h3 { font-size: 18px; }
    .promo-card p { font-size: 13px; line-height: 1.6; }
    .promo-badge { font-size: 11px; padding: 4px 10px; }
    .promo-timer { font-size: 14px; padding: 8px 15px; }

    /* === News === */
    .home-news-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .news-card { padding: 15px; }
    .news-card-image { height: 140px; }
    .news-card-title { font-size: 14px; }
    .news-card-date { font-size: 11px; }

    /* === Related Content === */
    .related-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .related-card { padding: 12px; }
    .related-card-image { height: 100px; }
    .related-card-title { font-size: 13px; }

    /* === Odds Table === */
    .odds-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .odds-table { min-width: 600px; font-size: 13px; }
    .odds-table th { padding: 10px 8px; font-size: 11px; }
    .odds-table td { padding: 10px 8px; }
    .odds-value { padding: 6px 10px; font-size: 12px; }

    /* === Footer === */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .footer-widget h4 { font-size: 15px; margin-bottom: 15px; }
    .footer-widget li { margin-bottom: 8px; font-size: 13px; }
    .footer-bottom { padding: 15px 0; }
    .footer-social { gap: 10px; }
    .footer-social a { width: 35px; height: 35px; }

    /* === Search Overlay === */
    .search-overlay-content { padding: 20px; max-width: 600px; }
    .search-input { font-size: 18px; padding: 15px 20px; }
    .search-results { max-height: 400px; }
    .search-result-item { padding: 12px 15px; }

    /* === Category Page === */
    .category-header { padding: 30px 20px; }
    .category-header h1 { font-size: 24px; }
    .category-description { font-size: 14px; max-width: 600px; }
    .category-filters { flex-wrap: wrap; gap: 8px; }
    .filter-btn { padding: 8px 16px; font-size: 12px; }

    /* === Pagination === */
    .pagination { gap: 5px; }
    .pagination a, .pagination span { padding: 8px 12px; font-size: 13px; }

    /* === Breadcrumbs === */
    .breadcrumbs { padding: 10px 0; font-size: 12px; }
    .breadcrumbs a { padding: 2px 0; }

    /* === Sidebar Widgets === */
    .sidebar-widget { margin-bottom: 25px; padding: 15px; }
    .widget-title { font-size: 15px; margin-bottom: 12px; }
    .widget-list li { padding: 8px 0; font-size: 13px; }
    .tag-cloud { gap: 6px; }
    .tag-cloud a { padding: 4px 10px; font-size: 11px; }
}

/* ============================================================
   MOBILE LANDSCAPE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* === Layout === */
    .container { padding: 0 15px; }
    .section { padding: 30px 0; }
    .section-header { margin-bottom: 20px; padding-bottom: 10px; }
    .section-title { font-size: 20px; margin-bottom: 8px; }
    .section-subtitle { font-size: 13px; }

    /* === Header === */
    .header-top { flex-direction: column; gap: 10px; padding: 8px 0; }
    .header-brand { font-size: 20px; }
    .header-logo { max-width: 100px; }
    .header-actions { gap: 6px; }
    .btn-login { padding: 8px 16px; font-size: 12px; }
    .btn-register { padding: 8px 16px; font-size: 12px; }
    .header-balance { font-size: 12px; padding: 6px 12px; }
    .user-menu { padding: 6px 10px; font-size: 12px; }
    .notification-badge { width: 16px; height: 16px; font-size: 9px; }

    /* === Navigation === */
    .main-nav { border-bottom: 1px solid var(--gray-700); }
    .nav-list { padding: 0 5px; }
    .nav-link { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
    .nav-icon { width: 14px; height: 14px; margin-right: 4px; }
    .nav-badge { font-size: 8px; padding: 1px 4px; top: 5px; right: 2px; }
    .dropdown-menu {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 0;
        z-index: 1000;
    }
    .mega-menu {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        padding: 15px;
    }
    .mega-menu-grid { grid-template-columns: 1fr; gap: 10px; }
    .mega-menu-section { margin-bottom: 15px; }
    .mega-menu-title { font-size: 13px; margin-bottom: 8px; }

    /* === Hero / Scoreboard === */
    .stadium-hero { min-height: 300px; }
    .stadium-hero-content { padding: 20px; max-width: 100%; }
    .scoreboard-title { font-size: 28px; letter-spacing: 0.5px; }
    .scoreboard-subtitle { font-size: 12px; }
    .score-display { font-size: 34px; }
    .hero-cta { flex-direction: column; gap: 10px; width: 100%; }
    .hero-cta .btn { width: 100%; text-align: center; padding: 12px 20px; }
    .hero-stats { flex-wrap: wrap; gap: 10px; }
    .hero-stat { padding: 8px 12px; font-size: 11px; }

    /* === Scoreboard === */
    .led-scoreboard { padding: 15px; gap: 10px; }
    .scoreboard-match { padding: 10px; }
    .scoreboard-team { font-size: 13px; }
    .scoreboard-score { font-size: 24px; }
    .scoreboard-time { font-size: 11px; }

    /* === Live Matches === */
    .live-matches-grid { grid-template-columns: 1fr; gap: 12px; }
    .match-card { padding: 12px; }
    .match-card-header { gap: 6px; }
    .team-name { font-size: 13px; }
    .team-logo { width: 28px; height: 28px; }
    .match-score { font-size: 18px; }
    .match-odds { font-size: 12px; padding: 5px 8px; }
    .match-actions { gap: 6px; }
    .match-btn { padding: 6px 12px; font-size: 11px; }

    /* === Featured Sports === */
    .featured-sports-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sport-card { padding: 15px 12px; }
    .sport-card-icon { width: 36px; height: 36px; }
    .sport-card-title { font-size: 12px; }
    .sport-card-count { font-size: 10px; }

    /* === Articles === */
    .article-grid { grid-template-columns: 1fr; gap: 15px; }
    .article-card { margin-bottom: 0; }
    .article-card-image { height: 180px; }
    .article-card-body { padding: 12px; }
    .article-card-title { font-size: 15px; }
    .article-card-excerpt { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .article-card-meta { font-size: 10px; }
    .article-featured { grid-column: span 1; }
    .article-featured .article-card-image { height: 200px; }

    /* === Promotions === */
    .promo-card { padding: 20px; }
    .promo-card-image { height: 150px; }
    .promo-card h3 { font-size: 16px; }
    .promo-card p { font-size: 12px; }
    .promo-actions { flex-direction: column; gap: 8px; }
    .promo-actions .btn { width: 100%; text-align: center; }

    /* === News === */
    .home-news-grid { grid-template-columns: 1fr; gap: 12px; }
    .news-card { padding: 12px; flex-direction: row; gap: 12px; }
    .news-card-image { width: 100px; height: 80px; flex-shrink: 0; }
    .news-card-title { font-size: 13px; }
    .news-card-date { font-size: 10px; }

    /* === Related Content === */
    .related-grid { grid-template-columns: 1fr; gap: 12px; }
    .related-card { padding: 10px; flex-direction: row; gap: 10px; }
    .related-card-image { width: 80px; height: 60px; flex-shrink: 0; }
    .related-card-title { font-size: 12px; }

    /* === Schedule Timeline === */
    .schedule-timeline { padding-left: 0; }
    .schedule-timeline::before { display: none; }
    .timeline-date-node { position: relative; left: 0; margin-bottom: 10px; width: 40px; height: 40px; }
    .timeline-matches { padding-left: 0; padding-top: 0; }
    .timeline-match-card { padding: 10px; }

    /* === Single Post === */
    .post-header { padding: 20px 0; }
    .post-title { font-size: 22px; line-height: 1.3; }
    .post-meta { font-size: 12px; flex-wrap: wrap; gap: 8px; }
    .post-meta-item { font-size: 11px; }
    .post-content { font-size: 15px; line-height: 1.7; }
    .post-content h2 { font-size: 20px; margin: 25px 0 12px; }
    .post-content h3 { font-size: 18px; margin: 20px 0 10px; }
    .post-content h4 { font-size: 16px; margin: 15px 0 8px; }
    .post-content p { margin-bottom: 15px; }
    .post-content img { max-width: 100%; height: auto; margin: 15px 0; }
    .post-content blockquote { padding: 15px; margin: 15px 0; font-size: 14px; }
    .post-content pre { padding: 12px; font-size: 12px; overflow-x: auto; }
    .post-content table { font-size: 13px; }
    .post-content ul, .post-content ol { padding-left: 20px; }
    .post-tags { gap: 6px; }
    .post-tags a { padding: 4px 10px; font-size: 11px; }
    .share-links { gap: 8px; }
    .share-link { width: 35px; height: 35px; }
    .author-box { padding: 15px; flex-direction: column; text-align: center; }
    .author-avatar { width: 60px; height: 60px; }
    .author-name { font-size: 15px; }
    .author-bio { font-size: 12px; }

    /* === Comments === */
    .comments-section { padding: 20px 0; }
    .comments-title { font-size: 18px; }
    .comment-list { padding: 0; }
    .comment { padding: 15px; margin-bottom: 15px; }
    .comment-author { font-size: 13px; }
    .comment-date { font-size: 11px; }
    .comment-text { font-size: 13px; line-height: 1.6; }
    .comment-reply { font-size: 11px; padding: 4px 10px; }
    .comment-form { padding: 20px 0; }
    .comment-form textarea { min-height: 100px; font-size: 14px; }
    .comment-form input { font-size: 14px; padding: 10px; }

    /* === Sidebar === */
    .sidebar { margin-top: 20px; }
    .sidebar-widget { margin-bottom: 20px; padding: 12px; }
    .widget-title { font-size: 14px; margin-bottom: 10px; }
    .widget-list li { padding: 6px 0; font-size: 12px; }

    /* === Odds Table === */
    .odds-table { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .odds-table th, .odds-table td { padding: 8px 6px; }
    .odds-value { padding: 5px 8px; font-size: 11px; }

    /* === Footer === */
    .footer { padding-top: 30px; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-widget h4 { font-size: 14px; margin-bottom: 10px; }
    .footer-widget li { margin-bottom: 6px; font-size: 12px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 12px 0; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .footer-links a { font-size: 11px; }
    .footer-social { justify-content: center; gap: 8px; }
    .footer-social a { width: 32px; height: 32px; }
    .footer-disclaimer { font-size: 11px; padding: 10px 0; }

    /* === Buttons === */
    .btn { padding: 10px 20px; font-size: 13px; }
    .btn-lg { padding: 12px 24px; font-size: 14px; }
    .btn-sm { padding: 6px 12px; font-size: 11px; }
    .btn-icon { width: 36px; height: 36px; }

    /* === Modals / Popups === */
    .modal { padding: 20px; }
    .modal-content { max-width: 100%; margin: 10px; }
    .modal-header { padding: 15px; }
    .modal-body { padding: 15px; }
    .modal-footer { padding: 15px; flex-direction: column; gap: 8px; }
    .modal-footer .btn { width: 100%; }

    /* === Notifications === */
    .toast { max-width: 90%; left: 5%; right: 5%; }
    .toast-content { padding: 12px; font-size: 13px; }

    /* === Loading === */
    .loading-spinner { width: 30px; height: 30px; }
    .skeleton { height: 15px; }
    .skeleton-title { height: 20px; width: 60%; }
    .skeleton-image { height: 150px; }
}

/* ============================================================
   MOBILE PORTRAIT (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* === Base === */
    body { font-size: 14px; }
    .container { padding: 0 10px; }
    .section { padding: 20px 0; }
    .section-header { margin-bottom: 15px; }
    .section-title { font-size: 18px; }
    .section-subtitle { font-size: 12px; }
    .section-view-all { font-size: 12px; }

    /* === Header === */
    .header-brand { font-size: 18px; }
    .header-logo { max-width: 80px; }
    .btn-login { padding: 6px 12px; font-size: 11px; }
    .btn-register { padding: 6px 12px; font-size: 11px; }
    .header-balance { font-size: 11px; padding: 5px 10px; }

    /* === Navigation === */
    .nav-link { padding: 8px 10px; font-size: 10px; }
    .nav-icon { width: 12px; height: 12px; }

    /* === Hero === */
    .stadium-hero { min-height: 250px; }
    .stadium-hero-content { padding: 15px; }
    .scoreboard-title { font-size: 22px; }
    .scoreboard-subtitle { font-size: 11px; }
    .score-display { font-size: 26px; }
    .hero-stat { padding: 6px 10px; font-size: 10px; }

    /* === Live Matches === */
    .match-card { padding: 10px; }
    .team-name { font-size: 12px; }
    .team-logo { width: 24px; height: 24px; }
    .match-score { font-size: 16px; }
    .match-odds { font-size: 11px; padding: 4px 6px; }

    /* === Featured Sports === */
    .featured-sports-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sport-card { padding: 12px 8px; }
    .sport-card-icon { width: 30px; height: 30px; }
    .sport-card-title { font-size: 11px; }

    /* === Articles === */
    .article-card-image { height: 150px; }
    .article-card-body { padding: 10px; }
    .article-card-title { font-size: 14px; }
    .article-card-excerpt { display: none; }
    .article-card-meta { font-size: 10px; }

    /* === Promotions === */
    .promo-card { padding: 15px; }
    .promo-card-image { height: 120px; }
    .promo-card h3 { font-size: 15px; }
    .promo-card p { font-size: 12px; }
    .promo-timer { font-size: 12px; padding: 6px 10px; }

    /* === News === */
    .news-card { padding: 10px; }
    .news-card-image { width: 80px; height: 60px; }
    .news-card-title { font-size: 12px; }

    /* === Single Post === */
    .post-header { padding: 15px 0; }
    .post-title { font-size: 20px; }
    .post-content { font-size: 14px; }
    .post-content h2 { font-size: 18px; }
    .post-content h3 { font-size: 16px; }
    .post-content img { margin: 10px 0; }
    .post-content blockquote { padding: 10px; font-size: 13px; }
    .post-tags a { padding: 3px 8px; font-size: 10px; }
    .author-box { padding: 12px; }
    .author-avatar { width: 50px; height: 50px; }

    /* === Comments === */
    .comment { padding: 12px; }
    .comment-text { font-size: 12px; }
    .comment-form textarea { min-height: 80px; font-size: 13px; }
    .comment-form input { font-size: 13px; padding: 8px; }

    /* === Sidebar === */
    .sidebar-widget { padding: 10px; }
    .widget-title { font-size: 13px; }
    .widget-list li { font-size: 12px; }
    .tag-cloud a { padding: 3px 8px; font-size: 10px; }

    /* === Footer === */
    .footer-grid { gap: 15px; }
    .footer-widget h4 { font-size: 13px; }
    .footer-widget li { font-size: 11px; }
    .footer-bottom { padding: 10px 0; }
    .footer-links a { font-size: 10px; }
    .footer-social a { width: 28px; height: 28px; }

    /* === Buttons === */
    .btn { padding: 8px 16px; font-size: 12px; }
    .btn-lg { padding: 10px 20px; font-size: 13px; }
    .btn-sm { padding: 5px 10px; font-size: 10px; }

    /* === Odds Table === */
    .odds-table { font-size: 11px; }
    .odds-table th, .odds-table td { padding: 6px 4px; }
    .odds-value { padding: 4px 6px; font-size: 10px; }

    /* === Category === */
    .category-header { padding: 20px 15px; }
    .category-header h1 { font-size: 20px; }
    .category-description { font-size: 12px; }
    .filter-btn { padding: 6px 12px; font-size: 11px; }

    /* === Pagination === */
    .pagination a, .pagination span { padding: 6px 10px; font-size: 12px; }

    /* === Breadcrumbs === */
    .breadcrumbs { font-size: 11px; padding: 8px 0; }

    /* === Modals === */
    .modal-content { margin: 5px; }
    .modal-header { padding: 12px; }
    .modal-body { padding: 12px; }
    .modal-footer { padding: 12px; }

    /* === Tabs === */
    .tab-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-list::-webkit-scrollbar { display: none; }
    .tab-item { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
    .tab-content { padding: 15px 0; }

    /* === Accordion === */
    .accordion-header { padding: 12px; font-size: 13px; }
    .accordion-body { padding: 12px; font-size: 13px; }

    /* === Card === */
    .card { padding: 12px; }
    .card-header { padding: 10px 12px; font-size: 14px; }
    .card-body { padding: 12px; }
    .card-footer { padding: 10px 12px; }

    /* === Form Elements === */
    .form-group { margin-bottom: 12px; }
    .form-label { font-size: 12px; margin-bottom: 4px; }
    .form-input { padding: 10px; font-size: 14px; }
    .form-select { padding: 10px; font-size: 14px; }
    .form-textarea { padding: 10px; font-size: 14px; min-height: 80px; }
    .form-checkbox label { font-size: 13px; }
    .form-error { font-size: 11px; }

    /* === Alert / Notice === */
    .alert { padding: 10px 12px; font-size: 12px; }
    .alert-icon { width: 18px; height: 18px; }

    /* === Tooltip === */
    .tooltip { font-size: 11px; padding: 4px 8px; }

    /* === Badge === */
    .badge { font-size: 9px; padding: 2px 6px; }

    /* === Progress === */
    .progress-bar { height: 6px; }
    .progress-label { font-size: 11px; }
}

/* ============================================================
   SMALL MOBILE (max-width: 360px)
   ============================================================ */
@media (max-width: 360px) {
    .header-brand { font-size: 16px; }
    .header-logo { max-width: 70px; }
    .btn-login { padding: 5px 10px; font-size: 10px; }
    .btn-register { padding: 5px 10px; font-size: 10px; }
    .scoreboard-title { font-size: 18px; }
    .score-display { font-size: 22px; }
    .section-title { font-size: 16px; }
    .article-card-title { font-size: 13px; }
    .post-title { font-size: 18px; }
    .nav-link { padding: 6px 8px; font-size: 9px; }
    .btn { padding: 7px 14px; font-size: 11px; }
    .btn-lg { padding: 9px 18px; font-size: 12px; }
    .match-card { padding: 8px; }
    .team-name { font-size: 11px; }
    .match-score { font-size: 14px; }
    .sport-card { padding: 10px 6px; }
    .sport-card-icon { width: 26px; height: 26px; }
    .promo-card { padding: 12px; }
    .promo-card h3 { font-size: 14px; }
    .footer-widget h4 { font-size: 12px; }
    .comment { padding: 10px; }
    .sidebar-widget { padding: 8px; }
    .category-header h1 { font-size: 18px; }
    .filter-btn { padding: 5px 10px; font-size: 10px; }
    .odds-table { font-size: 10px; }
    .modal-content { margin: 3px; }
    .form-input { padding: 8px; font-size: 13px; }
    .alert { padding: 8px 10px; font-size: 11px; }
    .tab-item { padding: 6px 10px; font-size: 11px; }
    .card { padding: 10px; }
    .pagination a, .pagination span { padding: 5px 8px; font-size: 11px; }
    .breadcrumbs { font-size: 10px; }
    .toast { max-width: 95%; left: 2.5%; right: 2.5%; }
    .toast-content { padding: 10px; font-size: 12px; }
    .featured-sports-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .hero-stat { padding: 5px 8px; font-size: 9px; }
    .news-card { flex-direction: column; }
    .news-card-image { width: 100%; height: 120px; }
    .related-card { flex-direction: column; }
    .related-card-image { width: 100%; height: 100px; }
    .author-box { padding: 10px; }
    .author-avatar { width: 40px; height: 40px; }
    .author-name { font-size: 13px; }
    .share-link { width: 30px; height: 30px; }
    .footer-social a { width: 26px; height: 26px; }
    .footer-disclaimer { font-size: 10px; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .header, .footer, .sidebar, .main-nav, .hero-cta,
    .live-matches-section, .featured-sports-section,
    .promos-grid, .related-grid, .comment-form,
    .pagination, .share-links, .mobile-menu-toggle,
    .search-overlay, .notification-badge, .toast,
    .modal, .back-to-top, .cookie-banner {
        display: none !important;
    }

    body { font-size: 12pt; color: #000 !important; background: #fff !important; }
    .container { max-width: 100%; padding: 0; }
    .main-content { width: 100% !important; max-width: 100% !important; }
    .post-content { font-size: 12pt; color: #000 !important; line-height: 1.6; }
    .post-title { font-size: 18pt; color: #000 !important; }
    .post-meta { font-size: 10pt; color: #666 !important; }
    .post-content h2 { font-size: 14pt; }
    .post-content h3 { font-size: 12pt; }
    .post-content img { max-width: 100%; page-break-inside: avoid; }
    .post-content blockquote { border-left: 2px solid #ccc; padding-left: 15px; color: #333; }
    a { color: #000 !important; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    .article-card { page-break-inside: avoid; }
    .comment { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 2cm; }
}

/* ============================================================
   ACCESSIBILITY & MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .stadium-hero { background-attachment: scroll !important; }
    .parallax-bg { transform: none !important; }
    .floating-element { animation: none !important; transform: none !important; }
    .score-display { animation: none !important; }
    .live-badge { animation: none !important; }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 0 0 1px currentColor;
        --shadow-md: 0 0 0 2px currentColor;
        --shadow-lg: 0 0 0 3px currentColor;
    }
    .btn { border: 2px solid currentColor; }
    .card { border: 2px solid currentColor; }
    .nav-link { border-bottom: 2px solid transparent; }
    .nav-link:hover, .nav-link.active { border-bottom-color: currentColor; }
    .form-input { border: 2px solid currentColor; }
    .form-select { border: 2px solid currentColor; }
    .match-card { border: 2px solid currentColor; }
    .article-card { border: 2px solid currentColor; }
    a { text-decoration: underline; }
    a:focus { outline: 3px solid currentColor; outline-offset: 2px; }
}

/* === Dark Mode Support === */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* === Forced Colors Mode === */
@media (forced-colors: active) {
    .btn { border: 1px solid ButtonText; }
    .card { border: 1px solid CanvasText; }
    .nav-link { forced-color-adjust: auto; }
    .live-badge { background: Highlight; color: HighlightText; }
    .badge { background: Highlight; color: HighlightText; }
    .match-odds { border: 1px solid ButtonText; }
    .odds-value { border: 1px solid ButtonText; }
    .progress-bar { border: 1px solid CanvasText; }
    .form-input { border: 1px solid CanvasText; }
    .form-select { border: 1px solid CanvasText; }
}

/* ============================================================
   LANDSCAPE ORIENTATION ON SMALL DEVICES
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .stadium-hero { min-height: 200px; }
    .stadium-hero-content { padding: 15px; }
    .scoreboard-title { font-size: 24px; }
    .modal-content { max-height: 90vh; overflow-y: auto; }
    .search-overlay { padding: 20px; }
    .search-overlay-content { max-width: 500px; }
    .dropdown-menu { max-height: 50vh; }
    .mega-menu { max-height: 50vh; }
    .header-top { padding: 5px 0; }
    .nav-link { padding: 8px 10px; }
}

/* ============================================================
   LARGE SCREENS (min-width: 1400px)
   ============================================================ */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .article-grid { grid-template-columns: repeat(4, 1fr); }
    .live-matches-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-sports-grid { grid-template-columns: repeat(6, 1fr); }
    .promos-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .home-news-grid { grid-template-columns: repeat(3, 1fr); }
    .related-grid { grid-template-columns: repeat(4, 1fr); }
    .mega-menu-grid { grid-template-columns: repeat(4, 1fr); }
    .scoreboard-title { font-size: 52px; }
    .stadium-hero { min-height: 500px; }
    .section-title { font-size: 28px; }
}

/* ============================================================
   EXTRA LARGE SCREENS (min-width: 1920px)
   ============================================================ */
@media (min-width: 1920px) {
    .container { max-width: 1600px; }
    body { font-size: 17px; }
    .scoreboard-title { font-size: 60px; }
    .stadium-hero { min-height: 600px; }
    .article-card-image { height: 250px; }
    .promo-card-image { height: 250px; }
    .section { padding: 50px 0; }
    .footer-grid { gap: 40px; }
}