/* Project Block */

.project-block {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 48px;
  background: var(--white);
  color: var(--black);
}

.project-block--light {
  background: var(--light-blue);
}

/* The column carries the section's top spacing so the title never touches
   the section above it, whatever that section's own padding is. */
.project-block__content {
  padding-top: 32px;
}

/* Title with the decorative corner brackets
   ------------------------------------------------------------------ */

.project-block__title-frame {
  position: relative;
  display: inline-block;
  margin-bottom: 36px;
  padding: 16px 26px;
}

/*
 * The bracket strokes match the stem width of the title's letters: Jura Bold
 * measures about 3px at the 35px size and 4px at the 50px desktop size.
 */
.project-block__title-frame--bracketed {
  --project-block-bracket: 3px;
}

.project-block__title-frame--bracketed::before,
.project-block__title-frame--bracketed::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-style: solid;
  border-color: var(--blue);
  border-width: 0;
}

.project-block__title-frame--bracketed::before {
  top: 0;
  left: 0;
  border-top-width: var(--project-block-bracket);
  border-left-width: var(--project-block-bracket);
}

.project-block__title-frame--bracketed::after {
  right: 0;
  bottom: 0;
  border-right-width: var(--project-block-bracket);
  border-bottom-width: var(--project-block-bracket);
}

/*
 * Reuses .larger-heading (35px) but in Jura Bold, as in the Figma artwork.
 * That weight is already loaded by the theme for .button. The wider tracking
 * keeps the bold letterforms as open as the artwork.
 */
.project-block__title.larger-heading {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
}

.project-block__title-line {
  display: block;
}

/* The design steps each line after the first to the right. */
.project-block__title-line + .project-block__title-line {
  margin-left: 1.1em;
}

/* Copy blocks
   ------------------------------------------------------------------ */

.project-block__item + .project-block__item {
  margin-top: 28px;
}

/* Jura Bold, the weight the theme already loads for its buttons. */
.project-block__subheading {
  margin: 0 0 10px;
  font-family: 'Jura', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.project-block__copy {
  max-width: 32em;
}

.project-block__copy p {
  margin: 0 0 1em;
}

.project-block__copy > :last-child {
  margin-bottom: 0;
}

.project-block__copy a {
  text-decoration: underline;
}

.project-block__copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-block__copy li {
  position: relative;
  padding-left: 18px;
}

.project-block__copy li + li {
  margin-top: 12px;
}

.project-block__copy li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--black);
}

/* Filled variant of the theme's .button. */
.project-block__link {
  margin-top: 42px;
}

/* Image
   ------------------------------------------------------------------ */

.project-block__media {
  margin-top: 40px;
}

.project-block__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Medium and up */
@media print, screen and (min-width: 50em) {
  .project-block {
    --project-block-image-overshoot: clamp(24px, 3vw, 40px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .project-block .grid-x {
    align-items: center;
  }

  .project-block__content {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .project-block--has-image .project-block__media {
    margin-top: 0;
  }

  .project-block__image {
    width: calc(100% + 0.9375rem + max(0px, (100vw - 78rem) / 2) + var(--project-block-image-overshoot));
  }

  .project-block--image-left .project-block__content {
    order: 2;
  }

  .project-block--image-left .project-block__media {
    order: 1;
  }

  .project-block--image-left .project-block__image {
    margin-left: calc(-0.9375rem - max(0px, (100vw - 78rem) / 2) - var(--project-block-image-overshoot));
  }

  .project-block__title-frame {
    margin-bottom: 60px;
  }

  .project-block__item + .project-block__item {
    margin-top: 42px;
  }

  /* Copy steps up one size on larger screens, as the theme's own copy does:
     labels 16px to 18px, paragraphs and bullets 16px to 18px. */
  .project-block__subheading {
    font-size: 18px;
  }
}

/* Large and up */
@media print, screen and (min-width: 64em) {
  .project-block__content {
    padding-top: 42px;
    padding-bottom: 150px;
  }

  /* The 50px the theme already uses for headings of this class. */
  .project-block__title.larger-heading {
    font-size: 50px;
  }

  .project-block__title-frame {
    padding: 18px 30px;
  }

  .project-block__title-frame--bracketed {
    --project-block-bracket: 4px;
  }

  .project-block__title-frame--bracketed::before,
  .project-block__title-frame--bracketed::after {
    width: 28px;
    height: 28px;
  }
}

@media screen and (min-width: 1700px) {
  .project-block__image {
    width: 140%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-block__link {
    transition: none;
  }
}