/** ==========================================================================
 * Bloque «Actualidad» — inc/cei-bloques.php, cei_bloque_noticias()
 *
 * Una hoja por bloque (Eduardo, 07/09/2026). La pide functions.php en la
 * cabecera de las plantillas que lo pintan (cei_enqueue_template_styles),
 * antes de la hoja de la plantilla, y el propio bloque al pintarse
 * (cei_bloque_css), por si aparece donde no se esperaba. Antes vivia en css/templates/home.css.
 * ========================================================================== */
/* --------------------------------------------------------------------------
 * ACTUALIDAD (Figma 867-4046) — inc/cei-bloques.php, cei_bloque_noticias()
 *
 * El titulo ocupa la primera de cinco columnas y las cuatro tarjetas el resto.
 * Cada tarjeta es un enlace con su filete superior, el titulo en mayusculas,
 * el extracto (cuatro lineas) y, al pie, la fecha y la etiqueta en pastilla.
 * Sustituye a la seccion del constructor con la fecha girada 90 grados.
 * -------------------------------------------------------------------------- */
/* Sin margen lateral propio: el contenedor del constructor ya deja el margen
   de pagina (medido, 51px a 1440, la misma vertical que .mas_cursos). */
.Noticias {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
  margin: var(--Global-Espacio-Grupo) 0 0;
}

.Noticias-titulo {
  grid-column: 1;
}

.Noticias-lista {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
}

.Noticia {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-top: calc(var(--Global-Espacio-TituloContenido) / 2);
  border-top: 1px solid var(--Global-Color-Black);
  color: var(--Global-Color-Black);
  text-decoration: none;
}

/* Solo las tarjetas que son enlace: las del programa del dia (landing de Open Day) son <div>. */
a.Noticia:hover .Noticia-titulo {
  text-decoration: underline;
}

/* Todo el texto de la tarjeta va en la letra pequena del sistema (Global-p--small). */
.Noticia-titulo,
.Noticia-extracto,
.Noticia-fecha,
.Noticia-etiqueta {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Noticia-titulo {
  color: inherit; /* Betheme da a los h4 un gris propio; aqui el negro de la tarjeta */
  text-transform: uppercase;
}

.Noticia-extracto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.Noticia-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  margin-top: auto;
}

.Noticia-fecha {
  color: var(--Global-Color-Grey-Secondary);
  text-transform: uppercase;
}

.Noticia-etiqueta {
  padding: 4px 12px;
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Destacado-Pastilla); /* AA a 14px: ver cei-tokens.css */
  color: var(--Global-Color-White);
}

@media (max-width: 1199.98px) {
  .Noticias {
    grid-template-columns: minmax(0, 1fr);
  }

  .Noticias-lista {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  /* En movil las tarjetas van en fila y se recorren con el scroll lateral,
     como las de los carruseles de areas. */
  .Noticias-lista {
    display: flex;
    gap: var(--Global-Espacio-TituloContenido);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .Noticias-lista::-webkit-scrollbar {
    display: none;
  }

  .Noticia {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
 * LA FOTO QUE SIGUE AL RATÓN (Eduardo, 28/09/2026) — js/cei-noticias-foto.js
 *
 * El script pone un <img class="NoticiaFoto"> al final del <body> y lo mueve
 * con `transform` al lado del cursor, pero estas reglas no existían: sin ellas
 * la foto no flotaba, se pintaba debajo del pie de la página, y no se
 * escondía al salir de la tarjeta. Ahora va fija a la ventana y por encima de
 * todo, también de la cabecera (9999); no se come el ratón (sin
 * `pointer-events` taparía la tarjeta y el enlace no se podría pulsar), y
 * entra y sale con un fundido.
 *
 * Un ancho fijo de 160, con el alto que pida cada foto: sirve igual para las
 * miniaturas del diseño (de 147 a 155 de ancho) que para la destacada de una
 * entrada, que llega a 768.
 * -------------------------------------------------------------------------- */
.NoticiaFoto {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: block;
  width: 160px;
  height: auto;
  border-radius: var(--Global-Radio-Imagen);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  will-change: transform;
}

.NoticiaFoto.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0s;
}