/* PATCH v17 - Mobile menu + hero platforms + featured artists */

.hero-platforms{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:nowrap;
  color:rgba(255,255,255,.92);
}
.hero-platforms a,
.hero-platforms .hero-platform{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  opacity:.9;
  transition:opacity .12s ease, transform .08s ease;
}
.hero-platforms a:hover{opacity:1;transform:translateY(-1px);}
.hero-platforms .ico{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;}
.hero-platforms svg{width:28px;height:28px;fill:currentColor;opacity:.95;}
.hero-platforms .muted{opacity:.82;font-weight:700;}

@media (max-width:520px){
  .hero-platforms{gap:16px}
  .hero-platforms a,.hero-platforms .hero-platform{font-size:14px}
  .hero-platforms .ico,.hero-platforms svg{width:24px;height:24px}
}
@media (max-width:380px){
  .hero-platforms .label{display:none;}
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.artists-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  nav.nav, nav#primary-nav, .nav#primary-nav{
    position:fixed;
    top:70px;
    right:16px;
    left:16px;
    display:none;
    flex-direction:column;
    gap:10px;
    padding:14px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    z-index:9999;
  }
  nav.nav.open, nav#primary-nav.open, .nav#primary-nav.open{display:flex;}
  nav.nav a, nav#primary-nav a, .nav#primary-nav a{
    padding:12px 12px;
    border-radius:12px;
    background:rgba(11,30,83,.04);
  }

  .nav-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    z-index:9998;
  }
  .nav-overlay.open{display:block;}
}

/* FIX: menu mobile cliquable */
@media (max-width:900px){
  nav.nav, nav#primary-nav, .nav#primary-nav{
    pointer-events:auto !important;
    z-index:10001 !important;
  }
  .nav-overlay{
    z-index:10000 !important;
  }
}

@media (max-width:900px){
  .site-header{ position:relative; z-index:10002 !important; }
  .nav-toggle{ position:relative; z-index:10003 !important; }
}