/* ==========================================================================
   Responsividade — carregado por último para poder sobrescrever.

   O grosso do layout já é fluido (clamp, auto-fit, minmax), então aqui ficam
   só as viradas estruturais que a fluidez não resolve sozinha.
   ========================================================================== */

/* --- Tablet e abaixo: menu vira painel deslizante ----------------------- */
@media (max-width: 900px) {
  /* O painel é position: fixed e, por ser posicionado, pinta acima do
     botão, que é estático. Sem elevar o botão, o "×" fica embaixo do
     painel e não há como fechar o menu pelo toque. */
  .navbar__toggle {
    display: flex;
    position: relative;
    z-index: 1;
  }

  .navbar__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    padding: var(--space-9) var(--space-6) var(--space-6);
    background-color: var(--background-white);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .navbar__nav.is-open {
    transform: translateX(0);
  }

  .navbar__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .navbar__link {
    font-size: var(--fs-lg);
  }

  /* O painel cobre a tela; o fundo sólido do navbar deixa de fazer sentido. */
  .navbar.is-scrolled {
    padding-block: var(--space-3);
  }

  /* Galeria: uma faixa de 3 ou 4 fotos ficaria estreita demais aqui.
     As faixas viram colunas — cada foto no seu enquadramento original e
     com largura confortável. Não uso flex-wrap: ao quebrar linha, as
     alturas deixam de coincidir e a justificação se perde. */
  .gallery__band {
    flex-direction: column;
    align-items: center;
  }

  .gallery__figure {
    flex: 0 0 auto;
    width: 100%;
    /* Teto para uma vertical não virar uma torre no tablet. */
    max-width: min(100%, 34rem);
  }

  /* A horizontal aguenta mais largura sem ficar desproporcional. */
  .gallery__figure--wide {
    max-width: min(100%, 46rem);
  }

  .lightbox__nav--prev {
    left: var(--space-3);
  }

  .lightbox__nav--next {
    right: var(--space-3);
  }

  .location {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Celular: a galeria vira uma faixa horizontal contínua -------------
   As faixas viram `display: contents` para que as molduras passem a ser
   filhas diretas do trilho, formando uma fila só. A rolagem é nativa, o
   que dá arraste e inércia de graça; o gallery.js só empurra o
   scrollLeft quadro a quadro e dá a volta nas bordas. */
@media (max-width: 768px) {
  .gallery {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;

    /* O reset define scroll-behavior: smooth no html; herdado aqui, ele
       animaria cada ajuste de scrollLeft e brigaria com o laço. */
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* Sangra até as bordas da tela: a faixa parece atravessar a página. */
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);

    /* A barra de rolagem estragaria a composição; o arraste continua. */
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  /* Achata as duas faixas numa fila só, sem mexer no HTML. */
  .gallery__band {
    display: contents;
  }

  /* Altura igual para todas e largura pela proporção real: nenhuma foto
     é cortada, e a variação de largura dá o ritmo de filme. */
  .gallery__figure,
  .gallery__figure--wide {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: clamp(17rem, 50vh, 25rem);
    aspect-ratio: var(--ratio);
  }

  /* Os clones do laço são decorativos: leitores de tela os ignoram. */
  .gallery__figure[aria-hidden="true"] {
    pointer-events: auto;
  }

  .gallery__trigger {
    cursor: grab;
  }

  .gallery.is-arrastando .gallery__trigger {
    cursor: grabbing;
  }
}

/* --- Celular ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Duas colunas mantêm os números legíveis onde quatro ficariam apertadas. */
  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__names {
    gap: var(--space-2);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Sem hover em toque: o zoom da moldura só atrapalharia. */
  .gallery__trigger:hover {
    transform: none;
  }

  .gallery__trigger:hover img {
    transform: none;
    filter: none;
  }

  .lightbox__close {
    top: calc(-1 * var(--space-5));
  }

  .lightbox__image {
    max-height: calc(100vh - 11rem);
  }

  .section__header {
    margin-bottom: var(--space-6);
  }

  .card {
    padding: var(--space-5);
  }

  /* Hover com transform atrapalha em toque: some no mobile. */
  .card:hover,
  .btn:hover,
  .gift-card:hover,
  .gift-cat:hover {
    transform: none;
  }
}

/* --- Telas muito estreitas ---------------------------------------------- */
@media (max-width: 380px) {
  .countdown {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Telas baixas: o celular deitado ------------------------------------
   Largura não é a única medida de uma tela. Deitado, um celular tem 320 a
   400 pixels de altura, e só o respiro do hero — seis rem em cima, quatro
   embaixo — já come metade disso: os nomes apareciam, e a data e os botões
   ficavam abaixo da dobra, como se a página começasse pela metade.

   Aqui o hero troca o respiro de página inteira pelo de tela baixa e
   dispensa a seta de rolagem, que disputaria os últimos pixels com os
   botões. O resto do site não muda: quem manda nele é a largura. */
@media (max-height: 560px) {
  .hero {
    /* Em cima, o bastante para o texto não entrar embaixo da navbar. */
    padding-block: var(--space-8) var(--space-6);
  }

  /* Os nomes são a peça que mais cresce com a largura, e numa tela deitada
     sobra largura e falta altura: aqui a altura é que os limita. */
  .hero__names {
    font-size: min(var(--fs-hero), 15vh);
  }

  .hero__eyebrow {
    margin-bottom: var(--space-3);
  }

  .hero__date {
    margin-top: var(--space-3);
  }

  /* Lado a lado de novo: a coluna do celular em pé foi feita para uma tela
     estreita, e aqui o que falta é altura, não largura. */
  .hero__actions {
    flex-direction: row;
    margin-top: var(--space-5);
  }

  .hero__actions .btn {
    width: auto;
  }

  .hero__scroll {
    display: none;
  }
}

/* --- Telas largas ------------------------------------------------------- */
@media (min-width: 1440px) {
  .section__header {
    margin-bottom: var(--space-9);
  }
}

/* --- Telas muito largas: a página acompanha a janela ---------------------
   Daqui para cima o container de 1180px vira uma ilha no meio do monitor:
   nada quebra, mas sobra tela vazia dos dois lados e a composição encolhe
   em relação ao que se vê. As larguras passam a acompanhar a janela, com
   teto — linha de leitura larga demais é tão ruim quanto estreita demais —
   e o piso é a medida de hoje, para nada mudar antes desta faixa. */
@media (min-width: 1600px) {
  :root {
    --container-max: clamp(1180px, 70vw, 1680px);
    --container-narrow: clamp(760px, 44vw, 1000px);
  }

  /* A galeria tem container próprio, sempre um pouco mais largo que o do
     resto do site. Ele acompanha o mesmo crescimento, senão as fotos
     terminariam mais estreitas que os cartões de texto ao lado. */
  .section--gallery .container {
    max-width: clamp(1400px, 84vw, 2000px);
  }
}

/* --- Monitores grandes e 4K ---------------------------------------------
   Acima de 2000px a janela cresce mais rápido que a escala tipográfica:
   todas as medidas fluidas já bateram no teto, e o texto começa a parecer
   pequeno demais para a distância de quem lê numa tela dessas. A escala
   volta a subir a partir dos valores atuais — que continuam sendo o piso,
   então nada muda abaixo desta largura — e o respiro das seções acompanha.

   Uma escala só, definida aqui: as folhas de seção seguem lendo os mesmos
   tokens e nenhuma precisa saber que existe uma tela de 4K. */
@media (min-width: 2000px) {
  :root {
    --fs-xs: clamp(0.78rem, 0.678rem + 0.082vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.74rem + 0.109vw, 1rem);
    --fs-base: clamp(1.0625rem, 0.859rem + 0.163vw, 1.25rem);
    --fs-lg: clamp(1.25rem, 1.046rem + 0.163vw, 1.44rem);
    --fs-xl: clamp(2.05rem, 1.67rem + 0.304vw, 2.4rem);
    --fs-2xl: clamp(2.95rem, 2.244rem + 0.565vw, 3.6rem);
    --fs-3xl: clamp(4.4rem, 3.31rem + 0.87vw, 5.4rem);
    --fs-hero: clamp(6.75rem, 4.85rem + 1.52vw, 8.5rem);
    --fs-display-sm: clamp(1.5rem, 1.23rem + 0.136vw, 1.66rem);

    --section-padding: clamp(7.5rem, 4rem + 3vw, 11rem);
  }
}

/* --- Impressão: o convite em papel -------------------------------------- */
@media print {
  .navbar,
  .hero__scroll,
  .btn {
    display: none;
  }

  body {
    background-color: var(--background-white);
  }

  .section {
    padding-block: var(--space-5);
    break-inside: avoid;
  }
}