/* BLOG MOBILE FIX — Tu Camino del Artista (2026-06-29)
 * Fixes para blog posts en móvil <640px
 * Problemas identificados:
 * 1. Foto circular gigante (author-photo, hero image) que ocupa toda la pantalla
 * 2. Padding excesivo en post-header
 * 3. Blockquotes/pre/code overflow horizontal
 * 4. Tablas/embeds no responsive
 * 5. FAQ boxes muy anchas
 */

/* ═══════════════════════════════════════════════════════════════
   MÓVIL <640px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Foto circular del post (autor, hero image) - REDUCIR
     Alta especificidad para vencer inline width/height attrs */
  header.article-hero .hero-portrait,
  header.article-hero img.hero-portrait,
  body .hero-portrait,
  body header .hero-portrait,
  body .author-photo,
  body .post-hero-image,
  body .post-photo,
  body .hero-image,
  body .article-hero-image,
  body img[class*="portrait"],
  body img[class*="hero"] {
    max-width: 160px !important;
    height: 160px !important;
    width: 160px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 20px auto !important;
    display: block !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  /* Ocultar la top-bar (banda arcoíris pequeña) cuando el tca-banner (donación) también se muestra
     — así evitamos las 2 barras arcoíris apiladas */
  body.tca-banner-active .top-bar,
  body.tca-banner-active .stripe-bar {
    display: none !important;
  }

  /* Detectar SVG circles usados como avatar/hero */
  article svg.avatar,
  article svg.circle,
  article circle[r] {
    max-width: 180px !important;
    max-height: 180px !important;
  }

  /* Cualquier imagen dentro de article con estilo circular */
  article img[style*="border-radius:50%"],
  article img[style*="border-radius: 50%"],
  .post-content img[style*="border-radius:50%"],
  .post-content img[style*="border-radius: 50%"] {
    max-width: 160px !important;
    width: 160px !important;
    height: 160px !important;
    margin: 20px auto !important;
    display: block !important;
  }

  /* Post header: reducir padding */
  .post-header,
  .article-header,
  header.post {
    padding: 100px 20px 30px !important;
  }

  /* Título h1 del post */
  article h1,
  .post-title,
  .post h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }

  /* Contenido del post: padding reducido y font legible */
  article,
  .post-content,
  .post-body,
  main > section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Párrafos: font size óptimo para lectura móvil */
  article p,
  .post-content p,
  .post-body p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Sub-titles */
  article h2,
  .post-content h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-top: 40px !important;
    margin-bottom: 14px !important;
  }
  article h3,
  .post-content h3 {
    font-size: 1.2rem !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
  }

  /* Blockquotes: sin ancho fijo, padding menor */
  article blockquote,
  .post-content blockquote {
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    font-size: 1rem !important;
  }

  /* Prevenir overflow horizontal en pre/code/tables */
  article pre,
  article code,
  article table,
  .post-content pre,
  .post-content code,
  .post-content table {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
  }
  article code,
  .post-content code {
    font-size: .9em !important;
  }

  /* Tablas: scroll horizontal */
  article table,
  .post-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Imágenes normales: siempre responsive */
  article img,
  .post-content img,
  figure img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Iframes/embeds: 100% width */
  article iframe,
  .post-content iframe,
  article video,
  .post-content video {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* FAQ boxes / TL;DR / lead sections */
  .tldr,
  .lead,
  .faq-item,
  .faq-section,
  .highlight-box,
  .callout {
    padding: 20px 18px !important;
    font-size: 1rem !important;
  }

  /* Meta info (fecha, tiempo lectura) del post */
  .post-meta,
  .article-meta {
    font-size: .68rem !important;
    letter-spacing: .18em !important;
  }

  /* Blog categories bar */
  .blog-categories {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .blog-categories a {
    font-size: .72rem !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }

  /* Blog cards en el índice */
  .post-card,
  .blog-post-card {
    padding: 20px !important;
  }

  /* Related posts */
  .related-posts,
  .more-posts {
    padding: 40px 20px !important;
  }

  /* Footer del blog */
  .blog-footer,
  footer.blog {
    padding: 30px 20px !important;
  }

  /* Header móvil - blog puede tener otro header, adaptamos */
  .blog-hero {
    padding: 100px 20px 40px !important;
  }
  .blog-hero h1,
  .blog-hero .blog-title {
    font-size: clamp(3.5rem, 18vw, 5rem) !important;
    line-height: 1 !important;
  }

  /* Search box del blog */
  .blog-search input,
  .search-box input {
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 12px 16px !important;
  }

  /* Header nav collapse cuando aparece el logo */
  header .header-nav {
    gap: 8px !important;
  }
  header .header-nav a {
    font-size: .7rem !important;
    padding: 6px 10px !important;
  }

  /* Sticky header blog: no muy alto */
  .site-header.blog-header {
    height: 52px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL PEQUEÑO <400px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

  /* Reducir aún más las fotos hero */
  .hero-portrait,
  article img[style*="border-radius"],
  .author-photo,
  .post-hero-image,
  .article-hero img,
  img[class*="portrait"],
  img[class*="hero"] {
    max-width: 130px !important;
    width: 130px !important;
    height: 130px !important;
  }

  /* article-hero: padding menor */
  .article-hero,
  header.article-hero {
    padding: 90px 16px 20px !important;
  }

  /* Título h1 aún más compacto */
  article h1,
  .post-title {
    font-size: 1.5rem !important;
  }

  /* Padding mínimo */
  article,
  .post-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero label */
  .hero-label,
  .post-label {
    font-size: .58rem !important;
    letter-spacing: .18em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX GLOBAL: nunca overflow horizontal en el body
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}