/* NYRELIX v0.3 preview polish. Kept separate while the redesign is under review. */
html,body{max-width:100%;overflow-x:hidden}
.page-shell,.content-layout,.main-column,.sidebar,.content-section{min-width:0}

@media (max-width:760px){
  .topbar-inner{padding-left:14px!important;padding-right:14px!important;gap:10px!important}
  .brand{min-width:0!important}
  .brand img{width:205px!important;max-width:56vw!important;height:auto!important;object-fit:contain!important}
  .menu-toggle{width:52px!important;height:52px!important;display:grid!important;place-items:center!important;flex:0 0 52px!important}
  .page-shell{width:calc(100% - 24px)!important;margin-left:auto!important;margin-right:auto!important}

  .hero-grid{display:block!important}
  .hero-main{min-height:610px!important;border-radius:18px!important}
  .hero-main-copy{padding:28px!important;max-width:none!important}
  .hero-main-copy h1{font-size:clamp(44px,13vw,62px)!important;line-height:.98!important;letter-spacing:-.045em!important}
  .hero-main-copy p{font-size:17px!important;line-height:1.45!important;max-width:31rem!important}

  /* The three compact hero stories become a proper swipe carousel on phones. */
  .hero-side{
    display:flex!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    gap:14px!important;
    margin-top:14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    overscroll-behavior-y:auto!important;
    padding:2px 2px 10px!important;
    touch-action:auto!important;
  }
  .hero-side::-webkit-scrollbar{display:none}
  .mini-feature{
    flex:0 0 min(88vw,360px)!important;
    width:min(88vw,360px)!important;
    max-width:min(88vw,360px)!important;
    min-width:0!important;
    min-height:250px!important;
    border-radius:18px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .mini-bg{
    background-size:100% auto!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-color:#08101a!important;
  }
  .mini-copy{padding:22px!important;left:0!important;right:0!important;bottom:0!important;background:linear-gradient(180deg,transparent,rgba(4,8,14,.9) 28%,rgba(4,8,14,.98))!important}
  .mini-copy h3{font-size:27px!important;line-height:1.06!important;max-width:100%!important;margin-right:0!important}
  .mini-copy p{font-size:15px!important;line-height:1.35!important;max-width:100%!important}

  .trend-strip{margin-top:18px!important;border-radius:18px!important;overflow:hidden!important}
  .trend-title{padding:18px 20px!important}
  .trend-items{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-inline:contain!important}
  .trend-items::-webkit-scrollbar{display:none}
  .trend-items>a{flex:0 0 82vw!important;max-width:340px!important;min-width:0!important;scroll-snap-align:start!important;padding:20px!important}

  .content-layout{display:block!important}
  .content-section{margin-top:38px!important}
  .section-bar{gap:14px!important;align-items:flex-end!important;margin-bottom:16px!important}
  .section-bar h2{font-size:clamp(27px,8vw,36px)!important;line-height:1.05!important;letter-spacing:.015em!important}
  .section-bar>a{font-size:14px!important;text-align:right!important;flex:0 0 auto!important}

  .release-cards,.dev-grid,.platform-grid,.review-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain!important;
    padding:2px 2px 10px!important;
  }
  .release-cards::-webkit-scrollbar,.dev-grid::-webkit-scrollbar,.platform-grid::-webkit-scrollbar,.review-grid::-webkit-scrollbar{display:none}
  .release-card,.dev-card,.platform-card,.review-card{
    flex:0 0 min(82vw,320px)!important;
    width:min(82vw,320px)!important;
    max-width:min(82vw,320px)!important;
    min-width:0!important;
    scroll-snap-align:start!important;
  }
  .release-card h3,.dev-card h3,.platform-card h3,.review-card h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .release-card p,.dev-card p,.platform-card p,.review-card p{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

  /* Sidebar must become a true one-column stack on phones. */
  .sidebar{
    width:100%!important;
    max-width:100%!important;
    margin-top:42px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:18px!important;
    overflow:visible!important;
  }
  .sidebar>*{grid-column:1/-1!important;min-width:0!important;width:100%!important;max-width:100%!important}
  .side-panel,.side-promo{display:block!important;width:100%!important;max-width:none!important;min-width:0!important}
  .popular-list{width:100%!important}
  .popular-list li{grid-template-columns:34px minmax(0,1fr)!important;gap:12px!important}
  .popular-list li span{min-width:0!important}
  .community-post{grid-template-columns:52px minmax(0,1fr)!important;gap:14px!important}
  .community-post>span{min-width:0!important}
  .community-post p{overflow-wrap:anywhere!important}
  .community-btn{width:100%!important}
  .side-promo{min-height:430px!important;padding:30px!important}
  .side-promo h3{font-size:clamp(36px,10vw,48px)!important;line-height:.98!important}

  .footer-inner,.footer{grid-template-columns:1fr!important;text-align:left!important}
}

@media (max-width:420px){
  .brand img{width:190px!important;max-width:58vw!important}
  .hero-main{min-height:570px!important}
  .hero-main-copy{padding:24px!important}
  .hero-main-copy h1{font-size:44px!important}
  .mini-feature{flex-basis:86vw!important;width:86vw!important;max-width:86vw!important}
  .mini-copy h3{font-size:24px!important}
  .section-bar h2{font-size:27px!important}
  .section-bar>a{font-size:13px!important}
  .release-card,.dev-card,.platform-card,.review-card{flex-basis:84vw!important;width:84vw!important;max-width:84vw!important}
}