/* ═══════════════════════════════════════════════════════════
   DXRP — GLOBAL RESPONSIVE LAYER
   Loaded after all other stylesheets on every page.
   Ensures consistent behavior from 320px up to 4K.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Global foundations ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:var(--nav-h, 64px);
}
body{
  overflow-x:hidden;
  min-width:320px;
}
img,svg,video,canvas,iframe{
  max-width:100%;
  display:block;
}
/* Intrinsic aspect images (no explicit dimensions) auto-scale height */
img:not([width]):not([height]),
svg:not([width]):not([height]){
  height:auto;
}
/* Nav logo — keep designer-defined dimensions, never stretch */
.nav-logo-img{
  height:38px !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
}
/* Prevent long unbreakable strings from blowing layouts */
h1,h2,h3,h4,h5,h6,p,li,td,th,label,summary,figcaption{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
/* Code blocks scroll instead of overflowing */
pre,code,kbd,samp{
  max-width:100%;
  overflow-x:auto;
  word-break:break-word;
}
/* Tables become horizontally scrollable wrappers */
.table-wrap,
table{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  display:block;
}
/* Buttons never blow out the flex row */
.btn{white-space:normal;text-align:center}

/* ── 2. Container normalization ──────────────────────── */
.container,
[class*="container"]{
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:clamp(16px, 3vw, 32px);
}

/* ── 3. Fluid section padding ────────────────────────── */
.section{
  padding-block:clamp(48px, 7vw, 112px);
}

/* ── 4. Fluid typography ─────────────────────────────── */
.section-title{
  font-size:clamp(1.6rem, 3.2vw, 2.75rem);
  line-height:1.15;
}
.section-desc{
  font-size:clamp(.95rem, 1.2vw, 1.08rem);
  line-height:1.6;
}
.section-tag{
  font-size:clamp(.72rem, .85vw, .82rem);
}

/* ── 5. Grid auto-fit for cards across the site ─────── */
.features-grid,
.jobs-grid,
.systems-grid,
.servers-grid,
.steps-grid,
.bento-grid,
.article-grid,
.posts-grid,
.leaderboard-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap:clamp(14px, 2vw, 24px);
}

/* ── 6. Hero responsive behavior ─────────────────────── */
@media(max-width:960px){
  .hero{
    min-height:auto !important;
    max-height:none !important;
    padding:calc(var(--nav-h) + 24px) 16px 48px !important;
  }
  .hero-content{gap:18px !important}
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:360px;
    margin-inline:auto !important;
  }
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-servers{justify-content:center}
  .hero-servers > *{flex:1 1 280px;justify-content:center}
  .hero-stats{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100%;max-width:360px;margin-inline:auto;
    padding:16px 20px !important;
  }
  .hero-stats .stat-sep{display:none}
  .hero-stats .stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .hero-stats .stat:last-child{border-bottom:0}
  .hero-stats .stat-val,
  .hero-stats .stat-lbl{margin:0}
}

/* ── 7. Nav — medium & mobile consolidation ──────────── */
/* Always: nav-link labels must stay on ONE line */
.nav-link{white-space:nowrap !important}

/* Lock body scroll while mobile menu is open */
body.nav-menu-open{overflow:hidden !important;touch-action:none}

/* Hamburger breakpoint lowered to 1100px so medium screens don't cramp */
@media(max-width:1100px){
  :root{--nav-h:64px}
  .nav-header{
    padding:0 14px !important;
    background:rgba(5,5,7,.96) !important;
    backdrop-filter:blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.4) !important;
    border-bottom:1px solid rgba(225,29,72,.24) !important;
    box-shadow:0 6px 24px rgba(0,0,0,.6) !important;
  }
  .nav-container{gap:10px !important}
  .nav-logo-img{height:clamp(28px, 5vw, 36px) !important;width:auto !important;max-width:140px !important}

  /* Hamburger visible */
  .nav-hamburger{
    display:flex !important;
    width:44px;height:44px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
    flex-shrink:0;
  }
  .nav-hamburger span{width:22px;height:2px;background:#fff;display:block;border-radius:2px}

  /* Slide-down FULL-HEIGHT mobile menu */
  .nav-links{
    display:none !important;
    position:fixed !important;
    top:var(--nav-h, 64px) !important;
    left:0 !important;right:0 !important;
    bottom:0 !important;
    height:calc(100vh - var(--nav-h, 64px)) !important;
    height:calc(100dvh - var(--nav-h, 64px)) !important;
    max-height:none !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column !important;
    padding:24px 20px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    gap:8px !important;
    background:rgba(5,5,7,.985) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border-top:1px solid rgba(225,29,72,.3) !important;
    box-shadow:0 24px 48px rgba(0,0,0,.75);
    z-index:99;
  }
  .nav-links.open{display:flex !important}
  .nav-links li{width:100%;list-style:none;margin:0}
  .nav-link{
    display:flex !important;
    align-items:center;
    width:100% !important;
    padding:18px 20px !important;
    font-size:1.15rem !important;
    font-weight:500 !important;
    border-radius:12px !important;
    color:#fff !important;
    white-space:nowrap !important;
    letter-spacing:.01em;
    min-height:56px;
  }
  .nav-link:hover,
  .nav-link:active{background:rgba(225,29,72,.16) !important}

  /* Nav actions in header */
  .nav-actions{
    gap:8px !important;
    margin-left:auto;
    flex-wrap:nowrap;
    align-items:center;
  }
  .nav-actions #nav-server-status{display:none !important}

  /* Action items MIRRORED inside the mobile menu (via nav.js) */
  .nav-links .nav-link-action{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100% !important;
    padding:18px 20px !important;
    font-size:1.05rem !important;
    font-weight:600 !important;
    border-radius:12px !important;
    text-align:center;
    letter-spacing:.01em;
    margin-top:6px;
    white-space:nowrap !important;
    min-height:56px;
  }
  .nav-links .nav-link-action:not(.nav-link-auth){
    background:linear-gradient(135deg,#e11d48,#9f1239) !important;
    color:#fff !important;
    box-shadow:0 8px 20px -6px rgba(225,29,72,.55);
  }
  .nav-links .nav-link-auth{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
  }
  .nav-links .nav-mirror{
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .nav-links .nav-mirror + .nav-mirror{border-top:0;padding-top:0}
}

/* Hide .nav-link-action by default (desktop state) */
.nav-link-action{display:none}

/* Tablet (641-1100px): keep Discord + auth inline in header too */
@media(min-width:641px) and (max-width:1100px){
  .nav-actions #nav-auth{display:inline-flex !important}
  .nav-actions .btn-primary{
    display:inline-flex !important;
    padding:8px 14px !important;
    font-size:.85rem !important;
    white-space:nowrap;
  }
  .nav-actions .btn-primary svg{width:14px;height:14px}
}
/* Tight tablet (641-820px): collapse Discord to icon-only */
@media(min-width:641px) and (max-width:820px){
  .nav-actions .btn-primary{
    padding:0 !important;
    width:40px;height:40px;
    justify-content:center;
  }
  .nav-actions .btn-primary > span,
  .nav-actions .btn-primary{font-size:0 !important}
  .nav-actions .btn-primary svg{width:16px;height:16px;font-size:16px}
}

/* Phone (≤640px): hide inline auth + Discord from header (menu has them) */
@media(max-width:640px){
  .nav-actions #nav-auth,
  .nav-actions .btn-primary:not(.nav-hamburger){display:none !important}
  .nav-actions{gap:6px !important}
  .lang-switcher{padding:2px !important}
  .lang-btn{padding:5px 9px !important;font-size:.72rem !important}
}
@media(max-width:420px){
  .nav-header{padding:0 10px !important}
  .nav-container{gap:6px !important}
  .nav-logo-img{max-width:110px !important}
  .nav-hamburger{width:40px;height:40px}
}

/* ── 8. Footer stacking ──────────────────────────────── */
@media(max-width:900px){
  .footer-top,
  .footer-nav,
  .footer-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left;
    gap:16px;
  }
  .footer-nav > *{width:100%}
}
@media(max-width:600px){
  .footer{padding:40px 0 24px !important}
  .footer-nav ul{gap:6px}
}

/* ── 9. Forms & inputs ───────────────────────────────── */
input,textarea,select,button{
  max-width:100%;
  font:inherit;
}
input,textarea,select{
  width:100%;
  min-height:44px; /* touch target */
}
@media(max-width:600px){
  .form-row{flex-direction:column !important;gap:12px}
  .form-row > *{width:100% !important}
}

/* ── 10. Touch targets on coarse pointers ───────────── */
@media(pointer:coarse){
  .btn,.nav-link,.lang-btn,a.nav-link,button{
    min-height:44px;
  }
}

/* ── 11. Blog listing + articles ────────────────────── */
@media(max-width:900px){
  .blog-hero,
  .article-hero{
    padding:calc(var(--nav-h) + 24px) 16px 32px !important;
  }
  .article-hero h1,
  .blog-hero h1{font-size:clamp(1.75rem, 5vw, 2.6rem) !important}
  .article-content,
  .post-content{
    padding-inline:16px !important;
    font-size:clamp(.95rem, 2.4vw, 1.05rem);
  }
  .article-content h2{font-size:clamp(1.3rem, 3.5vw, 1.8rem)}
  .article-content h3{font-size:clamp(1.1rem, 3vw, 1.45rem)}
  .article-content img,
  .post-content img{border-radius:12px}
  .blog-card,.post-card{width:100%}
}
@media(max-width:600px){
  .article-meta,.post-meta{flex-wrap:wrap;gap:6px 10px;font-size:.78rem}
}

/* ── 12. Live page ───────────────────────────────────── */
@media(max-width:1060px){
  .dxlive-hero-stats{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) !important}
  .dxlive-kpi-row{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important}
  .dxlive-grid{grid-template-columns:1fr !important}
}
@media(max-width:640px){
  .dxlive-hero{padding-inline:16px !important}
  .dxlive-hero-title{font-size:clamp(1.8rem, 7vw, 2.6rem) !important}
  .dxlive-hero-stats{grid-template-columns:repeat(2, 1fr) !important}
  .dxl-feed-toolbar{flex-wrap:wrap;gap:6px !important}
  .dxl-chip{font-size:.78rem;padding:5px 10px}
}

/* ── 13. Profile page ────────────────────────────────── */
@media(max-width:900px){
  .profile-header,
  .profile-grid,
  .profile-stats{
    grid-template-columns:1fr !important;
  }
  .profile-avatar{margin-inline:auto}
}

/* ── 14. Leaderboard ────────────────────────────────── */
@media(max-width:768px){
  .leaderboard table th:nth-child(n+4),
  .leaderboard table td:nth-child(n+4){display:none}
  .leaderboard-filters{flex-wrap:wrap;gap:8px}
  .leaderboard-filters > *{flex:1 1 140px}
}

/* ── 15. Image aspect preservation for hero shots ─── */
.hero-logo-img,.about-preview-img,.screenshot,figure img{
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ── 16. Prevent fixed-width inline styles from leaking */
[style*="width:"]:not([style*="max-width"]){max-width:100%}

/* ── 17. Very large screens — keep content readable ─ */
@media(min-width:1600px){
  .container,[class*="container"]{max-width:1280px}
  .section-title{font-size:clamp(2.2rem, 2.2vw, 3rem)}
}
@media(min-width:2200px){
  body{font-size:18px}
  .container,[class*="container"]{max-width:1440px}
}

/* ── 18. Landscape phones — avoid cropped hero ─────── */
@media(max-height:520px) and (orientation:landscape){
  .hero{
    min-height:auto !important;
    max-height:none !important;
    padding:calc(var(--nav-h) + 20px) 16px 32px !important;
  }
  .hero-split{grid-template-columns:auto 1fr !important;gap:24px !important}
  .hero-split .hero-logo-wrap{max-width:140px !important}
  .hero-split .hero-logo-img{max-width:140px !important}
  .hero-title{font-size:clamp(1.4rem, 3vw, 2rem) !important}
  .hero-stats{display:none !important}
}

/* ── 19. Safe-area insets (notch phones) ───────────── */
@supports(padding:max(0px)){
  .nav-header{
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
  }
  .footer{
    padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
  }
}

/* ── 20. Reduce motion ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}