/* Gaya tambahan halaman "Tentang LSP" (profil, legalitas, tugas-fungsi, struktur-organisasi) dan prosedur sertifikasi. */

/* ---------- Visi / Misi: judul di kepala kotak ---------- */
.vm__head h2 { margin: 0; font-size: 28px; color: var(--white); }
.vm__body p:last-child { margin-bottom: 0; }

/* ---------- Kebijakan Mutu ---------- */
.tentang-callout__text { padding: 8px 6px; }
.tentang-callout__text h2 b { font-weight: 700; }
.tentang-callout__text p { margin: 0; font-weight: 500; }
.callout .img-frame img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Judul rata kiri (Perjalanan Kami) ---------- */
.tentang-heading { color: var(--red); font-weight: 400; margin-bottom: 44px; }
.tentang-heading b { font-weight: 700; }

/* ---------- Timeline: 3 kartu di baris atas, 4 di baris bawah ---------- */
.tentang-timeline { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(12, 1fr); row-gap: 40px; }
.tentang-timeline > .timeline__item { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.tentang-timeline > .timeline__item:nth-child(-n+3) { grid-column: span 4; }
.tentang-timeline .timeline__when { font-size: 18px; }
.tentang-timeline .timeline__item ul { font-size: 15px; line-height: 1.6; }
.tentang-timeline > .timeline__item:nth-child(n+6) .timeline__when { color: var(--white); }
.tentang-timeline > .timeline__item:nth-child(n+6) ul { color: rgba(255,255,255,.92); }
@media (max-width: 960px) {
  .tentang-timeline { grid-template-columns: repeat(2, 1fr); }
  .tentang-timeline > .timeline__item,
  .tentang-timeline > .timeline__item:nth-child(-n+3) { grid-column: auto; }
}
@media (max-width: 520px) {
  .tentang-timeline { grid-template-columns: 1fr; }
}

/* ---------- Legalitas ---------- */
.tentang-intro { max-width: 860px; margin: 0 auto; text-align: center; }
.tentang-divider { width: 120px; margin: 28px auto 40px; border: 0; border-top: 3px solid var(--orange); }
.tentang-doc { max-width: 720px; margin: 0 auto; }
.tentang-doc img, .tentang-chart img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--white); }

/* ---------- Struktur organisasi ---------- */
.tentang-chart { margin: 0; }

/* ---------- Tugas & fungsi ---------- */
.role-card { display: flex; flex-direction: column; }
.role-card__icon { width: 72px; height: 72px; object-fit: contain; margin-bottom: 16px; }
.role-card h2 { font-size: clamp(20px, 2.2vw, 26px); color: var(--red); margin-bottom: .2em; }
.role-card h3 { font-size: 18px; color: var(--red); }
.role-card--lead h3 { color: var(--orange-dark); font-size: 17px; }
.role-card__list { margin: 0; padding-left: 20px; font-size: 15px; }
.role-card__list li + li { margin-top: 6px; }
.role-card--lead .role-card__icon { width: 88px; height: 88px; }
@media (min-width: 961px) {
  .role-grid > .role-card:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ---------- Prosedur sertifikasi ---------- */
.tentang-steps { padding-left: 22px; margin: 0; }
.tentang-steps li + li { margin-top: 10px; }
.tentang-cover img { display: block; height: 100%; min-height: 280px; object-fit: cover; }
.tentang-flow { margin: 0; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; text-align: center; }
.tentang-flow h3 { color: var(--red); }
.tentang-flow img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }