/**
 * ==========================================================
 *  ESTILOS COMPLETOS PARA VISTA "NOTICIAS" - 4 COLUMNAS FLUIDAS
 *  Ajustes: imagen embebida, bordes redondeados total,
 *  título más pequeño, botón ancho/centrado y responsive fluido
 * ==========================================================
 */

 /* Oculta el header (título) de todas las Views
#block-essmar-subtheme-page-title {
  display: none !important;
}*/

/*---------------------------------------------------
  1) Contenedor principal (centrado en todas las vistas)
---------------------------------------------------*/
/* El wrapper de la vista debe permitir que .noticias-grid ocupe y centre el ancho */
.view-id-noticias .view-content,
.view-display-id-page_1 .view-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.noticias-grid {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

/*---------------------------------------------------
  2) Grid responsive real (columnas fluidas)
     - tantas columnas de al menos 250px como quepan
---------------------------------------------------*/
.noticias-grid .views-view-responsive-grid--horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

/*---------------------------------------------------
  3) Forzar altura completa en cada tarjeta
---------------------------------------------------*/
.noticias-grid .views-view-responsive-grid__item,
.noticias-grid .views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*---------------------------------------------------
  4) Diseño de la tarjeta
---------------------------------------------------*/
.noticias-grid .views-view-responsive-grid__item-inner {
  background-color: #fafafa;
  border: 1px solid #ececec;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
}
.noticias-grid .views-view-responsive-grid__item-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.15);
}

/*---------------------------------------------------
  5) Imagen siempre embebida y uniforme
---------------------------------------------------*/
.noticias-grid .views-field-field-image .field-content {
  width: calc(100% - 16px);
  height: 280px;
  margin: 8px;
  overflow: hidden;
  border-radius: 16px;
}
.noticias-grid .views-field-field-image .field-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*---------------------------------------------------
  6) Título
---------------------------------------------------*/
.noticias-grid .views-field-title .field-content a {
  display: block;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #878787;
  text-decoration: none;
  transition: color 0.2s;
}
.noticias-grid .views-field-title .field-content a:hover {
  color: #90bc3c;
}

/*---------------------------------------------------
  7) Fecha
---------------------------------------------------*/
.noticias-grid .views-field-created {
  padding: 0 12px;
  font-size: 0.875rem;
  color: #878787;
  margin-bottom: 12px;
}

/*---------------------------------------------------
  8) Botón "Leer más" ancho y centrado
---------------------------------------------------*/
.noticias-grid .views-field-view-node {
  margin-top: auto;
  padding: 0 12px 16px;
}
.noticias-grid .views-field-view-node .field-content {
  text-align: center;
}
.noticias-grid .views-field-view-node .field-content a {
  display: inline-block;
  width: 100%;
  background-color: #90bc3c;
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 8px 0;
  margin: 0 auto;
  transition: background-color 0.2s;
  line-height: 1;
}
.noticias-grid .views-field-view-node .field-content a:hover {
  background-color: #7ca532;
}

/*---------------------------------------------------
  9) Mobile: grid 1 columna + contenedor centrado + botón full-width
---------------------------------------------------*/
@media (max-width: 768px) {
  .noticias-grid {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  /* Una sola columna a ancho completo para que no se “tire” a un lado */
  .noticias-grid .views-view-responsive-grid--horizontal {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .noticias-grid .views-view-responsive-grid__item,
  .noticias-grid .views-view-responsive-grid__item-inner {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .noticias-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Eliminamos el padding horizontal para que el botón llegue a los bordes */
  .noticias-grid .views-field-view-node {
    padding-left: 0;
    padding-right: 0;
  }
  .noticias-grid .views-field-view-node .field-content a {
    max-width: none;
    width: 100%;
  }
}

/*---------------------------------------------------
  ¡No hacen falta más media queries!
  auto-fit + minmax(250px,1fr) gestiona todo el responsive
---------------------------------------------------*/


/* Contenedor principal del artículo */
.node--type-article.node--view-mode-full {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  display: block !important; /* Asegurar que no sea grid */
}

/* Cabecera del artículo */
.node--type-article.node--view-mode-full header.layout--content-narrow {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

/* Metadatos (autor y fecha) */
.node__meta {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.node__author {
  font-weight: 600;
  color: #333;
}

/* Imagen destacada */
.node--type-article.node--view-mode-full .wide-content.field--name-field-image {
  margin: 2rem 0;
}

.node--type-article.node--view-mode-full .wide-content.field--name-field-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  display: block;
}

/* Contenido de texto */
.node--type-article.node--view-mode-full .text-content.field--name-body {
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.8;
  color: #333;
  font-size: 1.1rem;
}

.node--type-article.node--view-mode-full .text-content.field--name-body p {
  margin-bottom: 1.5rem;
}

/* Enlaces de comentarios */
.links.inline {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.links.inline a {
  color: #2a6ebb;
  text-decoration: none;
  font-weight: 600;
}

.links.inline a:hover {
  text-decoration: underline;
}

/* Sección de comentarios */
#comments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 768px) {
  .node--type-article.node--view-mode-full {
    padding: 1rem;
  }
  
  .text-content.field--name-body {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Ajustes adicionales para mejor espaciado y centrado */
/* Esta clase controla el centrado de todo el contenido dentro de las páginas de artículos */
.node--type-article.node--view-mode-full .node__content.layout--content-narrow {
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
  display: block !important;
  grid-column: unset !important; /* Desactiva grid-column para evitar desbordamientos */
  overflow-x: visible !important;
}

/* Asegurar que la imagen se organice dentro del contenedor centrado */
.node--type-article.node--view-mode-full .node__content.layout--content-narrow .wide-content.field--name-field-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem 0 !important;
  box-sizing: border-box !important;
}

/* Asegurar que el texto se organice dentro del contenedor centrado */
.node--type-article.node--view-mode-full .node__content.layout--content-narrow .text-content.field--name-body {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Estilo para el título (si lo necesitas) */
.node--type-article.node--view-mode-full h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: #222;
  line-height: 1.3;
}

body.path-noticias ul.links.inline {
  display: none !important;
}

.pager {
  margin-top: 2rem; /* Puedes ajustar el valor según tus necesidades */
}

.pager__item--active {
    background-color: #878787;
}

:root{
  /* Medida fija deseada en la noticia (ESCRITORIO) */
  --news-img-w: 960px;   /* ancho fijo */
  --news-img-h: 540px;   /* alto fijo (16:9) */
}

/* Contenedor del campo de imagen destacada */
.node--type-article.node--view-mode-full .wide-content.field--name-field-image{
  width: var(--news-img-w);
  height: var(--news-img-h);
  margin: 1rem auto;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  display: block;
}

/* Normaliza wrappers que pueda insertar Drupal */
.node--type-article.node--view-mode-full .wide-content.field--name-field-image figure,
.node--type-article.node--view-mode-full .wide-content.field--name-field-image picture{
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* La imagen se ajusta al cuadro fijo */
.node--type-article.node--view-mode-full .wide-content.field--name-field-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* recorta sin deformar para llenar el cuadro */
  object-position: center;
}

/* MÓVIL: evita desbordes. Mantiene la misma proporción del tamaño fijo. */
@media (max-width: 980px){
  .node--type-article.node--view-mode-full .wide-content.field--name-field-image{
    width: 100%;
    max-width: var(--news-img-w);
    /* misma relación de aspecto que (var(--news-img-w) x var(--news-img-h)) */
    aspect-ratio: calc(var(--news-img-w) / 1) / calc(var(--news-img-h) / 1);
    height: auto;  /* el alto lo define aspect-ratio */
  }
}

/* Oculta los enlaces de nodo (editar, comentar, etc.) en Article full */
.node--type-article.node--view-mode-full .node__links,
.node--type-article.node--view-mode-full ul.links.inline,
.node--type-article.node--view-mode-full .comment-forbidden {
  display: none !important;
}

/* Article (full) – oculta toda la sección de comentarios */
.node--type-article.node--view-mode-full section.comments,
.node--type-article.node--view-mode-full #comments {
  display: none !important;
}