/*
 * ABOUT PAGE — layout additions (v1.0)
 * File: /wp-content/themes/ajay-binani-v3/page-about.css
 * Loaded only by page-about.php. Base About styles stay in style.css.
 */

/* ── 4:5 IMAGE BOX ────────────────────────────── */
.about-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-lavender, #f0edf8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-media__placeholder {
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

/* ── THE PERSON: text left · image right (centred to text) ── */
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: center;
}
.person .about-bio { margin-bottom: 1.15em; }
.person .about-bio:last-child { margin-bottom: 0; }
.person .about-bio strong { font-weight: 600; color: var(--color-text); }

/* ── ORGANISATIONS ────────────────────────────── */
/* Desktop: content left · Founded/Team box on top right, image centred below it */
.org-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
}
.org-block__main { min-width: 0; }
.org-block__head { margin-bottom: 20px; }
.org-block__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.org-block__aside .org-block__meta { align-self: stretch; }
.org-block__media {
  flex: 1;
  display: flex;
  align-items: center;
}

/* ── CREDENTIALS ──────────────────────────────── */
.credential-item__inst { color: #B4491F; }

/* ── TABLET / MOBILE ──────────────────────────── */
@media (max-width: 760px) {
  /* The Person: image on top, then text */
  .person { grid-template-columns: 1fr; gap: 32px; }
  .person__media { order: -1; max-width: 420px; }

  /* Organisations: image → number/name/type → Founded/Team → main content → Know more */
  .org-block { display: flex; flex-direction: column; gap: 0; }
  .org-block__main,
  .org-block__aside { display: contents; }

  .org-block__media { order: 1; margin-bottom: 24px; max-width: 420px; width: 100%; }
  .org-block__head  { order: 2; margin-bottom: 16px; }
  .org-block__aside .org-block__meta { order: 3; margin-bottom: 20px; align-self: flex-start; }
  .org-block__body  { order: 4; }
  .org-block__cta   { order: 5; align-self: flex-start; }
}