/* NYRELIX v0.3 editorial layout polish.
   Loaded only on the v0.3 preview branch until the redesign is approved. */

:root{
  --editorial-line:rgba(88,137,188,.22);
  --editorial-soft:rgba(255,255,255,.035);
}

/* Navigation and accessibility QA. */
html{scroll-padding-top:92px}
[id]{scroll-margin-top:92px}
.main-nav a{position:relative}
.main-nav a[aria-current="page"]{color:var(--cyan);text-shadow:0 0 18px rgba(32,217,255,.2)}
.main-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  box-shadow:0 0 12px rgba(32,217,255,.3);
}
a[aria-disabled="true"]{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.search-box{position:relative}
.search-box:focus-within{
  border-color:rgba(32,217,255,.72);
  box-shadow:0 0 0 3px rgba(32,217,255,.08);
}
.search-feedback{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:90;
  min-width:92px;
  max-width:210px;
  padding:7px 10px;
  border:1px solid rgba(58,185,224,.28);
  border-radius:999px;
  background:rgba(5,12,20,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  color:#bfefff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.025em;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .16s ease,transform .16s ease;
}
.search-feedback.is-visible{opacity:1;transform:translateY(0)}
.search-feedback.is-empty{color:#ffb8c5;border-color:rgba(255,105,135,.3)}
.search-hit{
  border-color:rgba(61,220,255,.62)!important;
  box-shadow:0 0 0 2px rgba(32,217,255,.08),0 18px 52px rgba(0,0,0,.34)!important;
}

/* Stronger page rhythm and section hierarchy. */
.page-shell{padding-bottom:8px}
.content-layout{align-items:start}
.content-section{position:relative}
.section-bar{
  min-height:42px;
  padding-bottom:11px;
  border-bottom:1px solid var(--editorial-line);
}
.section-bar h2{
  font-weight:900;
  letter-spacing:.055em;
  text-wrap:balance;
}
.section-bar>a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 0;
  font-weight:800;
  white-space:nowrap;
}
.section-bar>a:hover{color:#8beaff}

/* Premium hero treatment without changing the NYRELIX identity. */
.hero-main{
  min-height:560px;
  border-color:rgba(75,126,180,.33);
  background:#070d16;
}
.hero-main-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 76% 18%,rgba(53,217,255,.12),transparent 28%),
    linear-gradient(180deg,transparent 45%,rgba(2,6,12,.22) 62%,rgba(2,6,12,.72) 100%);
  pointer-events:none;
}
.hero-main-copy{max-width:820px}
.hero-main-copy .label{
  box-shadow:0 7px 25px rgba(128,58,229,.24);
}
.hero-main h1{
  max-width:780px;
  font-size:clamp(46px,4.55vw,72px);
  line-height:.96;
  text-wrap:balance;
}
.hero-main p{
  max-width:720px;
  line-height:1.55;
}
.outline-btn{
  min-height:40px;
  padding-inline:18px;
  box-shadow:inset 0 0 0 1px rgba(32,217,255,.06),0 10px 30px rgba(0,0,0,.18);
}

/* Equal card rhythm. Text can vary without making rows feel crooked. */
.release-card,.dev-card,.platform-card,.review-card{
  height:100%;
  background:linear-gradient(180deg,rgba(12,20,32,.96),rgba(7,13,22,.98));
}
.release-card{display:flex;flex-direction:column;min-height:282px}
.release-card .platform-tags{margin-top:auto;padding-top:2px}
.dev-card{display:flex;flex-direction:column;min-height:250px}
.dev-card p{margin-top:auto;padding-top:9px}
.platform-card{display:flex;flex-direction:column;min-height:230px}
.platform-card p{margin-top:auto;padding-top:4px}
.review-card{display:flex;flex-direction:column;min-height:285px}
.review-card>a{margin-top:auto;padding-top:5px;font-weight:800}

.card-image,.dev-art,.platform-art,.review-art{
  flex:0 0 auto;
}
.release-card h3,.dev-card h3,.platform-card h3,.review-card h3{
  text-wrap:balance;
}

/* Sidebar reads as a deliberate editorial rail instead of leftover cards. */
.sidebar{position:relative}
.side-panel{
  background:linear-gradient(180deg,rgba(12,20,32,.97),rgba(7,13,22,.98));
  border-color:rgba(70,118,166,.28);
}
.side-title{letter-spacing:.045em}
.popular-list li{transition:background .18s ease,padding-left .18s ease}
.popular-list li:hover{background:rgba(255,255,255,.025);padding-left:4px}
.community-post{transition:background .18s ease}
.community-post:hover{background:rgba(255,255,255,.022)}
.side-promo{
  box-shadow:inset 0 0 70px rgba(50,160,255,.045),0 18px 52px rgba(0,0,0,.28);
}

/* Release calendar receives a little more breathing room. */
.release-table-section{margin-top:6px}
.release-table>div{
  min-height:76px;
  border-color:rgba(65,105,149,.28);
  transition:border-color .18s ease,background .18s ease;
}
.release-table>div:hover{
  border-color:rgba(68,202,255,.34);
  background:#0b1521;
}

@media (min-width:1200px){
  .content-layout{gap:22px}
  .content-section{margin-bottom:34px}
  .section-bar h2{font-size:23px}
}

@media (max-width:760px){
  /* Tight mobile rhythm while keeping touch targets comfortable. */
  html{scroll-padding-top:82px}
  [id]{scroll-margin-top:82px}
  .main-nav a[aria-current="page"]::after{bottom:-5px}
  .search-feedback{
    top:calc(100% + 7px);
    right:2px;
    font-size:9px;
    padding:6px 9px;
  }
  .page-shell{padding-bottom:0}
  .hero-main{min-height:590px!important}
  .hero-main-copy{left:0!important;right:0!important;bottom:0!important;padding:26px!important}
  .hero-main-copy .label{margin-bottom:2px}
  .hero-main h1{
    font-size:clamp(42px,12.2vw,56px)!important;
    line-height:.97!important;
    max-width:100%!important;
  }
  .hero-main p{
    font-size:16px!important;
    line-height:1.48!important;
    max-width:100%!important;
  }
  .outline-btn{min-height:44px}

  .content-section{margin-top:34px!important;margin-bottom:0!important}
  .section-bar{
    min-height:0!important;
    align-items:center!important;
    padding-bottom:10px!important;
    margin-bottom:14px!important;
  }
  .section-bar h2{
    max-width:68%;
    font-size:clamp(24px,7.3vw,31px)!important;
    line-height:1.03!important;
    letter-spacing:.025em!important;
  }
  .section-bar>a{
    max-width:32%;
    font-size:12px!important;
    line-height:1.15;
    white-space:normal!important;
  }

  .release-cards,.dev-grid,.platform-grid,.review-grid,.hero-side,.trend-items{
    scroll-padding-inline:2px;
  }
  .release-card,.dev-card,.platform-card,.review-card{
    height:auto!important;
  }
  .release-card{min-height:300px!important}
  .dev-card{min-height:270px!important}
  .platform-card{min-height:255px!important}
  .review-card{min-height:305px!important}

  .release-card h3{font-size:18px!important}
  .dev-card h3,.review-card h3{font-size:17px!important}
  .platform-card h3{font-size:15px!important}
  .release-card p,.dev-card p,.platform-card p,.review-card p{line-height:1.4!important}

  .sidebar{margin-top:36px!important}
  .side-panel{padding:17px!important;border-radius:14px!important}
  .side-title h3{font-size:15px!important}
  .popular-list span{font-size:13px!important;line-height:1.32!important}
  .popular-list small{font-size:10px!important}
  .community-post b{font-size:12px!important}
  .community-post p{font-size:12px!important;line-height:1.4!important}
  .community-post em{font-size:10px!important}

  .release-table-section{margin-top:32px!important}
}

@media (max-width:420px){
  .hero-main{min-height:560px!important}
  .hero-main-copy{padding:23px!important}
  .section-bar h2{font-size:25px!important}
  .section-bar>a{font-size:11px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .release-card,.dev-card,.platform-card,.review-card,.mini-feature,
  .popular-list li,.community-post,.release-table>div,.search-feedback{transition:none!important}
}