/* Club BPS — parte del set custom-club-* (CSS global del sitio).
   Cargado como archivo fisico via index.php del template (registerAndUseStyle + ?v=filemtime).
   Partido desde el antiguo custom-club.css monolitico; un archivo por BLOQUE. */

/* ============================================================
   BLOQUE 9 — Título "Noticias relacionadas" (fin de artículo)
   Mismo tratamiento visual que BLOQUE 3 (título de sección SPPB del
   home): tipografía + barra tricolor debajo, para que el bloque de
   relacionados al final de un artículo se sienta parte del mismo
   sistema de diseño en vez del H3 gris plano por defecto del tema.
   ============================================================ */
.related-article-list-container {
  /* !important: template.css (carga después) fija margin-top:15px con
     la misma especificidad y gana por orden de cascada sin esto. */
  margin-top: 56px !important;
  padding-top: 32px;
  border-top: 1px solid #eef0f2;
}

.related-article-list-container .related-article-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--azul-900);
  line-height: 1.2;
  margin: 0 0 12px 0;
  /* !important: template.css se carga después de custom-club.css (ver
     index.php) y define la misma especificidad con padding-bottom/
     border-bottom propios, así que gana por orden de cascada sin esto. */
  padding-bottom: 0 !important;
  border-bottom: none !important;
  text-align: left;
}

.related-article-list-container .related-article-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--azul-900) 0%, var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%, var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%, var(--verde-700) 100%);
}

@media (max-width: 767.98px) {
  .related-article-list-container {
    margin-top: 40px !important;
    padding-top: 24px;
  }
}

/* ---- Grilla uniforme: mismo alto de media (16:9) y de card ----
   Las noticias con imagen renderizan un <img> a su ratio natural, mientras
   que las de video ya usan una caja 16:9 (.video-poster-ratio, BLOQUE 10).
   Acá se lleva la imagen a esa misma caja 16:9 (cover) y se igualan los altos
   de las cards de la fila para que los bordes queden alineados. */

/* A) Media a 16:9 cover — imágenes igualadas al video */
.related-article-list .article > a {
  display: block;
}
.related-article-list .article figure.article-full-image {
  margin: 0 0 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;              /* mismo radio que la card (.article) */
}
.related-article-list .article figure.article-full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* El media de video ya es 16:9 (BLOQUE 10). El wrapper .article-video-poster trae
   un margin negativo (-20px) que lo saca a full-bleed en los listados; acá se anula
   para que respete el padding de la card igual que la imagen (mismo ancho ⇒ mismo alto). */
.related-article-list .article .article-video-poster {
  margin: 0 0 16px;
}
.related-article-list .article .video-poster-link,
.related-article-list .article .video-poster-ratio {
  border-radius: 3px;
}

/* B) Cards del mismo alto: la .article llena su columna y apila en flex-column
   (media arriba, texto abajo, hueco sobrante al fondo dentro del borde).
   La columna es flex-column para que la .article se estire al 100% de ancho
   (cross-axis stretch) — si fuese flex-row, la card encogería a su ancho de
   contenido y el media de video/imagen quedaría de distinto ancho (y alto). */
.related-article-list .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.related-article-list .article {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;                /* el gap entre filas lo da el gutter de la .row */
}