/* 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 5 — Vista de artículo (com_content)
   El resto del sitio (Institucional, etc.) usa una banda navy con
   el título en blanco como cabecera de página; acá replicamos ese
   mismo look sobre .article-header (contenedor nativo del <h1> del
   artículo, en el override de Helix — ver
   plugins/system/helixultimate/overrides/com_content/article/default.php)
   para que las noticias se vean consistentes con el resto de las
   páginas en vez del H1 negro plano por defecto.
   ============================================================ */
.article-details .article-header {
  /* full-bleed: rompe el .container de Bootstrap para ir de borde a borde */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 32px;
  padding: 56px 20px;
  background: var(--azul-900);
  text-align: center;
}

.article-details .article-header h1,
.article-details .article-header h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blanco);
}

.article-details .article-header .badge {
  margin-top: 14px;
}

@media (max-width: 767.98px) {
  .article-details .article-header {
    padding: 36px 18px;
    margin-bottom: 24px;
  }
}

/* Header sin padding-top propio en vista de artículo: el banner navy de
   .article-header ya hace de cabecera de página, igual que el resto del
   sitio (Institucional, etc.) — sin esto queda un hueco de 100px entre el
   header y el banner (padding sitewide de #sp-main-body en template.css). */
body.view-article #sp-main-body {
  padding-top: 0;
}

/* Imagen destacada del artículo: altura consistente + trato "card", en vez
   del tamaño natural de la foto sin ningún control. */
.article-details .article-full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 991.98px) {
  .article-details .article-full-image img {
    height: 320px;
  }
}

@media (max-width: 767.98px) {
  .article-details .article-full-image img {
    height: 240px;
  }
}