/* ------------------------------------------------------------------ *
 * 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. */
html,
body {
  overflow-x: hidden;
}

/*
 * 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);
}

/*
 * 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;
  }
}