/*
 * Brochure Card ("Your Guide to the …"), the look shared by Data Stream API,
 * On-Demand API and ADS-B Weather: a white card on the surface band, the
 * brochure's picture rising out of its right side. Desktop values are the
 * 1440 design's (2 Oct deck, Design 2); phones and tablets are adapted, as the
 * design has no phone version of this section.
 */

.brochure-card-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0 121px;
  background:
    radial-gradient(420px 260px at 0% 62%, rgba(0, 121, 68, 0.07), transparent 70%),
    radial-gradient(460px 300px at 100% 48%, rgba(0, 121, 68, 0.07), transparent 70%),
    var(--airnav-color-surface);
}

.brochure-card {
  position: relative;
  box-sizing: border-box;
  min-height: 281px;
  padding: 42px 46px 45px;
  border-radius: var(--airnav-radius-card);
  background: var(--airnav-color-canvas);
}

.brochure-card__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 420px;
}

.brochure-card__title {
  margin: 0;
  color: var(--airnav-color-forest);
  font: 400 48px/1.1 var(--airnav-font-display);
  letter-spacing: -0.96px;
}

.brochure-card__title .airnav-highlight {
  color: var(--airnav-color-green);
}

.brochure-card__button {
  box-sizing: border-box;
  width: 356px;
  min-height: 60px;
  margin-top: 28px;
  padding: 16px 32px;
  font-size: 18px;
  line-height: normal;
}

/* The picture's own canvas includes its shadow, so it is placed by that canvas. */
.brochure-card__picture {
  position: absolute;
  z-index: 0;
  top: -174px;
  right: -52px;
  width: 941px;
  max-width: none;
  height: auto;
  pointer-events: none;
}

@media (min-width: 701px) and (max-width: 1100px) {
  .brochure-card-section {
    padding: 96px 0;
  }

  .brochure-card {
    min-height: 240px;
    padding: 36px 32px;
  }

  .brochure-card__copy {
    max-width: 46%;
  }

  .brochure-card__title {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .brochure-card__button {
    width: 100%;
    max-width: 320px;
  }

  .brochure-card__picture {
    top: -120px;
    right: -60px;
    width: 640px;
  }
}

@media (max-width: 700px) {
  .brochure-card-section {
    padding: 64px 0 40px;
  }

  .brochure-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 32px 24px 0;
    overflow: hidden;
  }

  .brochure-card__copy {
    max-width: none;
  }

  .brochure-card__title {
    font-size: 32px;
    letter-spacing: -0.64px;
  }

  .brochure-card__button {
    width: 100%;
    margin-top: 24px;
  }

  .brochure-card__picture {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + 64px);
    margin: 8px -32px -24px;
  }
}