/**
 * BHUB - CSS de Responsividade Mobile
 * ====================================
 * Estilos adicionais para melhorar experiência mobile
 *
 * Breakpoints do Tailwind:
 * - xs: 475px (custom)
 * - sm: 640px
 * - md: 768px
 * - lg: 1024px
 * - xl: 1280px
 * - 2xl: 1536px
 */

/* ==========================================
   Touch Targets (WCAG 2.1 - Target Size)
   Mínimo de 44x44px para alvos de toque
   ========================================== */

/* Garantir touch targets mínimos em elementos interativos */
@media (pointer: coarse) {
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  a,
  label,
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }

  /* Links em navegação */
  nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Inputs em forms */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    min-height: 48px;
    font-size: 16px; /* Previne zoom no iOS */
  }
}

/* ==========================================
   Safe Areas (iPhone X+)
   ========================================== */

@supports (padding: max(0px)) {
  .safe-area-inset-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .safe-area-inset-top {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  /* Navbar fixed */
  nav.sticky {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  /* Mobile menu drawer */
  #mobile-menu-drawer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ==========================================
   Mobile Menu Animations
   ========================================== */

#mobile-menu-overlay {
  transition: opacity 0.3s ease-out;
}

#mobile-menu-drawer {
  transition: transform 0.3s ease-out;
}

/* ==========================================
   Mobile Search
   ========================================== */

#mobile-search-modal {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================
   Responsive Typography
   ========================================== */

/* Fluid typography para títulos */
h1 {
  font-size: clamp(1.5rem, 5vw, 3.75rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.3;
}

/* ==========================================
   Mobile Cards
   ========================================== */

/* Cards empilhados em mobile */
@media (max-width: 639px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Reduzir padding em cards */
  article > div:first-child {
    padding: 1rem;
  }

  /* Footer de cards */
  article footer {
    font-size: 0.7rem;
  }
}

/* ==========================================
   Mobile Filters
   ========================================== */

@media (max-width: 767px) {
  /* Mostrar filtros em mobile */
  #mobile-filters {
    margin-bottom: 1rem;
  }

  #mobile-filters.hidden {
    display: none;
  }

  /* Categorias em scroll horizontal no mobile */
  .category-pills {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-pills::-webkit-scrollbar {
    display: none;
  }

  .category-pills > * {
    flex-shrink: 0;
  }
}

/* ==========================================
   Hero Section Mobile
   ========================================== */

@media (max-width: 639px) {
  /* Reduzir decorative blobs em mobile */
  .animate-blob {
    width: 8rem;
    height: 8rem;
  }

  /* Stats mini-bar wrap */
  .stats-bar {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================
   Custom Breakpoint: xs (475px)
   ========================================== */

/* Breakpoint extra pequeno para phones */
@media (min-width: 475px) {
  .xs\:inline {
    display: inline !important;
  }

  .xs\:flex {
    display: flex !important;
  }

  .xs\:hidden {
    display: none !important;
  }

  .xs\:block {
    display: block !important;
  }
}

/* ==========================================
   Landscape Mode Adjustments
   ========================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduzir hero em landscape mobile */
  section.py-12 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* Navbar mais compacta */
  nav .h-16 {
    height: 3rem;
  }

  /* Mobile menu drawer mais compacto */
  #mobile-menu-drawer {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ==========================================
   Print Styles
   ========================================== */

@media print {
  /* Esconder elementos de navegação */
  nav,
  #mobile-menu,
  #mobile-search-modal,
  .skip-to-main,
  #toast-container {
    display: none !important;
  }

  /* Resetar cores para preto e branco */
  * {
    color: black !important;
    background: white !important;
  }

  /* Mostrar URLs de links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: gray;
  }

  /* Evitar quebra de página em cards */
  article {
    page-break-inside: avoid;
  }
}

/* ==========================================
   Dark Mode Mobile
   ========================================== */

@media (prefers-color-scheme: dark) {
  /* Mobile menu overlay mais escuro */
  #mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }

  /* Drawer background */
  #mobile-menu-drawer {
    background-color: var(--color-bg-primary, #0b3536);
    color: var(--color-text-primary, #daedd6);
  }

  /* Search modal */
  #mobile-search-modal > div:last-child {
    background-color: var(--color-bg-primary, #0b3536);
  }
}

/* ==========================================
   Accessibility: Reduced Motion
   ========================================== */
/* Nota: Regra global de prefers-reduced-motion está em animations.css
 * Regras específicas abaixo complementam a regra global
 */

@media (prefers-reduced-motion: reduce) {
  /* Desabilitar animação blob específica */
  .animate-blob {
    animation: none;
  }

  /* Menu mobile sem transição */
  #mobile-menu-overlay,
  #mobile-menu-drawer {
    transition: none !important;
  }

  /* Scroll suave desabilitado */
  html {
    scroll-behavior: auto !important;
  }
}