/**
 * RADIO UNaF — GRILLA SEMANAL
 *
 * El mismo marcado se lee de dos maneras según el ancho:
 *
 *   Móvil      Una columna. El selector elige el día y se ven sus bandas
 *              horarias una debajo de otra. Sin scroll horizontal.
 *   Escritorio Matriz de 7 días × bandas horarias. Cada celda se ubica con
 *              las variables --row, --col y --span que imprime el PHP, y los
 *              bloques que se repiten varios días ocupan una sola celda ancha.
 */

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */

.grilla__vigencia {
  margin-bottom: var(--space-5);
  color: var(--text-subtle);
}

/* ==========================================================================
   MÓVIL — lista vertical por día
   ========================================================================== */

.grilla {
  display: flex;
  flex-direction: column;
  border-top: var(--border-hairline) solid var(--border);
}

/* Las etiquetas de la matriz no tienen sentido en una lista. */
.grilla__daylabel,
.grilla__time { display: none; }

.grilla__cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline) solid var(--border);
  min-width: 0;
}

/*
 * Primera pintada, antes de que corra el JavaScript.
 *
 * En la lista de móvil se muestra sólo el día de hoy, que es lo que el
 * selector va a mostrar de todas formas. Sin esta regla aparecían por un
 * instante los siete días encimados y la página pegaba un salto al filtrarse.
 *
 * En cuanto schedule.js toma el control marca el panel con .is-js y pasa a
 * manejar la visibilidad con el atributo hidden, que ya contempla el día que
 * elija la persona.
 */
@media (max-width: 1023px) {
  .grilla:not(.is-js) .grilla__cell:not(.grilla__cell--hoy) { display: none; }
}

.grilla__cell-time {
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.grilla__cell-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.grilla__cell-title a {
  transition: color var(--duration-fast) var(--ease-out);
}
.grilla__cell-title a:hover { color: var(--action); }

.grilla__cell-detail {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   El bloque que está al aire ahora
   Es el único elemento rojo de la grilla: si todo se destacara, nada se
   destacaría.
   -------------------------------------------------------------------------- */

.grilla__cell.is-live {
  position: relative;
  background: var(--surface-alt);
  padding-inline: var(--space-5);
  border-left: var(--border-thick) solid var(--action);
}

.grilla__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--action);
  font-weight: var(--weight-semibold);
}

.grilla__hint {
  padding: var(--space-7);
  border: var(--border-hairline) dashed var(--border-strong);
  color: var(--text-subtle);
  text-align: center;
}

/* ==========================================================================
   ESCRITORIO — matriz semanal
   ========================================================================== */

@media (min-width: 1024px) {

  /* El selector de días es una herramienta de móvil: acá se ve la semana
     entera y filtrar sería quitar información. */
  .day-tabs { display: none; }

  .grilla {
    display: grid;
    /* Primera columna angosta para la hora; el resto, siete días iguales. */
    grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr));
    gap: 1px;
    border: var(--border-hairline) solid var(--border);
    background: var(--border);
  }

  /* El fondo del contenedor asoma por el gap de 1px y hace de filete: una
     sola declaración en lugar de bordes en cada celda, que se duplicarían. */
  .grilla__daylabel,
  .grilla__time,
  .grilla__cell {
    background: var(--surface);
    border: none;
  }

  .grilla__daylabel {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: var(--col);
    padding-block: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  /* El día de hoy se marca en la cabecera: ancla la lectura de la semana. */
  .grilla__daylabel.is-today {
    background: var(--ink-900);
    color: var(--white);
  }

  .grilla__time {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    grid-row: var(--row);
    grid-column: 1;
    padding: var(--space-4) var(--space-3);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .grilla__cell {
    grid-row: var(--row);
    grid-column: var(--col) / span var(--span);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .grilla__cell:hover { background: var(--surface-alt); }

  /* En la matriz la hora ya está en la primera columna. */
  .grilla__cell-time { display: none; }

  /*
   * Cuerpo reducido en la matriz.
   *
   * Cada columna mide en torno a un séptimo del ancho útil, y palabras largas
   * como «Latinoamericano» no entran al cuerpo de lectura normal: el
   * navegador las parte donde cae —«Latinoamerica / no»—, que se lee como un
   * error.
   *
   * hyphens: auto sería la solución tipográficamente correcta, pero depende
   * de que el navegador traiga el diccionario del castellano y varios no lo
   * hacen. Se deja porque mejora el corte donde sí existe, y la escala se
   * ajusta para que la palabra entre igual sin depender de eso.
   */
  .grilla__cell-title {
    font-size: var(--step--1);
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .grilla__cell-detail {
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .grilla__cell.is-live {
    background: var(--ink-900);
    border-left: none;
    padding-inline: var(--space-4);
    color: var(--white);
  }

  .grilla__cell.is-live:hover { background: var(--ink-800); }
  .grilla__cell.is-live .grilla__cell-title { color: var(--white); }
  .grilla__cell.is-live .grilla__cell-title a:hover { color: var(--red-400); }
  .grilla__cell.is-live .grilla__cell-detail { color: var(--gray-400); }
  .grilla__cell.is-live .grilla__live { color: var(--red-400); }

  .grilla__hint { display: none; }
}

/* Entre 1024 y 1280 la matriz aprieta: se achica el cuerpo antes que dejar
   que los títulos se corten. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .grilla { grid-template-columns: 3.75rem repeat(7, minmax(0, 1fr)); }
  .grilla__cell { padding: var(--space-3) var(--space-2); }
  .grilla__cell-title { font-size: var(--step--2); }
  .grilla__time { padding-inline: var(--space-2); }
}

/* ==========================================================================
   PRODUCCIONES DESTACADAS
   ========================================================================== */

.programs {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--border);
}

.programs .section-kicker { margin-bottom: var(--space-6); }