/* ==========================================================================
   Responsividade — Dentro da Mala
   Mobile-first. Os estilos base já são para mobile.
   Aqui adicionamos ajustes para telas maiores e overrides para mobile.
   ========================================================================== */

/* ============================
   MOBILE (até 480px)
   ============================ */

@media (max-width: 480px) {
  .newsletter__row {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}

/* ============================
   TABLET PARA BAIXO (até 768px)
   ============================ */

@media (max-width: 768px) {
  /* Navegação mobile */
  .menu-toggle {
    display: flex;
  }

  nav#main-nav.main-nav {
    position: fixed !important;
    top: 110px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 110px) !important;
    background-color: #F7F3EB !important;
    opacity: 1 !important;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 9999;
    padding: var(--space-2xl) var(--container-padding);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto;
  }

  nav#main-nav.main-nav.open {
    transform: translateX(0) !important;
  }

  .main-nav__list {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .main-nav__link {
    font-size: var(--text-lg);
    display: block;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--linha);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Conceito — empilhado */
  .conceito__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .conceito__image {
    max-height: 400px;
  }

  /* Quem sou — empilhado */
  .quem-sou__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .quem-sou__photo {
    max-width: 300px;
    margin-inline: auto;
  }

  /* Livro — card empilhado */
  .livro-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .livro-card__cover {
    width: 140px;
  }

  /* Estilo — 1 coluna */
  .estilo__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Histórias — 1 coluna */
  .historias__grid {
    grid-template-columns: 1fr;
  }

  /* Serviços — 1 coluna, 2 por vez */
  .servicos__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Newsletter */
  .newsletter__row {
    grid-template-columns: 1fr;
  }

  /* Contato — empilhado */
  .contato__grid {
    grid-template-columns: 1fr;
  }

  /* Rodapé — empilhado */
  .main-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .main-footer__brand {
    max-width: none;
  }

  .main-footer__policies {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  /* Blog grid */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Post header */
  .post-header__meta {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ============================
   TABLET (768px — 1024px)
   ============================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  nav#main-nav.main-nav {
    position: fixed !important;
    top: 110px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 110px) !important;
    background-color: #F7F3EB !important;
    opacity: 1 !important;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 9999;
    padding: var(--space-2xl) var(--container-padding);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto;
  }

  nav#main-nav.main-nav.open {
    transform: translateX(0) !important;
  }

  .main-nav__list {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .main-nav__link {
    font-size: var(--text-lg);
    display: block;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--linha);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Estilo — 3 colunas mantido */

  /* Histórias — 2 colunas */
  .historias__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Serviços — 2 colunas */
  .servicos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Rodapé — 2x2 */
  .main-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  /* Blog grid — 2 colunas */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================
   DESKTOP (1024px+)
   ============================ */

@media (min-width: 1025px) {
  .menu-toggle {
    display: none;
  }

  .main-nav {
    display: block;
  }
}

/* ============================
   DESKTOP LARGO (1440px+)
   ============================ */

@media (min-width: 1440px) {
  /* Aumenta espaçamento para telas amplas */
  :root {
    --space-section: 100px;
  }
}

/* ============================
   DESKTOP XL (1920px+)
   ============================ */

@media (min-width: 1920px) {
  body {
    font-size: 1.125rem;
  }
}

/* ============================
   IMPRESSÃO
   ============================ */

@media print {
  .main-header,
  .main-footer,
  .newsletter,
  .consent-banner,
  .menu-toggle,
  .hero__scroll {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

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

  .hero {
    min-height: auto;
    padding: var(--space-xl) 0;
    background: #fff;
  }

  .hero__title,
  .hero__tagline {
    color: #000;
  }
}