/* modules/radar_smc/radar_smc.css
   Radar SMC + Avisos (ginys Meteocat)
   - Desktop: 2 columnas
   - Móvil: 1 columna (Radar arriba)
   - Ginys: centrados y sin scroll
   - SIN topbar (la web ya tiene autorefresco)
*/

#radar_smc{ margin:16px 0 28px; }

/* Grid de cards */
.smc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:980px){
  .smc-grid{ grid-template-columns:1fr 1fr; }
}

/* Card Aurora */
.smc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-width:0;
}

.smc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

.smc-titlewrap{ min-width:0; }
.smc-title{
  font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
}
.smc-sub{
  margin-top:2px;
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--muted);
}

.smc-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.smc-open{
  border:1px solid var(--border);
  background:rgba(var(--brand-rgb),.08);
  border-color:rgba(var(--brand-rgb),.25);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font:700 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-decoration:none;
}

/* Embed centrado */
.smc-embed{
  position:relative;
  width:100%;
  overflow:hidden;
  background:rgba(0,0,0,.015);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 8px;
}

/* Iframe del giny */
.smc-iframe{
  border:0;
  width:min(420px, 100%);
  height:480px;
  display:block;
}

/* Ajustes por tamaño */
@media (max-width:720px){
  .smc-iframe{
    width:min(396px, 100%);
    height:460px;
  }
}
@media (min-width:980px){
  .smc-iframe{
    width:min(460px, 100%);
    height:520px;
  }
}

/* Meta */
.smc-meta{
  padding:8px 12px;
  border-top:1px solid var(--border);
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--muted);
}