/* Keluarga Tentang kami. Kebanyakan gaya datang dari komponen bersama (about-head, facts, expertise,
   paths, cta-band, logo-panel, address). Fail ini hanya untuk kepingan khusus keluarga ini. */

/* Hab: empat pautan "Ketahui lanjut" */
.paths--four {
  grid-template-columns: repeat(4, 1fr);
}
.paths--four .path {
  padding: var(--s-6);
}

/* ---------- Visi: teks di atas foto ---------- */
.ab-vision {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 28rem;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.5);
  color: #fff;
}
.ab-vision > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-vision::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(16 42 34 / 0.94), rgb(16 42 34 / 0.6) 45%, rgb(16 42 34 / 0) 80%);
}
.ab-vision__text {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding: var(--s-8);
}
.ab-vision .h-sub {
  margin-bottom: var(--s-3);
  font-size: var(--text-sm);
  color: var(--brass-300);
}
.ab-vision__statement {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
}
.ab-vision__text > p:not(.ab-vision__statement) {
  margin-top: var(--s-3);
  color: #d7e4de;
}

/* Misi: nombor + tajuk + teks, dua lajur */
#misi-title {
  margin-bottom: var(--s-8);
}
.missions span {
  flex: none;
  padding-top: 0.125rem;
}

/* ---------- Carta organisasi: pengerusi di atas, pasukan di bawah, disambung garis ---------- */
.org-chart {
  display: grid;
  justify-items: center;
}
.org-chart__lead {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  width: min(100%, 15rem);
  text-align: center;
}
.org-chart__team {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  width: 100%;
  margin-top: var(--s-12);
  padding-top: var(--s-8);
}
/* Garis: menegak dari pengerusi, kemudian melintang di atas pasukan */
.org-chart__team::before,
.org-chart__team::after {
  content: "";
  position: absolute;
  background: var(--line);
}
.org-chart__team::before {
  top: calc(-1 * var(--s-12));
  left: 50%;
  width: 1px;
  height: calc(var(--s-12) + 1px);
}
.org-chart__team::after {
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
}
.org-chart__team .ab-person {
  position: relative;
}
.org-chart__team .ab-person::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-8));
  left: 50%;
  width: 1px;
  height: var(--s-8);
  background: var(--line);
}
.ab-person {
  margin: 0;
}
.ab-person__img {
  overflow: hidden;
  background: var(--mineral-100);
  border-radius: var(--radius);
}
.ab-person img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.ab-person figcaption {
  display: grid;
  gap: var(--s-1);
  padding-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.ab-person figcaption strong {
  font-size: var(--text-base);
  color: var(--ink);
}
.ab-person--lead figcaption {
  justify-items: center;
}

/* Kerjasama: pautan di bawah logo */
.logo-panel > .link {
  display: inline-block;
  margin-top: var(--s-6);
}

/* Teks kecil dalam jalur gelap */
.cta-band p {
  margin-top: var(--s-2);
  color: #d7e4de;
}

/* ---------- Tablet & telefon ---------- */
@media (max-width: 63.99rem) {
  .paths--four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.99rem) {
  .paths--four {
    grid-template-columns: 1fr;
  }
  .ab-vision {
    min-height: 24rem;
  }
  .ab-vision__text {
    padding: var(--s-6);
  }
  .org-chart__team {
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--s-8);
    padding-top: 0;
  }
  .org-chart__team::before,
  .org-chart__team::after,
  .org-chart__team .ab-person::before {
    display: none;
  }
}

/* Tajuk hab sama saiz dengan tajuk halaman lain (bukan versi kecil about-head--media) */
.about-head--media h1 {
  font-size: var(--text-3xl);
  max-width: 14ch;
}