/* ============================================
   blog-mobile.css
   public_html/styles/blog-mobile.css
   Breakpoints: 1024px / 768px / 480px
   ============================================ */

/* ══ TABLET — ate 1024px ══ */
@media (max-width:1024px) {

  .blog-featured { grid-template-columns:1fr; gap:2rem; padding:2rem; }
  .blog-featured-cover { order:-1; }
  .blog-cover-card { width:180px; margin:0; }

  .blog-grid { grid-template-columns:repeat(2,1fr); }

  .blog-layout { grid-template-columns:1fr; gap:2.5rem; }
  .blog-sidebar {
    position:static;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.25rem;
  }
  .blog-cta-sidebar { grid-column:1/-1; }

  .post-layout { grid-template-columns:1fr !important; gap:3rem; padding:2.5rem 0 4rem; }
  .post-sidebar { position:static; }
  .post-toc { order:-1; }

  .post-related-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══ MOBILE — ate 768px ══ */
@media (max-width:768px) {

  /* Hero */
  .blog-hero { padding:2.5rem 0 2rem!important; }
  .blog-hero .hero-title    { font-size:1.85rem!important; }
  .blog-hero .hero-subtitle { font-size:.92rem!important; }
  .blog-hero-stats { gap:1.25rem; }
  .blog-stat-num { font-size:1.25rem; }

  /* Lang selector */
  .blog-lang-selector { gap:.28rem; }
  .blog-lang-btn { width:28px; height:24px; font-size:.68rem; }

  /* Filtros */
  .blog-filter-bar .container { flex-direction:column; align-items:flex-start; gap:.65rem; }
  .blog-filter-right { width:100%; justify-content:space-between; }
  .blog-search { width:160px; }
  .blog-filter-btn { font-size:.75rem; padding:.3rem .75rem; }

  /* Featured */
  .blog-featured { padding:1.5rem; gap:1.5rem; }
  .blog-featured-title { font-size:1.25rem; }
  .blog-featured-desc  { font-size:.85rem; }
  .blog-cover-card { width:150px; }

  /* Grid 1 coluna */
  .blog-grid { grid-template-columns:1fr; }

  /* Sidebar empilhado */
  .blog-sidebar { display:flex; flex-direction:column; }

  /* Post hero */
  .post-hero { padding:2.5rem 0 2rem!important; }
  .post-hero-title    { font-size:1.6rem!important; }
  .post-hero-subtitle { font-size:.92rem!important; }
  .post-author-block  { flex-wrap:wrap; gap:.5rem; }
  .post-meta-sep      { display:none; }
  .post-meta-date,
  .post-meta-read     { display:block; }

  /* Post layout */
  .post-layout { padding:2rem 0 3rem; gap:2rem; }
  .post-content h2 { font-size:1.3rem; }
  .post-content h3 { font-size:1.05rem; }
  .post-content p  { font-size:.93rem; }

  /* Post footer */
  .post-footer-block { flex-direction:column; align-items:flex-start; }

  /* Related */
  .post-related-grid { grid-template-columns:1fr; }
  .post-related { padding:2rem 0 3rem; }

  /* CTA final */
  .blog-cta-section { padding:3rem 0; }
  .blog-cta-actions { flex-direction:column; align-items:stretch; }
  .blog-cta-actions .btn { text-align:center; justify-content:center; }
}

/* ══ MOBILE PEQUENO — ate 480px ══ */
@media (max-width:480px) {

  /* Hero stats em grid */
  .blog-hero .hero-title { font-size:1.6rem!important; }
  .blog-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
  .blog-stat-num   { font-size:1.1rem; }
  .blog-stat-label { font-size:.65rem; }

  /* Filtros minimos */
  .blog-filter-btn { font-size:.7rem; padding:.26rem .6rem; }

  /* Featured sem cover */
  .blog-featured { padding:1.25rem; }
  .blog-featured-cover { display:none; }
  .blog-featured-title { font-size:1.15rem; }

  /* Cards */
  .blog-card-body  { padding:.9rem 1rem 1rem; }
  .blog-card-title { font-size:.9rem; }

  /* Busca full width */
  .blog-search { width:100%; }
  .blog-filter-right { flex-direction:column; gap:.5rem; align-items:flex-start; }

  /* Post */
  .post-hero-title { font-size:1.4rem!important; }
  .post-share-btns { flex-wrap:wrap; }

  /* TOC colapsavel */
  .post-toc-list { max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .post-toc-list.toc-open { max-height:600px; }
  .post-toc-toggle { display:flex!important; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }

  /* Breadcrumb simplificado */
  .post-breadcrumb span:not(:last-child):not(.post-breadcrumb-sep):not(:nth-last-child(2)) { display:none; }
}

/* ══ REDUCAO DE MOVIMENTO ══ */
@media (prefers-reduced-motion:reduce) {
  .blog-reveal,
  .blog-card,
  .blog-featured,
  .blog-cover-card {
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}

/* ══ POST EDITORIAL — MOBILE ══ */
@media (max-width: 768px) {
    .post-content .post-p         { font-size: .95rem; }
    .post-content .post-heading-h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
    .post-content .post-heading-h3 { font-size: 1.05rem; }
    .post-callout                 { padding: .85rem 1rem; gap: .75rem; }
    .post-callout-icon            { font-size: 1rem; }
    .post-table thead th          { font-size: .8rem; padding: .55rem .75rem; }
    .post-table tbody td          { font-size: .82rem; padding: .5rem .75rem; }
    .post-video-container         { border-radius: 8px; }
}
@media (max-width: 480px) {
    .post-content .post-p          { font-size: .92rem; line-height: 1.75; }
    .post-content .post-heading-h2 { font-size: 1.15rem; }
    .post-content .post-heading-h3 { font-size: 1rem; }
    .post-figure                   { margin: 1.5rem 0; }
    .post-img                      { border-radius: 8px; }
    .post-blockquote               { padding: .65rem 1rem; }
    .post-pre                      { padding: 1rem; font-size: .82rem; }
}

/* ══ SIDEBAR DO POST — MOBILE ══ */
@media (max-width: 1024px) {
    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .post-sb-cta { grid-column: 1 / -1; }
    }
@media (max-width: 768px) {
    .post-sidebar {
        display: flex;
        flex-direction: column;
    }
    .post-content,
    article.post-content {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .post-content .post-p {
        max-width: 100% !important;
    }
}


/* ══ HERO DO POST — MOBILE ══ */
@media (max-width: 768px) {
    section.blog-post-hero { padding: 2.5rem 0 2rem !important; }
    section.blog-post-hero .hero-title    { font-size: 1.65rem !important; }
    section.blog-post-hero .hero-subtitle { font-size: .92rem !important; }
    .post-author-block { gap: .5rem; }
    .post-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 2rem 0 3rem !important;
    }
    .post-sb-cta { order: -1; }
}
@media (max-width: 480px) {
    section.blog-post-hero .hero-title { font-size: 1.45rem !important; }
}

/* ══ HERO DO BLOG — MOBILE ══ */
@media (max-width: 768px) {
    .ht-blog-hero  { padding: 2rem 0 0; }
    .ht-blog-title { font-size: 1.75rem !important; }
    .ht-blog-subtitle { font-size: .92rem !important; }
    .ht-blog-stats { gap: 1.25rem; padding-bottom: 1.25rem; }
    .ht-blog-stat-n { font-size: 1.25rem; }
    .blog-filter-bar .ht-blog-wrap { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .blog-filter-right { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
    .ht-blog-title { font-size: 1.5rem !important; }
    .ht-blog-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
    .ht-blog-stat-n { font-size: 1.1rem; }
    .blog-search { width: 100%; }
}

/* ══ HERO DO POST — MOBILE ══ */
@media (max-width: 768px) {
    .ht-post-hero  { padding: 1.75rem 0 1.5rem; }
    .ht-post-title { font-size: 1.55rem !important; }
    .ht-post-excerpt { font-size: .92rem !important; }
    .ht-post-sep { display: none; }
    .ht-post-meta { gap: .5rem; }
}
@media (max-width: 480px) {
    .ht-post-title { font-size: 1.35rem !important; }
    .ht-post-langs .blog-lang-btn { width: 26px; height: 22px; font-size: .65rem; }
}