/* ==========================================================================
   ABOUT.CSS — Galpan Gadh Sweets — About Us page only
   Loaded only on the About Us page, on top of main.css.
   ========================================================================== */
@import url('main.css');

/* ---------- about hero banner ---------- */
.about-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
}

.about-hero .container {
  max-width: 760px;
  text-align: center;
}

.about-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  color: var(--ink);
  margin-top: .7rem;
}

.about-hero .lede {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 56ch;
  margin-inline: auto;
}

.about-hero .eyebrow {
  justify-content: center;
}

/* ---------- story section (reuses .split-grid/.split-copy from main.css) ---------- */
.about-story-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
}

.about-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-body p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 56ch;
}

.about-story-body p+p {
  margin-top: 1rem;
}

/* ---------- values (reuses .info-grid/.info-card from main.css) ---------- */

/* ---------- CTA band ---------- */
.about-cta {
  border-radius: 20px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
  background: linear-gradient(165deg, var(--maroon-800), var(--maroon-900));
  box-shadow: var(--shadow-lg);
  color: var(--cream-100);
}

.about-cta h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--cream-100);
}

.about-cta p {
  margin-top: .7rem;
  color: var(--cream-200);
  max-width: 52ch;
  margin-inline: auto;
}

.about-cta .btn {
  margin-top: 1.6rem;
}

/* ---------- about responsive ---------- */
@media (max-width: 900px) {
  .about-story-image {
    aspect-ratio: 16/9;
  }

  .split-copy p {
    max-width: 100%;
  }
}