/*
 * Image and text band: a wide image with an italic heading above it and a
 * dark panel that sits on the side opposite the image. On desktops the panel
 * is absolutely positioned behind the image and peeks out past its far edge
 * (45px in the design) while extending below it (100px in the design); the
 * panel text lives in that overhang. On phones and tablets the overlap is
 * dropped and the panel stacks below the image at full width.
 *
 * Geometry is taken from design/IMAGE TEXT LEFT|RIGHT.svg (canvas 1728px wide,
 * content 1288px): image and panel are each 96.5% of the content width and are
 * offset by the remaining 3.5%.
 *
 * Mobile-first: the unqueried rules below hold the phone/tablet cascade; the
 * @media (min-width: 992px) block at the end holds the desktop values.
 */

.ergostil-image-text {
  padding: 40px 0;
}

.ergostil-image-text .ergostil-image-text__title {
  margin: 0 0 32px;
  font-size: calc(1.0rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: #2d2d3f;
}

/* Phone and tablet: static full-width band under the image. */
.ergostil-image-text .ergostil-image-text__panel {
  padding: 24px 20px;
  background-color: #25262c;
}

.ergostil-image-text .ergostil-image-text__info {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: #b8bac2;
}

/* Desktop (>=992px): the overlap composition of the design. */
@media (min-width: 992px) {
  /* Room under the image for the 100px panel overhang. */
  .ergostil-image-text {
    padding: 40px 0 140px;
  }

  .ergostil-image-text .ergostil-image-text__stage {
    position: relative;
  }

  /* The image paints above the panel, which hides its top ~94px. */
  .ergostil-image-text .ergostil-image-text__media {
    position: relative;
    z-index: 1;
    width: 96.5%;
  }

  .ergostil-image-text--left .ergostil-image-text__media {
    margin-right: auto;
  }

  .ergostil-image-text--right .ergostil-image-text__media {
    margin-left: auto;
  }

  .ergostil-image-text .ergostil-image-text__panel {
    position: absolute;
    z-index: 0;
    top: 94px;
    bottom: -100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 96.5%;
    padding: 0 48px 20px;
  }

  .ergostil-image-text--left .ergostil-image-text__panel {
    right: 0;
  }

  .ergostil-image-text--right .ergostil-image-text__panel {
    left: 0;
  }

  /* The text hugs the panel's outer edge (the one that sticks out past the
     image). */
  .ergostil-image-text .ergostil-image-text__info {
    max-width: 70%;
  }

  .ergostil-image-text--left .ergostil-image-text__info {
    margin-left: auto;
  }

  .ergostil-image-text--right .ergostil-image-text__info {
    margin-right: auto;
  }

  /* Image-less fallback: nothing to overlap, so the panel is a plain band. */
  .ergostil-image-text .ergostil-image-text__panel--solo {
    position: static;
    width: auto;
    padding: 24px 48px;
  }
}