/* =============================================================================
   BLOG — Piel de marca para Saber Investigar
   cc-blocks/integrations/blog.css

   QUE ES. El blog lo pinta GeneratePress con las plantillas de WordPress:
   listado de entradas, entrada individual, categorias, etiquetas, busqueda y
   comentarios. Este archivo las viste con los tokens de marca.

   POR QUE CSS Y NO UN BLOQUE. Un bloque HTML sirve para una pagina concreta.
   El blog es un listado que crece solo: cada articulo nuevo tiene que salir
   con el estilo correcto sin que nadie toque nada. Eso solo lo da el CSS
   sobre la plantilla.

   DONDE CAMBIAN LAS COSAS. El ancho, la barra lateral y la tipografia base
   se ajustan en Apariencia > Personalizar de GeneratePress. Esto es la capa
   de marca que va encima.
   ============================================================================= */

/* ─────────────────────────── LISTADO DE ARTICULOS ─────────────────────────── */

.blog .site-main,
.archive .site-main,
.search-results .site-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cc-space-6);
  /* stretch y no start: asi todas las tarjetas de una fila miden lo mismo
     aunque un titular ocupe dos lineas mas que otro. */
  align-items: stretch;
}

/* La paginacion y la cabecera del archivo ocupan toda la fila. */
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.archive .site-main > .page-header,
.search-results .site-main > .paging-navigation,
.search-results .site-main > .page-header { grid-column: 1 / -1; }

/* ── Cabecera de categoria o busqueda ── */

.archive .page-header,
.search-results .page-header {
  text-align: center;
  padding-block: var(--cc-space-8) var(--cc-space-4);
  margin: 0;
  border: 0;
  background: none;
}

.archive .page-title,
.search-results .page-title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-4xl);
  font-weight: var(--cc-weight-display);
  line-height: var(--cc-leading-display);
  letter-spacing: var(--cc-tracking-display);
  color: var(--cc-ink);
  margin-block-end: var(--cc-space-3);
}

.archive .taxonomy-description {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--cc-text-lg);
  line-height: var(--cc-leading-body);
  color: var(--cc-ink-soft);
}

/* ── Tarjeta de articulo ── */

.blog .site-main article.post,
.archive .site-main article.post,
.search-results .site-main article {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-sm);
  transition: transform var(--cc-dur) var(--cc-ease-out),
              box-shadow var(--cc-dur) var(--cc-ease),
              border-color var(--cc-dur) var(--cc-ease);
}

.blog .site-main article.post::before,
.archive .site-main article.post::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  height: 4px;
  width: 0;
  background: var(--cc-gradient-brand);
  transition: width var(--cc-dur) var(--cc-ease-out);
}

.blog .site-main article.post:hover,
.archive .site-main article.post:hover,
.search-results .site-main article:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--cc-shadow-lg);
}

.blog .site-main article.post:hover::before,
.archive .site-main article.post:hover::before { width: 100%; }

/* Imagen destacada */

/* GeneratePress puede colocar la imagen destacada DEBAJO del titulo. En una
   tarjeta eso deja el texto arriba y la foto en medio, que es lo que se veia.
   Con order la imagen sube siempre al principio, sin tocar la plantilla. */
.blog .post-image,
.archive .post-image,
.blog .post-image-below-header,
.archive .post-image-below-header {
  order: -1;
  margin: 0;
  overflow: hidden;
}

/* Titulos largos: que partan por palabras, no por letras. */
.blog .entry-title,
.archive .entry-title {
  overflow-wrap: break-word;
  hyphens: none;
}

.blog .post-image img,
.archive .post-image img,
.search-results .post-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--cc-bg-alt);
  border-radius: 0;
  transition: transform var(--cc-dur-slow) var(--cc-ease-out);
}

.blog article.post:hover .post-image img,
.archive article.post:hover .post-image img { transform: scale(1.04); }

/* Cuerpo de la tarjeta */

.blog .site-main article.post .entry-header,
.archive .site-main article.post .entry-header {
  padding: var(--cc-space-5) var(--cc-space-5) 0;
}

.blog .entry-title,
.archive .entry-title,
.search-results .entry-title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-lg);
  font-weight: 800;
  line-height: 1.38;
  margin-block-end: var(--cc-space-2);
}

.blog .entry-title a,
.archive .entry-title a,
.search-results .entry-title a {
  color: var(--cc-ink);
  text-decoration: none;
  transition: color var(--cc-dur-fast) var(--cc-ease);
}

.blog article.post:hover .entry-title a,
.archive article.post:hover .entry-title a { color: var(--cc-brand-2); }

/* Metadatos: fecha, autor, categoria */

.blog .entry-meta,
.archive .entry-meta {
  font-size: var(--cc-text-xs);
  color: var(--cc-ink-soft);
  margin-block-end: var(--cc-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  align-items: center;
}

.blog .entry-meta a,
.archive .entry-meta a { color: var(--cc-brand-2); text-decoration: none; }
.blog .entry-meta a:hover,
.archive .entry-meta a:hover { text-decoration: underline; }

.blog .entry-summary,
.archive .entry-summary,
.search-results .entry-summary {
  padding: 0 var(--cc-space-5) var(--cc-space-5);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-body);
  color: var(--cc-ink-soft);
}

.blog .entry-summary p:last-child,
.archive .entry-summary p:last-child { margin-block-end: 0; }

/* Enlace de leer mas: se convierte en enlace de marca, no en boton */

.blog .read-more,
.archive .read-more,
.blog .entry-summary .more-link,
.archive .entry-summary .more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin-block-start: var(--cc-space-4);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-ui);
  color: var(--cc-accent-2);
  text-decoration: none;
  transition: gap var(--cc-dur-fast) var(--cc-ease);
}

.blog .read-more:hover,
.archive .read-more:hover { gap: var(--cc-space-3); }

/* ─────────────────────────── ENTRADA INDIVIDUAL ─────────────────────────── */

.single-post .entry-header {
  max-width: 76ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--cc-space-8) var(--cc-space-6);
}

.single-post .entry-title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-4xl);
  font-weight: var(--cc-weight-display);
  line-height: var(--cc-leading-display);
  letter-spacing: var(--cc-tracking-display);
  color: var(--cc-ink);
  margin-block-end: var(--cc-space-4);
}

.single-post .entry-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-4);
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
}

.single-post .entry-meta a { color: var(--cc-brand-2); text-decoration: none; }

/* Imagen destacada de la entrada */

.single-post .post-image,
.single-post .featured-image {
  margin-block-end: var(--cc-space-8);
}

.single-post .post-image img,
.single-post .featured-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-lg);
  background: var(--cc-bg-alt);
}

/* ── Cuerpo del articulo: esto es lo que decide si se lee o no ── */

.single-post .entry-content {
  max-width: 72ch;
  margin-inline: auto;
  font-size: var(--cc-text-lg);
  line-height: 1.8;
  color: var(--cc-ink-soft);
}

.single-post .entry-content p { margin-block-end: var(--cc-space-5); }

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-display);
  line-height: var(--cc-leading-display);
  color: var(--cc-ink);
  margin-block: var(--cc-space-10) var(--cc-space-4);
}

.single-post .entry-content h2 { font-size: var(--cc-text-3xl); }
.single-post .entry-content h3 { font-size: var(--cc-text-2xl); }
.single-post .entry-content h4 { font-size: var(--cc-text-xl); }

/* Filete de marca bajo los h2, igual que en las paginas legales. */
.single-post .entry-content h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--cc-gradient-brand);
  margin-block-end: var(--cc-space-3);
}

.single-post .entry-content a {
  color: var(--cc-accent-2);
  font-weight: var(--cc-weight-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.single-post .entry-content a:hover { text-decoration-thickness: 2px; }

.single-post .entry-content strong { color: var(--cc-ink); font-weight: 800; }

.single-post .entry-content ul,
.single-post .entry-content ol {
  margin-block-end: var(--cc-space-5);
  padding-inline-start: var(--cc-space-6);
}

.single-post .entry-content li { margin-block-end: var(--cc-space-3); }
.single-post .entry-content li::marker { color: var(--cc-brand-2); }

.single-post .entry-content blockquote {
  margin: var(--cc-space-8) 0;
  padding: var(--cc-space-6);
  border: 0;
  border-inline-start: 4px solid var(--cc-brand);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-alt);
  font-size: var(--cc-text-xl);
  line-height: 1.7;
  color: var(--cc-ink);
}

.single-post .entry-content blockquote p:last-child { margin-block-end: 0; }

.single-post .entry-content img {
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-sm);
}

.single-post .entry-content figcaption {
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
  text-align: center;
  margin-block-start: var(--cc-space-2);
}

.single-post .entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  overflow: hidden;
  margin-block: var(--cc-space-6);
  font-size: var(--cc-text-base);
}

.single-post .entry-content th {
  padding: 13px 16px;
  background: var(--cc-bg-alt);
  color: var(--cc-ink);
  font-weight: 800;
  text-align: start;
}

.single-post .entry-content td {
  padding: 13px 16px;
  border-block-start: 1px solid var(--cc-line);
}

/* Pie de la entrada: categorias y etiquetas */

.single-post .entry-meta.post-meta,
.single-post footer.entry-meta {
  max-width: 72ch;
  margin: var(--cc-space-8) auto 0;
  padding-block-start: var(--cc-space-5);
  border-block-start: 1px solid var(--cc-line);
  justify-content: flex-start;
}

.single-post .cat-links a,
.single-post .tags-links a {
  display: inline-block;
  padding: 6px 14px;
  margin-inline-end: var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  background: color-mix(in srgb, var(--cc-brand) 12%, transparent);
  color: var(--cc-brand-2);
  font-size: var(--cc-text-xs);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--cc-dur-fast) var(--cc-ease),
              color var(--cc-dur-fast) var(--cc-ease);
}

.single-post .cat-links a:hover,
.single-post .tags-links a:hover {
  background: var(--cc-brand-2);
  color: var(--cc-ink-inverse);
}

/* Navegacion entre entradas */

.single-post .post-navigation {
  max-width: 72ch;
  margin: var(--cc-space-10) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cc-space-4);
}

.single-post .post-navigation .nav-previous a,
.single-post .post-navigation .nav-next a {
  display: block;
  padding: 18px 22px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  color: var(--cc-ink);
  font-size: var(--cc-text-base);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.single-post .post-navigation a:hover {
  border-color: var(--cc-brand);
  box-shadow: var(--cc-shadow);
}

.single-post .post-navigation .nav-next { text-align: end; }

/* ─────────────────────────── COMENTARIOS ─────────────────────────── */

.single-post .comments-area {
  max-width: 72ch;
  margin: var(--cc-space-12) auto 0;
}

.single-post .comments-title,
.single-post #reply-title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-weight-display);
  color: var(--cc-ink);
  margin-block-end: var(--cc-space-5);
}

.single-post .comment-body {
  padding: var(--cc-space-5);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  margin-block-end: var(--cc-space-4);
}

.single-post .comment-author .fn { color: var(--cc-ink); font-weight: 800; }
.single-post .comment-meta { font-size: var(--cc-text-sm); color: var(--cc-ink-soft); }
.single-post .comment-author img { border-radius: 50%; }

.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
  width: 100%;
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 13px 16px;
  font-family: inherit;
  font-size: var(--cc-text-base);
  background: var(--cc-bg-alt);
  color: var(--cc-ink);
  margin-block-end: var(--cc-space-4);
  transition: border-color var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease),
              background var(--cc-dur-fast) var(--cc-ease);
}

.single-post .comment-form input:focus,
.single-post .comment-form textarea:focus {
  border-color: var(--cc-brand);
  background: var(--cc-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-brand) 16%, transparent);
  outline: none;
}

.single-post .comment-form .submit,
.single-post input#submit {
  min-height: 48px;
  padding: 13px 28px;
  border: 0;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-action);
  color: var(--cc-on-action);
  font-family: inherit;
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-ui);
  cursor: pointer;
  box-shadow: var(--cc-shadow-action);
  transition: background var(--cc-dur-fast) var(--cc-ease),
              transform var(--cc-dur-fast) var(--cc-ease);
}

.single-post .comment-form .submit:hover,
.single-post input#submit:hover {
  background: color-mix(in srgb, var(--cc-action) 88%, var(--cc-ink));
  transform: translateY(-3px);
}

/* ─────────────────────────── PAGINACION ─────────────────────────── */

.paging-navigation .nav-links,
.paging-navigation .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-block-start: var(--cc-space-8);
}

.paging-navigation .page-numbers a,
.paging-navigation .page-numbers span,
.paging-navigation a.page-numbers,
.paging-navigation span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  color: var(--cc-ink);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-ui);
  text-decoration: none;
  transition: background var(--cc-dur-fast) var(--cc-ease),
              border-color var(--cc-dur-fast) var(--cc-ease),
              color var(--cc-dur-fast) var(--cc-ease);
}

.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers a:hover {
  background: var(--cc-brand-2);
  border-color: var(--cc-brand-2);
  color: var(--cc-ink-inverse);
}

/* ─────────────────────────── BARRA LATERAL ─────────────────────────── */

.blog .sidebar .widget,
.archive .sidebar .widget,
.single-post .sidebar .widget {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-5);
  margin-block-end: var(--cc-space-5);
}

.sidebar .widget .widget-title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-ink-soft);
  margin-block-end: var(--cc-space-4);
}

.sidebar .widget ul { list-style: none; padding: 0; margin: 0; }

.sidebar .widget li {
  padding-block: 9px;
  border-block-end: 1px solid var(--cc-line);
  font-size: var(--cc-text-sm);
}

.sidebar .widget li:last-child { border-block-end: 0; }
.sidebar .widget a { color: var(--cc-ink-soft); text-decoration: none; }
.sidebar .widget a:hover { color: var(--cc-brand-2); }

.sidebar .widget input[type="search"] {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--cc-text-sm);
  background: var(--cc-bg-alt);
  color: var(--cc-ink);
}

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 1024px) {
  .blog .site-main,
  .archive .site-main,
  .search-results .site-main { grid-template-columns: repeat(2, 1fr); }
  .single-post .entry-title { font-size: var(--cc-text-3xl); }
}

@media (max-width: 768px) {
  .blog .site-main,
  .archive .site-main,
  .search-results .site-main { grid-template-columns: 1fr; gap: var(--cc-space-5); }
  .single-post .entry-content { font-size: var(--cc-text-base); }
  .single-post .entry-content h2 { font-size: var(--cc-text-2xl); margin-block-start: var(--cc-space-8); }
  .single-post .entry-content blockquote { padding: var(--cc-space-5); font-size: var(--cc-text-lg); }
  .single-post .post-navigation { grid-template-columns: 1fr; }
  .single-post .post-navigation .nav-next { text-align: start; }
  .single-post .post-image img { max-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog .site-main article.post,
  .archive .site-main article.post,
  .blog .post-image img,
  .archive .post-image img { transition: none; }
  .blog .site-main article.post:hover,
  .archive .site-main article.post:hover { transform: none; }
}


/* =============================================================================
   ALTURA UNIFORME DE LAS TARJETAS
   El problema no era la rejilla sino el contenido: entradillas de largo muy
   distinto y listas de etiquetas que en un articulo son tres y en otro
   veinte. Se recorta el texto a un numero fijo de lineas y el pie de la
   tarjeta se ancla abajo.
   ============================================================================= */

.blog .site-main article.post,
.archive .site-main article.post { height: 100%; }

/* La entradilla ocupa el espacio sobrante y se corta a cuatro lineas. */
.blog .entry-summary,
.archive .entry-summary {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  overflow: hidden;
}

/* El pie de la tarjeta (categorias y etiquetas) se pega abajo. */
.blog .site-main article.post .entry-meta.post-meta,
.archive .site-main article.post .entry-meta.post-meta,
.blog .site-main article.post footer.entry-meta,
.archive .site-main article.post footer.entry-meta {
  margin-block-start: auto;
  padding: var(--cc-space-4) var(--cc-space-5);
  border-block-start: 1px solid var(--cc-line);
  font-size: var(--cc-text-xs);
}

/* Las etiquetas del listado sobran: veinte etiquetas hunden la tarjeta.
   Se quedan en la entrada individual, donde si aportan. */
.blog .site-main .tags-links,
.archive .site-main .tags-links,
.blog .site-main .comments-link,
.archive .site-main .comments-link { display: none; }

.blog .site-main .cat-links,
.archive .site-main .cat-links {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}