/**
 * Ficha del contenido "article" (vista "full") — card de novedad al 100%
 * del ancho del contenedor, replicando el estilo de los slides del
 * carrusel "Home bottom" (.bne-news-card, components/news-card/news-card.css).
 *
 * La librería es global (bne_theme.libraries.yml), así que TODO selector
 * va scopeado con .node--type-article.node--view-mode-full (mismo criterio
 * que noticias.css:6 / tutoriales.css:283). La excepción es el H1 del
 * bloque page-title, que se oculta desde .region-content:has(...).
 *
 * El carrusel de novedades del pie NO necesita CSS propio aquí: sus
 * estilos (.bne-news-carousel*) viven en home.css:2092-2360 y son
 * selectores globales, igual que en la home.
 *
 * No hay Figma para esta vista: los valores marcados [INFERIDO] siguen el
 * ritmo de tokens.css y el estilo del card de novedad.
 */

/* ---- H1 del bloque page-title ------------------------------------------------
   El título del nodo también se imprime dentro del card
   (h1 .bne-article-card__title). [USUARIO] Además debe mostrarse ANTES del
   card el h1 del bloque #block-bne-theme-page-title (título de la ruta),
   con los mismos valores que el h1 de /noticias (noticias.css):
   gobCL 700 36px / lh 100% / ls 0 / color Azul_2, 40px desde la topbar y
   20px hasta el card. Scoping con :has() (precedente home.css:2273) para
   tocar solo cuando la ficha article está en la página. El h1 del bloque es
   un <h1><span class="field field--name-title">...</span></h1>, por eso el
   span no recibe estilo de fuente (lo hereda del h1). */
.region-content:has(.node--type-article.node--view-mode-full) #block-bne-theme-page-title h1 {
  margin: 40px 0 20px;
  font-family: var(--bne-font-family-base);
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0;
  leading-trim: none;
  color: var(--Gob-digital-Azul-2);
}

/* ---- Card ------------------------------------------------------------------- */
.node--type-article.node--view-mode-full .bne-article-card {
  background-color: var(--bne-color-white);
  /* [news-card.css:23] Mismo borde Azul_1 y radio que el card del carrusel. */
  border: 1px solid var(--bne-color-azul-1);
  border-radius: var(--bne-radius-md);
  overflow: hidden;
}

/* [INFERIDO] La imagen del carrusel es una tira de 109px; en la ficha es un
   banner a todo el ancho del card con su alto natural (el formatter usa el
   image style wide, 1090x300). El max-height + object-fit cover evita que
   una imagen "cuadrada" estire la card de forma desproporcionada. */
.node--type-article.node--view-mode-full .bne-article-card__media {
  line-height: 0;
}

.node--type-article.node--view-mode-full .bne-article-card__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* [INFERIDO] Cuerpo del card: flex con gap uniforme (meta/título/body/tags).
   Móvil con el mismo padding del card del carrusel (space-5, news-card.css:78);
   en desktop se amplía a space-8 porque el card ocupa todo el ancho. */
.node--type-article.node--view-mode-full .bne-article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--bne-space-4);
  padding: var(--bne-space-5);
}

/* ---- Meta (fecha + tiempo de lectura) --------------------------------------- */
.node--type-article.node--view-mode-full .bne-article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--bne-space-5);
}

/* Mismas reglas de la meta del card del carrusel (news-card.css:88-113),
   copiadas aquí porque es otra BEM class. */
.node--type-article.node--view-mode-full .bne-article-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--bne-space-1);
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-regular);
  font-size: var(--bne-font-size-caption);
  line-height: 100%;
  letter-spacing: 0;
  color: var(--Gob-digital-Azul-1);
  white-space: nowrap;
}

.node--type-article.node--view-mode-full .bne-article-card__meta-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ---- Título ------------------------------------------------------------------ */
/* [FIGMA sin frame] Sigue la tipografía de los títulos de sección/home
   (home.css:2251-2263): gobCL Bold, title-xl en desktop, color
   --Gob-digital-Azul-2 (mismo azul que los títulos de las cards de novedad,
   news-card.css:121). En móvil baja a title-lg para no desbordar. */
.node--type-article.node--view-mode-full .bne-article-card__title {
  margin: 0;
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-title-lg);
  line-height: 1.2;
  color: var(--Gob-digital-Azul-2);
}

/* ---- Body -------------------------------------------------------------------- */
/* [INFERIDO] Tipografía de lectura: 16px (title-md) con interlineado 1.5 y
   color Azul_2 (--Gob-digital-Azul-2), mismo tono de los títulos del
   card (no tan "claro" como el Azul_1 de la meta). */
.node--type-article.node--view-mode-full .bne-article-card__content {
  font-family: var(--bne-font-family-base);
  font-size: var(--bne-font-size-title-md);
  line-height: 1.5;
  color: var(--Gob-digital-Azul-2);
}

.node--type-article.node--view-mode-full .bne-article-card__content p {
  margin: 0 0 var(--bne-space-4);
}

.node--type-article.node--view-mode-full .bne-article-card__content> :last-child {
  margin-bottom: 0;
}

.node--type-article.node--view-mode-full .bne-article-card__content h2 {
  margin: var(--bne-space-6) 0 var(--bne-space-3);
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-title-lg);
  line-height: 1.2;
}

.node--type-article.node--view-mode-full .bne-article-card__content h3 {
  margin: var(--bne-space-5) 0 var(--bne-space-2);
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-title-md);
  line-height: 1.2;
}

.node--type-article.node--view-mode-full .bne-article-card__content ul,
.node--type-article.node--view-mode-full .bne-article-card__content ol {
  margin: 0 0 var(--bne-space-4);
  padding-left: var(--bne-space-6);
}

.node--type-article.node--view-mode-full .bne-article-card__content img {
  max-width: 100%;
  height: auto;
}

/* ---- Tags -------------------------------------------------------------------- */
/* [INFERIDO] El formatter entity_reference_label con label "above" renderiza
   .field__label + .field__items; se estiliza para que la etiqueta quede como
   un rótulo caption y los tags como enlaces en fila. */
.node--type-article.node--view-mode-full .bne-article-card__tags .field__label {
  display: block;
  margin-bottom: var(--bne-space-2);
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-caption);
  line-height: 1;
  color: var(--bne-color-azul-2);
}

.node--type-article.node--view-mode-full .bne-article-card__tags .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bne-space-2) var(--bne-space-4);
}

.node--type-article.node--view-mode-full .bne-article-card__tags .field__item {
  font-family: var(--bne-font-family-base);
  font-size: var(--bne-font-size-body-md);
}

/* ---- Comentarios (fuera del card) ------------------------------------------- */
.node--type-article.node--view-mode-full .bne-article__comments {
  margin-top: var(--bne-space-6);
}

.node--type-article.node--view-mode-full .bne-article__comments .field__label {
  display: block;
  margin-bottom: var(--bne-space-3);
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-title-md);
  line-height: 1.2;
  color: var(--bne-color-azul-2);
}

/* ---- Desktop (>=75em, mismo breakpoint que noticias.css / tutoriales.css) --- */
@media (min-width: 75em) {
  .node--type-article.node--view-mode-full .bne-article-card__body {
    gap: var(--bne-space-5);
    padding: var(--bne-space-8);
  }

  .node--type-article.node--view-mode-full .bne-article-card__title {
    font-size: var(--bne-font-size-title-xl);
  }
}

/* ---- Título del carrusel de novedades ("Noticias recientes") ---------------
   El carrusel vive en .bne-content-below (fuera de la ficha), así que estos
   selectores no llevan el scope de .node--type-article...; se apuntan a la id
   única (#block-bne-theme-carrusel-novedades) del bloque que solo existe en
   fichas article. Mismo estilo que h2.bne-section-title.novedades de la home
   (home.css:2049 y 2251): mobile 24px bold centrado, desktop gobCL Bold 36px
   color Azul_2. */
#block-bne-theme-carrusel-novedades > h2 {
  font-family: var(--bne-font-family-base);
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-title-lg);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--Gob-digital-Azul-2);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

#block-bne-theme-carrusel-novedades {
  padding-top: var(--bne-space-6);
}

#block-bne-theme-carrusel-novedades .bne-news-carousel {
  gap: var(--bne-space-4);
}

@media (min-width: 75em) {
  #block-bne-theme-carrusel-novedades > h2 {
    font-size: var(--bne-font-size-title-xl);
    line-height: 100%;
    text-align: left;
    margin-top: var(--bne-space-10);
  }
}