/* IDT - /noticias - correccion horizontal tipo HOME v3 (22 oct 2026)
 * Solo vista noticias_page, display page_1.
 * Sustituye TODO el CSS anterior, no se debe agregar al final.
 */

/* Tres columnas en escritorio: no tocar otras vistas ni el banner inferior. */
.view-noticias-page.view-display-id-page_1 .view-content > .grid--default {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* CORRECCION CLAVE: tarjeta vertical (imagen ARRIBA, texto DEBAJO).
 * El CSS anterior habia dejado el contenido en horizontal. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(18, 40, 71, 0.12);
}

/* El enlace de la imagen solo ocupa la franja superior. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img) {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  isolation: auto !important;
}

/* No hay fondo borroso, mosaico, caja cuadrada ni banda gris. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img)::before,
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img)::after {
  content: none !important;
  display: none !important;
}

/* Portada horizontal, ancho completo como en el HOME. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img) img,
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img) picture img {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Si el tema añade un <picture>, conservar el formato horizontal. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > a:has(img) picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Evitar que el texto vuelva a quedar a la derecha de la imagen. */
.view-noticias-page.view-display-id-page_1 .view-content .grid--default__item > :not(a:has(img)) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: static !important;
}

/* No modificar los enlaces de titulos y "Saber mas":
   heredan su estilo original del tema. */

@media (max-width: 991px) {
  .view-noticias-page.view-display-id-page_1 .view-content > .grid--default {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .view-noticias-page.view-display-id-page_1 .view-content > .grid--default {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
}