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

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

/* Typography Overrides for Mobile */
h1 {
  font-size: var(--font-size-4xl);
}

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

h3 {
  font-size: var(--font-size-xl);
}

/* Layout Overrides */
.container {
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-xl) 0;
}

/* Grid System - Force 1 column on mobile */
.grid-2, .grid-3, .grid-4 {
  grid-template-columns: 1fr;
}

.content-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

/* Hero Section */
.hero {
  min-height: 100dvh;
  background-attachment: scroll;
}

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

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

.hero-cta {
  flex-direction: column;
  width: 100%;
}

.hero-cta .btn {
  width: 100%;
}

/* Cards */
.card-grid {
  grid-template-columns: 1fr;
}

/* Footer */
.footer-content {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.footer-about {
  max-width: 100%;
}

/* Timeline Mobile Adjustments */
.timeline::before {
  left: 20px;
}

.timeline-item {
  padding-left: 50px;
  margin-bottom: 40px;
}

.timeline-marker {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-lg);
  left: 0;
}

.timeline-content {
  padding: 20px;
}

.timeline-title {
  font-size: var(--font-size-lg);
  word-wrap: break-word;
  hyphens: auto;
}

.timeline-list {
  padding-left: 0;
  text-align: left;
}

/* ==========================================================================
   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) ")";
  }
}