/* ---------- trabalhos ----------
   Efeito: gem "Expanding Image Panels" da BYQ. Uma fileira de painéis altos; o painel aberto
   cresce por flex-grow e mostra a legenda, os outros encolhem.
   O estado de cada painel é uma variável só: --aberto vale 0 (fechado) ou 1 (aberto), e todas
   as propriedades animadas saem dela. Tempos e curva são os do gem e ficam em tokens.css. */
.work__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-height: 100vh;
  min-height: 100svh;
  /* a fileira vai de uma margem do conteúdo à outra, as mesmas linhas verticais do hero */
  padding: calc(var(--header-altura) + var(--space-6)) calc(var(--margem-conteudo) - var(--card-inset)) var(--space-8);
}

.work__title {
  margin-bottom: var(--space-4);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-titulo-g);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

.panels {
  display: flex;
  gap: var(--paineis-vao);
  height: var(--paineis-altura);
}

.panel {
  --aberto: 0;
  position: relative;
  flex: 1 1 0;
  flex-grow: calc(1 + (var(--painel-crescimento) - 1) * var(--aberto));
  min-width: 0;
  border-radius: var(--painel-raio);
  transition: flex-grow var(--painel-dur) var(--painel-ease);
}
.panel.is-open { --aberto: 1; }

.panel__trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--cena-borda);
  border-radius: var(--painel-raio);
  background: var(--painel-fundo);
  color: var(--painel-texto);
  overflow: hidden;
  outline: none;
  transition: border-color var(--dur-med) var(--ease-out);
}
.panel__trigger:focus-visible {
  --legenda: 1;
  z-index: 2;
  border-color: var(--cena-texto);
  box-shadow: 0 0 0 3px var(--cena-fundo), 0 0 0 6px var(--focus-ring);
}

.panel__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(calc(0.35 * (1 - var(--aberto)))) brightness(calc(0.82 + 0.1 * var(--aberto)));
  transform: scale(calc(1.06 - 0.06 * var(--aberto)));
  transition: filter var(--painel-dur) var(--painel-ease),
              transform var(--painel-dur-zoom) var(--painel-ease);
}

/* véu: degradê escuro atrás da legenda */
.panel__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(var(--painel-veu-rgb) / 0.72) 0%,
    rgb(var(--painel-veu-rgb) / 0.24) 34%,
    rgb(var(--painel-veu-rgb) / 0) 62%
  );
  opacity: var(--legenda, var(--aberto));
  transition: opacity var(--painel-dur-veu) var(--painel-ease);
}

/* número do painel, na vertical. Some quando o painel abre */
.panel__index {
  position: absolute;
  left: 0.9rem;
  bottom: 1rem;
  font-family: var(--fonte-numero);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-numero);
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: calc(0.85 * (1 - var(--aberto)));
  pointer-events: none;
  text-shadow: 0 1px 8px rgb(var(--painel-veu-rgb) / 0.5);
  transition: opacity var(--painel-dur-numero) ease;
}

/* legenda: sobe 14px e aparece quando o painel abre */
.panel__caption {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  pointer-events: none;
  opacity: var(--legenda, var(--aberto));
  transform: translateY(calc(var(--painel-legenda-desvio) * (1 - var(--legenda, var(--aberto)))));
  transition: opacity var(--painel-dur-legenda) var(--painel-ease) var(--painel-atraso-legenda),
              transform var(--painel-dur-legenda-sobe) var(--painel-ease) var(--painel-atraso-legenda);
}
/* painel que leva à página do case: o painel inteiro é o link. Um selo redondo com seta aparece
   no canto do painel aberto para avisar que ele leva a outra página. */
.panel__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: var(--painel-selo);
  height: var(--painel-selo);
  border-radius: 50%;
  background: var(--tema-destaque-forma);
  color: var(--tema-sobre-destaque-forma);
  font-size: 1.125rem;
  pointer-events: none;
  opacity: var(--legenda, var(--aberto));
  transform: scale(calc(0.6 + 0.4 * var(--legenda, var(--aberto))));
  transition: opacity var(--painel-dur-legenda) var(--painel-ease) var(--painel-atraso-legenda),
              transform var(--painel-dur-legenda-sobe) var(--painel-ease) var(--painel-atraso-legenda),
              background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.panel__go .link-arrow { transition: transform var(--dur-med) var(--ease-out); }
a.panel__trigger:hover .panel__go { background: var(--painel-texto); color: var(--texto-sobre-destaque); }
a.panel__trigger:hover .panel__go .link-arrow { transform: translateX(3px); }

.panel__eyebrow {
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-corpo-forte);
  line-height: 1.2;
  color: var(--tema-destaque-texto);
  white-space: nowrap;
}
.panel__title {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: var(--peso-titulo);
  line-height: 1.02;
  letter-spacing: var(--tracking-titulo);
  white-space: nowrap;
}
.panel__meta {
  font-size: var(--fs-rodape);
  line-height: 1.3;
  white-space: nowrap;
}

/* sem JS: o painel sob o cursor ou com foco abre sozinho */
.no-js .panels:hover .panel,
.no-js .panels:focus-within .panel { --aberto: 0; }
.no-js .panels .panel:hover,
.no-js .panels:not(:hover) .panel:focus-within { --aberto: 1; }

/* ---------- celular: os painéis viram uma pilha e o aberto cresce na altura ---------- */
@media (max-width: 34rem) {
  .work__inner { justify-content: flex-start; }
  .panels {
    flex-direction: column;
    height: auto;
  }
  .panel {
    flex: 0 0 auto;
    height: calc(var(--painel-fechado-celular) + (var(--painel-aberto-celular) - var(--painel-fechado-celular)) * var(--aberto));
    transition: height var(--painel-dur) var(--painel-ease);
  }
  .panel__index {
    left: 1.1rem;
    top: 1.1rem;
    bottom: auto;
    writing-mode: horizontal-tb;
    transform: none;
  }
  .panel__title,
  .panel__meta { white-space: normal; }
}

/* ---------- movimento reduzido: tudo troca de estado na hora, sem zoom ---------- */
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel__img,
  .panel__scrim,
  .panel__caption,
  .panel__go,
  .panel__index { transition-duration: 0.001ms !important; }
  .panel__img { transform: none !important; }
}