/* ============================================================
   responsive.css — všechny media queries (desktop-first)
   ============================================================ */

/* ============================================================
   RESPONZIVITA — Desktop First Breakpoints
   ============================================================ */

/* ── 1300px ── */
@media (max-width: 1300px) {
    .main-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        padding-right: 0;
    }
    .hero-main { grid-column: span 3; grid-row: span 1; padding: 40px; min-height: 320px; }
    .news-hero {
        min-height: 0;
        padding: 16px 22px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .news-hero::before {
        width: 100%;
        height: 3px;
    }
    .news-hero .streamer-name {
        flex-direction: row;
        gap: 0.28em;
        font-size: 2.6rem;
        margin: 0;
    }
}

/* ── 1100px ── */
@media (max-width: 1100px) {
    .hero-title { font-size: 6rem; }
    .footer-socials { flex-wrap: wrap; gap: 15px; }
    .social-box { min-width: 45%; }
}

/* ── 900px — Tablet landscape ── */
@media (max-width: 900px) {
    /* Header: stack vertically */
    header {
        padding: 15px 16px;
        flex-wrap: wrap;
        gap: 12px;
        position: relative;
    }

    /* Show hamburger */
    .nav-toggle { display: flex; }

    /* Nav: collapsible drawer */
    .nav-container {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(5, 6, 8, 0.97);
        border: none;
        clip-path: none;
        padding: 80px 30px 40px;
        z-index: 150;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
    }
    .nav-container.nav-open { display: flex; }

    nav ul {
        flex-direction: column;
        gap: 4px;
        width: 100%;
        align-items: center;
    }
    nav ul li { width: 100%; text-align: center; }
    nav a {
        font-size: 2.2rem;
        padding: 12px 20px;
        display: block;
        letter-spacing: 4px;
    }

    /* V drawer módu obě skupiny i logo stojí pod sebou na celou šířku */
    .nav-left, .nav-right { width: 100%; }
    .nav-left ul, .nav-right ul { justify-content: center; }

    /* Logo v drawer — vždy nahoře, nad oběma skupinami */
    .logo-mid {
        order: -1;
        margin: 0 0 30px 0;
        width: 100%;
    }
    .logo-mid img { width: 70px; height: 70px; object-fit: contain; margin: 0 auto; }

    /* Header icons: absolutely positioned */
    .header-avatar {
        position: absolute;
        right: 16px;
        top: calc(50% - 22px);
        transform: none;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    .header-avatar:hover { transform: scale(1.1); }
    .header-servers {
        position: absolute;
        left: 16px; top: 50%;
        transform: translateY(-50%);
    }
    .header-servers-panel { left: 0; right: auto; }
    .header-servers-icon { width: 44px; height: 44px; font-size: 1rem; }

    /* Misc layout */
    .chevron-decor { display: none; }
    .cp-content { flex-direction: column; gap: 10px; text-align: center; padding: 0 20px; }
    .cp-links { justify-content: center; flex-wrap: wrap; }
    .main-wrapper { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .hero-main { grid-column: span 2; }
    .news-card h2 { white-space: normal; }
    .social-box { min-width: 45%; }
    .article-wrapper { padding: 30px; }
    .article-title { font-size: 2.8rem; }
    .featured-img { height: 250px; }
}

/* ── 768px — Tablet portrait ── */
@media (max-width: 768px) {
    /* Server info page */
    .side-nav {
        flex-direction: row;
        border-left: none;
        border-bottom: 1px solid var(--border-glass);
        padding: 15px 10px;
        justify-content: center;
        gap: 15px;
    }
    .nav-dot { width: 44px; height: 44px; }
    .server-title { font-size: 3.2rem; }
    main.info-main {
        grid-template-columns: 1fr;
        padding-top: 0;
    }
    .info-container { padding: 25px 20px; }
    .stats-grid { gap: 12px 20px; }
    .stat-box .label { white-space: normal; letter-spacing: 0.3px; }
    .stat-box .value { font-size: 1.3rem; white-space: normal; }

    /* News grid */
    .main-wrapper { grid-template-columns: 1fr; }
    .hero-main { grid-column: span 1; min-height: 280px; }
    .news-hero { min-height: 0; }

    /* About page */
    .hex-grid { gap: 18px; }
    .hex-shape { width: 100px; height: 87px; }
    .hex-number { font-size: 1.8rem; }

    /* Article */
    .article-wrapper { padding: 20px; }
    .article-title { font-size: 2.2rem; }
    .featured-img { height: 200px; }
    .article-content { font-size: 1rem; }

    /* Footer */
    .footer-socials { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 10px; }
    .social-box { min-width: 100%; justify-content: flex-start; }

    /* Servers archive */
    .header-main { font-size: 4rem; margin-bottom: 30px; }
    .server-grid { gap: 16px; padding: 0 4px; }
    .server-card { width: 100%; max-width: 400px; height: 320px; clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }

    /* Server archive page */
    main.server-main { padding: 50px 16px 50px; }

    /* Pagination */
    .pagination-container { padding: 10px 16px; gap: 8px; }
    .pagination-container .page-numbers { font-size: 1.1rem; padding: 4px 9px; }
}

/* ── 600px — Mobile ── */
@media (max-width: 600px) {
    /* Homepage hero */
    .hero-title { font-size: 3.8rem; letter-spacing: -1px; margin-bottom: 25px; }
    .hero-subtitle { font-size: 1rem; letter-spacing: 4px; }
    .btn-browse { font-size: 1.4rem; padding: 12px 28px; letter-spacing: 3px; }

    /* News */
    .main-wrapper { grid-template-columns: 1fr; }
    .hero-main { grid-column: span 1; }
    .streamer-name { font-size: 3.5rem; }
    .news-hero .streamer-name { font-size: 2.1rem; }

    /* Servers */
    .header-main { font-size: 3rem; margin-bottom: 25px; }
    .server-card { width: 100%; height: 280px; }
    .server-name { font-size: 2.8rem; }

    /* Social footer */
    .social-box { min-width: 100%; padding: 14px 18px; }
    .social-box i { font-size: 1.6rem; }

    /* About page */
    .team-grid { grid-template-columns: 1fr; }
    .section-heading { font-size: 2.4rem; }
    .value-card { padding: 28px 22px; }
    .tl-title { font-size: 1.3rem; }

    /* Article */
    .article-wrapper { padding: 16px; }
    .article-title { font-size: 1.9rem; }
    .featured-img { height: 180px; }

    /* Server info */
    .server-title { font-size: 2.6rem; }
    .brand-label { font-size: 0.85rem; letter-spacing: 3px; }
    .stats-grid { gap: 10px 16px; padding: 12px 14px; }
    .stat-box .value { font-size: 1.2rem; }
    .ip-highlight { font-size: 1.1rem !important; }

    /* Server archive */
    main.server-main { padding: 40px 16px 40px; }
    .header-top { font-size: 0.85rem; letter-spacing: 4px; }
}

/* ── 480px — Small phones ── */
@media (max-width: 480px) {
    header { padding: 12px 14px; }
    .hero-title { font-size: 3rem; }
    .btn-browse { font-size: 1.2rem; padding: 10px 22px; }
    .streamer-name { font-size: 3rem; }
    .congrats { font-size: 0.9rem; letter-spacing: 3px; }
    .milestone { font-size: 1.1rem; }

    /* News hero tile */
    .hero-main { padding: 30px 20px 0; }
    .news-hero { padding: 14px 16px; }
    .news-hero .streamer-name { font-size: 1.9rem; }
    .news-hero .congrats { font-size: 0.72rem; letter-spacing: 2px; }

    /* Footer copyright */
    .cp-content { font-size: 0.72rem; }

    /* Terminal */
    .boot-terminal { padding: 16px; }
    .terminal-lines { font-size: 0.78rem; line-height: 1.7; }
    .t-big { font-size: 2.2rem; }

    /* Hex stats */
    .hex-grid { gap: 12px; }
    .hex-shape { width: 88px; height: 76px; }
    .hex-number { font-size: 1.5rem; }
    .hex-label { font-size: 0.8rem; }

    /* Server info nav dots */
    .nav-dot { width: 40px; height: 40px; font-size: 0.9rem; }

    /* Server card */
    .server-card { height: 260px; }
    .server-name { font-size: 2.4rem; }
}

/* ── Touch: disable hover transforms to avoid sticky states ── */
@media (hover: none) {
    .tile:hover { transform: none; }
    .server-card:hover .card-image { transform: none; }
    .team-card:hover { transform: none; }
    .social-box:hover { transform: none; }
}