/* ============================================================================
   BLOG (G5) · Port de las plantillas Elementor del blog a bloques nativos.
   Fuente: custom_css de 25583 (archivo del blog) y 25582 (entrada de blog).
   TODO el CSS nuevo del blog vive aquí (fichero nuevo, no toca ningún CSS
   existente). Fable añade el enqueue de blog.css en functions.php.

   Reutiliza sin redefinir: .cmd-page-header (cabecera editorial), .cmd-read /
   .cmd-read-in / .cmd-read-body (columna de lectura), .cmd-rev-sec / .cmd-rev-i
   (revista "Sigue leyendo", vía [cmd_revista]). Aquí solo el delta del blog.

   R31: display explícito en los rótulos de layout + tipografía anclada al root
   de sección (.cmd-blog-sec / .cmd-read) para ganar a base.css (0,1,1) sin
   !important. R33: box-sizing:border-box ya es global (.cmd-scope *).
   ============================================================================ */

/* ---- 1. ÍNDICE DEL BLOG · rejilla de posts (home.html) ------------------- */
/* Sección de la rejilla bajo la cabecera .cmd-page-header (papel continuo). */
.cmd-blog-sec {
  background: var(--cmd-paper);
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 6rem);
}
.cmd-blog-sec .cmd-blog-in { max-width: var(--cmd-container); margin: 0 auto; padding-inline: 24px; }

/* wp:query envoltorio (sin caja propia) */
.cmd-blog-sec .cmd-blog-q { margin: 0; }

/* La lista de post-template es la rejilla: 3 columnas escritorio, 1 móvil */
.cmd-blog-sec .cmd-blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}
/* Cada post = tarjeta sobre panel, borde, se ilumina al hover (como la revista) */
.cmd-blog-sec .cmd-blog-grid > li.wp-block-post {
  display: flex; flex-direction: column;
  margin: 0; padding: 24px;
  background: var(--cmd-panel); border: 1px solid var(--cmd-line);
  border-radius: var(--cmd-r-md); transition: border-color .15s;
}
.cmd-blog-sec .cmd-blog-grid > li.wp-block-post:hover { border-color: var(--cmd-ink); }

/* Meta (fecha) — sans uppercase tracked muted (DESIGN.md prohíbe mono en labels) */
.cmd-blog-sec .cmd-blog-meta { margin: 0 0 10px; }
.cmd-blog-sec .cmd-blog-meta .wp-block-post-date {
  margin: 0; font-family: var(--cmd-font-body); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cmd-muted);
}

/* Título Fraunces (enlace al post) */
.cmd-blog-sec .cmd-blog-t {
  margin: 0 0 10px; font-family: var(--cmd-font-display);
  font-size: 20px; font-weight: 480; line-height: 1.22; letter-spacing: -.01em;
}
.cmd-blog-sec .cmd-blog-t a { color: var(--cmd-ink); text-decoration: none; }
.cmd-blog-sec .cmd-blog-t a:hover { color: var(--cmd-green); }

/* Extracto */
.cmd-blog-sec .cmd-blog-ex {
  margin: 0 0 14px; font-family: var(--cmd-font-body);
  font-size: 14.5px; line-height: 1.6; color: var(--cmd-text);
}
.cmd-blog-sec .cmd-blog-ex p { margin: 0; font: inherit; color: inherit; }

/* "Leer el artículo" (read-more) con la flecha animada vía ::after */
.cmd-blog-sec .cmd-blog-m {
  margin-top: auto; padding-top: 6px;
  font-family: var(--cmd-font-body); font-size: 13px; font-weight: 600;
  color: var(--cmd-green); text-decoration: none;
}
.cmd-blog-sec .cmd-blog-m:hover { color: var(--cmd-green-deep); text-decoration: none; }
.cmd-blog-sec .cmd-blog-m::after {
  content: "→"; display: inline-block; margin-inline-start: 6px; transition: transform .2s;
}
.cmd-blog-sec .cmd-blog-grid > li.wp-block-post:hover .cmd-blog-m::after { transform: translateX(4px); }

/* Paginación (solo si hay más de una página de posts) */
.cmd-blog-sec .cmd-blog-pag {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; gap: 6px; justify-content: center; align-items: center;
}
.cmd-blog-sec .cmd-blog-pag .wp-block-query-pagination-numbers,
.cmd-blog-sec .cmd-blog-pag .wp-block-query-pagination-previous,
.cmd-blog-sec .cmd-blog-pag .wp-block-query-pagination-next,
.cmd-blog-sec .cmd-blog-pag .page-numbers {
  font-family: var(--cmd-font-body); font-size: 14px; color: var(--cmd-muted);
  padding: 8px 12px; border-radius: var(--cmd-r-sm); text-decoration: none;
}
.cmd-blog-sec .cmd-blog-pag .page-numbers.current {
  color: var(--cmd-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.cmd-blog-sec .cmd-blog-pag a.page-numbers:hover,
.cmd-blog-sec .cmd-blog-pag a:hover { color: var(--cmd-ink); }

@media (max-width: 880px) {
  .cmd-blog-sec .cmd-blog-grid { grid-template-columns: 1fr; }
}

/* ---- 2. ENTRADA DEL BLOG · cabecera de lectura + CTA (single.html) -------- */
/* Reutiliza la sección .cmd-read (fondo papel + padding) y .cmd-read-in
   (columna 720px centrada) de sections.css: aquí solo la cabecera del post,
   el CTA de cierre y el ajuste de la revista. Todo anclado a .cmd-read. */

.cmd-read .cmd-read-head { margin-bottom: clamp(1.1rem, 2.5vw, 1.8rem); }

/* Meta: categoría · fecha (el "·" separa como en la revista/rev-k) */
.cmd-read .cmd-post-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 0 0 16px; color: var(--cmd-muted);
}
.cmd-read .cmd-post-meta .wp-block-post-terms,
.cmd-read .cmd-post-meta .wp-block-post-date {
  margin: 0; font-family: var(--cmd-font-body); font-size: 13px; color: var(--cmd-muted);
}
.cmd-read .cmd-post-meta .wp-block-post-terms a { color: var(--cmd-muted); text-decoration: none; }
.cmd-read .cmd-post-meta .wp-block-post-terms a:hover { color: var(--cmd-green); }
.cmd-read .cmd-post-meta .wp-block-post-date::before {
  content: "·"; margin-inline-end: 6px; opacity: .6;
}

/* Titular del post (h1 fuera del cuerpo, por eso base no lo oculta) */
.cmd-read .cmd-read-h1 h1 {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.018em; color: var(--cmd-ink);
}

/* El cuerpo hereda .cmd-read-body de sections.css; solo el gap superior que
   el original daba con margin-top (sections.css no lo trae bajo .cmd-read). */
.cmd-read .cmd-read-body { margin-top: clamp(1.4rem, 3vw, 2.2rem); }

/* CTA de cierre: caja centrada (misma anchura que la columna de lectura) */
.cmd-read .cmd-postcta {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 720px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 26px 28px; background: var(--cmd-panel);
  border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md);
}
.cmd-read .cmd-postcta .cmd-postcta-t p {
  margin: 0; font-family: var(--cmd-font-display); font-size: 19px;
  font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; line-height: 1.35;
}
.cmd-read .cmd-postcta .cmd-postcta-b { margin: 0; }
.cmd-read .cmd-postcta .cmd-postcta-b a {
  display: inline-block; background: transparent; color: var(--cmd-ink);
  border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm);
  padding: 11px 20px; font-family: var(--cmd-font-body); font-size: 14px;
  font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s;
}
.cmd-read .cmd-postcta .cmd-postcta-b a:hover {
  background: var(--cmd-ink); color: var(--cmd-on-dark); border-color: var(--cmd-ink);
}

/* Revista "Sigue leyendo" al cierre: reutiliza .cmd-rev-sec + .cmd-rev-i
   (sections.css) vía [cmd_revista]; solo alineo la cabecera a la izquierda
   (en la home va a la derecha con "ver todos"; aquí es un eyebrow simple). */
.cmd-blog-rev .cmd-rev-head { justify-content: flex-start; margin-bottom: 6px; }
.cmd-blog-rev .cmd-rev-head .cmd-eyebrow { margin: 0 0 18px; }