/* Newsletter-specific composition. Proportions follow the original page:
   literal sizes below are its measured values. Navigation, bottom CTA,
   footer, color, fonts and the heading scale remain shared. */

/* --- Hero: a 520px box with an 820px copy column ------------------------- */

/* The shared interior hero height is !important, so this override is too. */
body.community-newsletters-page .hero-sub.hero-img--newsletters {
  height: auto !important;
  min-height: 520px !important;
  max-height: none !important;
  padding-block: 140px 30px !important;
}

.community-newsletters-page .hero-img--newsletters .container > .measure {
  max-width: 820px;
}

.community-newsletters-page .hero-sub.hero-img--newsletters h1 {
  margin: 20px 0 0;
  text-align: center;
}

/* Held at 18px on every width, as on the original; --type-lead drops on phones. */
.community-newsletters-page .hero-sub.hero-img--newsletters .lead {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--type-h4);
  line-height: 1.34;
  text-align: left;
}

/* --- Feature row beside the subscribe box -------------------------------- */

/* A 1040px content column. At that width the columns measure 694.8px and
   281.2px, which is the 2.47 : 1 ratio below. */
.community-newsletters-page .feature-2col {
  display: grid;
  grid-template-columns: minmax(0, 2.47fr) minmax(260px, 1fr);
  gap: var(--space-lg);
  align-items: start;
  max-width: calc(1040px + 2 * var(--page-gutter));
  padding-block: 80px 152px;
}

/* The feature row is already a section; inside this grid it is just a column. */
.community-newsletters-page .feature-2col .lg-feature {
  padding: 0;
}

.community-newsletters-page .feature-2col .lg-feature > .container {
  width: auto;
  max-width: none;
  padding: 0;
}

/* The shared community-cover bleed must stop before the subscribe box. */
.community-newsletters-page .feature-2col .lg-feature__cover {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin-inline: 0;
}

.community-newsletters-page .lg-feature__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  margin-top: 20px;
}

.community-newsletters-page .lg-feature__ident {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 20%;
}

.community-newsletters-page .lg-feature__detail {
  width: 72%;
}

/* Title-case labels here, rather than the small uppercase eyebrow. */
.community-newsletters-page .lg-feature .label {
  margin: 0;
  color: var(--dark-slate);
  font-size: var(--type-body);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}

.community-newsletters-page .lg-feature__logo {
  width: auto;
  height: 48px;
  max-width: 100%;
  max-height: 48px;
}

.community-newsletters-page .lg-feature__detail h2 {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.1;
}

.community-newsletters-page .lg-feature__detail > p {
  margin-bottom: 0;
}

.community-newsletters-page .lg-feature__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

/* --- Subscribe box -------------------------------------------------------- */

.community-newsletters-page .signup h3 {
  margin: 0 0 32px;
  font-size: 21px;
  line-height: 1.1;
}

.community-newsletters-page .signup .form {
  margin-top: 0;
}

.community-newsletters-page .signup .form__label {
  font-size: var(--type-action);
  font-weight: 500;
  letter-spacing: normal;
}

@media screen and (max-width: 991px) {
  body.community-newsletters-page .hero-sub.hero-img--newsletters {
    min-height: 420px !important;
  }

  .community-newsletters-page .feature-2col {
    grid-template-columns: 1fr;
    gap: 96px;
    padding-bottom: 96px;
  }

  .community-newsletters-page .signup {
    width: 70%;
    margin-inline: auto;
  }

}

@media screen and (max-width: 767px) {
  .community-newsletters-page .lg-feature__detail {
    width: 76%;
  }

  .community-newsletters-page .lg-feature__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

}

@media screen and (max-width: 479px) {
  .community-newsletters-page .hero-sub.hero-img--newsletters .lead {
    line-height: 1.5;
  }

  .community-newsletters-page .feature-2col {
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }

  .community-newsletters-page .lg-feature__body {
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
  }

  /* Logo and label share one row, logo first, above the title. */
  .community-newsletters-page .lg-feature__ident {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .community-newsletters-page .lg-feature__logo {
    order: -1;
  }

  .community-newsletters-page .lg-feature__detail,
  .community-newsletters-page .signup {
    width: 100%;
  }

}