/* espaco · o consultório de Vitória (prefixo es-)
   Noite com as fotos mornas como única cor quente. Um grande e quatro detalhes de tamanhos
   diferentes, recorte reto com fio. O motivo: a luminária vertical da sala vira um fio de luz
   entre as colunas, que acende uma vez. */

.es{--es-gap:clamp(20px,2.6vw,36px);--es-linha:clamp(24px,3.4vh,40px)}
.es-grade{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr) auto auto;
  column-gap:var(--es-gap);row-gap:0;
}

/* ── cabeça e texto na coluna estreita; a foto grande ocupa a larga ── */
.es-cabeca{grid-column:1/6;grid-row:1;padding-right:clamp(0px,2vw,24px)}
.es-texto{grid-column:1/6;grid-row:2;align-self:end;padding:var(--es-linha) clamp(0px,2vw,24px) 0 0}
.es-destaque{color:var(--pedra);max-width:14em;text-wrap:balance;margin-bottom:calc(var(--passo) * 1.1)}
.es-texto .wf-apoio + .wf-apoio{margin-top:calc(var(--passo) * .8)}
.es-colatina{color:var(--pedra-baixa)}
.es-texto .wf-segunda{display:inline-block;margin-top:calc(var(--passo) * 1.2);margin-bottom:2px}

.es-grande{grid-column:6/13;grid-row:1/3}

/* ── a fila de detalhes: bordas de baixo alinhadas, legendas numa linha própria ── */
.es-poltronas,.es-simbolo,.es-maca,.es-xicaras{
  grid-row:3/5;margin-top:var(--es-linha);
  display:grid;grid-template-rows:subgrid;row-gap:0;
}
.es-poltronas .es-moldura,.es-simbolo .es-moldura,.es-maca .es-moldura,.es-xicaras .es-moldura{align-self:end}
.es-poltronas .es-legenda,.es-simbolo .es-legenda,.es-maca .es-legenda,.es-xicaras .es-legenda{align-self:start}
.es-poltronas{grid-column:1/6}
.es-simbolo{grid-column:6/9}
.es-maca{grid-column:9/11}
.es-xicaras{grid-column:11/13}

/* ── a foto: recorte reto, fio de 1 px, sem canto ── */
.es-foto{margin:0;min-width:0}
.es-moldura{position:relative;overflow:hidden;border:1px solid var(--fio);background:var(--noite-funda)}
.es-moldura img{width:100%;height:auto;display:block}
.es-legenda{
  margin-top:10px;font-size:var(--t-mini);line-height:1.45;letter-spacing:.04em;color:var(--pedra-baixa);
  text-wrap:pretty;
}
.es-legenda--fala q{quotes:"“" "”";font-style:italic;font-size:1rem;letter-spacing:0;color:var(--pedra-forte);line-height:1.4;display:block}
.es-legenda--fala span{display:block;margin-top:4px}

/* a placa da sala: o número em letra de escala, a legenda ao lado */
.es-grande{position:relative}
.es-placa{display:flex;align-items:baseline;gap:18px;margin-top:14px}
.es-placa-num{display:inline-flex;align-items:baseline;gap:7px;flex:none;color:var(--pedra);font-variant-numeric:tabular-nums;white-space:nowrap}
.es-placa-num small{font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase;color:var(--pedra-media)}
.es-placa-num b{font:500 1.75rem/1 var(--f-titulo);letter-spacing:.055em}
.es-placa > span:last-child{max-width:34em}

/* a foto chega apagada e acende junto com a luminária, uma vez: brilho e um leve assentar de escala */
.js .es-foto .es-moldura img{transform:scale(1.035);filter:brightness(.5) saturate(.8);transition:transform 2.6s var(--ease),filter 1.6s ease .5s}
.js .es-foto.wf-visto .es-moldura img{transform:none;filter:none}
.js .es-grande .es-moldura img{transition-delay:0s,.7s}

/* ── a luminária: barra de luz com halo, na altura e na proporção das da foto, fora da moldura ── */
.es-luz{
  position:absolute;z-index:1;top:7%;height:31%;width:3px;border-radius:2px;
  left:calc(var(--es-gap) / -2 - 1px);
  background:linear-gradient(180deg,rgb(239 231 218 / .55) 0%,rgb(239 231 218 / .98) 10%,rgb(239 231 218 / .98) 90%,rgb(239 231 218 / .55) 100%);
  box-shadow:0 0 6px 1px rgb(239 231 218 / .45);
  pointer-events:none;
}
.es-luz::before,.es-luz::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}
.es-luz::before{width:34px;height:112%;background:radial-gradient(closest-side in oklch,rgb(239 231 218 / .34) 0%,rgb(239 231 218 / .12) 55%,transparent 100%);filter:blur(5px)}
.es-luz::after{width:150px;height:160%;background:radial-gradient(closest-side in oklch,rgb(239 231 218 / .16) 0%,rgb(239 231 218 / .05) 50%,transparent 100%);filter:blur(10px)}
.js .es-grande .es-luz{opacity:0;transform:scaleY(.92);transform-origin:50% 0}
.js .es-grande .es-luz::before,.js .es-grande .es-luz::after{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.js .es-grande.wf-visto .es-luz{opacity:1;transform:none;transition:opacity 1s ease .6s,transform 1.4s var(--ease) .6s}
.js .es-grande.wf-visto .es-luz::before,.js .es-grande.wf-visto .es-luz::after{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity 1.6s ease 1s,transform 1.8s var(--ease) 1s}

/* ── o trecho tracejado: o que fica fora da conta, separando da última seção ── */
.es-fim{margin-top:var(--respiro)}

/* ── tablet e celular: coluna única, detalhes em pares ── */
@media (max-width:820px){
  .es-grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;column-gap:16px}
  .es-cabeca{grid-column:1/-1;grid-row:auto;padding:0}
  .es-texto{grid-column:1/-1;grid-row:auto;padding:var(--passo) 0 0;align-self:start}
  .es-grande{grid-column:1/-1;grid-row:auto;margin-top:var(--es-linha)}
  .es-poltronas,.es-simbolo,.es-maca,.es-xicaras{grid-row:auto;display:block;grid-template-rows:none;margin-top:var(--es-linha)}
  .es-simbolo,.es-xicaras{display:grid;grid-template-rows:auto auto;align-items:start}
  .es-poltronas{grid-column:1/-1}
  .es-simbolo{grid-column:1/2}
  .es-xicaras{grid-column:2/3}
  .es-maca{grid-column:1/-1;order:10;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto;column-gap:16px;align-items:end}
  .es-maca .es-moldura,.es-maca .es-legenda{grid-row:1}
  .es-maca .es-legenda{grid-column:2;align-self:end;margin:0 0 6px}
  .es-destaque{max-width:none}
  .es-placa{flex-direction:column;gap:6px}
  .es-luz{display:none}
  .es-legenda,.es-placa-num small{font-size:.875rem}
  .es-fim{margin-top:clamp(56px,9vh,80px)}
}
@media (max-width:400px){
  .es-grade{column-gap:12px}
}