/* ==========================================================================
   Clínica Aurora Odontologia — responsive.css
   Breakpoints: 1440 / 1280 / 1024 / 768 / 480 / 375 / 320
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤1440px — ajusta largura máxima do container
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  :root { --container-width: 1140px; }
}

/* --------------------------------------------------------------------------
   ≤1280px — reduz grid de 4 para 3/2 em alguns blocos
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --container-width: 96%; --space-xxl: 5.5rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤1024px — tablets: colunas duplas, header ainda em desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  section { padding-block: var(--space-lg); }

  .hero-grid,
  .about-summary,
  .detail-hero,
  .history-block,
  .contact-layout,
  .location-grid { grid-template-columns: 1fr; }

  .hero-media { order: -1; max-width: 400px; margin-inline: auto; width: 100%; }
  .hero-content p.lead { max-width: none; }

  .detail-layout { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; }

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

  .diff-grid,
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }

  .newsletter-box { grid-template-columns: 1fr; text-align: center; }
  .newsletter-form { justify-content: center; }

  .featured-article { grid-template-columns: 1fr; }
  .featured-article .media-frame { order: -1; }

  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-md); }
  .timeline::before { display: none; }
}

/* --------------------------------------------------------------------------
   ≤900px — ativa o menu mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(84vw, 360px);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    flex: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6.5rem var(--space-md) var(--space-md);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 1.4rem; width: 100%; }
  .main-nav a { font-size: 1.05rem; }
  /* No menu mobile o CTA volta a aparecer, já que o botão do header fica oculto (ver abaixo). */
  .main-nav .nav-cta { display: block; margin-top: 1rem; width: 100%; }
  .main-nav .nav-cta .btn { width: 100%; }

  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(18,59,70,.45);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .header-actions .btn-primary.nav-cta-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   ≤768px — mobile: colunas únicas na maioria dos blocos
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html { font-size: 15.5px; }

  .hero { padding-top: calc(var(--header-height) + 2rem); }
  .hero::before { width: 300px; height: 300px; }

  .floating-card { position: static; margin-top: 1rem; max-width: none; }
  .floating-card.card-rating { margin-bottom: 1rem; }
  .hero-media { display: flex; flex-direction: column; }

  .trust-bar .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .treatments-grid,
  .team-grid,
  .compare-grid,
  .blog-grid,
  .diff-grid,
  .mvv-grid,
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

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

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand p { max-width: none; }

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

  .article-meta-row { justify-content: flex-start; }

  .location-info { padding: var(--space-md); }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 0; }

  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   ≤480px — smartphones
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --header-height: 68px; --space-xl: 3.4rem; --space-lg: 2.2rem; }

  .container { padding-inline: 1.1rem; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .treatments-grid,
  .team-grid,
  .compare-grid,
  .blog-grid,
  .diff-grid,
  .mvv-grid,
  .gallery-grid,
  .timeline,
  .stats-grid { grid-template-columns: 1fr; }

  .trust-bar .grid-4 { grid-template-columns: 1fr 1fr; }

  .logo-link img { height: 39px; }

  .compare-caption { flex-direction: column; align-items: flex-start; gap: .4rem; }

  .form-row.two-col { grid-template-columns: 1fr; }

  .newsletter-form { flex-direction: column; }

  .article-body { font-size: .96rem; }

  .float-actions { right: 1rem; bottom: 1rem; }
  .float-btn { width: 50px; height: 50px; }

  .cta-final .btn, .error-actions .btn { width: 100%; }
  .error-actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   ≤375px — telas estreitas
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
  .container { padding-inline: 1rem; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-content p.lead { font-size: 1rem; }
  .btn { padding: .85rem 1.4rem; font-size: .9rem; }
  .ba-handle { width: 46px; height: 46px; }
}

/* --------------------------------------------------------------------------
   ≤320px — mínimo suportado
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
  .container { padding-inline: .85rem; }
  .floating-card { padding: .8rem 1rem; gap: .6rem; }
  .newsletter-box, .location-info, .contact-form-card { padding: var(--space-md); }
  .timeline-step .step-num { width: 46px; height: 46px; font-size: 1rem; }
}

@media (max-width: 560px) {
  .footer-brand .logo-link img { height: 44px; }
}

/* ===== Correção do menu mobile ===== */
@media (max-width: 900px) {
  /* Mantém o botão de menu/fechar acima do painel lateral */
  .nav-toggle {
    position: relative;
    z-index: 1001;
  }

  .nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: 18px;
    right: 18px;
    background: var(--color-primary);
    box-shadow: 0 8px 24px rgba(18, 59, 70, .18);
  }

  /* X centralizado e visível */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* CTA do menu mobile: evita que a regra genérica dos links esconda o texto */
  .main-nav .nav-cta .btn,
  .main-nav .nav-cta .btn:visited {
    color: var(--color-white) !important;
    background: var(--color-primary);
    padding: .95rem 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
  }

  .main-nav .nav-cta .btn:hover,
  .main-nav .nav-cta .btn:focus-visible {
    color: var(--color-white) !important;
    background: var(--color-primary-light);
  }

  /* Botões não recebem o sublinhado animado dos links do menu */
  .main-nav .nav-cta .btn::after {
    display: none !important;
    content: none !important;
  }
}