/* ------------------------------------------------------------------ *
 * Ajustes de layout do site Davique Festas & Sonhos.
 *
 * Carregado DEPOIS de site.css para corrigir pontos específicos sem
 * alterar o CSS original (Tailwind v4 compilado).
 * ------------------------------------------------------------------ */

/*
 * Correção: os cards da seção "Por que escolher a Davique?" (.benefit-grid)
 * vazavam pela lateral em telas largas.
 *
 * Causa: em desktop o container dessa seção usava
 *   width: calc(100% + 10px); max-width: none; margin-left: -5px;
 * ou seja, ficava mais largo que a viewport e sem o limite de --container,
 * então as 4 colunas transbordavam.
 *
 * Aqui restauramos o mesmo comportamento harmônico dos demais containers:
 * largura limitada por --container e centralizado. As colunas responsivas
 * (4 / 2 / 2 / 1) definidas no CSS original continuam valendo.
 */
.benefits > .container {
  width: min(calc(100% - 64px), var(--container));
  max-width: var(--container);
  margin-inline: auto;
  margin-left: auto;
}

/* Trava de segurança: nada deve gerar rolagem horizontal na página. */
/*
 * Trava contra rolagem horizontal.
 * Usamos "clip" em vez de "hidden" porque "overflow: hidden" no html/body
 * quebra o position: sticky do cabeçalho. "clip" previne o scroll lateral
 * sem criar um contexto de rolagem, mantendo o menu fixo funcionando.
 */
html,
body {
  overflow-x: clip;
}

/*
 * Correção: a seção "Conheça nossa estrutura" (.structure) tinha a imagem
 * sangrando até a borda esquerda da tela, o que dava a sensação de que ela
 * "estourava" a lateral.
 *
 * Aqui contemos a seção dentro do mesmo limite de largura do restante do
 * site (centralizada, com respiro nas laterais) e arredondamos os cantos,
 * deixando o bloco harmônico. As regras de responsividade originais
 * (2 colunas em telas largas, 1 coluna em telas menores) continuam valendo.
 */
.structure > .structure-grid {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/*
 * No responsivo (1 coluna) usamos as mesmas larguras dos demais containers
 * do site em cada breakpoint, para o bloco não "estourar" nas laterais e
 * ficar alinhado com o restante do conteúdo.
 */
@media (max-width: 900px) {
  .structure > .structure-grid {
    width: min(100% - 40px, 720px);
  }
}

@media (max-width: 600px) {
  .structure > .structure-grid {
    width: min(100% - 32px, 520px);
  }
}

/*
 * Otimização de performance: usa a versão WebP (muito mais leve) da imagem
 * de fundo da seção final de chamada para ação. Mantém o mesmo overlay verde.
 */
.final-cta {
  background-image: linear-gradient(#145c3bc7, #145c3bc7),
    url(/images/familia-cta.webp);
}

/*
 * Menu fixo (sticky): o cabeçalho permanece sempre visível ao navegar pelo
 * site, em vez de sumir ao rolar a página. Ele já vem com fundo translúcido
 * e desfoque no CSS original — aqui apenas o fixamos no topo.
 *
 * A classe .is-navigating (aplicada por JS enquanto a página rola até uma
 * seção) reduz levemente a opacidade do menu, dando um feedback suave de
 * navegação, e a restaura ao terminar.
 */
.site-header {
  position: sticky;
  top: 0;
}

.site-header {
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-navigating {
  opacity: 0.55;
}

/* Sombra sutil quando a página já foi rolada, para destacar o menu do conteúdo. */
.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(20, 63, 45, 0.1);
}

/*
 * Correção: em monitores intermediários (601px a 1180px) os 5 cartões da
 * seção "Nossos Pacotes" transbordavam para as laterais.
 *
 * Causa: o layout usava flex centralizado com cartões de largura fixa (20%
 * + flex:none); quando não cabiam exatamente, o conjunto vazava para fora
 * do container em vez de encolher.
 *
 * Correção: nesse intervalo, distribuímos os 5 cartões em uma grade de
 * colunas iguais que sempre cabe na largura disponível, com um pequeno
 * espaçamento. As imagens acompanham a largura do cartão.
 */
@media (min-width: 601px) and (max-width: 1180px) {
  .packages #package-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow: visible;
  }

  .packages .package-card {
    width: 100%;
    min-width: 0;
  }

  .packages .package-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/*
 * Correção: a imagem "Espaço baby" tem proporção diferente das demais
 * (4:3, mais alta) e, sem uma altura fixa, esticava o bloco da estrutura,
 * quebrando o alinhamento com o painel de texto ao lado.
 *
 * Fixamos a altura da imagem principal para que TODAS ocupem exatamente a
 * mesma caixa, recortando o excedente com object-fit: cover. Assim o bloco
 * mantém sempre a mesma proporção, qualquer que seja a imagem selecionada.
 */
.structure-main-image {
  height: 590px;
  min-height: 590px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .structure-main-image {
    height: 450px;
    min-height: 450px;
    max-height: 450px;
  }
}

@media (max-width: 600px) {
  .structure-main-image {
    height: 390px;
    min-height: 390px;
    max-height: 390px;
  }
}


/* ------------------------------------------------------------------ *
 * Botão "voltar ao topo" e reposicionamento do WhatsApp
 * ------------------------------------------------------------------ */

/*
 * O WhatsApp sobe para dar espaço ao botão "voltar ao topo", que fica logo
 * abaixo dele, no mesmo canto inferior direito.
 */
.whatsapp-floating {
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px));
}

@media (max-width: 600px) {
  .whatsapp-floating {
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 68px));
  }
}

/* Botão de voltar ao topo */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1200;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  color: #fff;
  background: var(--green-900);
  box-shadow: 0 14px 34px #0a462247;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.18s ease;
}

/* Estado visível (controlado por JS ao passar de 50% da página) */
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--green-950);
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms;
    transform: none;
  }
  .back-to-top.is-visible {
    transform: none;
  }
}