/* =======================================================
   LAYOUT SYSTEM
   Section base, containers, flow utilities
   Depende de: variables.css
======================================================= */

/* =======================================================
   SECTION BASE
======================================================= */

.section-base {
  position: relative;
  padding-block: var(--section-padding-desktop);
  background-color: var(--surface-primary);
  scroll-margin-top: var(--header-height);
}

.section-base--hero {
  padding-top: var(--section-padding-hero-desktop);
  padding-bottom: var(--section-padding-desktop);
}

.section-base--alt {
  background-color: var(--surface-alt);
}

.section-base--dark {
  background-color: var(--surface-dark);
  color: var(--text-inverse);
}

.section-base--tight {
  padding-block: var(--section-padding-tight-desktop);
}


/* =======================================================
   FLOW SYSTEM
======================================================= */

.flow > * + * {
  margin-top: 1.5em;
}

.flow-lg > * + * {
  margin-top: 2em;
}

.flow-sm > * + * {
  margin-top: 1em;
}


/* =======================================================
   CONTAINER SYSTEM
======================================================= */

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

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

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

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

.section-container--full {
  max-width: none;
  padding-inline: 0;
}


/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 64rem) {
  .section-base {
    padding-block: var(--section-padding-tablet);
  }

  .section-base--hero {
    padding-top: var(--section-padding-hero-tablet);
  }

  .section-base--tight {
    padding-block: var(--section-padding-tight-tablet);
  }
}

@media (max-width: 30rem) {
  .section-base {
    padding-block: var(--section-padding-mobile);
  }

  .section-base--hero {
    padding-top: var(--section-padding-hero-mobile);
  }

  .section-base--tight {
    padding-block: var(--section-padding-tight-mobile);
  }
}