/* ==========================================================================
   layout.css — container, seções, grids e estrutura de página
   ========================================================================== */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* Seções */
.section {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--c-bg);
}

.section--alt {
  background-color: var(--c-bg-alt);
}

.section--glow-tr { background-image: radial-gradient(50rem 31rem at 100% 0%, rgb(124 58 237 / 0.28), transparent 62%); }
.section--glow-tl { background-image: radial-gradient(56rem 35rem at 15% 0%, rgb(124 58 237 / 0.4), transparent 62%); }
.section--glow-l { background-image: radial-gradient(44rem 31rem at 0% 50%, rgb(124 58 237 / 0.3), transparent 62%); }
.section--glow-r { background-image: radial-gradient(50rem 35rem at 100% 50%, rgb(124 58 237 / 0.34), transparent 62%); }
.section--glow-top { background-image: radial-gradient(50rem 31rem at 50% 0%, rgb(124 58 237 / 0.26), transparent 62%); }
.section--glow-bottom { background-image: radial-gradient(56rem 32rem at 50% 100%, rgb(124 58 237 / 0.34), transparent 62%); }

.section__head {
  display: grid;
  gap: var(--sp-4);
  max-width: 52rem;
  margin-bottom: var(--sp-14);
}

.section__head--split {
  max-width: none;
  align-items: end;
}

/* eyebrow + título ficam num <div>: devolve o mesmo respiro das demais seções */
.section__head--split > div {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 62rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-16);
  }
}

.section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.section__lead {
  color: var(--c-text-soft);
  font-size: 1.125rem;
}

.section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-10);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-violet-400);
}

/* Utilitários de layout */
.stack {
  display: grid;
  gap: var(--sp-4);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--auto-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Duas colunas (texto + mídia) */
.split {
  display: grid;
  gap: var(--sp-14);
  align-items: center;
}

.split__body {
  display: grid;
  align-content: center;
  gap: var(--sp-6);
  min-width: 0;
}

.split__media {
  width: 100%;
  max-width: 31rem;
  min-width: 0;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-16);
  }

  .split--top {
    align-items: start;
  }
}

.split--lead .split__media {
  max-width: 25rem;
  order: 2;
}

@media (min-width: 62rem) {
  .split--lead {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .split--lead .split__media {
    order: 0;
  }
}