/* =========================================================================
   Blog Index — Responsive
   Archivo EXCLUSIVO de breakpoints para blog/index.html.
   NO contiene estilos base. Solo overrides por viewport.

   Estrategia de breakpoints (alineada con landing.responsive.css):
     479px  — Móvil pequeño (iPhone SE 375px, Galaxy A series)
     599px  — Móvil grande / phablet (iPhone 14, Galaxy S)
     767px  — Quiebre principal portrait: stacked → tablet
     899px  — Tablet landscape / desktop pequeño
    1199px  — Desktop estándar
    1440px  — Desktop grande / wide

   Orientación landscape (móvil):
     (max-height: 500px) and (max-width: 899px) and (orientation: landscape)
     Acotado a max-width: 899px — excluye escritorios con ventana corta.

   Autor: Antigravity / CITEM DS 2026
   ========================================================================= */


/* =========================================================================
   §1 · CONTAINER — Padding lateral adaptativo
   El .container base tiene padding --spacing-md (32px) a cada lado.
   En un iPhone SE (375px) eso consume ~17% del viewport.
   ========================================================================= */

@media (max-width: 599px) {
  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}


/* =========================================================================
   §2 · PAGE HEADER (.blog-index-header)
   Desktop: padding generoso — el título necesita aire.
   Tablet: reducción proporcional.
   Móvil: padding compacto, la jerarquía visual la sostiene la tipografía.
   ========================================================================= */

/* ── 2.1 Tablet portrait (768–899px) ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-index-header {
    padding: var(--space-2xl) 0 var(--space-xl);
  }
}

/* ── 2.2 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-index-header {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  /* El clamp del base (2rem→3.5rem) ya es fluido.
     En móvil pequeño el clamping inferior (2rem) puede quedar corto
     si el título tiene 2 líneas — se confirma con el 5vw mínimo del clamp.
     No se sobreescribe: el clamp fluido es correcto. */

  .blog-index-description {
    /* En móvil el max-width: 52ch del base podría tener líneas muy largas
       en pantallas anchas con font-size pequeño. Se libera al 100%. */
    max-width: 100%;
    font-size: 1rem;
  }
}

/* ── 2.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-index-header {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .blog-index-kicker {
    /* Reducimos letter-spacing para evitar que desborde en 320px */
    letter-spacing: 2px;
    font-size: 0.6rem;
  }
}

/* ── 2.4 Landscape móvil ──
   En landscape, el header consume demasiado scroll vertical.
   Reducimos padding agresivamente sin perder la jerarquía. */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  .blog-index-header {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .blog-index-kicker {
    margin-bottom: var(--space-sm);
  }

  .blog-index-title {
    margin-bottom: var(--space-md);
  }
}


/* =========================================================================
   §3 · BLOG GRID — Layout de tarjetas
   Base: 1 columna (mobile-first).
   Phablet 600–767px: 2 columnas — el grid se activa antes de tablet.
   Tablet 768–1023px: 2 columnas — no hay suficiente canvas para 3.
   Desktop 1024+: 3 columnas.
   Desktop wide 1440+: 3 columnas con gap mayor.

   DECISIÓN DE DISEÑO: Con 1 solo artículo ahora, el grid de 2–3 cols
   deja celdas vacías. Esto es CORRECTO — el HTML escala añadiendo <li>
   sin tocar el CSS. El espacio en blanco en el grid actual es intencional.
   ========================================================================= */

/* ── 3.1 Phablet (600–767px): 2 tarjetas en fila ── */
@media (min-width: 600px) and (max-width: 767px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* ── 3.2 Tablet portrait (768–1023px): 2 columnas ──
   768px es el breakpoint principal. Con 3 cols el card-title
   (en uppercase, Gobold, texto largo) se comprimiría demasiado. */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

/* ── 3.3 Desktop (≥ 1024px): 3 columnas ── */
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* ── 3.4 Desktop wide (≥ 1440px): gap generoso ── */
@media (min-width: 1440px) {
  .blog-grid {
    gap: var(--space-2xl);
  }
}


/* =========================================================================
   §4 · BLOG CARD (.blog-card)
   El borde estructural (3px) del base NO se reduce en móvil —
   es parte del sistema visual brutalista, no un accidente de escritorio.
   Lo que sí se adapta: el padding interior y el tamaño tipográfico.
   ========================================================================= */

/* ── 4.1 Tablet portrait (768–899px) ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-card {
    padding: var(--space-lg);
    /* Con 2 cols en 768px, el card tiene ~360px de ancho.
       El padding-xl (32px) a cada lado consume 64px del ancho útil.
       Con lg (24px) recuperamos 16px sin perder la sensación de card. */
  }
}

/* ── 4.2 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-card {
    padding: var(--space-lg);
    /* En móvil de 1 col el card ocupa casi todo el viewport.
       El padding-lg (24px) da respiración sin desperdiciar espacio. */
  }

  .blog-card-title {
    /* El clamp base (1rem→1.25rem con 2vw) en móvil queda en ~1rem.
       A 1 columna tenemos más ancho y el título puede crecer algo más. */
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.2;
  }

  .blog-card-benefit {
    /* Texto de cuerpo en tarjeta: ligera reducción para densidad. */
    font-size: 0.9rem;
  }
}

/* ── 4.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-card {
    padding: var(--space-md) var(--space-md);
    /* En iPhone SE (375px) con container padding de 16px a cada lado,
       el card tiene ~343px. Con padding-md (16px) el contenido
       tiene ~311px — suficiente para el título en 2–3 líneas. */
  }

  .blog-card-cta {
    /* En móvil pequeño el separador top queda muy cerca del benefit */
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
  }
}

/* ── 4.4 Landscape móvil ── */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  .blog-card {
    /* En landscape con 2 cols el card queda muy comprimido verticalmente.
       Ajustamos el gap interno para reducir la altura de la card. */
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
  }

  .blog-card-title {
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .blog-card-benefit {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}


/* =========================================================================
   §5 · BLOG MAIN SECTION (.blog-index-main)
   El padding vertical se escala con el viewport.
   ========================================================================= */

/* ── 5.1 Tablet portrait ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-index-main {
    padding: var(--space-2xl) 0 var(--space-3xl);
  }
}

/* ── 5.2 Móvil ── */
@media (max-width: 767px) {
  .blog-index-main {
    padding: var(--space-2xl) 0 var(--space-3xl);
  }
}

/* ── 5.3 Móvil pequeño ── */
@media (max-width: 479px) {
  .blog-index-main {
    padding: var(--space-xl) 0 var(--space-2xl);
  }
}

/* ── 5.4 Landscape móvil ── */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  .blog-index-main {
    padding: var(--space-lg) 0 var(--space-2xl);
  }
}


/* =========================================================================
   §6 · BORDE ENTRE HEADER Y GRID
   El borde inferior del .blog-index-header (3px indigo) actúa como
   separador estructural. En móvil el padding reducido lo acerca al grid
   y puede sentirse "aplastado". No se elimina — es sistema brutalista —
   pero el gap visual lo resuelve el padding del §2 y §5.
   No requiere override de borde. DOCUMENTADO INTENCIONALMENTE.
   ========================================================================= */


/* =========================================================================
   §7 · DESKTOP GRANDE (≥ 1200px)
   En viewports muy anchos el container (max-width: 1440px) ya limita.
   Los ajustes aquí son de refinamiento, no de corrección.
   ========================================================================= */

@media (min-width: 1200px) {
  .blog-index-description {
    /* En pantallas anchas 52ch puede quedar "flotando" si el layout
       tiene mucho espacio vacío. Se mantiene el max-width del base —
       funciona correctamente a este ancho. Sin override necesario. */
  }
}


/* =========================================================================
   §8 · ACCESIBILIDAD
   prefers-reduced-motion: cubre todas las transiciones del componente.
   No duplicar en el base — este archivo es el único que los gestiona.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card-title,
  .blog-card-date,
  .blog-card-benefit,
  .blog-card-cta {
    transition: none !important;
  }
}