/* About Us page (Home/AboutUs.cshtml): hero banner over the CMS "AboutUs"
   page image, the CMS body copy, an optional "goals/mission" row (reuses
   .media-row-list from home.css) and an optional catalog-download CTA. */

/* Hero — only gets the photo treatment when the CMS page has an image
   (.about-hero is added conditionally by the view); otherwise it falls back
   to plain .blog-hero (article.css) so there's never a bare gray band. */
.about-hero {
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.about-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 12, 0.5), rgba(20, 17, 12, 0.78));
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
.about-hero .blog-breadcrumb {
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
}
.about-hero .blog-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
}
.about-hero .blog-breadcrumb a:hover {
  color: var(--color-gold);
}
.about-hero .blog-breadcrumb [aria-current="page"] {
  color: #fff;
}
.about-hero .blog-hero__title {
  color: #fff;
  margin-inline: auto;
}

/* Body copy — plain content-detail styling (article.css), just without the
   title/hero/meta blocks that page also defines (About Us puts those in the
   hero above instead). */
.about-body {
  padding-block-start: var(--space-lg);
}

/* Goals/mission row wraps the shared .media-row-list in a plain section so
   it gets the page's standard block spacing. */
.about-goals {
  border-block-start: 1px solid var(--color-border);
}

/* Catalog download CTA */
.about-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg);
  text-align: center;
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
}
@media (min-width: 768px) {
  .about-catalog {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}
.about-catalog__title {
  margin-block-end: var(--space-2xs);
}
.about-catalog__body {
  color: var(--color-text-muted);
}
.about-catalog__cta {
  flex: 0 0 auto;
}