/* ===== ABOUT PAGE — Hero + Intro ===== */

/* ---------- PAGE WRAPPER ---------- */
/* The breadcrumb-over-hero treatment (page pulled up under the crumb, white
   crumb text, mobile top clearance on the hero title) comes from the shared
   .hero-overlay-page class in components/breadcumb/index.css, opted into on the
   wrapper in AboutUs.cshtml. About used to carry its own copy of those rules,
   written before the shared class existed; only this containment is
   About-specific and stays here. */
.about-us-page {
  /* Contain the Member Owned Cooperative card's scroll-in offset. It starts
     translated 56px to the right of its final position, which makes the page
     scrollable sideways until it comes into view. Same containment .home-page
     carries; clip rather than hidden so overflow-y stays visible and this does
     not become its own scroll container. */
  overflow-x: clip;
}

/* Slightly tighter bottom padding on the Member Owned Cooperative section than
   the shared .about-coop default, closing the gap down to the store story
   below (which adds its own 40px on top).

   Scoped to About rather than trimming .about-coop itself: the home page runs
   the same component, and the spacing around it there was tuned against the
   gray band that follows it. */
.about-us-page .about-coop {
  padding-bottom: 32px;
}

/* Same treatment under The Point S Promise, which the services section follows.
   Mobile only, and About only: .promise is shared with the home page, where its
   bottom padding is tuned against the Trusted Brands section below it. Bounded
   by max-width so it cannot outrank .promise's own 768px rule on desktop, which
   it would otherwise win on specificity. */
@media (max-width: 767px) {
  .about-us-page .promise {
    /* No top padding: the shop band above ends on dark navy and the Promise
       photo below already runs full-bleed and flat on mobile, so dropping the
       gap lets the two meet edge to edge instead of separating them with a strip
       of section gray. Desktop keeps its padding, where the photo is inset and
       rounded and needs the breathing room. */
    padding-top: 0;
    padding-bottom: 28px;
  }
}

@media (min-width: 768px) {
  .about-us-page .about-coop {
    padding-bottom: 64px;
  }
}

/* Cap the hero title at 4rem instead of the lg tier's 4.5rem top step, so it
   does not tower over the home hero (flat 3.5rem from 576px up). The rest of
   the lg ladder is unchanged, so this only flattens the ≥1200px step.

   Scoped here rather than changing the lg tier in main.css: lg is a shared tier
   and About is only its first consumer. Ties with .page-hero--lg
   .page-hero__overlay h1 on specificity, and page CSS loads after main.css, so
   this wins on source order. */
@media (min-width: 1200px) {
  .about-us-page .page-hero__overlay h1 {
    font-size: 4rem;
  }
}

/* ---------- STORE IDENTITY (per-store City/State + Owner line) ---------- */
.about-store-meta {
  padding: 40px 20px 8px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.about-store-meta__location {
  font-family: Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1d4288;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.about-store-meta__owner {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  font-style: italic;
}

/* When .about-store-meta is present, tighten the .about-intro top padding so the
   total gap between perks band and the quote feels intentional rather than gappy. */
.about-store-meta + .about-intro {
  padding-top: 16px;
}

/* ---------- INTRO SECTION ---------- */
.about-intro {
  padding: 40px 20px 0;
}

.about-intro__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.about-intro__quote-mark {
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(29, 66, 136, 0.12);
  margin-bottom: -20px;
}

.about-intro__quote {
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #444;
  font-style: italic;
  margin: 0;
  padding: 0;
  border: none;
}

.about-intro__accent {
  width: 60px;
  height: 3px;
  background: var(--brand-secondary);
  margin: 24px auto 0;
  border-radius: 2px;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 768px) {
  .about-store-meta {
    padding: 56px 40px 12px;
  }

  .about-store-meta + .about-intro {
    padding-top: 24px;
  }

  .about-intro {
    padding: 56px 40px 0;
  }
}