/*
==================================================
RotaBras Framework CSS
Arquivo: responsive.css
Versão: 1.0
Descrição: Ajustes responsivos para mobile e tablet
==================================================
*/

/* Tablets */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: row;
    gap: var(--rb-space-sm);
  }

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

  .hero-text p {
    font-size: var(--font-md);
  }

  .features {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .footer-content {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }

  .header-nav {
    display: none;
  }

  .header-toggle {
    display: block;
  }

  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-text h1 {
    font-size: var(--font-2xl);
  }

  .hero-text p {
    font-size: var(--font-sm);
  }

  .hero-buttons {
    flex-direction: column;
    gap: var(--rb-space-sm);
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  body {
    font-size: var(--font-sm);
  }

  .hero-text h1 {
    font-size: var(--font-xl);
  }

  .hero-text p {
    font-size: var(--font-xs);
  }

  .rb-container {
    width: 96%;
  }
}