/* ==========================================================================
   OS QUATRO — acordeão horizontal

   Quatro painéis lado a lado. O que está sob o ponteiro cresce e revela a
   descrição; os outros encolhem e ficam só com o título. Um está sempre
   aberto, para a seção nunca aparecer fria.

   A largura é animada por flex-grow, não por width: o navegador resolve a
   sobra sozinho e nenhum painel some quando a tela estreita.

   Em tela pequena não há acordeão — vira pilha, com tudo visível.
   ========================================================================== */

.quatro {
  display: flex;
  gap: 12px;
  height: 440px;
}

/* Filete de ouro neon: fino em repouso, aceso no painel aberto. A borda é
   1px; o brilho vem de box-shadow, por dentro e por fora, que não desloca
   layout nem engrossa o traço. */
.q {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: block;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--ouro-dim);
  background: var(--surface2);
  cursor: pointer;
  transition: flex-grow 620ms var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.q[data-aberto] {
  flex-grow: 3.1;
  border-color: var(--ouro);
  box-shadow:
    0 0 0 1px var(--ouro-dim),
    0 0 26px var(--ouro-glow),
    inset 0 0 34px rgba(240, 194, 75, 0.09);
}
.q:hover { border-color: var(--ouro); }

/* ---------- Fotografia ---------- */
.q-foto {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 900ms var(--ease), filter 620ms var(--ease);
  /* Fechado, a foto recua: dessaturada e escurecida, para o título mandar */
  filter: saturate(0.55) brightness(0.62);
}
.q[data-aberto] .q-foto {
  transform: scale(1);
  filter: saturate(1) brightness(0.95);
}

/* Véu: garante o texto legível sobre qualquer foto — mesma lógica do hero.
   Denso embaixo, onde o texto vive; aberto em cima, onde a imagem respira.

   CALIBRADO PARA FOTO CLARA. Três das quatro imagens têm fundo branco, e
   nelas o véu antigo (0,55 no meio) deixava o título fechado em 4,3:1 —
   passava raspando por ser texto grande, e só. Medido sobre branco puro,
   que é a pior hipótese:

     título do painel fechado, véu a 0,72 ...... 7,4:1   AAA
     texto do painel aberto,  véu a 0,95 ...... 15,1:1   AAA

   Ao trocar qualquer imagem por uma mais clara, refaça a conta. */
.q-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 13, 26, 0.50) 0%,
      rgba(7, 13, 26, 0.72) 45%,
      rgba(7, 13, 26, 0.95) 100%);
  transition: background 620ms var(--ease);
}
/* No painel aberto a foto respira em cima: ali não há texto, só imagem. */
.q[data-aberto] .q-veu {
  background:
    linear-gradient(180deg,
      rgba(7, 13, 26, 0.22) 0%,
      rgba(7, 13, 26, 0.52) 48%,
      rgba(7, 13, 26, 0.95) 100%);
}

/* ---------- Conteúdo ---------- */
.q-corpo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--acc-2);
  opacity: 0.9;
}

.q-titulo {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

/* A descrição só existe no painel aberto. grid-template-rows anima de 0 a
   1fr sem precisar fixar altura, e o overflow escondido faz o recorte. */
.q-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 620ms var(--ease), opacity 380ms var(--ease);
}
.q-desc > span { overflow: hidden; }
.q[data-aberto] .q-desc { grid-template-rows: 1fr; opacity: 1; }
.q-desc p {
  font-size: 13.6px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}
.q-desc ul {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.q-desc li {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.q-mais {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.q-mais::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width var(--t-med) var(--ease);
}
.q:hover .q-mais::after { width: 34px; }

.q:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ---------- Tela estreita: pilha, sem acordeão ---------- */
@media (max-width: 900px) {
  .quatro { flex-direction: column; height: auto; }
  .q { flex: none; height: 260px; }
  .q[data-aberto] { flex-grow: 0; }
  .q .q-desc { grid-template-rows: 1fr; opacity: 1; }
  .q .q-foto { transform: scale(1); filter: saturate(1) brightness(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .q, .q-foto, .q-veu, .q-desc { transition: none; }
}