/* ============================================================
   RadioGrub — home.css
   Home view: hero, device mock, sections, cards, pricing, near-you, featured, footer, cookie bar.
   ============================================================ */

.hero{
  padding: 40px 0 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items:center;
}
.hero h1{
  margin: 0;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 980;
}
/* ---- THE HIGHLIGHT ----
   It was a translucent red block behind the word, which on white read as a
   marker pen and on black reads as a rendering fault — a dark red rectangle
   with a word in it. On this ground the same emphasis is carried by the type
   itself: the brand gradient through the letters, and a thin rule under them. */
.heroH2{
  margin:12px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height:1.04; letter-spacing:-.03em; font-weight:980;
  text-wrap:balance;
}
.heroH2 .mark{
  background: linear-gradient(180deg, var(--accentHot), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0;
}

.hero p{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 650;
  max-width: 66ch;
}
.heroCtas{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.heroMeta{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  color:var(--text);
  font-weight: 850;
  font-size: 13px;
}
.pill{
  border: 1px solid var(--line2);
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface);
}
.pill.accent{
  border-color: var(--accentLine);
  background: var(--accentSoft);
  color:var(--text);
}
/* Amber is reserved for one thing now — a station being LIVE. A feature pill
   is not a live state, so it wears the identity like everything else. */
.pill.warm{
  border-color: var(--accentLine);
  background: var(--accentSoft);
  color:var(--text);
}

.device{
  border: 1px solid var(--line2);
  background: var(--surface);
  border-radius: var(--r20);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 320px;
  position:relative;
}
.deviceTop{
  height: 52px;
  border-bottom: 1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 14px;
  color:var(--text);
  font-weight: 850;
  font-size: 13px;
}
.dots{display:flex; gap:8px; align-items:center;}
.dot{width:8px;height:8px;border-radius:50%; background: rgba(0,0,0,.92);}
.dot.red{ background: rgba(226,27,35,.45); }
.dot.yellow{ background: rgba(255,198,26,.60); }

.trust{
  margin-top: 20px;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  padding: 16px 0;
  display:flex;
  align-items:center;
  gap: 14px;
  color:var(--text);
  font-weight: 850;
  font-size: 13px;
  overflow:auto;
}
.trust strong{ color:var(--text); }

.section{ margin-top: 34px; }
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.sectionHead h2{
  margin: 0;
  font-size: 22px;
  letter-spacing: -.2px;
  font-weight: 980;
}
.sectionHead p{
  margin: 0;
  max-width: 85ch;
  color: var(--muted);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.45;
}
.controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.ctrl{
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface);
  padding: 10px 12px;
  font-weight: 850;
  color:var(--text);
  outline:none;
}
.ctrl:focus{
  border-color: var(--accentLine);
  box-shadow: 0 0 0 4px var(--accentSoft);
}
.ctrl.search{ min-width: 260px; }
.liveDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(226,27,35,.12);
}

.featureRow{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.feature{
  grid-column: span 4;
  border: 1px solid var(--line2);
  background: var(--surface);
  border-radius: var(--r20);
  padding: 16px;
  box-shadow: var(--shadow2);
  transition: .15s ease;
  position:relative;
  overflow:hidden;
}
.feature:before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(240px 240px at 15% 10%, rgba(226,27,35,.10), transparent 55%),
    radial-gradient(240px 240px at 85% 20%, rgba(255,198,26,.10), transparent 58%);
  opacity: .9;
  pointer-events:none;
}
.feature > *{ position:relative; }
.feature:hover{
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: rgba(226,27,35,.18);
}
.feature h3{
  margin: 0;
  font-weight: 980;
  font-size: 15px;
  letter-spacing: -.2px;
}
.feature p{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.5;
}

footer{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line2);
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  color: var(--muted2);
  font-weight: 750;
  font-size: 13px;
}

.cookieWrap{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: none;
  pointer-events: none;
}
.cookie{
  max-width: var(--max);
  margin: 0 auto;
  /* This was rgba(255,255,255,.92) — a white glass card, which the dark sweep
     left alone because it is written as a white rather than as the light
     surface it stood for. On the new ground it was white type on white: a
     contrast ratio of 1.00, the worst on the page. */
  border: 1px solid var(--line3);
  background: var(--surfaceGlass);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-radius: 18px;
  box-shadow: var(--shadowLift);
  padding: 14px 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  pointer-events: auto;
  transform: translateY(12px);
  opacity: 0;
  animation: cookieIn .28s ease forwards;
}
@keyframes cookieIn{
  to{ transform: translateY(0); opacity: 1; }
}
.cookieText{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.cookieTitle{
  font-weight: 980;
  letter-spacing: -.2px;
  font-size: 14px;
  margin: 0;
}
.cookieDesc{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.35;
}
.cookieActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
}
.cookieBtn{
  border: 1px solid var(--line2);
  background: var(--surface2);
  color:var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 13px;
  cursor:pointer;
  transition: .15s ease;
}
.cookieBtn:hover{ border-color: rgba(226,27,35,.20); filter: brightness(.98); }
.cookieBtn.primary{
  background:var(--surface3);
  border-color: var(--text);
  color:#fff;
}
.cookieBtn.primary:hover{ opacity: .92; }
.cookieBtn.warm{
  background: var(--accentGrad);
  border-color: transparent;
  color: var(--onAccent);
}
.miniBtn{
  border:1px solid var(--line2); background: var(--surface2);
  color:var(--text); border-radius:999px;
  padding:8px 12px; font-weight:900; font-size:12px; cursor:pointer;
  transition:.15s ease; display:inline-flex; gap:6px; align-items:center;
  white-space: nowrap;
}
.miniBtn:hover{ border-color: var(--accentLine); }
.miniBtn svg{ width:15px; height:15px; }
.miniBtn.fav.active{ border-color: var(--accentLine); background: var(--accentSoft); color:var(--accentText); }
.miniBtn.follow{ margin-left:auto; }
.miniBtn.follow.active{ background:var(--surface3); border-color:var(--text); color:#fff; }

.favCount{
  position:absolute; top:-3px; right:-3px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background: var(--accent); color:#fff;
  font-size:10px; font-weight:950; line-height:1;
  display:none; align-items:center; justify-content:center;
}
.favCount.show{ display:flex; }

.featuredStrip{ margin-top: 22px; }
.featCard{
  display:grid; grid-template-columns: 200px 1fr; gap: 32px;
  align-items:center;
  border:1px solid var(--line2);
  border-radius: var(--r20);
  background:
    radial-gradient(300px 200px at 12% 20%, rgba(226,27,35,.14), transparent 60%),
    radial-gradient(320px 220px at 88% 30%, rgba(255,198,26,.14), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow);
  padding: 20px;
  overflow:hidden;
}
.featArt{ position:relative; width:200px; cursor:pointer; }
.featTag{ color:var(--accentText);
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:980; color:var(--accentText);
  border:1px solid var(--accentLine); background: var(--accentSoft);
  padding:6px 11px; border-radius:999px;
}
.featTitle{ margin:12px 0 0; font-size: clamp(28px,3.2vw,40px); font-weight:980; letter-spacing:-.6px; }
.featSub{ margin:8px 0 0; color: var(--muted); font-weight:650; font-size:15px; line-height:1.5; max-width:60ch; }
.featCtas{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* the light button is base.css's job now — see "ONE BUTTON" */

.footLinks{ display:flex; gap:16px; flex-wrap:wrap; }
.footLinks a{ color: var(--muted); text-decoration:none; font-weight:800; }
.footLinks a:hover{ color:var(--accentText); }

@media (max-width: 980px){
  .page{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .hero{ grid-template-columns: 1fr; padding-top: 40px; }
  .navLinks{ display:none; }
  .ctrl.search{ min-width: 0; width: 100%; }
  .nav{ padding: 10px 14px; }
  .brand img{ width: 46px; height: 46px; }
}

@media (max-width: 720px){
  .featCard{ grid-template-columns: 1fr; }
  .featArt{ width: min(200px, 60vw); }
}

@media (max-width: 560px){ 
  .cookie{ flex-direction: column; align-items: flex-start; }
  .cookieActions{ width: 100%; justify-content: flex-start; }
}


/* ---- the mood device's track tiles ----
   They used to be a food emoji each. Initials on the surface, at the same
   weight as a station tile, so the demo obeys the rule the real thing does. */
.moodInitials{
  font-size:12px; font-weight:900; letter-spacing:-.02em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.moodTrack.playing .moodInitials{ color:var(--accentText); }

/* one shape, one weight, wherever a glyph is used inline */
.gIc{ width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:0 0 auto; }
.miniIc{ width:15px; height:15px; vertical-align:-.2em; margin-right:2px; }
.socIc{ width:19px; height:19px; display:block; }
.icSvg{ width:24px; height:24px; display:block; }