/* ==========================================================================
   responsive.css
   - Ajustes finais por breakpoint
   - Polimento mobile/tablet/desktop
   ========================================================================== */

/* ==========================================================================
   <= 1023px (tablet e mobile)
   ========================================================================== */

@media (max-width: 1023px) {
  .header-inner {
    min-height: 72px;
  }

  .brand-logo {
    height: 40px;
  }

  /* Mobile menu abre abaixo do header */
  .mobile-menu-inner .btn {
    margin-top: 6px;
  }

  /* Hero */
  .hero-grid {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .hero-content {
    padding: 0;
  }

  .hero-photo {
    max-width: 520px;
  }

  /* Contact */
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .aside-box {
    max-width: 520px;
  }
}

/* ==========================================================================
   <= 767px (mobile)
   ========================================================================== */

@media (max-width: 767px) {
  .header-inner {
    min-height: 68px;
  }

  .brand-logo {
    height: 38px;
  }

  .menu-btn {
    width: 42px;
    height: 42px;
  }

  /* Sections */
  .section-head {
    margin-bottom: 18px;
  }

  /* Hero */
  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-bullets {
    font-size: 13px;
  }

  .hero-photo {
    max-width: 420px;
  }

  /* Cards */
  .card {
    padding: 16px;
    border-radius: var(--radius);
  }

  /* Portfolio: 1 coluna no mobile */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }

  /* Testimonials: rolagem suave e cards mais largos */
  .testimonials-track {
    grid-auto-columns: minmax(260px, 1fr);
    padding-bottom: 8px;
  }

  /* Floating WhatsApp (mais confortável no mobile) */
  .float-whatsapp {
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ==========================================================================
   >= 1024px (desktop)
   ========================================================================== */

@media (min-width: 1024px) {
  .brand-logo {
    height: 44px;
  }

  /* Portfolio: 3 colunas default já vem do layout.css,
     mas aqui garantimos espaçamento suave */
  .portfolio-grid {
    gap: 16px;
  }

  /* Depoimentos: deixar track com scrollbar mais discreta */
  .testimonials-track {
    padding-bottom: 6px;
  }
}

/* ==========================================================================
   Preferência do usuário (acessibilidade)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}