/* =========================================================
   NextEvolution Real Fullscreen / Widescreen Override
   Loaded after style.css and platform_forum.css.
   Purpose: use the screen width on 1440p/1080p monitors without breaking mobile.
   ========================================================= */

:root {
    --ne-wide-max: 1680px;
    --ne-wide-gutter: clamp(18px, 3.2vw, 56px);
    --ne-sidebar-wide: clamp(330px, 22vw, 390px);
    --ne-gap-wide: clamp(18px, 1.6vw, 30px);
}

/* Global page width: this is the real fix. Previous CSS was still capped at 1180px. */
.container,
.site-header .container,
footer .container,
main > .container,
.section.container,
.flashes.container {
    width: min(var(--ne-wide-max), calc(100vw - (var(--ne-wide-gutter) * 2))) !important;
    max-width: var(--ne-wide-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Wider home/community dashboard. */
@media (min-width: 1180px) {
    .community-dashboard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--ne-sidebar-wide) !important;
        gap: var(--ne-gap-wide) !important;
        align-items: start !important;
    }

    .dashboard-layout,
    .profile-layout,
    .comments-layout {
        display: grid !important;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
        gap: var(--ne-gap-wide) !important;
        align-items: start !important;
    }

    .post-layout {
        display: grid !important;
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
        gap: var(--ne-gap-wide) !important;
        align-items: start !important;
    }

    .dashboard-main,
    .profile-main,
    .dashboard-sidebar,
    .article-card,
    .author-card,
    .panel {
        min-width: 0 !important;
    }

    .community-hero {
        min-height: 280px !important;
        padding: clamp(28px, 3vw, 54px) !important;
    }

    .community-hero h1 {
        max-width: 980px !important;
        font-size: clamp(42px, 4vw, 72px) !important;
        line-height: .96 !important;
    }

    .community-hero p {
        max-width: 960px !important;
        font-size: clamp(15px, 1vw, 18px) !important;
    }

    .grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--ne-gap-wide) !important;
    }
}

/* Ultra-wide monitors can use even more of the screen. */
@media (min-width: 1800px) {
    :root {
        --ne-wide-max: 1760px;
        --ne-sidebar-wide: 405px;
    }
}

/* 2K/4K: do not leave the site looking like a small centered box. */
@media (min-width: 2100px) {
    :root {
        --ne-wide-max: 1880px;
        --ne-sidebar-wide: 430px;
    }
}

/* Keep header readable when the site becomes wider. */
@media (min-width: 1180px) {
    .header-inner {
        flex-wrap: nowrap !important;
    }

    .brand {
        flex: 0 0 auto !important;
        max-width: 380px !important;
    }

    .brand small {
        max-width: 330px !important;
    }

    .nav {
        flex: 1 1 auto !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .nav a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 12px !important;
    }

    .header-actions {
        flex: 0 0 auto !important;
    }
}

@media (min-width: 1500px) {
    .nav a {
        padding-left: 11px !important;
        padding-right: 11px !important;
        font-size: 13px !important;
    }
}

/* If a page uses old cards/panels, let them breathe in widescreen mode. */
@media (min-width: 1180px) {
    .download-grid,
    .cards-grid,
    .news-grid,
    .server-grid,
    .ne-report-grid {
        width: 100% !important;
    }
}

/* Mobile/tablet safety. */
@media (max-width: 1179px) {
    .container,
    .site-header .container,
    footer .container,
    main > .container,
    .section.container,
    .flashes.container {
        width: min(100% - 28px, 1180px) !important;
        max-width: 1180px !important;
    }

    .community-dashboard,
    .dashboard-layout,
    .profile-layout,
    .post-layout,
    .comments-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Phone header safety: keep the shared nav usable without becoming a sticky overlay. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .site-header {
        position: relative !important;
        top: auto !important;
        z-index: 20 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .header-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 8px !important;
        align-items: start !important;
        justify-content: start !important;
        padding: 8px 0 10px !important;
    }

    .brand {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .brand-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    .brand strong {
        max-width: calc(100vw - 92px) !important;
        font-size: 15px !important;
        line-height: 1.05 !important;
    }

    .brand small {
        max-width: calc(100vw - 92px) !important;
        font-size: 11px !important;
    }

    .nav,
    .header-actions {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .nav a,
    .header-actions .btn {
        flex: 0 0 auto !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .header-actions .account-chip span {
        display: inline-block !important;
        max-width: 112px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .container,
    .site-header .container,
    footer .container,
    main > .container,
    .section.container,
    .flashes.container {
        width: min(100% - 24px, 1180px) !important;
        max-width: 1180px !important;
    }

    main {
        min-height: auto !important;
    }

    .section {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .community-dashboard,
    .dashboard-layout,
    .profile-layout,
    .post-layout,
    .comments-layout,
    .grid.two,
    .grid.three,
    .grid.four {
        grid-template-columns: 1fr !important;
    }

    .glass,
    .panel,
    .form-card,
    .article-card,
    .author-card {
        min-width: 0 !important;
    }

    .ne-auth-clean {
        min-height: auto !important;
        padding: 22px 0 !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 420px) {
    .nav a,
    .header-actions .btn {
        min-height: 29px !important;
        height: 29px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    .brand strong,
    .brand small {
        max-width: calc(100vw - 82px) !important;
    }

    .header-actions .account-chip span {
        max-width: 96px !important;
    }
}