/* 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 6 — Vista de categoría "blog" (listado de Noticias)
   Ítem de menú "Noticias" (com_content, view=category, layout=blog,
   catid=9 "Área Social"). Mismo tratamiento que la vista de artículo:
   banner navy de título (acá es el .page-header nativo de Joomla,
   habilitado en el ítem de menú) + cards consistentes con el resto
   del sitio, en vez del listado de blog plano por defecto.
   ============================================================ */

/* Banner de título — mismo look que .article-header en el artículo.
   :not(.item-title) excluye los <h3 class="page-header item-title">
   que Joomla reutiliza para cada tarjeta del bloque "Subcategorías"
   (vista agregada "Noticias") — mismo nombre de clase, contexto
   totalmente distinto. */
body.view-category .page-header:not(.item-title) {
  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;
}
body.view-category .page-header:not(.item-title) h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blanco);
}
@media (max-width: 767.98px) {
  body.view-category .page-header:not(.item-title) {
    padding: 36px 18px;
    margin-bottom: 24px;
  }
}

/* Bloque "Subcategorías" (vista agregada "Noticias") — grilla simple
   de pills en vez del <h3.page-header> sin estilizar. */
.com-content-category-blog__children.cat-children {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 40px;
}
.com-content-category-blog__children.cat-children > h3 {
  flex: 0 0 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: 14px;
}
.com-content-category-blog__child {
  margin: 0;
}
.com-content-category-blog__child .page-header.item-title {
  margin: 0;
  padding: 0;
  background: none;
  width: auto;
}
.com-content-category-blog__child .page-header.item-title a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--azul-100);
  color: var(--azul-800);
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
.com-content-category-blog__child .page-header.item-title a:hover {
  background: var(--azul-900);
  color: var(--blanco);
}
.com-content-category-blog__child .page-header.item-title a[href*="/noticias/area-social"] {
  background: var(--azul-100);
  color: var(--azul-800);
}
.com-content-category-blog__child .page-header.item-title a[href*="/noticias/proyecto-de-magallanes"] {
  background: var(--rojo-100);
  color: var(--rojo-700);
}
.com-content-category-blog__child .page-header.item-title a[href*="/noticias/area-deporte"] {
  background: var(--verde-100);
  color: var(--verde-800);
}
.com-content-category-blog__child .page-header.item-title a[href*="/noticias/promociones"] {
  background: var(--naranja-100);
  color: var(--naranja-700);
}

/* Sin el hueco de 100px entre header y banner (igual que en la vista de artículo) */
body.view-category #sp-main-body {
  padding-top: 0;
}

/* Cards del listado. height:100%+flex-column para que, dentro de una
   fila de la grilla de Bootstrap (que ya estira las columnas parejo por
   default), la card ocupe todo ese alto en vez de achicarse a su propio
   contenido — evita alturas dispares cuando el título/intro varía.
   El espaciado vertical entre filas NO sale de este margin-bottom (ver
   nota de "row-gap" más abajo): con height:100% el margin de la card
   queda "adentro" del alto estirado por flexbox y no empuja la fila
   siguiente — por eso el gap real entre filas se resuelve con row-gap
   en el .row contenedor, no acá. Se deja en 24px (mismo valor que el
   resto de las secciones de noticias) sólo por si el contexto no fuera
   flex (fallback), no porque haga algo visible en el caso normal. */
.com-content-category-blog .article-list .article,
.com-content-category-blog__item {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  transition: box-shadow .25s ease, transform .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Gap real dentro de cada fila del grid de intro items
   (.article-list.cols-2 > .row): con la card en height:100% dentro de
   una fila flex con align-items:stretch, el margin-bottom de la card
   queda absorbido por el stretch y no empuja nada — se nota sobre todo
   en mobile, donde las 2 columnas de la fila se apilan y quedan
   pegadas. row-gap en el propio contenedor flex no depende de la
   altura de los hijos, así que resuelve ese caso. Aprovechando la
   misma regla, también se pisa el gutter de columna a 24px total
   (12+12) para que quede igual que las secciones de noticias del home
   — sin esto queda en el 30px por default de Bootstrap. */
.com-content-category-blog .article-list[class*="cols-"] > .row {
  row-gap: 24px;
  margin-left: -12px;
  margin-right: -12px;
}
.com-content-category-blog .article-list[class*="cols-"] > .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}
/* Gap ENTRE filas (cada .row es un elemento de bloque separado, no
   líneas de un mismo flex container — el row-gap de arriba no llega
   hasta acá): sin esto, la 2ª fila de intro items queda pegada a la
   1ª (0px) en vez de los 24px del resto de las secciones. */
.com-content-category-blog .article-list[class*="cols-"] > .row + .row {
  margin-top: 24px;
}
.com-content-category-blog .article-list .article:hover,
.com-content-category-blog__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Imagen: quitar el float legado de Joomla (queremos card apilada, no texto envolvente) */
.com-content-category-blog .article-intro-image {
  float: none !important;
  overflow: hidden;
}
.com-content-category-blog .article-intro-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.com-content-category-blog__items.items-leading .article-intro-image img {
  height: 420px;
}

.com-content-category-blog .article-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.com-content-category-blog .article-header h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.com-content-category-blog .article-header h2 a {
  color: var(--azul-900);
  transition: color .2s ease;
}
.com-content-category-blog .article-list .article:hover .article-header h2 a,
.com-content-category-blog__item:hover .article-header h2 a {
  color: var(--azul-600);
}
.com-content-category-blog__items.items-leading .article-header h2 {
  font-size: 26px;
}

.com-content-category-blog .article-info {
  margin-bottom: 8px;
}
.com-content-category-blog .published {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--gris-500);
}

/* Badge de categoría — color-coded por categoría de noticia.
   El href de cada categoría ya trae un alias único (Joomla transcribe
   sin tildes al armar la URL final), así que alcanza con un selector
   por atributo, sin tocar el PHP del listado. */
.com-content-category-blog .category-name {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  vertical-align: middle;
}
.com-content-category-blog .category-name a {
  color: inherit;
}
.com-content-category-blog .category-name:has(a[href*="/noticias/area-social"]) {
  background: var(--azul-100);
  color: var(--azul-800);
}
.com-content-category-blog .category-name:has(a[href*="/noticias/proyecto-de-magallanes"]) {
  background: var(--rojo-100);
  color: var(--rojo-700);
}
.com-content-category-blog .category-name:has(a[href*="/noticias/area-deporte"]) {
  background: var(--verde-100);
  color: var(--verde-800);
}
.com-content-category-blog .category-name:has(a[href*="/noticias/promociones"]) {
  background: var(--naranja-100);
  color: var(--naranja-700);
}

/* display:flex column + flex:1 (igual que .article-body arriba): así
   "Leer más" puede empujarse al fondo con margin-top:auto en vez de
   quedar pegado al párrafo, sin importar cuánto texto tenga el intro
   de cada noticia. */
.com-content-category-blog .article-introtext {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.com-content-category-blog .article-introtext p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-600);
}

/* Píldora en vez de texto plano — mismo lenguaje visual que los badges de
   categoría (fondo azul-100/texto azul-800), invierte a azul sólido en
   hover para que se sienta más "clickeable".
   margin-top:auto la empuja al fondo de .article-introtext (flex column
   de arriba) y text-align:right la lleva a la derecha, para que quede
   siempre abajo-a-la-derecha de la card sin importar el largo del intro. */
.com-content-category-blog .readmore {
  margin-top: auto;
  text-align: right;
}
.com-content-category-blog .readmore a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--azul-100);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--azul-800);
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: background-color .2s ease, color .2s ease;
}
/* template.css trae .article-list .article .readmore a:hover con más
   especificidad (4 clases) que la regla de arriba sola (2 clases) y
   pisaba el color a #072f6f (azul oscuro), casi invisible sobre el
   fondo azul-900 del propio hover. Se agregan las clases reales del
   ancestro (.article-list .article, ya presentes en el DOM) para
   ganar por especificidad real en vez de recurrir a !important. */
.com-content-category-blog .article-list .article .readmore a:hover {
  background: var(--azul-900);
  color: var(--blanco);
}
.com-content-category-blog .readmore a::after {
  content: "\203A";
  font-size: 16px;
  line-height: 0;
}

/* Gap real hacia la paginación: mismo problema que entre filas del grid
   (el margin-bottom de la última fila queda "comido" por el stretch de
   flexbox) — se resuelve con margin-top acá en vez de margin-bottom en
   el .article-list. */
.com-content-category-blog__navigation {
  margin-top: 32px;
}

@media (max-width: 991.98px) {
  .com-content-category-blog .article-intro-image img {
    height: 220px;
  }
  .com-content-category-blog__items.items-leading .article-intro-image img {
    height: 320px;
  }
}

@media (max-width: 767.98px) {
  .com-content-category-blog .article-body {
    padding: 16px 18px 18px;
  }
  .com-content-category-blog__items.items-leading .article-intro-image img {
    height: 240px;
  }
}