/* =========================
   Romantica Radio – UI v3.7 (light only)
   Focus sulla cover + card pulite, palette chiara
   ========================= */

/* Design tokens (chiari) */
:root{
  --rr-radius: 14px;
  --rr-radius-sm: 10px;
  --rr-gap: 16px;
  --rr-card-bg: #ffffff;
  --rr-bg: #f7f9fc;         /* grigio chiarissimo per contrasti morbidi */
  --rr-text: #0f172a;       /* blu-grigio molto scuro (non nero assoluto) */
  --rr-muted: #6b7280;      /* grigio testo secondario */
  --rr-border: #e8ecf2;     /* bordo chiaro */
  --rr-shadow: 0 8px 24px rgba(15,23,42,.06);
  --rr-shadow-sm: 0 4px 14px rgba(15,23,42,.05);
  --rr-accent: #e95b7a;     /* accento soft */
}

/* Card contenitore */
.romantica-widget{
  box-sizing:border-box;
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--rr-gap);
  background: var(--rr-card-bg);
  color: var(--rr-text);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius);
  padding: 16px;
  box-shadow: var(--rr-shadow);
}

/* Layout responsive: cover grande a sinistra su viewport medio+ */
@media (min-width: 640px){
  .romantica-widget[data-role="full"]{
    grid-template-columns: 200px 1fr;
    align-items: center;
  }
}

/* Sezione NOW */
.romantica-now{display:grid; grid-template-columns: 1fr; gap:12px; align-items:center;}

/* Cover grande (NOW) */
.romantica-cover-link{
  display:block;
  width:100%;
  max-width: 220px;
  border-radius: var(--rr-radius);
  overflow:hidden;
  box-shadow: var(--rr-shadow);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.romantica-cover-link:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }

.romantica-cover{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  background: linear-gradient(180deg, #f3f6fb, #e9eef6);
}

/* Metadati */
.romantica-meta{line-height:1.25}
.romantica-title{font-weight:700; font-size: clamp(1.05rem, 1.2vw + .9rem, 1.4rem); letter-spacing:.2px; margin-bottom:6px}
.romantica-artist{color:var(--rr-muted); font-size:1rem}

/* Sezione STORICO come griglia di mini-card */
.romantica-history{
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.romantica-history-item{
  display:flex;
  gap:12px;
  align-items:center;
  background: var(--rr-card-bg);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  padding:10px;
  box-shadow: var(--rr-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.romantica-history-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  border-color: #dbe4f0;
  background: #ffffff;
}

/* Mini cover storico */
.romantica-history-item img{
  width:68px; height:68px; min-width:68px;
  border-radius: 10px;
  object-fit:cover;
  background:#eef2f7;
  display:block;
}

/* Testo storico */
.romantica-history-item .txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.romantica-history-item .t{
  font-weight:650;
  font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.romantica-history-item .a{
  color:var(--rr-muted);
  font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Variante solo COVER: ancora più focus sulla cover */
.romantica-widget[data-role="cover"]{
  display:grid;
  grid-template-columns: 180px 1fr;
  align-items:center;
}
@media (max-width: 520px){
  .romantica-widget[data-role="cover"]{
    grid-template-columns: 1fr;
  }
}
.romantica-widget[data-role="cover"] .romantica-cover-link{max-width: 220px;}
.romantica-widget[data-role="cover"] .romantica-title{font-size:1.2rem}
.romantica-widget[data-role="cover"] .romantica-artist{font-size:1rem}

/* Variante solo STORICO: card intera concentrata sulla lista */
.romantica-widget[data-role="history"]{padding:14px}

/* Compat: vecchio markup (se presente altrove) */
.romantica-track{display:flex;align-items:center;margin-bottom:15px}
.romantica-cover-wrapper{flex:0 0 30%;max-width:30%;padding-right:10px}
.romantica-text{flex:1;display:flex;flex-direction:column}
.romantica-time{font-size:.9em;color:var(--rr-muted)}

/* Lightbox (sfondo scuro traslucido ma contenuto bianco/chiaro) */
.romantica-lightbox-modal{display:none;position:fixed;z-index:9999;padding-top:60px;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,.85)}
.romantica-lightbox-modal img{margin:auto;display:block;max-width:84%;max-height:84%;border-radius:12px;box-shadow: 0 20px 40px rgba(0,0,0,.45)}
.romantica-lightbox-modal .close{position:absolute;top:20px;right:35px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer}

/* Focus states accessibili */
.romantica-cover-link:focus-visible,
a.romantica-lightbox:focus-visible{
  outline: 3px solid rgba(233, 91, 122, .6);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Variante “stretta” per sidebar/widget (opzionale) */
.sidebar .romantica-widget,
.widget-area .romantica-widget{
  padding:12px;
}
.sidebar .romantica-widget[data-role="full"]{grid-template-columns:160px 1fr}
.sidebar .romantica-history-item img{width:60px;height:60px}

/* Orario su riga dedicata nello storico */
.romantica-history-item .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.romantica-history-item .time{
  color: var(--rr-muted);
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Cover variant: immagine grande + testo sotto (artista, poi brano) ===== */
.romantica-widget[data-role="cover"]{
  /* layout verticale, centrato */
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
  gap: 14px;
}

/* cover più grande e con hover leggero */
.romantica-widget[data-role="cover"] .romantica-cover-link{
  max-width: clamp(220px, 28vw, 320px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--rr-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.romantica-widget[data-role="cover"] .romantica-cover-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}
.romantica-widget[data-role="cover"] .romantica-cover{
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* testo sotto la cover: artista poi brano */
.romantica-widget[data-role="cover"] .romantica-meta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.romantica-widget[data-role="cover"] .romantica-artist{
  order: 1;                 /* artista sopra */
  font-weight: 700;
  font-size: 1.1rem;
}
.romantica-widget[data-role="cover"] .romantica-title{
  order: 2;                 /* brano sotto */
  font-weight: 500;
  font-size: 1rem;
  color: var(--rr-muted);
}

/* variante super-compatta in spazi stretti */
@media (max-width: 420px){
  .romantica-widget[data-role="cover"] .romantica-cover-link{
    max-width: 85%;
  }
}