/* =========================================================================
   Blog Article — Responsive del cierre (§5–§9)
   Blockquote, tablas, pie del artículo, CTA final y landscape móvil. Sale de
   blog-article.responsive.css (partido por responsabilidad, 2026-10-21).
   Solo overrides por viewport. El movimiento reducido no tiene bloque propio:
   el artículo no anima nada suyo, y lo global vive en movimiento.css.
   ========================================================================= */

/* =========================================================================
   §5 · BLOCKQUOTE
   El blockquote lleva padding: --spacing-md (32px) --spacing-lg (64px).
   En móvil ese padding lateral excede el espacio disponible.
   Se reduce el padding horizontal; el border-left coral se MANTIENE.
   ========================================================================= */

/* ── 5.1 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-body blockquote {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
    /* border-left: 4px coral se MANTIENE — es el elemento visual estructural.
       El padding reducido asegura que el texto no se apriete contra el borde. */
  }
}

/* ── 5.2 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-body blockquote {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
  }
}


/* =========================================================================
   §6 · TABLES — Scroll horizontal en móvil
   Las tablas de 2 columnas (Estilo/Enfoque) tienen contenido en celdas
   que puede no caber en viewports < 480px.

   ESTRATEGIA: table-wrapper con overflow-x: auto.
   La tabla mantiene su layout natural — no se rompe en columnas.
   El usuario puede hacer scroll horizontal si el contenido lo requiere.

   IMPORTANTE: El wrapper no existe en el HTML actual.
   Se implementa con un selector de contexto en base CSS (§6 de blog-article.css)
   o con overflow directamente en la table.
   Dado que no queremos tocar el HTML, usamos overflow en la table directamente.
   ========================================================================= */

/* ── 6.1 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-body table {
    display: block;
    overflow-x: auto;
    /* display: block permite que overflow-x funcione en tablas.
       El width: 100% del base se mantiene porque se aplica al contenido interno. */
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    font-size: 0.8rem;
  }

  .blog-body th,
  .blog-body td {
    padding: var(--space-xs) var(--space-sm);
    /* Celdas más compactas para que quepan en móvil sin necesidad de scroll
       en tablas con contenido corto. */
    min-width: 100px;
    /* min-width garantiza que las columnas no colapsen a anchos ilegibles
       cuando sí hay scroll. */
  }
}

/* ── 6.2 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-body th,
  .blog-body td {
    font-size: 0.75rem;
  }
}


/* =========================================================================
   §7 · ARTICLE FOOTER — Autor + CTA
   El .blog-author usa flex row en desktop (imagen + texto).
   No hay imagen en el HTML actual (.blog-author-img no se usa).
   La estructura es solo texto — no necesita ajuste de flex en móvil.
   Se ajusta el espaciado vertical.
   ========================================================================= */

/* ── 7.1 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
  }

  .blog-author {
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .blog-author-name {
    font-size: var(--text-sm);
  }

  .blog-author-role {
    font-size: 0.75rem;
  }
}


/* =========================================================================
   §8 · CTA FINAL (.cta-final-section) — Dentro del article footer
   El CTA usa los estilos globales de cta-final-section definidos en global.css.
   Dentro de un .blog-article (max-width: 720px centrado) el CTA hereda ese
   contexto. El .container interno del CTA tiene su propio padding.

   Solo sobreescribimos lo que el contexto del artículo hace diferente
   respecto al CTA de la landing page.
   ========================================================================= */

/* ── 8.1 Tablet portrait ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-footer .cta-final-section {
    padding: var(--spacing-lg) 0;
  }
}

/* ── 8.2 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-footer .cta-final-section {
    padding: var(--spacing-md) 0;
  }

  .blog-footer .cta-final-section h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    /* El h2 del CTA en mobile: más pequeño que el global para respetar
       la jerarquía dentro del artículo. */
  }
}

/* ── 8.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-footer .cta-final-section h2 {
    font-size: clamp(1.3rem, 8vw, 1.8rem);
  }
}


/* =========================================================================
   §9 · LANDSCAPE MÓVIL
   (max-height: 500px) and (max-width: 899px) and (orientation: landscape)
   En landscape el artículo sigue siendo contenido de lectura —
   el usuario rota para leer más cómodo. El objetivo es que no haya
   padding excesivo en los extremos y que el texto use bien el ancho disponible.

   DECISIÓN: En landscape el max-width: 720px del .blog-article
   sigue siendo correcto — limita la longitud de línea en pantallas anchas.
   Solo ajustamos el padding vertical del shell y el header.
   ========================================================================= */

@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  .blog-article {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .blog-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
  }

  .blog-title {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    margin-bottom: var(--spacing-xs);
  }

  .blog-kicker {
    margin-bottom: var(--spacing-xs);
  }

  .blog-body h2 {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
  }

  .blog-body h3 {
    margin-top: var(--spacing-sm);
    font-size: 1rem;
  }

  .blog-body p {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
    /* Reducimos line-height en landscape — el usuario en landscape
       lee en scroll horizontal virtual, necesita densidad. */
  }

  .blog-footer {
    margin-top: var(--spacing-md);
  }
}