/* ==========================================================
   🔴 EN DIRECTE (HEADER) — 3 columnas centradas (tipo RAC1)
   ========================================================== */

.ri-h-live {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #da0813;
  color: #fff;
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  font-family: inherit;
}

/* Grid principal (estado normal: current) */
.ri-h-live__grid {
  display: grid;
  grid-template-columns: 1.2fr auto 1fr;
  align-items: center;
  gap: var(--space-m);

  /* CLAVE: el bloque completo queda centrado */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  justify-content: center;
}

/* Columna izquierda */
.ri-h-live__left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  text-align: left;
}

/* Meta: ARA + horario */
.ri-h-live__meta {
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.ri-h-live__label {
  display: inline-flex;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #fff;
  color: #b5121f;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: var(--fs-s);
  line-height: 1;
  white-space: nowrap;
}

.ri-h-live__time {
  font-weight: 600;
  font-size: var(--fs-s);
}

.ri-h-live__title {
  display: block;
  margin: 0 0 .55rem;
  font-size: var(--fs-l);
  font-weight: 850;
  letter-spacing: .01em;
}

/* CTA */
.ri-h-live__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem 1rem;
  border-radius: var(--radius-m);
  background: transparent;
  color: #fff;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, .95);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: var(--fs-s);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.ri-h-live__cta::after {
  content: "►";
  font-size: 1rem;
}

.ri-h-live__cta:hover {
  background: #fff;
  color: #b5121f;
  transform: translateY(-1px);
}

/* Columna centro (imagen) */
.ri-h-live__figure {
  margin: 0;
  justify-self: center;
}

.ri-h-live__cover {
  width: clamp(110px, 10vw, 150px);
  height: clamp(110px, 10vw, 150px);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* Columna derecha (next) */
.ri-h-live__right {
  display: flex;
  justify-self: start;
  flex-direction: column;
  align-items: flex-start;
  max-width: 28ch;
  /* text-align: left;
 */
}

.ri-h-live__next-meta {
  font-weight: 600;
  opacity: .92;
  letter-spacing: .02em;
  display: block;
  color: black;
}

.ri-h-live__next-title {
  font-weight: 800;
  font-size: var(--fs-m);
}

/* Responsive */
@media (max-width: 980px) {
  .ri-h-live {
    display: none !important;
  }

  .ri-h-live__grid {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: .85rem;
    justify-content: start;
  }

  .ri-h-live__figure {
    justify-self: start;
  }

  .ri-h-live__right {
    justify-self: start;
  }
}

/* Suavizado tipográfico */
.ri-h-live,
.ri-h-live * {
  -webkit-font-smoothing: antialiased;
}


/* ==========================================================
   ===== Estado: solo próximo programa
   ========================================================== */

.ri-h-live--only-next {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor externo del banner solo-próximo */
.ri-h-live__only-next {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2.5rem;
  gap: clamp(1rem, 4vw, 3rem);
}

/* Wrapper interno centrado: texto + imagen */
.ri-h-live__only-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  margin: 0 auto;
}

/* Miniatura circular del próximo programa */
.ri-h-live__only-figure {
  margin: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ri-h-live__only-cover {
  width: clamp(70px, 8vw, 100px);
  height: clamp(70px, 8vw, 100px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* Meta solo-próximo (ojo: clase separada para no pisar el estado normal) */
.ri-h-live__only-meta {
  margin: 0 0 .25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}

.ri-h-live__meta-label {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ri-h-live__meta-sep {
  font-size: .85em;
  opacity: .7;
}

.ri-h-live__meta-time {
  font-weight: 800;
}

/* Título del programa debajo, protagonista */
.ri-h-live__title--solo {
  margin: 0;
  margin-top: .15rem;
  font-size: var(--fs-l);
  font-weight: 850;
  line-height: 1.1;
}

/* Botón alineado a la derecha (gracias al flex) */
.ri-h-live__cta--right {
  margin-left: auto;
}

/* Responsive: apila en móvil */
@media (max-width: 980px) {
  .ri-h-live__only-next {
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 1.25rem;
  }

  .ri-h-live__only-inner {
    margin: 0;
    justify-content: flex-start;
  }

  .ri-h-live__only-info {
    text-align: left;
  }

  .ri-h-live__cta--right {
    margin-left: 0;
    margin-top: .5rem;
  }
}

/* ==========================================================
   SOLO PRÓXIM PROGRAMA
   2 columnas centradas (info + imagen)
   ========================================================== */

.ri-h-live__grid--only-next {
  grid-template-columns: auto auto; /* info + imagen */
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Mantiene el look del estado "en directe" */
.ri-h-live__grid--only-next .ri-h-live__left {
  align-items: flex-end;
}

/* Evita que el texto se estreche demasiado */
.ri-h-live__grid--only-next .ri-h-live__left,
.ri-h-live__grid--only-next .ri-h-live__figure {
  max-width: none;
}