/**
 * RADIO UNaF — SECCIONES
 * Cada bloque de la portada. El ritmo alterna claro y oscuro para que el
 * recorrido tenga respiración editorial y no sea una lista de tarjetas.
 */

/* ==========================================================================
   AHORA EN VIVO
   No repite la consola: la amplía. Muestra el programa al aire en clave
   editorial y lo que viene después.
   ========================================================================== */

.now-live__main { align-items: center; }

/* El reparto 7/5 recién a partir de 900px. Entre 768 y 900 la columna de
   texto quedaba en unos 290px y un título como «TRASNOCHE UNIVERSITARIA» en
   caja alta no entraba: se apilan a ancho completo, que además da más
   presencia a la imagen del programa. */
@media (min-width: 900px) {
  .now-live__media { grid-column: span 7; }
  .now-live__info { grid-column: span 5; }
}

.now-live__media { position: relative; }

/* Chapa AL AIRE sobre la imagen. */
.now-live__badge {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2;
}

/* Ecualizador sobre la imagen, abajo a la derecha. */
.now-live__eq {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 2;
  color: var(--white);
  padding: var(--space-3);
  background: rgb(10 10 11 / 0.72);
}

.now-live__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

/* align-items: flex-start hace que cada hijo se ajuste a su contenido en vez
   de estirarse. Sin este tope, una palabra larga en caja alta desborda la
   columna y arrastra scroll horizontal a toda la página. */
.now-live__info > * { max-width: 100%; }

.now-live__title {
  font-size: var(--step-4);
  line-height: 0.98;
  margin: 0;
}

.now-live__host {
  font-size: var(--step-0);
  color: var(--text-muted);
}
.now-live__host strong { color: var(--text); font-weight: var(--weight-semibold); }

.now-live__schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-subtle);
}

/* Franja de lo que sigue. Tres columnas monoespaciadas separadas por filetes. */
.up-next {
  margin-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--border);
  padding-top: var(--space-5);
}

.up-next__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .up-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .up-next__item { padding-inline: var(--space-5); border-left: var(--border-hairline) solid var(--border); }
  .up-next__item:first-child { padding-inline-start: 0; border-left: none; }
}

.up-next__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.up-next__time { color: var(--action); }

.up-next__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--text);
}

.up-next__host { font-size: var(--step--1); color: var(--text-subtle); }

/* ==========================================================================
   PROGRAMACIÓN
   ========================================================================== */

/* Selector de día: monoespaciado, con scroll horizontal en móvil sin que se
   note que hay scroll. */
.day-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--border);
}
.day-tabs::-webkit-scrollbar { display: none; }

.day-tab {
  flex: none;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: var(--border-thick) solid transparent;
  margin-bottom: calc(var(--border-thick) * -1 - 1px);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-subtle);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.day-tab:hover { color: var(--text); }
.day-tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--action); }

.schedule-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Tope de tres columnas.
   Con auto-fill, a 1440px entraban cuatro y los seis programas de la portada
   quedaban en una fila de cuatro más otra de dos, con dos huecos. Tres
   columnas cierran dos filas exactas y además dan tarjetas más grandes, que
   es lo que separa esta grilla de una lista de tarjetas genéricas. */
@media (min-width: 1100px) {
  .schedule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La tarjeta de programa lleva el horario sobre la imagen: es el dato que
   más se busca en una programación. */
.card-program .media { --card-ratio: 4 / 3; }

.card-program__time {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  background: var(--red-500);
  color: var(--white);
}

.card-program__days { color: var(--text-subtle); }

/* ==========================================================================
   ACTUALIDAD UNaF
   Una noticia principal grande y un cuerpo de secundarias. Diseño editorial:
   la jerarquía la da el tamaño, no una caja de color.
   ========================================================================== */

@media (min-width: 900px) {
  .news__lead { grid-column: span 7; }
  .news__side { grid-column: span 5; }
}

.news__lead .card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.news__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* Noticia secundaria: miniatura a la izquierda, texto a la derecha. */
.card-news-sm {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: var(--border-hairline) solid var(--border);
}
.card-news-sm:last-child { border-bottom: none; padding-bottom: 0; }

@media (min-width: 480px) {
  .card-news-sm { grid-template-columns: 128px minmax(0, 1fr); }
}

.card-news-sm .card__title { font-size: var(--step-0); }

/* Fila inferior de noticias. */
.news__more {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--border);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* ==========================================================================
   PODCASTS
   Sección oscura: el archivo sonoro se escucha «de noche».
   ========================================================================== */

/* 200px y no 220: con 220 el cuarto episodio se caía a una segunda fila justo
   a 1024px de ancho, y la sección perdía contenido sin avisar. */
.podcasts__grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

/* Cuatro columnas fijas para los cuatro episodios de la portada: con
   auto-fill entraban cinco a 1440px y quedaba un hueco al final de la fila. */
@media (min-width: 1100px) {
  .podcasts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card-podcast .media { border: var(--border-hairline) solid var(--ink-700); }

/* Botón de play sobre la portada: aparece al pasar el mouse, y siempre
   visible en táctil (donde no hay hover). */
.card-podcast__play {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--red-500);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.card-podcast:hover .card-podcast__play,
.card-podcast:focus-within .card-podcast__play { opacity: 1; transform: none; }
.card-podcast__play:hover { background: var(--red-600); }

@media (hover: none) {
  .card-podcast__play { opacity: 1; transform: none; }
}

.card-podcast__title { font-size: var(--step-0); }

/* Reproductor compacto de la sección: barra con el episodio seleccionado. */
.podcast-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  background: var(--ink-800);
  border: var(--border-hairline) solid var(--ink-600);
  border-radius: var(--radius-device);
  min-width: 0;
}

.podcast-bar__play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--red-500);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.podcast-bar__play:hover { background: var(--red-600); }

.podcast-bar__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.podcast-bar__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podcast-bar__track {
  position: relative;
  height: 4px;
  background: var(--ink-600);
  cursor: pointer;
}

.podcast-bar__progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0%;
  background: var(--red-500);
  transition: width 120ms linear;
}

.podcast-bar__times {
  display: flex;
  justify-content: space-between;
  color: var(--gray-400);
}

/* ==========================================================================
   MULTIMEDIA
   Mosaico irregular: el archivo no es una grilla uniforme, tiene piezas
   destacadas. En móvil se ordena a una columna.
   ========================================================================== */

.media-mosaic {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .media-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 190px;
    /* dense rellena los huecos que deja una pieza destacada cargada desde el
       panel. Sin esto, marcar una pieza como destacada abría un agujero en la
       grilla. */
    grid-auto-flow: dense;
  }

  /* Una sola pieza grande, de 2×2. Con cinco piezas —la destacada más
     cuatro— el mosaico cierra un rectángulo exacto de 4 columnas por 2
     filas. Es lo que evita el escalón desprolijo del final. */
  .media-tile--wide { grid-column: span 2; grid-row: span 2; }
  .media-tile--tall { grid-row: span 2; }
}

.media-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-800);
  min-height: 150px;
  isolation: isolate;
}

.media-tile > img,
.media-tile > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.media-tile:hover > img,
.media-tile:focus-visible > img,
.media-tile:hover > svg,
.media-tile:focus-visible > svg { transform: scale(1.05); }

/* Velo permanente para que el texto sea legible sobre cualquier imagen. */
.media-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 10 11 / 0.05) 40%, rgb(10 10 11 / 0.85) 100%);
  transition: background var(--duration) var(--ease-out);
}

.media-tile:hover::after,
.media-tile:focus-visible::after {
  background: linear-gradient(180deg, rgb(179 18 26 / 0.28) 0%, rgb(10 10 11 / 0.9) 100%);
}

.media-tile__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--white);
}

.media-tile__type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--red-300);
}

.media-tile__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

@media (min-width: 900px) {
  .media-tile--wide .media-tile__title { font-size: var(--step-2); }
}

/* ==========================================================================
   INSTITUCIONAL
   ========================================================================== */

@media (min-width: 900px) {
  .institution__statement { grid-column: span 7; }
  .institution__facts { grid-column: span 5; }
}

.institution__quote {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--white);
  margin: 0;
}

/* La palabra clave del texto institucional va en rojo: comunicación,
   información, cultura, participación. */
.institution__quote em { font-style: normal; color: var(--red-400); }

.institution__text {
  margin-top: var(--space-5);
  color: var(--gray-300);
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
}

/* Ficha técnica de la emisora: la identificación formal, en monoespaciada. */
.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: var(--border-hairline) solid var(--ink-600);
}

.facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-hairline) solid var(--ink-600);
}

.facts__key { color: var(--gray-400); flex: none; }

.facts__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--white);
  text-align: right;
}

/* ==========================================================================
   REDES SOCIALES
   Composición en filas con filetes, no botones grandes. La marca de cada red
   se reconoce por el ícono; el peso lo lleva la tipografía.
   ========================================================================== */

.social-rows {
  display: grid;
  border-top: var(--border-hairline) solid var(--border);
}

@media (min-width: 768px) {
  .social-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
}

.social-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline) solid var(--border);
  color: var(--text);
  transition: color var(--duration-fast) var(--ease-out);
}

.social-row:hover { color: var(--action); }

.social-row__icon { flex: none; color: var(--text-subtle); transition: color var(--duration-fast) var(--ease-out); }
.social-row:hover .social-row__icon { color: var(--action); }

.social-row__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  flex: 1;
  min-width: 0;
}

.social-row__handle { color: var(--text-subtle); flex: none; }

.social-row__arrow { flex: none; transition: transform var(--duration) var(--ease-out); }
.social-row:hover .social-row__arrow { transform: translateX(4px); }

/* Red sin enlace cargado todavía: se muestra, pero no promete un destino. */
.social-row--pending { color: var(--text-subtle); cursor: default; }
.social-row--pending:hover { color: var(--text-subtle); }
.social-row--pending:hover .social-row__icon { color: var(--text-subtle); }
.social-row--pending:hover .social-row__arrow { transform: none; }

/* Marca discreta del día de hoy en el selector. */
.day-tab__today { color: var(--action); font-weight: var(--weight-bold); }

/* Aviso cuando un día no tiene programas cargados. */
.schedule-empty {
  padding: var(--space-7);
  border: var(--border-hairline) dashed var(--border-strong);
  color: var(--text-subtle);
  text-align: center;
}