/**
 * NextHit Mobile Fix CSS
 * Fixes horizontal scroll on ranking.html and agb-nexthit.html
 * Date: 04.11.2025, 20:30 UTC
 */

/* CRITICAL: Prevent horizontal overflow */
* {
    max-width: 100%;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.container,
.ranking-grid,
.ranking-hero,
.agb-hero,
.agb-section,
.license-cards,
.provisions-table-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Mobile breakpoint: <= 768px */
@media (max-width: 768px) {
    /* Ranking Page Fixes */
    .ranking-hero h1 {
        font-size: 2rem !important;
        padding: 0 10px !important;
    }

    .ranking-tabs {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 20px !important;
    }

    .ranking-tab {
        padding: 12px 20px !important;
        white-space: nowrap !important;
        font-size: 0.9rem !important;
    }

    .track-item {
        grid-template-columns: 50px 1fr !important;
        padding: 15px !important;
        gap: 15px !important;
    }

    .track-rank {
        font-size: 1.8rem !important;
    }

    .track-rank-1 { font-size: 2rem !important; }
    .track-rank-2 { font-size: 1.9rem !important; }
    .track-rank-3 { font-size: 1.85rem !important; }

    .track-info h3 {
        font-size: 1.1rem !important;
    }

    .track-info p {
        font-size: 0.85rem !important;
    }

    .track-stats {
        font-size: 0.8rem !important;
        white-space: normal !important;
    }

    .track-actions {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .track-actions button {
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
        min-width: auto !important;
    }

    /* AGB Page Fixes */
    .agb-hero h1 {
        font-size: 2.2rem !important;
        padding: 0 15px !important;
    }

    .agb-section {
        padding: 20px 15px !important;
        margin: 0 10px 20px 10px !important;
    }

    .agb-section h2 {
        font-size: 1.5rem !important;
    }

    .agb-section h3 {
        font-size: 1.2rem !important;
    }

    .license-cards {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    .license-card {
        padding: 20px !important;
    }

    .license-card h3 {
        font-size: 1.3rem !important;
    }

    .provisions-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }

    .provisions-table {
        min-width: 600px !important;
        font-size: 0.85rem !important;
    }

    .provisions-table th,
    .provisions-table td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }

    .highlight-box {
        padding: 15px !important;
        margin: 15px 0 !important;
    }

    .highlight-box h4 {
        font-size: 1.1rem !important;
    }

    /* General Text Adjustments */
    p, li {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    ul, ol {
        padding-left: 20px !important;
    }

    /* Ensure all images are responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables responsive */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent code blocks from overflowing */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
}

/* Small phones: <= 390px */
@media (max-width: 390px) {
    .ranking-hero h1 {
        font-size: 1.8rem !important;
    }

    .agb-hero h1 {
        font-size: 2rem !important;
    }

    .track-rank {
        font-size: 1.5rem !important;
    }

    .track-info h3 {
        font-size: 1rem !important;
    }

    .provisions-table {
        font-size: 0.75rem !important;
    }

    .provisions-table th,
    .provisions-table td {
        padding: 8px 5px !important;
    }
}