/* ============================================================
   RESPONSIVE.CSS — Media queries adicionais e utilitários
   Nota: A maior parte da responsividade já está com fluid typography
   e flex/grid responsivos nos arquivos de layout e sections.
   Este arquivo consolida regras gerais para breakpoints.
   ============================================================ */

/* ──────────────────────────────────────────────
   UTILITÁRIOS RESPONSIVOS
   ────────────────────────────────────────────── */

.hide-on-mobile {
  display: block;
}

.hide-on-desktop {
  display: none;
}

/* ──────────────────────────────────────────────
   LARGE DESKTOP (1440px+)
   ────────────────────────────────────────────── */
@media (min-width: 1440px) {
  /* Ajustes sutis para telas ultra-wide se necessário */
  .hero__bottom-card {
    padding: var(--space-2xl) var(--space-4xl);
  }
}

/* ──────────────────────────────────────────────
   TABLET LANDSCAPE / SMALL DESKTOP (1024px)
   ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: clamp(3.5rem, 6vw, 6rem);
  }
  
  .hide-on-desktop {
    display: none; /* Ainda consideramos tablet como mobile-ish dependendo do contexto, mas mantém oculto se não especificado */
  }
}

/* ──────────────────────────────────────────────
   TABLET PORTRAIT (768px)
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }

  .hide-on-desktop {
    display: block !important;
  }
  
  .hide-on-desktop.flex {
    display: flex !important;
  }

  /* Ajustar line-heights e espaçamentos para leitura no mobile */
  body {
    line-height: var(--leading-loose);
  }
  
  p + p {
    margin-top: var(--space-lg);
  }
  
  .section__header {
    margin-bottom: var(--space-2xl);
  }
  
  .btn {
    width: 100%; /* Botões full width no mobile por padrão */
  }
  
  .btn--inline {
    width: auto; /* Exceção para botões que devem ficar inline */
  }
}

/* ──────────────────────────────────────────────
   LARGE MOBILE (430px / 390px)
   ────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --section-padding-x: 1.25rem;
    --section-padding-y: 4rem;
  }
  
  /* Ajustar paddings de cards no mobile */
  .card {
    padding: var(--space-lg);
  }
  
  /* Aumentar tap targets para acessibilidade mobile */
  .footer__social-link {
    width: 44px;
    height: 44px;
  }
  
  .footer__link {
    padding: var(--space-xs) 0;
  }
  
  .contact__channel-text {
    font-size: var(--text-base);
  }
}

/* ──────────────────────────────────────────────
   SMALL MOBILE (320px)
   ────────────────────────────────────────────── */
@media (max-width: 350px) {
  /* Ajustes finais para telas muito pequenas como iPhone SE */
  .hero__title {
    font-size: 2.25rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .btn {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    font-size: var(--text-xs);
  }
}

/* ──────────────────────────────────────────────
   LANDSCAPE MOBILE
   ────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 120vh;
  }
  
  .mobile-menu__inner {
    padding-top: var(--space-4xl);
    overflow-y: auto;
    justify-content: flex-start;
  }
}

/* ──────────────────────────────────────────────
   HIGH CONTRAST / DARK MODE PREFERENCE
   ────────────────────────────────────────────── */
/* Não implementamos dark mode completo para manter a identidade da marca,
   mas podemos ajustar contrastes ou fornecer suporte básico se o usuário preferir */
@media (prefers-contrast: more) {
  :root {
    --color-gray: #4a4a4a; /* Cinza mais escuro para maior contraste */
    --color-gray-dark: #1a1a1a;
  }
  
  .card--glass {
    background: rgba(255, 255, 255, 0.95); /* Menos transparência no glass */
    border-color: #000;
  }
}