// Section layout, headings, feature images, map, contact, footer

.section {
  padding-top: 72px;
  padding-bottom: 72px;

  @media (max-width: $s-break) { padding-top: 48px; padding-bottom: 48px; }
}

.eyebrow {
  display: inline-block;
  @include Libre;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: $gold;
  margin-bottom: 10px;

  &.light { color: #d8c9a3; }
}

.section-title {
  font-size: 36px;
  margin: 0 0 16px;
  line-height: 1.2;

  @media (max-width: $s-break) { font-size: 28px; }
}

.section-subtitle {
  color: $gray;
  font-style: italic;
  margin-bottom: 20px;
}

.section-lead {
  max-width: 780px;
  margin: 0 auto 8px;
  color: $gray;
  font-size: 17px;
}

.section-divider {
  border: 0;
  border-top: 1px solid rgba(171, 153, 109, 0.35);
  margin: 0;
}

.feature-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);

  @media (max-width: $s-break) { height: 280px; }
}

// Community map
.map-frame {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(171, 153, 109, 0.3);
  max-width: 900px;
  margin: 0 auto;
}
.map-img { display: block; width: 100%; }

// Contact
.contact-section {
  background: $black;
  color: $white;

  .section-title { color: $white; }
  .section-lead { color: #cfcabd; }
}
.contact-btn {
  margin-top: 18px;
  background: $gold;
  border-color: $gold;
  color: $white;
  @include Libre;
  padding: 0.7rem 2rem;

  &:hover { background: darken($gold, 10%); border-color: darken($gold, 10%); color: $white; }
}

// Footer
.site-footer {
  background: $cream;
  text-align: center;
  padding: 44px 0;
  border-top: 1px solid rgba(171, 153, 109, 0.3);

  .footer-logo { height: 70px; margin-bottom: 14px; }
  .footer-tagline { @include Libre; color: $gray; margin-bottom: 6px; }
  .footer-copy { color: $light-gray; font-size: 13px; margin: 0; }
}