/* =========================================================================
   03 · Baile de formatura: o convite
   O baile, que é o evento principal, ganha destaque pela direção de arte:
   a foto do salão em tela cheia, o brasão da turma, o título em escala de
   convite e o lema em três fotos sangradas, uma palavra em cada. Depois,
   a parte de consulta: o line-up, a noite em quatro momentos e a carta.
   Nada preso à rolagem. Um único efeito, curto e uma vez: o título do
   convite se abre quando aparece (baile.js). A ficha nunca se esconde.
   ========================================================================= */
.festa + .festa--baile { border-top: 0; } /* a foto do convite nasce do escuro, sem filete */

/* ---------- O convite ---------- */
.convite {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: calc(var(--alto, 100svh) - var(--barra-h));
  background: var(--breu);
}
.convite__foto { position: absolute; inset: 0; z-index: -1; }
.convite__foto picture, .convite__foto img { display: block; width: 100%; height: 100%; }
.convite__foto img { object-fit: cover; object-position: 50% 0%; }
/* a foto aparece inteira no alto; o escuro vem só onde há texto */
.convite__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 7 11 / .92) 0%, rgb(6 7 11 / .8) 4.5rem, rgb(6 7 11 / .1) 8.5rem, rgb(6 7 11 / .1) 20%, rgb(6 7 11 / .5) 32%, rgb(6 7 11 / .86) 46%, rgb(6 7 11 / .93) 70%, var(--breu) 100%);
}
.convite__foto figcaption {
  position: absolute; right: var(--gutter); bottom: 1.05rem; z-index: 1;
  padding: .2rem .55rem; border-radius: 4px; background: rgb(6 7 11 / .72);
  font-size: .6875rem; line-height: 1.3; color: rgb(255 243 225 / .85);
}
.convite__texto {
  display: grid; justify-items: center; text-align: center;
  padding: 4.5rem 0 2.1rem;
}
/* no celular, o rótulo da seção fica no alto, no escuro do teto, e a foto respira entre ele e o brasão */
@media (max-width: 899px) {
  .convite__texto > .sobre { position: absolute; top: 1.25rem; left: 0; right: 0; }
  /* o crédito corre na borda da foto, como em revista, longe do texto do convite */
  .convite__foto figcaption {
    top: 4.25rem; right: .3rem; bottom: auto;
    writing-mode: vertical-rl; transform: rotate(180deg);
    padding: .5rem .18rem;
  }
}
.convite__brasao {
  width: clamp(112px, 31vw, 200px); height: auto; margin-top: .9rem;
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / .75));
}
.convite__abre {
  margin-top: 1.1rem; max-width: 26ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 350; font-stretch: 125%;
  line-height: 1.35; letter-spacing: 0; color: var(--luz);
  text-wrap: balance;
}
.convite__titulo { display: grid; justify-items: center; margin-top: .7rem; }
.convite__baile {
  font-size: clamp(5.5rem, 1.5rem + 28vw, 14rem); font-weight: 860; font-stretch: 125%;
  line-height: .8; letter-spacing: -.055em; color: var(--ouro-claro);
  padding-right: .055em; /* compensa o espaçamento negativo para o título ficar no centro */
}
.convite__de {
  margin-top: .3rem;
  font-size: clamp(1.75rem, 1rem + 4vw, 3.6rem); font-weight: 300; font-stretch: 125%;
  line-height: 1; letter-spacing: -.02em; color: var(--luz);
}

/* a ficha do convite: Onde, Quando, Quem vai e Decoração, sempre visível */
.convite__ficha { width: 100%; max-width: 920px; margin-top: 1.9rem; text-align: left; gap: 0 1.25rem; }
.convite__ficha div { border-top-color: rgb(217 180 90 / .4); }
.convite__ficha dd { text-wrap: balance; }

/* o único efeito do baile: o título do convite se abre, uma vez (≤ 0,8 s) */
.convite.is-fechado [data-abre] { opacity: 0; transform: translateY(10px); }
.convite.is-aberto [data-abre] {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ---------- O lema: três fotos sangradas, uma palavra em cada ---------- */
.lema { background: var(--breu); }
.lema__quadros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lema__quadro {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(250px, 68vw, 520px);
  display: grid; align-content: end;
}
.lema__quadro img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lema__quadro::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(6 7 11 / .9) 0%, rgb(6 7 11 / .55) 38%, rgb(6 7 11 / 0) 70%);
}
.lema__palavra {
  padding: 0 var(--gutter) 1.05rem;
  font-size: clamp(3rem, 17.6vw - 2.6px, 6.5rem); font-weight: 820; font-stretch: 125%;
  line-height: .9; letter-spacing: -.05em; color: var(--luz);
}
.lema__palavra span { display: block; margin-bottom: .1em; font-size: .42em; font-weight: 300; letter-spacing: -.01em; }
.lema__palavra--ouro { color: var(--ouro-claro); }
.lema__palavra--ouro span { color: var(--luz); }
.lema__quadro:nth-child(1) img { object-position: 50% 30%; }
.lema__quadro:nth-child(2) img { object-position: 40% 50%; }
.lema__quadro:nth-child(3) img { object-position: 50% 40%; }
.lema__nota { padding-top: .8rem; }

/* ---------- A parte de consulta ---------- */
.baile__corpo { --vao: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); gap: var(--vao); }
.baile__corpo > .perguntar { margin-top: calc(1.4rem - var(--vao)); }
.baile__corpo li { text-wrap: pretty; }

/* para dançar: o line-up, cada atração numa largura da Mona Sans, todas na mesma medida */
.danca { display: grid; gap: .8rem; }
.lineup { container-type: inline-size; }
.lineup li {
  padding: .14em 0 .1em; border-top: 1px solid rgb(217 180 90 / .4);
  font-size: clamp(2rem, 11vw, 5rem); font-weight: 900; font-stretch: var(--w);
  line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: var(--luz);
}
.lineup li:last-child { border-bottom: 1px solid rgb(217 180 90 / .4); }
.lineup .lineup__banda { --w: 75%; }
.lineup .lineup__dupla { --w: 87.5%; color: var(--ouro-claro); }
.lineup .lineup__dj { --w: 125%; }
/* as medidas (largura do texto ÷ tamanho da letra) só valem com a Mona Sans carregada;
   até lá, e sem JavaScript, as linhas quebram normalmente e nada vaza da tela */
.baile--fonte .lineup li { white-space: nowrap; }
.baile--fonte .lineup .lineup__banda { font-size: calc(98.5cqi / 8.7741); }
.baile--fonte .lineup .lineup__dupla { font-size: calc(98.5cqi / 7.872); }
.baile--fonte .lineup .lineup__dj { font-size: calc(98.5cqi / 6.352); }

/* do primeiro brinde ao último café: a noite em quatro momentos */
.noite { display: grid; gap: 1.4rem; }
.noite__titulo { margin-top: 0; max-width: 16ch; }
.noite__grupos h4 { font-size: 1.0625rem; font-stretch: 125%; letter-spacing: -.01em; }

/* a carta do bar, como um cardápio: categoria, pontilhado e a marca */
.bar { display: grid; gap: 1rem; align-content: start; }
.bar__titulo { margin-top: 0; }
.bar__carta { border-top: 1px solid rgb(217 180 90 / .5); }
.bar__carta div {
  display: grid; grid-template-columns: auto minmax(1.25rem, 1fr) auto; align-items: baseline; column-gap: .6rem;
  padding: .72rem 0 .68rem; border-bottom: 1px solid var(--linha);
}
.bar__carta div::after {
  content: ""; grid-column: 2; grid-row: 1; align-self: baseline;
  border-bottom: 2px dotted rgb(217 180 90 / .45); transform: translateY(-.3em);
}
.bar__carta dt {
  grid-column: 1; grid-row: 1;
  font-size: .75rem; font-weight: 650; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro);
}
.bar__carta dd {
  grid-column: 3; grid-row: 1; text-align: right;
  font-size: 1.1875rem; font-weight: 760; font-stretch: 112%; line-height: 1.2; letter-spacing: -.01em; color: var(--luz);
}
.bar__carta dd.bar__mais {
  grid-column: 1 / -1; grid-row: 2; margin-top: .15rem;
  font-size: .8125rem; font-weight: 500; font-stretch: 100%; line-height: 1.3; letter-spacing: 0; color: var(--luz-3);
}

/* celular baixo (navegador do WhatsApp): o convite inteiro e a ficha acima da barra */
@media (max-width: 899px) and (max-height: 700px) {
  .convite__texto { padding: 2.55rem 0 1.4rem; }
  .convite__brasao { width: 80px; margin-top: 0; }
  .convite__abre { margin-top: .55rem; }
  .convite__titulo { margin-top: .45rem; }
  .convite__baile { font-size: clamp(4.75rem, 1rem + 23vw, 8rem); }
  .convite__de { margin-top: .2rem; }
  .convite__ficha { margin-top: 1rem; }
  .convite__ficha div { padding: .45rem 0; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .convite { align-items: center; min-height: min(calc(var(--alto, 100vh) - var(--topo-fixo)), 1000px); }
  .convite__foto img { object-position: 50% 30%; }
  .convite__foto::after {
    background:
      radial-gradient(ellipse 46% 62% at 50% 52%, rgb(6 7 11 / .84) 0%, rgb(6 7 11 / .7) 55%, rgb(6 7 11 / .34) 100%),
      linear-gradient(to bottom, rgb(6 7 11 / .6) 0%, rgb(6 7 11 / .32) 24%, rgb(6 7 11 / 0) 40%, rgb(6 7 11 / 0) 62%, rgb(6 7 11 / .9) 88%, var(--breu) 100%);
  }
  .convite__texto { padding: 3rem 0 3.25rem; }
  .convite__abre { max-width: 40ch; }
  .convite__ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; margin-top: 2.6rem; }

  .lema__quadros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lema__quadro { height: min(calc(var(--alto, 100vh) - var(--topo-fixo) - 4rem), 720px); }
  .lema__palavra { padding: 0 2rem 1.6rem; font-size: min(5.2rem, 5.6vw - 6px); } /* "conquista." cabe no terço da tela */
  .lema__nota { padding-top: 1rem; }

  .danca { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2rem; align-items: start; }
  .danca__titulo { padding-top: 1rem; }
  .bar { gap: 1.25rem; }
  .bar__carta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  /* 11 itens em 2 colunas: os drinks fecham a carta numa linha inteira, sem casa vazia */
  .bar__carta div:last-child { grid-column: 1 / -1; }
}
/* notebook baixo: o convite e a ficha continuam numa tela só */
@media (min-width: 900px) and (max-height: 820px) {
  .convite__texto { padding: 2.25rem 0 2.75rem; }
  .convite__brasao { width: 150px; margin-top: .6rem; }
  .convite__baile { font-size: clamp(5.5rem, 15vh, 14rem); }
  .convite__ficha { margin-top: 2rem; }
}

/* ---------- Movimento reduzido: o convite já aberto ---------- */
.is-estatico .convite [data-abre] { opacity: 1; transform: none; transition: none; }