/* ============================================================
   LAYOUTS — grids de portada y páginas internas
   El Criterio Puebla
   ============================================================ */

/* ============================================================
   PORTADA
   ============================================================ */
.front-page {
  padding-top: 0;
}

.section-block {
  padding: 40px 0;
}

.section-block + .section-block {
  border-top: 1px solid var(--color-border);
}

/* Sección agenda: fondo navy */
.section-agenda {
  background: var(--color-navy);
  padding: 40px 0;
}

.section-agenda .section-label {
  color: var(--color-red-light);
}

.section-agenda .section-label::after {
  background: #3A506B;
}

/* Grid hero: 60/40 */
.grid-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
}

.grid-hero__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Grid columnistas: 3 iguales */
.grid-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Grid 4 columnas */
.grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 24px;
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */

/* Página con sidebar */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* Artículo individual — contenido centrado */
.single-article {
  max-width: 780px;
}

/* Archivos */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
}

.archive-list {
  display: flex;
  flex-direction: column;
}

/* Páginas estrechar */
.page-inner {
  max-width: 780px;
}

.page-inner--narrow {
  max-width: 640px;
}

/* Quiénes somos */
.qs-section {
  margin-bottom: 48px;
}

.qs-content {
  max-width: 680px;
}

.qs-helix__content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qs-helix__content p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-mid);
}

/* Columnistas directory */
.columnistas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.columnistas-grid--full {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Related articles */
.related-articles {
  margin: 40px 0;
}

.related-articles .archive-grid {
  grid-template-columns: repeat(3, 1fr);
}