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

   Componentes cubiertos:
     §1  Container lateral
     §2  Article shell (.blog-article)
     §3  Article header (.blog-header, .blog-title, .blog-kicker, .blog-meta)
     §4  Article body — tipografía de lectura (.blog-body p, h2, h3, ul)
     §5  Blockquote (.blog-body blockquote)
     §6  Tables (.blog-body table) — scroll horizontal en móvil
     §7  Article footer (.blog-footer, .blog-author)
     §8  CTA reutilizado (.cta-final-section) — sobreescribe responsive global
     §9  Landscape móvil
     §10 Accesibilidad — prefers-reduced-motion

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

   Nota sobre el max-width: 720px del .blog-article:
     El artículo se centra solo dentro del viewport.
     En móvil (< 767px) el max-width no entra en juego (el viewport ya es < 720px)
     — lo que cambia es el padding lateral y el tamaño tipográfico.

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


/* =========================================================================
   §1 · CONTAINER — Padding lateral adaptativo
   El .container base usa --spacing-md (32px). En iPhone SE (375px)
   eso consume ~17% del viewport. Se reduce a --spacing-sm (16px).
   Solo aplica cuando el article está dentro de un .container.
   El .blog-article tiene su propio padding — ver §2.
   ========================================================================= */

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


/* =========================================================================
   §2 · ARTICLE SHELL (.blog-article)
   max-width: 720px actúa en desktop. En móvil el viewport es < 720px
   así que el padding lateral es el único control de espacio.

   Base: padding: --spacing-xl (5rem) --spacing-md (32px)
   En tablet: reducimos el vertical para no desperdiciar viewport.
   En móvil: padding lateral mínimo — el artículo necesita todo el ancho.
   ========================================================================= */

/* ── 2.1 Tablet portrait (768–899px) ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-article {
    padding: var(--spacing-lg) var(--spacing-md);
    /* --spacing-lg (64px) es suficiente en tablet.
       El padding lateral se mantiene en --spacing-md (32px). */
  }
}

/* ── 2.2 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-article {
    padding: var(--spacing-md) var(--spacing-sm);
    /* --spacing-md vertical (32px): los artículos de lectura no necesitan
       tanto aire en móvil — el usuario hace scroll, no necesita "respirar" antes.
       --spacing-sm lateral (16px): padding mínimo sin tocar el borde. */
  }
}

/* ── 2.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-article {
    padding: var(--spacing-sm) var(--spacing-sm);
    /* En 375px el padding-sm (16px) a cada lado deja 343px de contenido —
       suficiente para 60–65ch legibles. */
  }
}


/* =========================================================================
   §3 · ARTICLE HEADER
   El .blog-header lleva border-bottom estructural de 3px.
   En móvil el título puede tener 3–4 líneas — el margin-bottom del header
   debe aumentar proporcionalmente para mantener el ritmo vertical.

   .blog-title: clamp(1.8rem, 5vw, 2.6rem) en base.
   En móvil el 5vw en 375px da ~18.75px ≈ 1.17rem — por debajo del mínimo 1.8rem.
   El clamp se autorregula correctamente. Verificado: no necesita override.

   .blog-meta: flex-wrap ya configurado en base — no necesita override.
   ========================================================================= */

/* ── 3.1 Tablet portrait ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
  }
}

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

  .blog-kicker {
    /* En móvil pequeño el letter-spacing: 0.12em puede causar overflow.
       Reducimos a un valor seguro. */
    letter-spacing: 0.08em;
  }

  .blog-title {
    /* El clamp base (1.8→2.6rem) en móvil se queda en 1.8rem.
       En un artículo de lectura, eso es correcto.
       Pero el line-height 1.15 puede hacer que 3-4 líneas se agrupen demasiado. */
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
  }

  .blog-meta {
    font-size: 0.8rem;
    gap: var(--spacing-xs) var(--spacing-sm);
  }
}

/* ── 3.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-title {
    /* Con 375px y Gobold Bold, 1.8rem puede quedar grande con 4 líneas.
       Bajamos ligeramente para acomodar la longitud real del título del artículo. */
    font-size: clamp(1.5rem, 7.5vw, 1.8rem);
  }
}


/* =========================================================================
   §4 · ARTICLE BODY — Tipografía de lectura
   El cuerpo del artículo tiene contenido muy extenso (2000+ palabras).
   La lectura en móvil es vertical — el usuario dedica tiempo.
   Prioridad: line-height, font-size legibles, spacing proporcional entre
   párrafos y secciones (H2, H3).

   El border-top de los H2 es brutalismo estructural — NO se elimina en móvil.
   Se mantiene pero se ajustan los márgenes para que respire correctamente.
   ========================================================================= */

/* ── 4.1 Tablet portrait ── */
@media (min-width: 768px) and (max-width: 899px) {
  .blog-body {
    font-size: 1rem;
    /* 1rem es ligeramente más compacto que --text-base (1.125rem).
       En tablet portrait con max-width 720px ocupando el 93% del viewport,
       el tamaño de cuerpo puede reducirse sin perder legibilidad. */
  }

  .blog-body h2 {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
  }
}

/* ── 4.2 Móvil (< 768px) ── */
@media (max-width: 767px) {
  .blog-body {
    font-size: 1rem;
    /* line-height: 1.75 del base se mantiene — es óptimo para lectura móvil. */
  }

  .blog-body h2 {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    /* border-top: 3px indigo se MANTIENE — es identidad del DS brutalista. */
  }

  .blog-body h3 {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
  }

  .blog-body p {
    margin-bottom: var(--spacing-sm);
    /* Reducimos margin entre párrafos — en móvil el espacio es limitado
       y el usuario ya discrimina por line-height. */
  }

  .blog-body ul,
  .blog-body ol {
    padding-left: 1.3em;
    /* En 375px con padding-left: 1.6em, las listas casi tocan el borde del artículo.
       Reducimos para garantizar el margen mínimo. */
  }
}

/* ── 4.3 Móvil pequeño (< 480px) ── */
@media (max-width: 479px) {
  .blog-body {
    font-size: 0.95rem;
    /* La reducción mínima necesaria para que el texto no rompa el layout
       en 320px (el viewport más pequeño soportado). */
  }

  .blog-body ul,
  .blog-body ol {
    padding-left: 1.1em;
  }
}


/* =========================================================================
   §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-img {
    /* Si se añade la imagen en el futuro:
       64px en móvil es correcto — no se reduce.
       flex-shrink: 0 del base garantiza que no se comprime. */
    width: 48px;
    height: 48px;
  }

  .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. */
  }

  .blog-footer .cta-form {
    max-width: 100%;
    /* En móvil el max-width del cta-form (del global) queda fijo.
       Lo liberamos para que ocupe el ancho del container. */
  }
}

/* ── 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);
    line-height: 1.15;
    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);
  }
}


/* =========================================================================
   §10 · ACCESIBILIDAD — prefers-reduced-motion
   El article no tiene animaciones de entrada propias — solo hereda
   las del global.css (.animate, IntersectionObserver).
   Garantizamos que los elementos del artículo sean visibles sin animación.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  /* El blog-article no define transiciones propias.
     El CTA que reutiliza .btn sí hereda transición del global.
     La garantía de visibilidad del .animate global ya está en landing.responsive.css.
     Aquí solo cubrimos si hubiera alguna transición futura en el artículo. */
  .blog-card,
  .blog-body,
  .blog-header,
  .blog-footer {
    transition: none !important;
    animation: none !important;
  }
}