/* ============================================================
   MOBILE FIXES - Correções de responsividade
   Data: 27 Fev 2026
   Resolve problemas de elementos que não redimensionam no mobile
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. RESET GLOBAL - Força responsividade
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────
     2. ANÚNCIOS - Container responsivo
     ───────────────────────────────────────────────────────────── */

  .pira-ad-slot,
  .pira-ad-horizontal,
  .pira-ad-custom,
  .pira-ad-slot--home-01,
  .pira-ad-slot--govextra,
  .pira-ad-slot--n2e,
  .pira-ad-slot--rodape,
  .pira-ad-slot--mobile,
  [id^="div-gpt-ad"],
  [id*="google_ads"],
  iframe[src*="doubleclick"],
  iframe[src*="googlesyndication"] {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Força anúncios a centralizarem */
  .pira-ad-slot > div,
  .pira-ad-horizontal > div,
  .pira-ad-slot iframe {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Esconde anúncios de desktop em mobile */
  .pira-ad-slot--home-01 iframe,
  .pira-ad-slot--govextra iframe {
    max-width: 320px !important;
    height: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     3. IMAGENS - Sempre responsivas
     ───────────────────────────────────────────────────────────── */

  img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  .pira-article__content img,
  .pira-card img,
  .pira-card-hero img,
  .wp-post-image,
  figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* ─────────────────────────────────────────────────────────────
     4. GRID - Força coluna única
     ───────────────────────────────────────────────────────────── */

  .pira-main-layout,
  .pira-hero-grid,
  .pira-grid-4,
  .pira-grid-3,
  .pira-grid-2,
  .home-category-grid,
  .pira-content,
  .site-content {
    display: block !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .pira-hero-side,
  .pira-sidebar,
  aside.pira-sidebar,
  .sidebar {
    display: block !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     5. CARDS - Stack vertical
     ───────────────────────────────────────────────────────────── */

  .pira-card,
  .pira-card-md,
  .pira-card-secondary,
  .pira-card-hero,
  .pira-card-featured {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  .pira-card-img {
    height: auto !important;
    min-height: 0 !important;
  }

  .pira-card-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* ─────────────────────────────────────────────────────────────
     6. HEADER - Ajustes críticos
     ──────────────────────────────────────────────────────── */

  .pira-top {
    position: relative !important;
    padding: 8px 0 !important;
  }

  .pira-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9999 !important;
  }

  .pira-nav.is-open {
    transform: translateX(0) !important;
  }

  .pira-search-bar,
  .pira-tools {
    display: none !important;
  }

  .pira-menu-toggle {
    display: flex !important;
  }

  /* ─────────────────────────────────────────────────────────────
     7. CONTAINER - Padding seguro
     ───────────────────────────────────────────────────────────── */

  .pira-wrap,
  .container,
  .site-content,
  .entry-content,
  .pira-article__content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ─────────────────────────────────────────────────────────────
     8. TIPOGRAFIA - Tamanhos legíveis
     ───────────────────────────────────────────────────────────── */

  .pira-article__title,
  h1, .entry-title {
    font-size: clamp(20px, 6vw, 32px) !important;
    line-height: 1.3 !important;
  }

  .pira-article__subtitle,
  h2 {
    font-size: clamp(16px, 5vw, 24px) !important;
  }

  .pira-article__content,
  .entry-content p,
  article p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     9. SIDEBAR - Move para baixo do conteúdo
     ───────────────────────────────────────────────────────────── */

  .pira-main-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .pira-content {
    order: 1 !important;
  }

  .pira-sidebar,
  aside {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────
     10. HERO - Simplifica em mobile
     ───────────────────────────────────────────────────────────── */

  .pira-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .pira-hero {
    padding: 16px 0 !important;
  }

  .pira-card-hero {
    height: auto !important;
    min-height: 200px !important;
  }

  .pira-hero-side {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────
     11. WIDGETS - Responsivos
     ───────────────────────────────────────────────────────────── */

  .pira-widget,
  .widget {
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 16px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     12. SHARE BUTTONS - Compactas
     ───────────────────────────────────────────────────────────── */

  .pira-share,
  .pira-share-premium,
  .pira-share-float {
    position: relative !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }

  .pira-share__btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     13. FOOTER - Stack vertical
     ───────────────────────────────────────────────────────────── */

  .pira-footer-premium,
  .site-footer,
  footer {
    padding: 24px 12px !important;
  }

  .pira-footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .pira-footer-col {
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   14. TABLET (768px - 1024px) - Ajustes intermediários
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  .pira-main-layout {
    grid-template-columns: 1fr 280px !important;
  }

  .pira-ad-slot iframe,
  .pira-ad-horizontal iframe {
    max-width: 728px !important;
    margin: 0 auto !important;
  }

  .pira-sidebar {
    width: 280px !important;
    max-width: 280px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   15. ANÚNCIOS ESPECÍFICOS - Correções finais
   ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Anúncios mobile sempre 320px ou 100% */
  .pira-ad-slot iframe,
  #div-gpt-ad-noticia-mobile iframe,
  [id*="mobile"] iframe {
    width: 320px !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}