/* ================================================================
   TrungNguyen Theme - Responsive Breakpoints
   VOZ-style landing page + navbar + sections responsive
   ================================================================ */

/* Large Tablet / Small Desktop (1024px) */
@@media (max-width: 1024px) {
    .tn-hero-cta-row {
        gap: var(--space-md);
    }

    .tn-hero-cta-box {
        padding: var(--space-md) var(--space-lg);
    }

    .tn-info-grid-voz {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .tn-layout-with-sidebar {
        grid-template-columns: 1fr 240px;
        gap: var(--space-lg);
    }

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

    .tn-faction-showcase-img {
        aspect-ratio: 16 / 7;
    }

    .tn-news-grid-home {
        grid-template-columns: repeat(2, 1fr);
    }

    .tn-giftcode-scroll {
        gap: var(--space-md);
    }
}

/* Tablet (768px) */
@@media (max-width: 768px) {
    /* Hero */
    .tn-hero-fullscreen {
        min-height: 80vh;
    }

    .tn-hero-logo {
        max-width: 200px;
    }

    .tn-hero-banner-row {
        flex-direction: column;
        gap: var(--space-md);
    }

    .tn-hero-download-cta {
        width: 80%;
        max-width: 320px;
        flex-direction: row;
        padding: var(--space-md) var(--space-xl);
    }

    .tn-hero-tagline {
        font-size: 0.95rem;
    }

    /* Server Banner */
    .tn-server-specs,
    .tn-hero-server-specs {
        flex-direction: column;
        gap: 4px;
    }

    .tn-spec-dot {
        display: none;
    }

    .tn-countdown-inline {
        gap: var(--space-sm);
    }

    .tn-cd-value {
        font-size: 1.4rem;
        min-width: 40px;
    }

    /* Info grid */
    .tn-info-grid-voz {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Giftcode */
    .tn-giftcode-scroll {
        flex-direction: column;
        overflow-x: visible;
        gap: var(--space-md);
    }

    .tn-giftcode-card {
        min-width: auto;
        width: 100%;
    }

    /* Social links */
    .tn-social-links-row {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    /* Layout with sidebar */
    .tn-layout-with-sidebar {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .tn-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Events */
    .tn-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Faction showcase */
    .tn-faction-tabs-row {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .tn-faction-tab-voz {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.78rem;
    }

    .tn-faction-showcase-img {
        aspect-ratio: 16 / 9;
    }

    .tn-faction-showcase-overlay {
        padding: var(--space-lg);
    }

    .tn-faction-showcase-name {
        font-size: 1.4rem;
    }

    /* Rankings */
    .tn-ranking-grid {
        grid-template-columns: 1fr;
    }

    /* Ornamental headers */
    .tn-ornament-title {
        font-size: 1.3rem;
    }

    .tn-ornament-line {
        max-width: 60px;
    }

    /* Navbar */
    .tn-navbar-menu,
    .tn-navbar-auth {
        display: none;
    }

    .tn-navbar-toggle {
        display: flex;
    }

    /* Tabs */
    .tn-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .tn-tab {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Refining */
    .tn-refining-grid {
        grid-template-columns: 1fr;
    }

    /* News page */
    .tn-news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .tn-page-title {
        font-size: 1.5rem;
    }

    .tn-news-tabs {
        gap: 4px;
    }

    .tn-news-tab {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.8rem;
    }

    .tn-article {
        padding: var(--space-lg);
    }

    .tn-article-title {
        font-size: 1.4rem;
    }
}

/* Mobile (576px) */
@@media (max-width: 576px) {
    .container-wide {
        padding: 0 var(--space-sm);
    }

    /* Hero */
    .tn-hero-fullscreen {
        min-height: 70vh;
    }

    .tn-hero-logo {
        max-width: 160px;
    }

    .tn-hero-tagline {
        font-size: 0.85rem;
    }

    .tn-hero-cta-box {
        width: 90%;
        padding: var(--space-sm) var(--space-md);
    }

    .tn-hero-cta-title {
        font-size: 0.9rem;
    }

    .tn-hero-scroll-indicator {
        display: none;
    }

    /* Server banner */
    .tn-server-name {
        font-size: 1.4rem;
    }

    .tn-countdown-inline {
        gap: var(--space-xs);
    }

    .tn-cd-value {
        font-size: 1.2rem;
        min-width: 32px;
    }

    .tn-cd-sep {
        font-size: 1rem;
    }

    /* Info grid */
    .tn-info-grid-voz {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .tn-info-card-voz {
        padding: var(--space-md);
    }

    /* Social links */
    .tn-social-links-row {
        flex-direction: column;
        align-items: center;
    }

    /* Sidebar on mobile: single column */
    .tn-sidebar {
        grid-template-columns: 1fr;
    }

    /* Events */
    .tn-events-grid {
        grid-template-columns: 1fr;
    }

    /* Faction */
    .tn-faction-tabs-row {
        gap: 4px;
    }

    .tn-faction-tab-voz {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.7rem;
    }

    .tn-faction-showcase-img {
        aspect-ratio: 4 / 3;
    }

    .tn-faction-showcase-overlay {
        padding: var(--space-md);
    }

    .tn-faction-showcase-name {
        font-size: 1.1rem;
    }

    .tn-faction-showcase-desc {
        font-size: 0.82rem;
        -webkit-line-clamp: 3;
    }

    /* Ornamental headers */
    .tn-ornament-title {
        font-size: 1.1rem;
    }

    .tn-ornament-line {
        max-width: 40px;
    }

    .tn-ornament-diamond {
        width: 6px;
        height: 6px;
    }

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

    /* Ranking */
    .tn-ranking-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Button full width */
    .tn-btn {
        width: 100%;
        max-width: 260px;
    }

    /* Download */
    .tn-download-links {
        flex-direction: column;
        align-items: center;
    }

    .tn-download-btn {
        width: 100%;
        max-width: 280px;
    }

    /* Activity */
    .tn-activity-details {
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Navbar */
    .tn-navbar-logo-text {
        font-size: 0.75rem;
    }

    .tn-navbar-logo-img {
        height: 26px;
    }

    .tn-navbar-mobile-auth {
        flex-direction: column;
    }

    .tn-navbar-mobile-auth .tn-btn {
        text-align: center;
    }

    /* Boss */
    .tn-boss-card {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .tn-boss-thumb {
        width: 48px;
        height: 48px;
    }

    .tn-boss-spawn-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tn-boss-countdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tn-tabs-scrollable .tn-tab {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.7rem;
    }

    /* Footer */
    .tn-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .tn-footer-links {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* YouTube */
    .tn-youtube-wrapper {
        border-radius: 0;
        padding-bottom: 56.25%;
    }

    .tn-fanpage-wrapper {
        padding: var(--space-xs);
    }

    .tn-fanpage-wrapper iframe {
        width: 100% !important;
    }

    /* News page */
    .tn-news-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .tn-page-header {
        padding: var(--space-xl) 0 var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    .tn-page-header-sm {
        padding: var(--space-md) 0;
        margin-bottom: var(--space-lg);
    }

    .tn-page-title {
        font-size: 1.3rem;
    }

    .tn-news-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tn-news-tab {
        white-space: nowrap;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.78rem;
    }

    .tn-article {
        padding: var(--space-md);
        border-radius: 8px;
    }

    .tn-article-title {
        font-size: 1.2rem;
    }

    .tn-article-meta {
        gap: var(--space-sm);
    }

    .tn-article-content {
        font-size: 0.95rem;
    }

    .tn-pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 0.82rem;
    }
}