/* ============================================================
   webplayer-now.css  (NOW PLAYING iframe)
   Works with current HTML:
     <div class="meta">
       <div class="row"><div class="value artist ...">...</div></div>
       <div class="row"><div class="value title  ...">...</div></div>
     </div>
   ============================================================ */

/* Slightly tighter title (your original now.css behavior) */
.section-title h2{
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  line-height: 1.25;
  text-align: left;
}

/* Cover */
.cover-wrap{
  width: 100%;
  max-width: 160px;          /* Desktop cover size */
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--cover-radius, 14px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}

.cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Artist/Title block: CENTERED + SAFE on mobile
   IMPORTANT: base.css defines .row as a 2-col grid globally.
   Here we override ONLY inside .meta.
   ============================================================ */

.meta{
  margin-top: 12px;
  display: grid;
  justify-items: center;    /* centers each row */
  text-align: center;
  gap: 6px;
}

/* Kill base.css row grid inside the meta block */
.meta .row{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Values */
.meta .value{
  margin: 0;
  padding: 0;
  line-height: 1.22;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Typography */
.meta .value.artist{
  font-size: 16px;
  font-weight: 900;
}

.meta .value.title{
  font-size: 13px;
  font-weight: 650;
  opacity: .95;
}

/* Clamp (kept) */
.clamp2{
  display: -webkit-box;
  display: box;     /* harmless fallback */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Mobile / small screens
   ============================================================ */
@media (max-width: 420px){
  .cover-wrap{ max-width: 240px; }  /* bigger cover on mobile (as before) */
  .section-title h2{ font-size: 12px; }

  /* Keep the centered layout (do NOT reintroduce 2-col grid here) */
  .meta{ gap: 8px; }
  .meta .value.artist{ font-size: 18px; }
  .meta .value.title{ font-size: 14px; }
}