/**
 * ChipTax — ajustes finais de responsividade (mobile).
 * Carregado após style.css e CSS de página; não altera desktop.
 */

/* ============================================================
   LOGO — mobile
   ============================================================ */
@media (max-width: 768px) {
  .nav-logo-img,
  .site-logo img {
    height: 40px;
    max-width: 140px;
  }

  .footer-brand .nav-logo-img {
    height: 44px;
    max-width: 160px;
  }
}

/* ============================================================
   BOTÕES — grupos em mobile
   ============================================================ */
@media (max-width: 768px) {
  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .nav-actions .btn {
    min-width: auto;
  }

  .nav-mobile .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   HOME — method-section (grid inline 2 colunas)
   ============================================================ */
@media (max-width: 768px) {
  .method-section .container > div {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .method-section .method-steps,
  .method-section .method-step {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   HOME — audience grid
   ============================================================ */
@media (max-width: 768px) {
  .audience-grid {
    grid-template-columns: 1fr !important;
  }

  .audience-card {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Grids de serviço — three-col vira 1 coluna no mobile
   (Planejamento, IR, Abertura, Regularização, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .chiptax-manus-root .three-col {
    grid-template-columns: 1fr !important;
  }

  .benefit-card,
  .when-card,
  .doubt-card,
  .signal-card,
  .include-card {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Grids inline 2 colunas (Sinais de alerta, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .chiptax-manus-root section .container > div[style*="repeat(2"],
  .chiptax-manus-root section .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .chiptax-manus-root section .container > div[style*="repeat(2"] > *,
  .chiptax-manus-root section .container > div[style*="grid-template-columns: 1fr 1fr"] > * {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Seções com grid inline 2 colunas (Diagnóstico, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .for-grid {
    grid-template-columns: 1fr !important;
  }

  .for-item {
    min-width: 0;
  }
}

/* ============================================================
   Soluções — card footer (badge + botão)
   ============================================================ */
@media (max-width: 768px) {
  .sol-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .sol-card-footer .badge {
    align-self: flex-start;
  }

  .sol-card-footer .btn {
    width: 100%;
    min-width: 0;
  }

  .sol-diag-banner {
    gap: 1.5rem !important;
  }
}

/* ============================================================
   CTA inline flex (Diagnóstico final, Soluções, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .diag-final-cta div[style*="display:flex"],
  .cta-section div[style*="display:flex"],
  section div[style*="justify-content:center"][style*="flex-wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .diag-final-cta div[style*="display:flex"] .btn,
  .cta-section div[style*="display:flex"] .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Overflow horizontal
   ============================================================ */
@media (max-width: 768px) {
  .chiptax-manus-root {
    overflow-x: clip;
  }

  .container,
  .container-narrow,
  .container-wide {
    max-width: 100%;
    min-width: 0;
  }

  .sol-card,
  .card,
  .method-step {
    min-width: 0;
  }
}