/* ============================================================================
   MAPTAINER — Blog y glosario.
   Los nombres de clase los emiten es/blog-gmao.php, article.php y las páginas
   del glosario, que NO se editan. Aquí cambian los valores, nunca los selectores.
   ============================================================================ */

/* ------------------------------------------------------------------- Hero */
.blog-hero, .section-hero, .glossary-section > .blog-hero {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-8) var(--sp-6);
}
.blog-hero-inner, .section-hero-inner, .article-hero-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5);
}
.blog-hero h1, .section-hero h1 { font-size: var(--fs-h1-page); max-width: 22ch; margin-bottom: var(--sp-4); }
.blog-hero h1 .accent, .section-hero h1 .accent { color: var(--accent); }
.blog-hero-lede, .section-hero-lede {
  color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5; max-width: 62ch; margin: 0;
}

/* ------------------------------------------------------- Buscador y filtros */
.blog-controls { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.blog-search { position: relative; max-width: 620px; }
.blog-search svg {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}
.blog-search input {
  width: 100%; font-family: var(--font-text); font-size: var(--fs-cap); color: var(--ink);
  padding: 12px 68px 12px 46px;
  border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--navy-800);
}
.blog-search input::placeholder { color: var(--ink-3); }
.blog-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.blog-search .kbd {
  position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: var(--r-1); padding: 2px 6px; background: var(--accent-wash);
}

.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .02em;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--accent-hi); color: var(--ink); background: var(--accent-wash); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.results-meta {
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2);
  margin-bottom: var(--sp-5);
}

/* ------------------------------------------------------------ Paginación */
.pagination { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; padding-block: var(--sp-7); }
.page-btn {
  font-family: var(--font-mono); font-size: var(--fs-cap);
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-3); border: 1px solid var(--rule-2); border-radius: var(--r-2);
  color: var(--ink); text-decoration: none; background: var(--paper-3);
  font-variant-numeric: tabular-nums;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* -------------------------------------------------- Artículo y término */
.article-hero { border-bottom: 1px solid var(--rule); padding-block: var(--sp-7) var(--sp-5); }
.article-hero h1 {
  max-width: 24ch;
  font-family: var(--font-read); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.018em; line-height: 1.08;
}
.article-meta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); margin-bottom: var(--sp-4);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.pill {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-1); border: 1px solid var(--rule-2); color: var(--ink);
}
.article-cover { margin-block: var(--sp-6); }
.article-cover img { width: 100%; border: 1px solid var(--rule-2); border-radius: var(--r-2); box-shadow: var(--glow); }
.article-cta-box {
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--paper-3); border: 1px solid var(--rule-2); border-radius: var(--r-2);
  box-shadow: var(--glow);
  max-width: var(--measure);
}
.article-footer {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); max-width: var(--measure);
}

/* El artículo y el término emiten estos bloques SIN .container: se les da
   el ancho aquí en lugar de editar los ficheros PHP del blog. */
.article-cover, .article-body, .article-cta-box, .article-footer, .glossary-related {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5);
}
/* Las cuatro cajas del articulo forman una sola columna, asi que se miden en
   px y no en ch: el cuerpo esta en serif y la portada y el pie no, y con ch
   cada una saldria de un ancho distinto. */
.article-body,
.article-cover,
.article-cta-box,
.article-footer { max-width: calc(var(--measure-col) + var(--sp-5) * 2); }
.article-cover { margin-block: var(--sp-6); }
.article-cta-box h3 { margin-bottom: var(--sp-3); }
.article-cta-box p { color: var(--ink-2); font-size: var(--fs-cap); margin-bottom: var(--sp-4); }