/* Container, bands, header, hero and section grids. Breakpoints: 37.5em (600 px),
   60em (960 px, desktop navigation), 80em (1280 px). */

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

.band {
  padding-block: var(--band-pad);
}

/* Inner-page sections: shorter bands, their content is shorter than the home's. */
.band--compact {
  padding-block: clamp(var(--sp-12), 2rem + 3vw, 5rem);
}

.band--veil {
  background: var(--c-veil);
}

.band--red {
  background: var(--c-red);
  color: var(--c-white);
}

.section-title {
  font-size: var(--fs-section);
  max-width: 20ch;
}

/* Header ---------------------------------------------------------------------------- */

.site-header {
  position: relative;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-rule);
}

/* Sticky only once main.js has set up the drawer (html.nav-ready): without it the
   navigation stays a wrapped list under the logo, and a sticky header would cover too
   much of a phone screen. */
.nav-ready .site-header {
  position: sticky;
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

.brand {
  display: block;
  margin-right: auto;
  border-radius: 50%;
}

.site-nav {
  flex-basis: 100%;
  order: 4;
}

/* The mobile drawer hides the list only when its toggle works (see main.js). */
.nav-ready .site-nav {
  display: none;
}

.nav-ready .site-nav.is-open {
  display: block;
}

@media (min-width: 60em) {
  .site-nav,
  .nav-ready .site-nav {
    display: block;
    flex-basis: auto;
    order: 0;
  }
}

/* Hero ------------------------------------------------------------------------------ */

.hero {
  overflow: clip;
  padding-block: var(--sp-8) var(--band-pad);
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: var(--sp-6);
}

.hero__text {
  display: grid;
  gap: var(--sp-6);
  justify-items: start;
}

/* The disc carries the wordmark, so it stays entirely inside the viewport at every
   width (round 1 let it bleed past the right edge). */
.fetta {
  order: -1;
  justify-self: end;
  width: min(64vw, 16rem);
}

@media (min-width: 37.5em) {
  .hero {
    padding-block: var(--sp-12) var(--band-pad);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .fetta {
    order: 0;
    width: min(42vw, 34rem);
    margin-right: calc(-1 * var(--gutter));
  }
}

@media (min-width: 60em) {
  .hero {
    padding-block: var(--sp-16) var(--band-pad);
  }

  .hero__inner {
    min-height: min(70vh, 40rem);
  }

  .fetta {
    width: min(40vw, 34rem);
  }
}

/* Section grids --------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.facts {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--c-rule);
}

.sheet-layout,
.faq-layout,
.video-layout,
.newsletter,
.contacts {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 37.5em) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-12);
  }

  .sheet-layout,
  .faq-layout,
  .contacts {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--sp-12);
  }

  .video-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--sp-12);
  }

  .newsletter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--sp-12);
  }
}

/* Footer ---------------------------------------------------------------------------- */

.site-footer {
  background: var(--c-red-deep);
  color: var(--c-white);
  padding-block: var(--sp-16);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 60em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
    gap: var(--sp-12);
  }
}

/* Inner pages ------------------------------------------------------------------------ */

.page-header {
  padding-block: var(--sp-12) var(--sp-8);
  overflow: clip;
}

.page-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
}

.page-header__text {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

.prose-layout {
  display: grid;
  gap: var(--sp-6);
}

.video-single__layout {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 60em) {
  .page-header {
    padding-block: var(--sp-16) var(--sp-12);
  }

  .prose-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--sp-12);
  }

  .video-single__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--sp-12);
  }
}

/* A white band right under the page header continues it instead of adding a full gap. */
.page-header + .band:not(.band--veil):not(.band--red) {
  padding-top: 0;
}