/* ==========================================================================
   Seção 03 — Questões que atravessam o trabalho de Iona
   Figma: node 356:3671 (1512 × 800)
   Inspiração: "How we work" de sonder-mr.com. Os títulos das frentes ficam
   empilhados e fixos na parte de baixo da tela; conforme o scroll avança,
   cada um se solta e sobe junto com o seu texto, revelando o próximo.

   Como funciona (só CSS + uma classe controlada pelo JS):
   - .is-enhanced  o JS está ativo; o cabeçalho ocupa a tela menos a pilha.
   - antes de .is-stuck  os títulos ficam empilhados logo abaixo do cabeçalho
                    (position: absolute), no espaço reservado pelo padding.
   - .is-stuck     quando o topo da seção chega ao topo da tela, os títulos
                    viram position: sticky com bottom escalonado; cada um fica
                    preso no fundo até o seu lugar no fluxo alcançá-lo.
   As duas situações têm a mesma altura total, então a página não "pula".
   ========================================================================== */

.topics {
  --total: 4;
  --bar-h: calc(102 * var(--fp));
  position: relative;
  background: var(--c-cream);
  color: var(--c-text);
}

/* ---------- Cabeçalho ---------- */
.topics__header {
  padding: calc(111.5 * var(--fp)) var(--pad) calc(32 * var(--fp));
}

.topics__title {
  width: calc(674 * var(--fp));
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(48 * var(--fp));
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #000;
}

/* ---------- Lista de frentes ---------- */
.topics__list {
  border-bottom: 2px solid var(--c-rule);
}

.topics__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--bar-h);
  margin: 0;
  padding: 0 calc(80 * var(--fp)) 0 var(--pad);
  border-top: 2px solid var(--c-rule);
  background: var(--c-cream);
  font-family: var(--font-display);
  font-size: calc(40 * var(--fp));
  font-weight: 600;
  line-height: 1.26;
  color: var(--c-wine);
}

.topics__item {
  padding: calc(24 * var(--fp)) var(--pad) calc(126 * var(--fp)) calc(615 * var(--fp));
}
.topics__item p {
  max-width: calc(619 * var(--fp));
  margin: 0;
  font-family: var(--font-text);
  font-size: max(17px, calc(20 * var(--fp)));
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text);
}

/* ---------- Efeito de títulos empilhados (a partir de 768px) ---------- */
@media (min-width: 768px) {
  .topics.is-enhanced .topics__header {
    min-height: calc(100vh - var(--total) * var(--bar-h));
  }
  .topics.is-enhanced .topics__list {
    position: relative;
  }

  /* Antes de chegar ao topo: pilha logo abaixo do cabeçalho */
  .topics.is-enhanced:not(.is-stuck) .topics__list {
    padding-top: calc(var(--total) * var(--bar-h));
  }
  .topics.is-enhanced:not(.is-stuck) .topics__bar {
    position: absolute;
    top: calc((var(--pos) - 1) * var(--bar-h));
    left: 0;
    right: 0;
  }

  /* Seção no topo: títulos presos ao fundo da tela, em escada */
  .topics.is-enhanced.is-stuck .topics__bar {
    position: sticky;
    bottom: calc((var(--total) - var(--pos)) * var(--bar-h));
  }
}

/* ---------- Tablet (sem tela no Figma) ---------- */
@media (max-width: 1199px) {
  .topics {
    --fp: 1px;
    --bar-h: 80px;
  }
  .topics__header {
    padding: clamp(64px, 10vw, 112px) var(--pad) 32px;
  }
  .topics__title {
    width: auto;
    max-width: 18ch;
    font-size: clamp(32px, 5vw, 48px);
  }
  .topics__bar {
    padding-right: var(--pad);
    font-size: clamp(22px, 3.3vw, 34px);
  }
  .topics__item {
    padding: 20px var(--pad) 96px 40%;
  }
  .topics__item p {
    max-width: 52ch;
    font-size: clamp(17px, 2vw, 20px);
  }
}

/* ---------- Mobile: lista simples (título + texto) ---------- */
@media (max-width: 767px) {
  .topics__bar {
    height: auto;
    padding-block: 20px;
    font-size: 24px;
  }
  .topics__item {
    padding: 0 var(--pad) 40px;
  }
}