/**
 * blog.css — Tema felipeonate
 *
 * Estilos del listado de artículos (home.php) y de los archivos de
 * categoría (archive.php). Se encola en is_home() || is_archive().
 *
 * Convenciones (ver CLAUDE.md y DESIGN.md):
 *   - Nunca hex directo: siempre var(--color-*)
 *   - BEM para componentes custom; Bootstrap solo para layout
 *   - Radio de tarjeta 14px, igual que .c-project-card de portfolio.css
 *   - Sombra de hover: 0 20px 48px rgba(22,129,150,0.15)
 *     (= --shadow-brand-soft del DS). NUNCA el glow intenso, que está
 *     reservado a los CTA primarios y momentos hero.
 *
 * DUPLICACIÓN DELIBERADA: el hero (.c-hero) y las pills (.c-pill) se
 * replican acá desde services.css y portfolio.css respectivamente, porque
 * esos archivos solo se encolan en sus propias plantillas. Mismo criterio
 * que siguió case-study.css en BL-23. No es duplicación accidental: es la
 * consecuencia de tener CSS por plantilla. Si cambian allá, cambian acá.
 *
 * BL-04
 *
 * @package felipeonate
 */


/* ============================================================
   HERO
   Duplicado byte a byte desde services.css (.page-service .c-hero),
   escalado a .page-articles: services.css solo se encola en las
   plantillas de servicio (Consulting/Training/Mentoring), no en el
   blog. Si el hero cambia en services.css, este bloque hay que
   actualizarlo a mano.
   ============================================================ */
.page-articles .c-hero {
  background: linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);
  padding: 80px 48px 88px;
  position: relative;
  overflow: hidden;
}

.page-articles .c-hero .bg-hero {
  background-image: url('../../img/ui/bg-hero.png');
  background-position: top left;
  background-repeat: repeat;
  background-size: 5%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page-articles .c-hero .hero-parallax-bg {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 180%;
  background: linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);
  will-change: transform;
  z-index: 0;
}

.page-articles .c-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.page-articles .c-hero__title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 300;
  font-size: 3.6rem;
  color: var(--color-blanco);
  margin: 0 0 8px;
  line-height: 4.5rem;
  text-transform: uppercase;
}

.page-articles .c-hero__subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
  text-wrap: pretty;
}

.page-articles .c-hero__subtitle p {
  margin: 0;
}

/* Animación de entrada del hero. Load-triggered (arranca sola al pintar
   la página), NO scroll-triggered como .fade-up — son dos mecanismos
   deliberadamente distintos en el tema, ver comentario en services.css. */
@keyframes pfHeroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-articles .c-hero__title {
  animation: pfHeroFadeIn 0.7s ease-out both;
}

.page-articles .c-hero__subtitle {
  animation: pfHeroFadeIn 0.7s ease-out 0.15s both;
}


/* ============================================================
   FILTRO POR CATEGORÍA — pills
   Replicado desde .page-portfolio .c-pill de portfolio.css, para que
   el filtro del blog se lea igual que el de Proyectos. portfolio.css
   no se encola acá, de ahí la duplicación (mismo caso que el hero).

   Los valores de color NO son arbitrarios: vienen del fix de contraste
   de BL-06 (WCAG 1.4.11, mínimo 3:1 para bordes). No cambiarlos sin
   recalcular el contraste — gris-200 y turquesa-300, que serían las
   elecciones "naturales", fallan la norma.

   Diferencia con Proyectos: acá son <a> (navegación real), allá son
   <button> (filtro JS). Por eso hay estilos de :focus-visible, que
   los <a> necesitan y en el original no estaban.
   ============================================================ */
.page-articles .c-section--pills {
  padding: 40px 48px;
}

.page-articles .c-pills-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.page-articles .c-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-gris-500);
  background: var(--color-blanco);
  color: var(--color-gris-700);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.page-articles .c-pill__count {
  margin-left: 10px;
  font-weight: 700;
}

.page-articles .c-pill:hover {
  background: var(--color-turquesa-50);
  border-color: var(--color-turquesa-400);
  color: var(--color-turquesa-700);
}

.page-articles .c-pill:active {
  background: var(--color-turquesa-100);
  border-color: var(--color-turquesa-500);
  color: var(--color-turquesa-700);
}

.page-articles .c-pill:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
}

.page-articles .c-pill--active {
  background: var(--color-turquesa-100);
  border-color: var(--color-turquesa-600);
  color: var(--color-turquesa-700);
  font-weight: 600;
}


/* ============================================================
   GRID DE ARTÍCULOS
   CSS Grid, consistente con portfolio.css (no row/col de Bootstrap).
   ============================================================ */
.page-articles__list {
  /* Sin padding-top: la separación con el hero la aporta
     .c-section--pills (40px 48px), igual que en Proyectos. */
  padding: 0 48px 80px;
}

.c-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}


/* ============================================================
   TARJETA DE ARTÍCULO
   ============================================================ */
.c-article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-50);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(2, 9, 10, 0.06), 0 2px 8px rgba(2, 9, 10, 0.04);
  transition: transform 0.25s, box-shadow 0.25s;
}

.c-article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(22, 129, 150, 0.15);
}

.c-article-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-gris-50);
}

.c-article-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.c-article-card:hover .c-article-card__img {
  transform: scale(1.04);
}

/* Sin imagen destacada: bloque neutro con el gradiente sancionado
   (turquesa → menta), el único permitido por DESIGN.md. */
.c-article-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-turquesa-50), var(--color-menta-50));
}

.c-article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px;
}

.c-article-card__cat {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-turquesa-600);
  margin-bottom: 8px;
}

.c-article-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.c-article-card__title a {
  color: var(--color-negro);
  text-decoration: none;
  transition: color 0.2s ease;
}

.c-article-card__title a:hover {
  color: var(--color-turquesa-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-article-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-gris-600);
  margin: 0 0 16px;
  text-wrap: pretty;
}

/* margin-top:auto empuja los metadatos al pie de la tarjeta, así todas
   las tarjetas de una fila alinean la fecha aunque el título ocupe
   distinta cantidad de líneas. */
.c-article-card__meta {
  margin: auto 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-gris-500);
}

.c-article-card__sep {
  margin: 0 6px;
  color: var(--color-gris-200);
}


/* ============================================================
   VARIANTE COMPACTA — sidebar del single (col-lg-4, ~330px)
   La tarjeta completa queda desproporcionada en esa columna.
   ============================================================ */
.c-article-card--compact {
  flex-direction: row;
  align-items: stretch;
  border-radius: 12px;
}

.c-article-card--compact:hover {
  transform: none;
  box-shadow: 0 8px 20px rgba(22, 129, 150, 0.12);
}

.c-article-card--compact .c-article-card__media {
  flex: 0 0 88px;
  aspect-ratio: auto;
}

.c-article-card--compact .c-article-card__body {
  padding: 12px 14px;
}

.c-article-card--compact .c-article-card__cat {
  margin-bottom: 5px;
}

.c-article-card--compact .c-article-card__title {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 6px;
}


/* ============================================================
   ESTADO VACÍO
   ============================================================ */
.page-articles__empty {
  padding: 48px 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-gris-600);
}

.page-articles__empty p {
  margin: 0 0 20px;
}


/* ============================================================
   PAGINACIÓN
   Markup generado por the_posts_pagination(): .pagination >
   .nav-links > .page-numbers
   ============================================================ */
.page-articles .pagination {
  margin-top: 48px;
}

.page-articles .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-articles .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-gris-50);
  border-radius: 8px;
  background: var(--color-blanco);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--color-gris-700);
  text-decoration: none;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.page-articles a.page-numbers:hover {
  background: var(--color-turquesa-50);
  border-color: var(--color-turquesa-100);
  color: var(--color-turquesa-700);
}

.page-articles .page-numbers.current {
  background: var(--color-turquesa-500);
  border-color: var(--color-turquesa-500);
  color: var(--color-blanco);
}

.page-articles .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

.page-articles .page-numbers:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
}


/* ============================================================
   NEWSLETTER
   Bloque oculto tras PF_SHOW_NEWSLETTER (functions.php) hasta que se
   elija el plugin. El CSS existe para no rehacer el layout después.
   ============================================================ */
.c-newsletter {
  padding: 0 0 80px;
}

.c-newsletter__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: 14px;
  background: var(--color-turquesa-50);
  transition: transform 0.25s, box-shadow 0.25s;
}

.c-newsletter__inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(22, 129, 150, 0.15);
}

.c-newsletter__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-negro);
  margin: 0 0 10px;
}

.c-newsletter__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gris-700);
  margin: 0;
}

.c-newsletter__placeholder {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gris-500);
  margin: 0;
}

/* Ancla de posicionamiento para .wpcf7-response-output (position:absolute
   más abajo, ajuste manual de Felipe) — sin esto, el absolute se ancla
   contra el ancestro posicionado más cercano en todo el DOM, que no
   existe dentro de este bloque, y el mensaje termina flotando fuera de
   contexto en vez de quedar contenido acá. */
.c-newsletter__form {
  position: relative;
}

/* Override de los inputs de CF7 sobre fondo claro. La regla base .wpcf7
   input[type="text"]/[type="email"] en main.css asume el fondo oscuro de
   .contact-section (texto blanco, borde/fondo translúcidos sobre
   blanco) — invisible sobre --color-turquesa-50. Scoped a
   .c-newsletter para no tocar el form de contacto, que sí funciona
   bien con la regla original.
   Antes solo cubría input[type="email"] — el campo your-name
   (type="text", con class:form-control-dark en el form-tag) se quedaba
   con el placeholder blanco translúcido de la variante oscura,
   invisible sobre este fondo claro. Se agrega input[type="text"] a la
   misma regla. */
.c-newsletter .wpcf7 input[type="text"],
.c-newsletter .wpcf7 input[type="email"] {
  background: var(--color-blanco);
  border-color: var(--color-turquesa-200);
  color: var(--color-gris-700);
}

.c-newsletter .wpcf7 input[type="text"]::placeholder,
.c-newsletter .wpcf7 input[type="email"]::placeholder {
  color: var(--color-gris-500);
}

/* Layout siempre apilado, en todos los tamaños de pantalla — sin
   zigzag responsive (versión anterior alternaba fila/apilado en 4
   breakpoints distintos; reemplazado a pedido de Felipe por un único
   layout vertical consistente, referencia visual Newsletter
   Desktop/Mobile). El flex va en el <form class="wpcf7-form"> directo,
   no en el <p> interno — así funciona sea que CF7 envuelva los campos
   en <p> o no. display:contents en el <p>, si existe, anula su caja
   sin tocar el DOM. */
.c-newsletter .wpcf7-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.c-newsletter .wpcf7-form > p {
  display: inline;
}

.c-newsletter .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}

.c-newsletter .wpcf7 input[type="text"],
.c-newsletter .wpcf7 input[type="email"] {
  width: 100%;
}

/* Botón turquesa de marca (--color-turquesa-500, igual que el resto de
   los CTAs primarios del sitio) — la referencia visual traía un tono
   oscuro/neutro, mantenido intencionalmente fuera de la paleta de
   marca a pedido de Felipe. Ancho natural (fit-content) y alineado a
   la izquierda en desktop; se estira a 100% solo en el breakpoint
   mobile más abajo. */
.c-newsletter .wpcf7 input[type="submit"] {
  align-self: flex-start;
  width: auto;
  white-space: nowrap;
  background: var(--color-turquesa-500);
  border-color: var(--color-turquesa-500);
  color: var(--color-blanco);
}

.c-newsletter .wpcf7 input[type="submit"]:hover {
  background: var(--color-turquesa-600);
  border-color: var(--color-turquesa-600);
}

/* El tooltip de error (.wpcf7-not-valid-tip, definido en main.css) es
   position:relative por defecto — ahí crecía dentro del wrap del input
   y empujaba/descentraba todo lo demás. Acá se saca del flujo por
   completo: cuelga del wrap del input (position:relative arriba) sin
   ocupar espacio, así que aparecer o desaparecer nunca mueve el resto
   del formulario ni el contenido debajo del bloque.
   No se toca la regla global .wpcf7-not-valid-tip — mismo bubble con
   flecha, solo se le cambia el posicionamiento acá. */
.c-newsletter .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
}

/* Ajuste manual de Felipe (no el buffer de margen original): en vez de
   reservar espacio con margin-top, el mensaje de respuesta general
   (.wpcf7-response-output) pasa a position:absolute — no ocupa espacio
   en el flujo, así que aparecer/desaparecer nunca mueve el contenido
   debajo del bloque. Se ancla contra .c-newsletter__form
   (position:relative, ver arriba). margin-top:16px queda como offset
   visual respecto al input, no como buffer contra el tooltip. */
.c-newsletter .wpcf7-response-output {
  margin-top: 16px !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
}


/* ============================================================
   RESPONSIVE
   Se usan los breakpoints ya existentes en el tema (991/992 y 767/768).
   El form de newsletter ya no tiene patrón zigzag propio (versión
   anterior alternaba fila/apilado en 4 breakpoints, documentado con
   detalle acá mismo hasta este cambio) — a pedido de Felipe pasa a un
   único layout siempre apilado, definido en la regla base más arriba,
   sin overrides por breakpoint.
   ============================================================ */
@media (max-width: 991px) {
  .c-article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Idéntico a .page-service .c-hero en services.css a este breakpoint. */
  .page-articles .c-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-articles .c-hero__title {
    font-size: 2.5rem;
  }

  /* BL-33: en mobile el patrón se veía casi imperceptible al 5% (mismo
     valor que desktop) — pedido explícito, sube a 25%. */
  .page-articles .c-hero .bg-hero {
    background-size: 25%;
  }

  /* Replicado de portfolio.css: en mobile las pills suben de peso para
     mantener legibilidad al reducirse el área táctil. */
  .page-articles .c-section--pills {
    padding: 32px 24px;
  }

  .page-articles .c-pills-nav {
    gap: 12px;
  }

  .page-articles .c-pill,
  .page-articles .c-pill--active {
    font-weight: 700;
  }

  .page-articles__list {
    padding-left: 24px;
    padding-right: 24px;
  }

  .c-newsletter__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }

  /* Título y descripción centrados al colapsar a una columna —
     referencia visual Newsletter Mobile. Solo desde este breakpoint:
     en desktop (grid de 2 columnas) se mantienen alineados a la
     izquierda, como corresponde junto al form. */
  .c-newsletter__text {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .c-article-grid {
    grid-template-columns: 1fr;
  }

  .page-articles__list {
    padding-bottom: 56px;
  }

  /* Único ajuste de newsletter que sigue siendo necesario en mobile:
     el botón pasa de ancho natural (fit-content, desktop/tablet) a
     ancho completo — mismo ancho que los inputs. El resto del layout
     (apilado, gap, alineación) ya es igual en todos los breakpoints
     desde la regla base. */
  .c-newsletter .wpcf7 input[type="submit"] {
    width: 100%;
  }
}