/* =========================================================
   HALAMAN PROFIL: Visi & Misi (pages/visi-misi.html) dan Guru & Pengajar (pages/guru.html)
   Juga memuat kepala halaman bersama (.page-hero) untuk Galeri.
   ========================================================= */
.page-hero {
  padding-block: 3.5rem;
  color: var(--white);
  background: linear-gradient(to bottom right, var(--emerald-700), var(--emerald-1000));
}
.page-hero__crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; color: var(--emerald-200); font-size: 0.875rem; }
.page-hero__crumbs a { color: var(--emerald-200); }
.page-hero__crumbs a:hover { color: var(--white); text-decoration: underline; }
.page-hero__title { max-width: 40rem; font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.15; font-weight: 800; }
.page-hero__lead { max-width: 40rem; margin-top: 0.75rem; color: var(--emerald-50); font-size: 1.0625rem; line-height: 1.7; }

.profil-section { padding-block: 3rem; }
.profil-section--alt { background: var(--slate-50); }
.profil-heading { margin-bottom: 1.5rem; color: var(--emerald-1000); font-size: 1.5rem; font-weight: 800; }
.profil-heading i { margin-right: 0.5rem; color: var(--gold-600); }

/* ---- Visi ---- */
.vision-card {
  position: relative; padding: 2rem 1.5rem; background: var(--white);
  border: 1px solid var(--slate-200); border-left: 6px solid var(--gold-500);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .vision-card { padding: 2.5rem 3rem; } }
.vision-card__quote { color: var(--emerald-1000); font-size: clamp(1.25rem, 3vw, 1.625rem); line-height: 1.55; font-weight: 700; }

/* ---- Misi ---- */
.mission-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); counter-reset: misi; }
@media (min-width: 768px) { .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.mission-card {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  color: var(--slate-700); line-height: 1.65;
}
.mission-card::before {
  counter-increment: misi; content: counter(misi);
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: var(--emerald-700); color: var(--white); border-radius: var(--radius-full); font-weight: 800;
}

/* ---- angka ringkas ---- */
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts__item { padding: 1.25rem; text-align: center; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); }
.facts__value { color: var(--emerald-700); font-size: 1.875rem; font-weight: 800; }
.facts__label { margin-top: 0.25rem; color: var(--slate-600); font-size: 0.8125rem; }

/* ---- CTA bawah ---- */
.profil-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 1.5rem; color: var(--white); background: linear-gradient(to bottom right, var(--emerald-700), var(--emerald-1000)); border-radius: var(--radius-2xl); }
.profil-cta__text { max-width: 28rem; font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.profil-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.profil-cta .btn--ghost { background: transparent; color: var(--white); border-color: var(--emerald-200); box-shadow: none; }

/* ---- Guru ---- */
.team-photo { margin-bottom: 2.5rem; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.team-photo img { width: 100%; max-height: 32rem; object-fit: cover; object-position: center 82%; }

.staff-lead { display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .staff-lead { grid-template-columns: 11rem minmax(0, 1fr); padding: 2rem; gap: 2rem; } }
.staff-lead__photo { aspect-ratio: 2 / 3; overflow: hidden; background: var(--emerald-50); border-radius: var(--radius-xl); }
.staff-lead__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-lead__role { color: var(--gold-700); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.staff-lead__name { margin-top: 0.25rem; color: var(--emerald-1000); font-size: 1.625rem; line-height: 1.25; font-weight: 800; }
.staff-lead__bio { margin-top: 0.75rem; color: var(--slate-700); line-height: 1.7; }

.staff-group { margin-top: 3rem; }
.staff-group__title { margin-bottom: 1.25rem; padding-left: 0.875rem; border-left: 4px solid var(--emerald-700); color: var(--emerald-1000); font-size: 1.25rem; font-weight: 800; }
.staff-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .staff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.staff-card { overflow: hidden; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.staff-card__photo { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--emerald-50); color: var(--emerald-700); font-size: 2.5rem; font-weight: 800; }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__body { padding: 0.875rem 1rem 1.125rem; }
.staff-card__name { color: var(--emerald-1000); font-size: 1rem; line-height: 1.35; font-weight: 800; }
.staff-card__role { margin-top: 0.25rem; color: var(--slate-600); font-size: 0.8125rem; }
.staff-card__bio { margin-top: 0.5rem; color: var(--slate-600); font-size: 0.8125rem; line-height: 1.55; }
.staff-lead__photo span, .staff-card__photo span { display: grid; place-items: center; width: 100%; height: 100%; }
.staff-empty { margin-top: 2rem; padding: 1.25rem; text-align: center; background: var(--white); border: 1px dashed var(--slate-300); border-radius: var(--radius-xl); color: var(--slate-600); }