/* ============================================================
   IDF Bangladesh — About page
   ============================================================ */

.about-story p + p { margin-top: var(--sp-4); }
.about-story p { font-size: var(--fs-500); color: var(--ink-70); }

/* Mission / Vision / Goal */
.mvg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.mvg-card { background: var(--white); border: 1px solid var(--forest-08); border-top: 3px solid var(--gold-rule); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.mvg-card h3 { font-size: var(--fs-600); }
.mvg-card p { margin-top: var(--sp-3); color: var(--ink-70); }

/* Values */
.values-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.values-list li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; color: var(--ink); }
.values-list svg { flex: none; color: var(--saffron); }

/* Leadership */
.team-subhead { margin: var(--sp-6) 0 var(--sp-4); font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-rule); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.ec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.team-card, .ec-card { display: flex; align-items: center; gap: var(--sp-4); background: var(--white); border: 1px solid var(--forest-08); border-radius: var(--r-lg); padding: var(--sp-5); }
.ec-card { gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); }
.team-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--forest); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.team-avatar--sm { width: 44px; height: 44px; font-size: .95rem; }
.team-photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid var(--white); box-shadow: 0 2px 12px rgba(19,53,40,.15); background: var(--cream-d); }
.team-photo--sm { width: 56px; height: 56px; border-width: 2px; }
.team-name { display: block; color: var(--forest); font-family: var(--font-display); font-size: 1.02rem; }
.team-role { display: block; color: var(--ink-70); font-size: .9rem; margin-top: 2px; }
.team-exp { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; }

/* Partners — logo grid (gallery-style) */
.partner-logo-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.partner-logo-card { display: flex; align-items: center; justify-content: center; height: 80px; background: var(--white); border: 1px solid var(--forest-08); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.partner-logo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.partner-logo-card img { max-height: 52px; width: auto; object-fit: contain; }

/* Legacy partner pill list (kept for compatibility) */
.partner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.partner-list li { background: var(--cream-d); border: 1px solid var(--forest-08); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); font-size: .9rem; font-weight: 500; color: var(--forest); }

/* Legal (forest) */
.legal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.legal-card { background: rgba(247,243,237,.05); border: 1px solid rgba(247,243,237,.12); border-radius: var(--r-lg); padding: var(--sp-6); }
.legal-card h3 { color: var(--white); font-size: var(--fs-600); margin-bottom: var(--sp-4); }
.legal-card p, .legal-card li { color: var(--cream-70); font-size: .95rem; }
.legal-card ul { margin: var(--sp-3) 0 0; padding-left: 1.1em; display: grid; gap: var(--sp-2); }
.legal-card dl { display: grid; gap: 0; margin: 0; }
.legal-card dl > div { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid rgba(247,243,237,.12); }
.legal-card dl > div:last-child { border-bottom: 0; }
.legal-card dt { color: var(--cream-70); font-size: .9rem; }
.legal-card dd { margin: 0; text-align: right; }
.legal-card dd b { display: block; color: var(--white); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.legal-card dd span { color: var(--gold-rule); font-size: .78rem; }

/* SDG map table */
.sdg-map { overflow-x: auto; }
.sdg-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.sdg-table th, .sdg-table td { text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--forest-08); vertical-align: middle; }
.sdg-table thead th { font-family: var(--font-body); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.sdg-table tbody th { font-family: var(--font-display); font-weight: 600; color: var(--forest); font-size: 1rem; }

@media (max-width: 900px) {
  .mvg-grid, .legal-grid { grid-template-columns: 1fr; }
  .team-grid, .ec-grid, .values-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .team-grid, .ec-grid, .values-list { grid-template-columns: 1fr; }
  .partner-logo-grid { gap: var(--sp-3); }
  .partner-logo-card { height: 64px; padding: var(--sp-2) var(--sp-4); }
  .partner-logo-card img { max-height: 40px; }
}

/* ---------- Story with image ---------- */
.about-story__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: center; }
.about-story__text p { font-size: var(--fs-500); color: var(--ink-70); }
.about-story__text p + p { margin-top: var(--sp-4); }
.about-facts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.about-facts li { display: flex; flex-direction: column; }
.about-facts strong { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-700); color: var(--forest); line-height: 1; }
.about-facts span { margin-top: 4px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.about-story__media { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; }
.about-story__media img { width: 100%; height: 100%; object-fit: cover; }
.about-story__badge { position: absolute; left: var(--sp-4); bottom: var(--sp-4); background: var(--white); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-md); }
.about-story__badge strong { display: block; font-family: var(--font-display); color: var(--forest); }
.about-story__badge span { font-size: .8rem; color: var(--muted); }

/* ---------- Mission / Vision / Goal icons ---------- */
.mvg-card__icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--forest-04); color: var(--forest); margin-bottom: var(--sp-4); }
.mvg-card__icon svg { width: 28px; height: 28px; }

/* ---------- Values as chips with icon badge ---------- */
.values-list li { background: var(--white); border: 1px solid var(--forest-08); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.values-list svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--forest); color: var(--cream); }

/* ---------- Aspiration band ---------- */
.aspiration-band { position: relative; text-align: center; color: var(--cream); padding-block: clamp(var(--sp-8), 9vw, var(--sp-10)); background-image: linear-gradient(rgba(19,53,40,.84), rgba(19,53,40,.9)), url('../../img/abtwork.jpg'); background-size: cover; background-position: center; background-attachment: fixed; }
.aspiration-band__inner { max-width: 840px; }
.aspiration-band__mark { color: var(--gold-rule); opacity: .85; }
.aspiration-band__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.9vw, 2.15rem); line-height: 1.35; color: var(--white); margin: var(--sp-4) auto 0; }
.aspiration-band__by { display: inline-block; margin-top: var(--sp-5); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-rule); }

/* ---------- Legal card icons ---------- */
.legal-card__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(247,243,237,.08); border: 1px solid rgba(247,243,237,.16); color: var(--gold-rule); margin-bottom: var(--sp-4); }
.legal-card__icon svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .about-story__grid { grid-template-columns: 1fr; }
  .about-story__media { order: -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
  .aspiration-band { background-attachment: scroll; }
}