/**
 * Responsive CSS - Toto 241 Dark Tournament Theme
 */

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

@media (max-width: 1024px) {
    /* Header */
    .header-nav-bar {
        display: none;
    }

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

    /* Hero tournament */
    .hero-tournament-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .hero-leaderboard {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }

    .hero-tournament-title {
        font-size: clamp(1.8rem, 5vw, 2.8rem);
    }

    /* Stats */
    .stats-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* How grid */
    .how-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .how-image img {
        height: 300px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

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

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

@media (max-width: 768px) {
    /* Header two-tier collapses */
    .header-top-bar {
        height: 56px;
    }

    .header-logo-text {
        font-size: var(--text-lg);
    }

    /* Hero */
    .hero-tournament {
        padding-top: calc(56px + var(--space-xl));
        padding-bottom: var(--space-2xl);
    }

    .hero-timer {
        gap: var(--space-xs);
    }

    .hero-timer-block {
        min-width: 60px;
        padding: var(--space-sm) 0.75rem;
    }

    .timer-num {
        font-size: 1.6rem;
    }

    .hero-tournament-actions {
        flex-direction: column;
    }

    .hero-tournament-actions .btn,
    .hero-tournament-actions .btn-outline-light {
        width: 100%;
        justify-content: center;
    }

    .hero-trust-strip {
        gap: var(--space-sm);
    }

    /* LB grid */
    .lb-row {
        grid-template-columns: 44px 1fr auto;
    }

    .lb-points {
        display: none;
    }

    /* Stats */
    .stats-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Magazine grid */
    .magazine-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline */
    .tl-item:not(:last-child)::before {
        left: 19px;
    }

    /* Sections */
    .section {
        padding: var(--space-2xl) 0;
    }

    /* CTA */
    .cta-title {
        font-size: var(--text-2xl);
    }

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

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

    /* Grids */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 480px) {
    .container {
        padding: 16px var(--space-md);
    }

    .hero-tournament-title {
        font-size: 1.8rem;
    }

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

    .lb-row {
        grid-template-columns: 40px 1fr auto;
        padding: 0.4rem 0.6rem;
    }

    .lb-prize {
        font-size: 0.75rem;
        min-width: 80px;
    }
}