/* ============================================================
   PIRANOT — Single Article Mobile Cleanup
   Versão otimizada para mobile (≤768px)
   Remove poluição visual e melhora leitura
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. LAYOUT GERAL - SIMPLIFICADO PARA MOBILE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Remover padding excessivo */
  .pira-main-layout {
    padding-top: 12px !important;
    gap: 12px !important;
  }

  /* Grid colapsa para coluna única */
  .pira-main-layout {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar some embaixo e com menos espaço */
  aside.pira-sidebar {
    margin-top: 20px;
  }

  /* Breadcrumb menor */
  .pira-breadcrumb {
    font-size: 12px !important;
    margin-bottom: 12px !important;
    gap: 4px !important;
  }

  .pira-breadcrumb a,
  .pira-breadcrumb span {
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   2. HEADER DO ARTIGO - COMPACTO EM MOBILE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pira-article__header-premium {
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
  }

  .pira-article__header-top {
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap;
  }

  /* Badge menor em mobile */
  .pira-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Meta (data e tempo de leitura) */
  .pira-meta {
    font-size: 11px !important;
    gap: 4px !important;
  }

  .pira-meta span {
    font-size: 11px !important;
  }

  /* Título compacto */
  .pira-article__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin: 8px 0 !important;
  }

  /* Subtítulo menor */
  .pira-article__subtitle {
    font-size: 13px !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
  }

  /* Deck (excerpt) otimizado */
  .pira-article__deck {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 6px 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. BYLINE E SHARE - COMPLETAMENTE REFEITO PARA MOBILE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Container do byline */
  .pira-article__byline-premium {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eee !important;
  }

  /* Autor - layout horizontal compacto */
  .pira-article__author-premium {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start;
  }

  .pira-author-avatar-wrapper {
    flex-shrink: 0;
  }

  /* Avatar menor */
  .pira-article__avatar-premium {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }

  /* Info do autor */
  .pira-author-info {
    flex: 1;
  }

  .pira-article__author-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  .pira-article__author-date {
    font-size: 11px !important;
    color: #666 !important;
    margin: 2px 0 0 0 !important;
  }

  .pira-article-updated {
    display: block !important;
    margin-top: 2px !important;
  }

  /* ⛔ SHARE BUTTONS REMOVED (27-Feb-2026) - NINGUÉM USA */
  .pira-share-premium {
    display: none !important;
  }

  .pira-share-label {
    display: none !important;
  }

  .pira-share-buttons {
    display: none !important;
  }

  .pira-share__btn {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. CONTEÚDO DO ARTIGO - OTIMIZADO
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pira-article__content {
    padding: 12px 0 !important;
    margin: 12px 0 !important;
  }

  /* Parágrafos */
  .pira-article__content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

  /* Headings */
  .pira-article__content h2 {
    font-size: 18px !important;
    margin: 16px 0 8px 0 !important;
  }

  .pira-article__content h3 {
    font-size: 16px !important;
    margin: 14px 0 6px 0 !important;
  }

  /* Imagens responsivas */
  .pira-article__content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }

  /* Listas */
  .pira-article__content ul,
  .pira-article__content ol {
    margin: 12px 0 !important;
    padding-left: 20px !important;
  }

  .pira-article__content li {
    margin-bottom: 6px !important;
    font-size: 15px !important;
  }

  /* Blockquotes */
  .pira-article__content blockquote {
    border-left: 3px solid #0b3b8f !important;
    padding-left: 12px !important;
    margin: 12px 0 !important;
    font-style: italic !important;
    color: #555 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. ANÚNCIOS - MENOS INTRUSIVOS EM MOBILE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pira-ad-horizontal {
    margin: 12px 0 !important;
    padding: 0 !important;
  }

  .pira-ad-custom {
    margin: 12px 0 !important;
    padding: 0 !important;
  }

  /* Anúncios que ficam muito grandes - reduzir margem */
  .pira-ad-horizontal[style*="margin"] {
    margin: 12px auto !important;
  }

  /* Ocultar anúncios de sidebar em telas muito pequenas */
  @media (max-width: 480px) {
    aside.pira-sidebar {
      margin-top: 30px;
    }

    aside.pira-sidebar > * {
      margin-bottom: 20px;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   6. TAGS E METADATA FINAL
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Tags */
  .pira-tag-pill {
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 4px 4px 4px 0 !important;
  }

  /* Seções */
  .pira-section {
    padding: 12px 0 !important;
    margin-bottom: 12px !important;
  }

  .pira-section-title {
    font-size: 16px !important;
  }

  /* Paginação */
  .pira-pagination {
    margin-top: 12px !important;
  }

  .pira-page-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. RELACIONADOS - COMPACTO
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pira-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Cards relacionados */
  .pira-card-md {
    border-radius: 8px !important;
  }

  .pira-card-md img {
    height: 140px !important;
  }

  .pira-card-md h4 {
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. COMENTÁRIOS - OTIMIZADO
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pira-comments {
    padding: 12px 0 !important;
  }

  .comment-list {
    padding-left: 0 !important;
  }

  .comment {
    margin-left: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  .comment-author {
    font-size: 13px !important;
  }

  .comment-text {
    font-size: 13px !important;
    margin: 6px 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. MUITO PEQUENO - EXTRA COMPACTO (≤360px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 360px) {
  /* Tudo ainda mais compacto */
  .pira-article__title {
    font-size: 18px !important;
  }

  .pira-article__subtitle {
    font-size: 12px !important;
  }

  .pira-article__content p {
    font-size: 14px !important;
  }

  .pira-breadcrumb {
    font-size: 11px !important;
  }

  .pira-share-buttons {
    gap: 6px !important;
  }

  .pira-share__btn {
    padding: 5px !important;
    font-size: 11px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   10. SCROLLING SUAVE
   ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* Evitar scrolling horizontal acidental */
body,
.pira-wrap,
.pira-article {
  overflow-x: hidden !important;
}