/* ==========================================================================
   Layout: containers, sections, grids
   12 columns of 110px + 20px gutters = 1540px max container.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.container--large {
  max-width: var(--container-large);
}

.container--medium {
  max-width: var(--container-medium);
}

.container--small {
  max-width: var(--container-small);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  padding-inline: var(--page-pad);
}

.section--flush {
  padding-inline: 0;
}

.section--tight {
  padding-block: calc(var(--section-pad) * 0.5);
}

.section--screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: var(--space-7);
}

/* Section header: eyebrow / title / description / actions */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--container-medium);
  margin-bottom: var(--space-8);
}

.section-head__description {
  max-width: 630px;
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head--center .section-head__description {
  max-width: 460px;
}

.section-head__actions {
  margin-top: var(--space-4);
}

/* Grids */

.grid {
  display: grid;
  gap: var(--space-8) var(--gutter);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Split layout: media + text, form + info (5/12 + 7/12) */

.split {
  display: grid;
  gap: var(--space-7) var(--gutter);
  align-items: center;
}

@media (min-width: 1025px) {
  .split {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
  }

  .split--5-7 {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: start;
  }

  .split--7-5 {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
    align-items: start;
  }

  .split--media-left > .split__media {
    order: -1;
  }
}

/* Page top spacing for pages whose first section is not a full-bleed hero */

.page-top {
  padding-top: calc(var(--header-h) + var(--space-5));
}