/* =============================================================
   about.css  — Page-specific styles for about.html
   Requires: main.css  (loaded first)
   Only contains rules that differ from or extend main.css
   ============================================================= */

/* ── ABOUT INSTITUTE IMAGE BLOCK ──────────────────────────── */
/*  main.css covers .about-image-placeholder; this keeps the   */
/*  .img-placeholder variant used only on the About page       */

.about-inst-image {
  position: relative;
}

/* Taller image area than the general .about-image in main.css */
.about-inst-image .img-placeholder {
  height: 520px;
}

/* Badge positioned on image — main.css has .about-badge (circle),
   about page uses a rectangular .inst-badge instead */
.inst-badge {
  position: absolute;
  bottom: -24px;
  right: -20px;
  background: var(--gold);
  color: var(--navy-dark);
  padding: 20px 24px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(200,164,77,0.35);
}
.inst-badge .num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.inst-badge .lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}


/* ── INSTITUTE STATS ROW ──────────────────────────────────── */
/*  main.css has generic .stat-item (navy bg, centered).       */
/*  About page uses a lighter offwhite variant with navy text  */

.inst-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.inst-stats .stat-item {
  text-align: center;
  padding: 18px 10px;
  background: var(--offwhite);
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

.inst-stats .stat-item .snum {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  display: block;
}

.inst-stats .stat-item .slbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
  display: block;
  font-family: 'Jost', sans-serif;
}


/* ── ABOUT INSTITUTE TEXT ─────────────────────────────────── */
.about-inst-text p {
  margin-bottom: 18px;
}

.about-inst-text p:last-of-type {
  margin-bottom: 0;
}


/* ── STATEMENT OF FAITH INTRO ─────────────────────────────── */
/*  Extra centered intro paragraph above the accordion        */
.faith-intro {
  font-family: 'Crimson Text', serif;
  font-size: 1.15rem;
  color: #4B5563;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.8;
}

/* Accordion on this page is constrained to 860px max-width */
.faith-section .accordion {
  max-width: 860px;
  margin: 48px auto 0;
}


/* ── FACULTY SECTION ──────────────────────────────────────── */
/*  These are About-page-specific additions not in main.css   */

.faculty-desc {
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  color: #4B5563;
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.faculty-responsibilities {
  background: var(--white);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 24px 28px;
  max-width: 760px;
  margin: 0 auto 56px;
}

.faculty-responsibilities h5 {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.resp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.resp-list li i {
  color: var(--gold);
  font-size: 0.75rem;
  margin-top: 5px;
  flex-shrink: 0;
}

.resp-list li span {
  font-family: 'Crimson Text', serif;
  font-size: 1.05rem;
  color: #4B5563;
}


/* ── FACULTY CARD ROLE ────────────────────────────────────── */
/*  main.css stops at .faculty-body; this adds the role tag   */
.faculty-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: 'Jost', sans-serif;
}

.faculty-bio {
  font-size: 0.98rem;
  color: #6B7280;
  line-height: 1.65;
  margin: 0;
  font-family: 'Crimson Text', serif;
}


/* ── AFFILIATION SECTION (about.html variant) ─────────────── */
/*  On the About page the affiliation section uses .logo-partner
    cards with an icon + text layout. This is shared with the
    global affiliation.html page; the rules below are kept here
    for about.html self-contained use.                         */

.affiliation-logos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logo-partner {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,164,77,0.2);
  border-radius: 6px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
}

.logo-partner:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(200,164,77,0.5);
}

.partner-icon {
  width: 52px;
  height: 52px;
  background: var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.partner-icon i {
  color: var(--navy-dark);
  font-size: 1.4rem;
}

.partner-info h4 {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.partner-info p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.4;
}


/* ── MISSION / VISION CARD DECORATIVE ────────────────────── */
/*  Extra ::after circle on the vision card                   */
.mv-card.vision::after {
  content: '◯';
  position: absolute;
  right: -30px;
  bottom: -30px;
  font-size: 12rem;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
}


/* ── CTA SECTION — about variant ─────────────────────────── */
/*  main.css has .cta-section with 22rem cross. About page    */
/*  uses 20rem and a different max-width inner wrap.          */
.about-cta.cta-section::before {
  font-size: 20rem;
}

.about-cta .cta-inner {
  max-width: 640px;
}

.about-cta .cta-section p {
  max-width: 520px;
  margin: 0 auto 36px;
  font-size: 1.15rem;
}


/* ── RESPONSIVE OVERRIDES ─────────────────────────────────── */
@media (max-width: 1024px) {
  .inst-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .faculty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about-inst-image .img-placeholder {
    height: 360px;
  }

  .inst-badge {
    bottom: -16px;
    right: -8px;
    padding: 14px 18px;
  }

  .inst-badge .num {
    font-size: 1.5rem;
  }

  .inst-stats {
    grid-template-columns: 1fr 1fr;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
  }

  .faculty-responsibilities {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .inst-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-inst-image .img-placeholder {
    height: 260px;
  }
}