/* ==========================================================================
   Responsive Styles - Mobile First Approach
   ========================================================================== */

/* ==========================================================================
   Mobile (320px - 767px) - Base Styles
   ========================================================================== */

/* Já definidos nos outros arquivos CSS como padrão */

/* ==========================================================================
   Tablet (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) {
  /* Typography */
  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  /* Container */
  .container {
    padding: 0 var(--spacing-lg);
  }

  /* Grid Systems */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero Section */
  .hero {
    min-height: 90vh;
  }

  .hero-title {
    font-size: var(--font-size-5xl);
  }

  /* Cards */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Desktop (1024px - 1439px)
   ========================================================================== */

@media (min-width: 1024px) {
  /* Typography */
  h1 {
    font-size: var(--font-size-6xl);
  }

  h2 {
    font-size: var(--font-size-4xl);
  }

  /* Grid Systems */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Hero Section */
  .hero {
    min-height: 100vh;
  }

  .hero-title {
    font-size: var(--font-size-6xl);
  }

  /* Cards */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Navigation */
  .header-nav {
    display: flex;
  }

  .header-toggle {
    display: none;
  }
}

/* ==========================================================================
   Large Desktop (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
  /* Container */
  .container {
    max-width: 1400px;
  }

  /* Larger Typography for Big Screens */
  .hero-title {
    font-size: 4rem;
  }

  /* Cards Grid */
  .card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Landscape Orientation (Mobile/Tablet)
   ========================================================================== */

@media (max-width: 1023px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--spacing-3xl) 0;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   High Resolution Displays (Retina)
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ajustes para telas de alta resolução */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ==========================================================================
   Touch Devices
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  /* Aumentar área de toque para botões */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .header-nav-link {
    padding: var(--spacing-md);
  }

  /* Remover efeitos hover em dispositivos touch */
  .card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Print Media Query
   ========================================================================== */

@media print {
  /* Ocultar elementos não necessários na impressão */
  .header,
  .footer,
  .btn-whatsapp,
  .hero-cta,
  .cta-banner {
    display: none !important;
  }

  /* Ajustar cores para impressão */
  body {
    background: white;
    color: black;
  }

  /* Evitar quebras de página dentro de elementos */
  .card,
  .section-header,
  .stat-item {
    page-break-inside: avoid;
  }

  /* Remover sombras e efeitos */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Mostrar URLs de links */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}