/* web/css/about.css */

/* ---- Section wrapper ---- */
#about-us {
  --about-accent: #0d6efd;          /* tweak this to match your theme */
  --about-title-color: #0d6efd;
  --about-text-color: #000;      /* muted text */
  --about-radius: 1rem;             /* card rounding */
  --about-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  --about-gap: 1.2rem;
  --about-max-text: 72ch;           /* readable line length */
}

/* Title + divider */
/* #about-us .section-title,
#about-us h2 {
  color: var(--about-title-color);
  letter-spacing: .2px;
  margin-bottom: .5rem !important;
} */

#about-us .section-divider,
#about-us hr {
  width: 80px !important;
  height: 3px;
  background: var(--about-accent);
  border: 0;
  border-radius: 2px;
  margin: .5rem auto 1.75rem !important;
}

/* Paragraph */
#about-us p.lead {
  color: var(--about-text-color);
  margin: 0 auto 2.5rem;
  max-width: 100ch;     /* ⬅️ Widened from 72ch to 100ch */
  line-height: 1.9;
  font-size: 1.10rem;
  text-align: center;
  font-weight: 400;
}

/* Optional helper since Bootstrap dropped .text-justify */
.text-justify {
  text-align: center;
  text-justify: inter-word;
}

/* ---- Image grid ---- */
#about-us .row.g-4,
#about-us .row.gx-4,
#about-us .row.gy-4 {
  --bs-gutter-x: var(--about-gap);
  --bs-gutter-y: var(--about-gap);
}

/* Cards */
#about-us .card {
  border: 0;
  border-radius: var(--about-radius);
  box-shadow: var(--about-shadow);
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

#about-us .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
}

/* Images */
#about-us .card-img-top {
  display: block;
  width: 100%;
  height: 240px;                    /* uniform height; adjust as you like */
  object-fit: cover;                /* crop nicely while keeping focus */
}

/* Spacing helpers inside the section */
#about-us .mb-5 { margin-bottom: 2rem !important; }

/* ---- Responsive tweaks ---- */
@media (max-width: 991.98px) {
  #about-us .card-img-top { height: 220px; }
  #about-us p.lead { margin-bottom: 1.5rem; }
}

@media (max-width: 767.98px) {
  #about-us { --about-gap: 1rem; }
  #about-us .card-img-top { height: 200px; }
  #about-us h2 { font-size: 1.75rem; }
}

/* ---- Accessibility / motion ---- */
@media (prefers-reduced-motion: reduce) {
  #about-us .card,
  #about-us .card:hover {
    transition: none;
    transform: none;
  }
}

/* ---- Optional dark-mode polish (if you enable dark theme sitewide) ---- */
@media (prefers-color-scheme: dark) {
  #about-us {
    --about-text-color: #c7c7c7;
  }
  #about-us .card {
    background: #0f1113;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
}