/* =========================================================
   LAYOUT: esqueleto reutilizado por todas as seções.

   Padrão de uma seção nova:
     <section class="section section--NOME" id="ancora" aria-labelledby="ancora-titulo">
       <div class="section__bg" aria-hidden="true">…cenário / parallax…</div>
       <div class="container">
         <p class="eyebrow" data-reveal>Rótulo</p>
         <h2 class="section__title" id="ancora-titulo" data-reveal>Título</h2>
         …
       </div>
     </section>

   O .section__bg existe para a assinatura do projeto: o cenário de fundo
   interage com os cards (parallax, recortes, sobreposição).
   ========================================================= */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

  .section {
    position: relative;
    isolation: isolate;              /* o cenário (z -1) nunca vaza para outra seção */
    padding-block: var(--section-space);
    overflow-x: clip;                /* parallax lateral sem gerar rolagem horizontal */
  }
  .section__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .section--light { background: var(--surface-light); color: var(--text-on-light); }

  .section__title {
    font-family: var(--ff-serif); font-weight: 300;
    font-size: var(--fs-2xl); line-height: var(--lh-tight);
  }
  .eyebrow {
    font-family: var(--ff-display); font-size: var(--fs-sm);
    text-transform: uppercase; letter-spacing: var(--tracking-display);
    color: var(--text-soft);
  }

  .stack > * + * { margin-block-start: var(--stack-space, var(--space-md)); }

  .grid {
    display: grid; gap: var(--grid-gap, var(--space-lg));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr));
  }
}