/* ============================================================
   Vista principal del blog (BlogIndexPage). Diseño del Figma.
   Reutiliza las cards .blog__* de blog.css para la grilla; acá van
   el encabezado, la card DESTACADA (más reciente), la grilla de 4
   columnas y la paginación. CERO JS. Clases namespaceadas .blog-index__*.
   ============================================================ */

.blog-index {
  /* La sección se estira hacia ARRIBA, por detrás del nav flotante (sticky), para
     que el aura arranque en y=0 como en el diseño (el nav pinta encima por z-index).
     El padding-top recompensa ese tirón para que el contenido siga cayendo debajo
     del nav: el titular queda donde estaba, solo el color sube. */
  /* --pull cubre el alto REAL del nav: su pastilla (--nav-height, 72px) MÁS el
     gutter transparente de arriba (space-4). Sobra un toque a propósito → el color
     tapa hasta y=0 sin dejar franja blanca. margin y padding usan el MISMO --pull
     para que el contenido no se corra. */
  --pull: calc(var(--nav-height) + var(--space-10));
  margin-top: calc(-1 * var(--pull));
  padding-top: calc(var(--section-y) + var(--pull));
  padding-bottom: var(--section-y);
  /* Mismo "vapor" de color de la home (hero), pero anclado ARRIBA y con footprint
     fijo (elipses en px), no estirado por toda la sección —que es muy alta— para
     que no se lave: celeste arriba-izquierda, rosa arriba-derecha, y a blanco al
     bajar. Sobre el fondo blanco del body. Mismos colores/opacidades que el hero. */
  background-image:
    radial-gradient(ellipse 900px 540px at 12% -8%, rgba(0, 184, 230, 0.12) 0%, transparent 68%),
    radial-gradient(ellipse 900px 540px at 88% -8%, rgba(229, 0, 126, 0.1) 0%, transparent 68%),
    /* Puente lavanda (#8c8ae6): elipse ancha y tenue arriba-centro. Cierra el hueco
       blanco entre el celeste (izq) y el rosa (der) → banda de color CONTINUA a lo
       ancho, nunca blanca detrás del nav. */
    radial-gradient(ellipse 1500px 460px at 50% -16%, rgba(140, 138, 230, 0.07) 0%, transparent 72%);
  background-repeat: no-repeat;
}

/* ---------- Encabezado ---------- */
.blog-index__overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.blog-index__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.blog-index__intro {
  margin-top: var(--space-3);
  max-width: 46rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Card destacada (más reciente): imagen | panel ---------- */
.blog-index__featured {
  display: grid;
  grid-template-columns: 60% 40%; /* imagen 60 · texto 40 */
  margin-top: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  text-decoration: none;
  /* Borde sutil y difuminado: sin línea gris dura, solo una sombra suave. */
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.blog-index__featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.blog-index__featured-cover {
  position: relative;
  min-height: 400px; /* un poco más alta, como el diseño */
  background: var(--color-ink); /* mientras carga / si el blog no tiene imagen */
}

.blog-index__featured-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-index__featured-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
}

.blog-index__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.blog-index__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Categoría del blog: texto violeta sobre fondo violeta suave. Uso el violeta
   profundo (lavender-700) para que el texto pase contraste sobre el fondo claro. */
.blog-index__chip--category {
  color: var(--color-lavender-700);
  background: var(--color-lavender-soft);
}

/* "Más reciente": gris suave, sin fondo, al lado de la categoría. */
.blog-index__chip--recent {
  color: var(--color-neutral-400);
}

.blog-index__featured-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

.blog-index__featured-excerpt {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.blog-index__featured-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* CTA "Leer artículo": pill magenta (accent), el color de acción del sitio. */
.blog-index__featured-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-glow-accent); /* difuminado rosa, igual que el botón */
  transition:
    background var(--transition),
    box-shadow var(--transition);
}

.blog-index__featured:hover .blog-index__featured-cta {
  background: var(--color-accent-hover);
}

.blog-index__meta {
  font-size: var(--fs-caption);
  color: var(--color-neutral-400);
}

/* ---------- Grilla (4 columnas; reutiliza .blog__card) ---------- */
.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* ---------- Paginación (cero JS) ---------- */
.blog-index__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.blog-index__page-link,
.blog-index__page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition);
}

.blog-index__page-link {
  padding-inline: var(--space-4);
}

.blog-index__page-link:hover,
.blog-index__page-num:hover {
  border-color: var(--color-primary);
}

/* Página actual: pill oscuro relleno, como el Figma. */
.blog-index__page-num.is-current {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.blog-index__page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .blog-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .blog-index__featured {
    grid-template-columns: 1fr;
  }
  .blog-index__featured-cover {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .blog-index__grid {
    grid-template-columns: 1fr;
  }
}