/* Chrome for the Organic Divider sub-page.
 *
 * This block is the odd one out among the sub-pages. The others are a run of
 * self-contained blocks that bring their own backgrounds, so the page around
 * them is just an intro. A divider paints only the transition between two
 * colours -- the flat colour above and below it belongs to the page. So the
 * page has to supply the bands, and each band has to carry exactly the colour
 * the divider above it ends on and the divider below it starts from. Break
 * that chain anywhere and a seam appears.
 *
 * The mockup's four band colours are the four already in base.css:
 * paper, ink, accent and paper-alt.
 *
 * Sized in rem so it follows the theme scale in base.css, like the blocks.
 */

/* The title stands alone above the first wave: its intro copy lives in the
   band below, not under the heading the way the other sub-pages have it.
   With nothing under it the heading takes even space on both sides, which
   is the 46px the mockup leaves it. */
.page-intro--bare {
  padding-top: 4.2rem;
  padding-bottom: 4.2rem;
}

/* The gap this margin opens is for body copy that isn't here. */
.page-intro--bare .page-intro__title {
  margin-bottom: 0;
}

/* ===== Colour bands ===== */

.od-band {
  padding: 4.2rem 2rem;
}

.od-band__inner {
  /* Same measure as .page-intro, which is where the mockup's centred copy
     sits too. */
  max-width: 78rem;
  margin: 0 auto;
  text-align: center;
}

.od-band__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.73;
  opacity: 0.75;
}

.od-band__text + .od-band__text {
  margin-top: 1.2rem;
}

.od-band--ink {
  background: var(--eez-ink);
}

/* Reversed out of the purple, so the copy takes the page background colour
   rather than the ink it is sitting on. */
.od-band--ink .od-band__text {
  color: var(--eez-paper);
}

.od-band--accent {
  background: var(--eez-accent);
}

.od-band--paper {
  background: var(--eez-paper);
}

/* ===== Feature rows =====
 *
 * Image left, copy right, on the warm grey. Measured off the mockup: a
 * 120rem row, 5.1rem of inset, then two even columns -- the image fills its
 * own, and the copy is pushed off the fold of the row rather than sitting
 * against the image.
 */

.od-feature {
  background: var(--eez-paper-alt);
  padding: 3.4rem 0;
}

.od-feature__inner {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 5.1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Grid columns floor at min-content and the headings are long enough to
   hold a column wider than its share. */
.od-feature__inner > * {
  min-width: 0;
}

.od-feature__media {
  margin: 0;
}

.od-feature__image {
  width: 100%;
  height: auto;
  border-radius: 1.73rem;
}

.od-feature__body {
  padding-left: 7rem;
}

.od-feature__title {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.73rem;
  line-height: 1.26;
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
}

.od-feature__text {
  margin: 0;
  /* The mockup runs this copy short of the column so it breaks into even
     lines rather than reaching the edge. */
  max-width: 41rem;
  font-size: 1.6rem;
  line-height: 1.73;
  opacity: 0.75;
}

@media (max-width: 989px) {
  .od-feature__inner {
    padding: 0 2.4rem;
  }

  .od-feature__body {
    padding-left: 3.6rem;
  }
}

@media (max-width: 749px) {
  .od-band {
    padding: 3.2rem 2rem;
  }

  /* Two columns leave the image too small to read the screenshot inside it,
     so stack and let it run the width of the page. */
  .od-feature__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .od-feature__body {
    padding-left: 0;
  }

  .od-feature__text {
    max-width: none;
  }

  .od-feature__title {
    font-size: 2.4rem;
  }
}