/* ==========================================================================
   BOMBAR EVENTOS — SEÇÕES
   Topo, introdução, categorias e chamada final. Pensado primeiro para o
   celular; as composições de tela larga entram nos @media no fim de cada
   bloco.
   ========================================================================== */

/* ================================================================ TOPO == */

.hero {
  position: relative;
  container-type: inline-size;
  background: var(--verde-profundo);
}

/* Celular: a foto vem primeiro, quase inteira. Todas as fotos do acervo
   são verticais, então a moldura também é: quase não há recorte. */
.hero__foto {
  position: relative;
  height: min(76vh, 165vw);
  height: min(76svh, 165vw);
  min-height: 420px;
  overflow: hidden;
  background: var(--verde-escuro);
}

.hero__foto picture { display: contents; }

/* Absoluta: a foto preenche a moldura sem nunca ditar a altura do topo.
   Quem manda na altura é a moldura (celular) ou o próprio topo (desktop). */
.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  filter: var(--trato-foto);
  animation: hero-respira 1.8s var(--curva) both;
}

@keyframes hero-respira {
  from { transform: scale(1.05); }
  to   { transform: none; }
}

/* Véu: escuro em cima, para a barra do topo, e verde embaixo, onde o
   título entra por cima da foto. No meio, a foto fica limpa. */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 23, 16, .6) 0%, rgba(4, 23, 16, 0) 20%),
    linear-gradient(180deg, rgba(8, 38, 31, 0) 46%, rgba(8, 38, 31, .72) 74%, var(--verde-profundo) 100%);
}

.hero__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grao);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__conteudo {
  position: relative;
  z-index: 3;
  margin-top: clamp(-10rem, -26vw, -6.5rem);
  padding: 0 var(--borda) clamp(2rem, 1.5rem + 2vw, 3rem);
  animation: hero-texto 1s var(--curva) .15s both;
}

@keyframes hero-texto {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__titulo {
  font-size: var(--t-hero);
  line-height: 1;
  color: var(--branco-quente);
  text-shadow: 0 10px 34px rgba(4, 12, 9, .45);
}

/* O limite de largura fica só na frase, para o sobretítulo usar a linha
   inteira. Em em, não em ch: a DM Serif é larga, e 7.2em dá sempre três
   linhas equilibradas ("Momentos / que merecem / ser celebrados."). */
.hero__frase {
  display: block;
  max-width: 7.2em;
}

.hero__titulo .olho {
  margin-bottom: clamp(.9rem, .7rem + .8vw, 1.4rem);
  text-shadow: none;
}

@media (max-width: 420px) {
  .hero__titulo .olho { letter-spacing: .2em; gap: .65rem; }
}

.hero__titulo em { color: var(--dourado); }

.hero__apoio {
  max-width: 34ch;
  margin-top: clamp(.9rem, .75rem + .6vw, 1.35rem);
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  color: var(--texto-suave);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.25rem);
}

/* Sinal de rolagem: só em tela larga, onde o topo ocupa a tela inteira. */
.hero__rolar { display: none; }

@media (max-width: 539px) {
  .hero__acoes .btn { width: 100%; }
}

@media (min-width: 960px) {
  .hero {
    --recuo: max(var(--borda), calc((100cqw - var(--largura)) / 2 + var(--borda)));
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    min-height: clamp(620px, 100vh, 980px);
    min-height: clamp(620px, 100svh, 980px);
  }

  .hero__foto {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 0;
  }

  /* Tela larga: o véu vira lateral e só funde a borda esquerda da foto
     com o verde da coluna do título. */
  .hero__foto::after {
    background:
      linear-gradient(90deg, var(--verde-profundo) 0%, rgba(8, 38, 31, .5) 8%, rgba(8, 38, 31, 0) 24%),
      linear-gradient(180deg, rgba(4, 23, 16, .55) 0%, rgba(4, 23, 16, 0) 17%),
      linear-gradient(0deg, rgba(4, 23, 16, .3) 0%, rgba(4, 23, 16, 0) 18%);
  }

  .hero__conteudo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: calc(var(--nav-h) + 2.5rem) clamp(2rem, 4cqw, 4.5rem) 5rem var(--recuo);
  }

  /* A coluna do título é 44% da tela: a letra acompanha a coluna (cqw é a
     largura do topo) para a frase caber sempre em três linhas, de 960px
     a tela grande. Sem isso, em 1024px o "que" ficava sozinho na linha. */
  .hero__titulo { font-size: clamp(2.6rem, 6.1cqw - .7rem, 4.5rem); }

  .hero__rolar {
    position: absolute;
    left: var(--recuo);
    bottom: clamp(1.5rem, 3.5vh, 2.5rem);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 44px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    transition: color var(--padrao) var(--curva);
  }
  .hero__rolar::after {
    content: "";
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, var(--dourado), transparent);
    transform-origin: left;
    animation: rolar 2.6s var(--curva-suave) infinite;
  }
  .hero__rolar:hover { color: var(--creme); }
}

@keyframes rolar {
  0%   { transform: scaleX(.2); opacity: .4; }
  50%  { transform: scaleX(1);  opacity: 1; }
  100% { transform: scaleX(.2); opacity: .4; }
}

/* ========================================================== INTRODUÇÃO == */

.intro {
  background: var(--verde-profundo);
  padding-block: clamp(1.25rem, .9rem + 1.5vw, 2rem) clamp(2.75rem, 2rem + 3vw, 4.75rem);
}

.intro__grade {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding-top: clamp(1.9rem, 1.4rem + 2vw, 3rem);
}

/* Fio dourado que nasce na espiga e some à direita. */
.intro__grade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--linha-forte), var(--linha) 45%, transparent);
}

.intro__espiga {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: auto;
  color: var(--dourado);
  transform: translateY(-50%);
}

.intro__frase {
  max-width: 21ch;
  font-family: var(--fonte-display);
  font-size: var(--t-frase);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--creme);
  text-wrap: balance;
}

.intro__texto {
  max-width: 44ch;
  color: var(--texto-suave);
}

@media (min-width: 960px) {
  .intro__grade {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(3rem, 6vw, 7rem);
  }
  .intro__texto { padding-bottom: .35rem; }
}

/* ========================================================= CATEGORIAS == */

/* Até o galeria.js montar as seções, o espaço delas fica reservado. Sem
   isso a chamada final nasce colada na introdução, perto da primeira tela,
   e o navegador baixa a foto dela antes da hora, disputando banda com a
   foto do topo. Fica abaixo da dobra: ninguém chega a ver esse espaço. */
.js .categorias:not([data-pronto]) { min-height: 300vh; }

.categoria {
  --fundo: var(--preto);
  position: relative;
  padding-block: var(--secao);
  background: var(--fundo);
}

.categoria[data-tom="verde"] { --fundo: var(--verde-profundo); }

.categoria__h { color: var(--branco-quente); }

.categoria__h .olho { margin-bottom: clamp(.85rem, .7rem + .5vw, 1.15rem); }

/* Número da seção, gerado pelo CSS. O "/ ''" é o texto alternativo do
   conteúdo gerado: vazio, para o leitor de tela não anunciar "zero um". */
.olho__texto[data-num]::before {
  content: attr(data-num);
  content: attr(data-num) / "";
  margin-right: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: rgba(241, 230, 200, .62);
}

/* Largura em em: acompanha o tamanho da letra e segura o título em duas
   linhas ("Quando o calendário / convida."). Na coluna estreita do
   layout "lado", quem limita é a própria coluna. */
.categoria__titulo {
  display: block;
  max-width: 10.5em;
  font-size: var(--t-titulo);
  line-height: 1.04;
}

.categoria__texto {
  max-width: 42ch;
  margin-top: clamp(.85rem, .7rem + .5vw, 1.15rem);
  color: var(--texto-suave);
}

.categoria__galeria {
  display: grid;
  gap: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

/* Nome do grupo (ex.: Dia das Mães): é a foto que define o contexto, o
   título só confirma. */
.grupo__nome {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(.85rem, .7rem + .6vw, 1.25rem);
  font-size: var(--t-grupo);
  font-style: italic;
  line-height: 1.2;
  color: var(--creme);
}

.grupo__nome::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--linha-forte), transparent 85%);
}

/* ------------------------------------------- composição: lado a lado -- */
/* Até duas fotos: o texto fica numa coluna ao lado das fotos e acompanha
   a rolagem. Uma seção sim, outra não, os lados se invertem.             */

@media (min-width: 960px) {
  .categoria--lado .categoria__env {
    display: grid;
    grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }

  .categoria--lado .categoria__cabeca {
    position: sticky;
    top: calc(var(--nav-h) + 2.5rem);
    padding-top: clamp(1rem, 3vw, 3.5rem);
  }

  .categoria--lado .categoria__galeria { margin-top: 0; }

  .categoria--lado[data-espelho="1"] .categoria__env {
    grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr);
  }
  .categoria--lado[data-espelho="1"] .categoria__cabeca { grid-column: 2; grid-row: 1; }
  .categoria--lado[data-espelho="1"] .categoria__galeria { grid-column: 1; grid-row: 1; }
}

/* ------------------------------------------------ composição: mosaico -- */
/* Muitas fotos ou fotos em grupos: título largo em cima, texto ao lado. */

@media (min-width: 960px) {
  .categoria--mosaico .categoria__cabeca {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 7rem);
    align-items: end;
  }
  .categoria--mosaico .categoria__texto {
    margin-top: 0;
    padding-bottom: .4rem;
  }
}

/* ------------------------------------------------- composição: centro -- */
/* Três fotos: tríptico, com a principal no meio e o texto centralizado. */

.categoria--centro .categoria__cabeca {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.categoria--centro .categoria__h .olho { justify-content: center; }
.categoria--centro .categoria__h .olho::after {
  content: "";
  flex: none;
  width: clamp(22px, 3.4vw, 40px);
  height: 1px;
  background: currentColor;
  opacity: .8;
}

.categoria--centro .categoria__titulo,
.categoria--centro .categoria__texto { margin-inline: auto; }

/* ================================================ BLOCOS DE FOTOS ====== */
/* Cada bloco tem de 1 a 5 fotos e uma composição própria para cada
   quantidade. A primeira foto do bloco é sempre a principal.             */

.bloco {
  display: grid;
  gap: var(--vao);
}

/* --- 1 foto ------------------------------------------------------------ */

.bloco--1 > .foto { aspect-ratio: 4 / 5; }

@media (min-width: 600px) {
  .bloco--1 > .foto { max-height: 82vh; max-height: 82svh; }
}

/* --- 2 fotos: a segunda avança sobre a primeira ------------------------ */

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

.bloco--2 > :nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

.bloco--2 > :nth-child(2) {
  grid-column: 6 / -1;
  z-index: 1;
  aspect-ratio: 3 / 4;
  margin-top: clamp(-6.5rem, -19vw, -3.5rem);
  /* Anel da cor do fundo: separa a foto da de trás, como um passe-partout. */
  --sombra-anel: 0 0 0 clamp(5px, .7vw, 9px) var(--fundo);
}

.bloco--2[data-espelho="1"] > :nth-child(2) { grid-column: 1 / 8; }

@media (min-width: 600px) {
  .bloco--2 { grid-template-rows: auto clamp(3rem, 7vw, 6.5rem); }

  .bloco--2 > :nth-child(1) { grid-column: 1 / 9; grid-row: 1; }

  .bloco--2 > :nth-child(2) {
    grid-column: 8 / -1;
    grid-row: 1 / 3;
    align-self: end;
    margin-top: 0;
  }

  .bloco--2[data-espelho="1"] > :nth-child(1) { grid-column: 5 / -1; }
  .bloco--2[data-espelho="1"] > :nth-child(2) { grid-column: 1 / 6; }
}

/* --- 3 fotos: principal grande, duas menores desencontradas ----------- */

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

.bloco--3 > :nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

.bloco--3 > :nth-child(n + 2) { aspect-ratio: 3 / 4; }

@media (min-width: 600px) {
  .bloco--3 {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .bloco--3 > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .bloco--3 > :nth-child(2) { grid-column: 2; grid-row: 1; margin-top: 16%; }
  .bloco--3 > :nth-child(3) { grid-column: 3; grid-row: 1; }

  .bloco--3[data-espelho="1"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  }
  /* Espelhado: a principal vai para a direita e o desencontro passa para
     a foto do meio, sempre a vizinha da principal. */
  .bloco--3[data-espelho="1"] > :nth-child(1) { grid-column: 3; }
  .bloco--3[data-espelho="1"] > :nth-child(2) { grid-column: 1; margin-top: 0; }
  .bloco--3[data-espelho="1"] > :nth-child(3) { grid-column: 2; margin-top: 16%; }

  /* Tríptico: a principal no meio, as laterais centralizadas nela. */
  .categoria--centro .bloco--3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: center;
    max-width: 1180px;
    margin-inline: auto;
  }
  .categoria--centro .bloco--3 > :nth-child(1) { grid-column: 2; }
  .categoria--centro .bloco--3 > :nth-child(2) { grid-column: 1; margin-top: 0; }
  .categoria--centro .bloco--3 > :nth-child(3) { grid-column: 3; margin-top: 0; }
}

/* --- 4 fotos: fileira desencontrada ----------------------------------- */

.bloco--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.bloco--4 > .foto { aspect-ratio: 3 / 4; }
.bloco--4 > :nth-child(even) { margin-top: clamp(1.75rem, 8vw, 3rem); }

@media (min-width: 600px) {
  .bloco--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bloco--4 > :nth-child(odd) { aspect-ratio: 2 / 3; }
  .bloco--4 > :nth-child(even) { aspect-ratio: 4 / 5; margin-top: 14%; }
}

/* --- 5 fotos: principal alta e quatro quadradas ----------------------- */

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

.bloco--5 > :nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

.bloco--5 > :nth-child(n + 2) { aspect-ratio: 1 / 1; }

@media (min-width: 600px) {
  .bloco--5 {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .bloco--5 > :nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .bloco--5 > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .bloco--5 > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .bloco--5 > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .bloco--5 > :nth-child(5) { grid-column: 3; grid-row: 2; }

  .bloco--5[data-espelho="1"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  }
  .bloco--5[data-espelho="1"] > :nth-child(1) { grid-column: 3; }
  .bloco--5[data-espelho="1"] > :nth-child(2) { grid-column: 1; }
  .bloco--5[data-espelho="1"] > :nth-child(3) { grid-column: 2; }
  .bloco--5[data-espelho="1"] > :nth-child(4) { grid-column: 1; }
  .bloco--5[data-espelho="1"] > :nth-child(5) { grid-column: 2; }
}

/* ======================================================= CHAMADA FINAL == */

.chamada {
  position: relative;
  container-type: inline-size;
  background: var(--preto);
}

.chamada__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--verde-escuro);
}

.chamada__foto picture { display: contents; }

.chamada__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: var(--trato-foto);
}

.chamada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 7, .3) 0%, rgba(8, 8, 7, 0) 28%, rgba(8, 8, 7, 0) 52%, var(--preto) 100%);
}

.chamada__conteudo {
  position: relative;
  z-index: 1;
  margin-top: clamp(-4.5rem, -11vw, -2.5rem);
  padding: 0 var(--borda) var(--secao);
}

.chamada__titulo {
  max-width: 10em;
  margin-top: 1rem;
  font-size: var(--t-titulo);
  line-height: 1.04;
  color: var(--branco-quente);
}

.chamada__titulo em { color: var(--dourado); }

.chamada__texto {
  max-width: 38ch;
  margin-top: clamp(1rem, .85rem + .5vw, 1.35rem);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--creme);
}

.chamada__passo {
  max-width: 44ch;
  margin-top: .6rem;
  font-size: .95rem;
  color: var(--texto-suave);
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}

.chamada__pe {
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--texto-tenue);
}

.chamada__ponto { margin-inline: .4rem; color: var(--dourado); }

@media (max-width: 539px) {
  .chamada__acoes .btn { width: 100%; }
  .chamada__pe span { display: block; }
  .chamada__ponto { display: none !important; }
}

@media (min-width: 960px) {
  .chamada {
    --recuo: max(var(--borda), calc((100cqw - var(--largura)) / 2 + var(--borda)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(520px, 72vh, 700px);
  }

  .chamada__foto { aspect-ratio: auto; }

  .chamada__foto::after {
    background:
      linear-gradient(90deg, rgba(8, 8, 7, 0) 52%, rgba(8, 8, 7, .62) 82%, var(--preto) 100%),
      linear-gradient(180deg, rgba(8, 8, 7, .35) 0%, rgba(8, 8, 7, 0) 24%);
  }

  .chamada__conteudo {
    align-self: center;
    margin: 0;
    padding: var(--secao) var(--recuo) var(--secao) clamp(2.5rem, 5cqw, 5.5rem);
  }
}