/* ==========================================
   MADHYA EARTH — about.css
   About Us page: mission & vision, founders
   ========================================== */

.about-page {
  background: var(--bg-light);
}

/* The shared policy hero defaults to a Blush Cream fill (see policy.css) —
   on About it sat directly above another Blush Cream section with nothing
   to tell them apart, so keep the hero on the page's neutral canvas here
   and let Blush Cream stay reserved for the mission/vision and founder
   cards below. */
.about-page .policy-hero {
  background: var(--bg-light);
}

.about-page .policy-hero__title {
  text-align: center;
}

/* ======================================
   MISSION & VISION
   ====================================== */
.mission-vision {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  color: var(--ink);
}

.mission-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.mission-vision__panel {
  background: var(--bg-cream);
  border: 1px solid var(--border-light);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-card);
}

.mission-vision__panel h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--accent-primary);
  margin-bottom: 1rem;
}

.mission-vision__panel p,
.mission-vision__list {
  font-size: 1.05rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

.mission-vision__panel p + p {
  margin-top: 1rem;
}

.mission-vision__list {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}

.mission-vision__list li + li {
  margin-top: 0.85rem;
}

.mission-vision__list li::marker {
  color: var(--accent-primary);
}

/* ======================================
   FOUNDERS
   ====================================== */
.founders { background: var(--bg-light); }

.founders__header {
  /* Wide enough for "The people behind Madhya Earth." to sit on one
     line at the desktop font size — narrower screens still wrap fine
     once the viewport itself is tighter than this. */
  max-width: 900px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.founders__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-dark);
}

.founders__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.founder-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.founder-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-light);
}

.founder-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Both source photos frame the face in the upper portion of the shot —
     bias the crop upward so it survives the 4:5 crop on any screen size. */
  object-position: center 18%;
}

.founder-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.founder-card__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
}

.founder-card__role {
  margin-top: -0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.founder-card__bio {
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ======================================
   RESPONSIVE
   ====================================== */
@media (max-width: 1023px) {
  .mission-vision__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .founders__grid {
    grid-template-columns: 1fr;
  }
}