/* =============================================================================
   REVIVE FIT — RESPONSIVIDADE (MOBILE-FIRST)
   Arquivo: assets/css/responsive.css
   =============================================================================
   Breakpoints:
     xs:  < 480px   (celulares pequenos)
     sm:  >= 480px  (celulares grandes)
     md:  >= 768px  (tablets)
     lg:  >= 1024px (notebooks)
     xl:  >= 1280px (desktops)
   
   Estratégia: Escrevemos os estilos base para mobile (< 768px)
   e sobrescrevemos para telas maiores com min-width.
   ============================================================================= */

/* =============================================================================
   MOBILE (padrão — sem media query)
   ============================================================================= */

/* Header mobile */
.nav {
  display: none;
  position: fixed;
  top: var(--altura-header);
  left: 0;
  right: 0;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  flex-direction: column;
  padding: var(--esp-md);
  gap: var(--esp-xs);
  box-shadow: var(--sombra-md);
  z-index: 999;
}

.nav.aberto { display: flex; }

.nav__link {
  padding: var(--esp-md);
  border-radius: var(--raio-md);
  width: 100%;
}
.nav__link::after { display: none; }
.nav__link:hover,
.nav__link.ativo {
  background: var(--cor-fundo-alt);
}

.hamburger { display: flex; }

.header__social { display: none; }

/* Hero mobile */
.hero__inner {
  grid-template-columns: 1fr;
  gap: var(--esp-2xl);
  padding-block: var(--esp-2xl);
}

.hero__imagem {
  aspect-ratio: 4/3;
  order: -1;
}

.hero__titulo { font-size: var(--texto-3xl); }

.hero__badge-badge {
  font-size: var(--texto-xs);
}

/* Grids para mobile */
.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

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

/* Footer mobile */
.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--esp-xl);
}

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

/* Categorias mobile */
.categorias-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Esconde colunas opcionais no mobile */
.oculto-mobile { display: none !important; }

/* =============================================================================
   SM — >= 480px (celulares grandes)
   ============================================================================= */
@media (min-width: 480px) {
  .grid-posts {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .hero__titulo { font-size: var(--texto-3xl); }
}

/* =============================================================================
   MD — >= 768px (tablets)
   ============================================================================= */
@media (min-width: 768px) {

  /* Header tablet: mostra nav inline */
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    gap: var(--esp-xs);
  }

  .hamburger { display: none; }

  .header__social { display: flex; }

  /* Hero tablet: duas colunas */
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-2xl);
  }

  .hero__imagem { order: 0; }

  /* Grids tablet */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

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

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

  /* Footer tablet */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* Revelação de elementos ocultos */
  .oculto-mobile { display: initial !important; }
}

/* =============================================================================
   LG — >= 1024px (notebooks)
   ============================================================================= */
@media (min-width: 1024px) {

  /* Hero desktop */
  .hero__titulo {
    font-size: clamp(var(--texto-3xl), 4vw, var(--texto-5xl));
  }

  /* Grids desktop */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

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

  .categorias-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Footer desktop */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__base {
    flex-direction: row;
    text-align: left;
  }
}

/* =============================================================================
   XL — >= 1280px (desktops grandes)
   ============================================================================= */
@media (min-width: 1280px) {

  /* Container com mais respiro */
  .container {
    padding-inline: var(--esp-xl);
  }

  /* Hero com mais espaço */
  .hero {
    min-height: 90vh;
  }
}

/* =============================================================================
   IMPRESSÃO
   ============================================================================= */
@media print {
  .header,
  .footer,
  .nav,
  .btn-curtir,
  .faixa-frase,
  .cookie-banner,
  .hamburger,
  .btn-social {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a { color: #000; text-decoration: underline; }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
    color: #000;
  }
}

/* =============================================================================
   PREFERÊNCIAS DE ACESSIBILIDADE
   ============================================================================= */

/* Respeita preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste */
@media (forced-colors: active) {
  .btn--primario {
    border: 2px solid ButtonText;
  }
  .card {
    border: 1px solid ButtonText;
  }
}