/* ==========================================================
   Foto peserta sebagai latar transparan di kartu
   (ikon tetap tampil; foto hanya pemanis di belakang teks)
   ========================================================== */
.quick-card, .program-card.has-person-bg, .home-programs a { position: relative; overflow: hidden; isolation: isolate; }
.quick-card > :not(.person-bg), .program-card.has-person-bg > :not(.person-bg), .home-programs a > :not(.person-bg) { position: relative; z-index: 1; }

.person-bg {
  position: absolute; z-index: 0; right: -6%; bottom: 0; height: 88%; width: auto; max-width: none;
  object-fit: contain; object-position: bottom right; pointer-events: none; user-select: none;
  opacity: .28;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to top, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}
/* Kartu program: foto sedikit lebih jelas karena kartunya lebar */
.program-card.has-person-bg .person-bg { height: 96%; right: -2%; opacity: .32; }
/* Beranda komputer "Lima jalur" */
.home-programs a .person-bg { height: 92%; right: -14%; opacity: .26; }
@media (max-width: 1040px) { .quick-card .person-bg { right: -24%; height: 80%; opacity: .22; } }
/* HP: orang di kartu beranda digeser lebih ke tengah */
@media (max-width: 1040px) {
  .quick-card .person-bg { right: auto; left: 58%; transform: translateX(-50%); height: 84%; opacity: .22;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); }
}

/* Empat kartu beranda: ukuran seragam + kepala tidak menempel ikon */
.quick-grid { grid-auto-rows: 1fr; }
.quick-grid > li { display: flex; }
.quick-grid .quick-card { width: 100%; height: 100%; }
@media (max-width: 1040px) {
  .quick-card .person-bg { left: 64%; height: 74%; bottom: 0; }
}
@media (max-width: 1040px) { .quick-card .person-bg { height: 64%; left: 62%; } }
/* Kembali ke ukuran orang sebelumnya (kartu tetap seragam);
   orang di Kegiatan asrama digeser sedikit ke kanan seperti Lowongan kerja */
@media (max-width: 1040px) {
  .quick-card .person-bg { height: 84%; left: 58%; }
  .quick-grid li:nth-child(3) .quick-card .person-bg { left: 66%; }
}
.org-list .org-empty { grid-column: 1 / -1; text-align: center; padding: 1.5rem; border: 2px dashed rgb(32 33 36 / .2); background: transparent !important; color: var(--gray-700); }

/* ==========================================================
   Bagan struktur organisasi bertingkat + panah
   ========================================================== */
.org-chart { display: grid; justify-items: center; gap: 0; padding: .5rem 0 1rem; }
.org-tier { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; width: 100%; }
.org-tier.is-multi { padding: .9rem; border-radius: calc(var(--radius) + 6px); background: rgb(255 255 255 / .28); border: 2px dashed rgb(32 33 36 / .14); max-width: 760px; }
.org-node {
  --tint: var(--tint-blue);
  display: grid; justify-items: center; align-content: center; gap: .2rem; text-align: center;
  min-width: 150px; max-width: 230px; flex: 1 1 150px; padding: 1rem 1.1rem;
  border-radius: var(--radius); background: var(--tint); border: 1px solid var(--edge);
  box-shadow: 0 2px 6px rgb(60 64 67 / .12);
}
.tier-2 .org-node { --tint: var(--tint-red); }
.tier-3 .org-node { --tint: var(--tint-yellow); }
.tier-4 .org-node { --tint: var(--tint-green); }
.tier-1 .org-node { background: var(--blue-700); border-color: var(--blue-700); color: #fff; max-width: 280px; }
.org-role { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--gray-700); }
.tier-1 .org-role { color: #D2E3FC; }
.org-name { font-size: var(--fs-md); line-height: 1.3; color: var(--gray-900); }
.tier-1 .org-name { color: #fff; }
.org-photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: .35rem;
  border: 4px solid rgb(255 255 255 / .85); box-shadow: 0 4px 12px -4px rgb(60 64 67 / .45); background: #fff;
}
.org-arrow { width: 3px; height: 34px; margin: .35rem 0 .2rem; background: rgb(32 33 36 / .35); border-radius: 2px; position: relative; }
.org-arrow::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid rgb(32 33 36 / .45);
}
.org-chart .org-empty { text-align: center; padding: 1.5rem; border: 2px dashed rgb(32 33 36 / .2); border-radius: var(--radius); color: var(--gray-700); margin: 0; width: 100%; }
@media (max-width: 480px) { .org-node { min-width: 0; flex-basis: calc(50% - .5rem); padding: .85rem .6rem; } .org-photo { width: 68px; height: 68px; } .tier-1 .org-node { flex-basis: 80%; } }
@media (min-width: 1041px) { .org-node { min-width: 180px; } .org-photo { width: 96px; height: 96px; } }
.org-arrow { background: var(--blue-700); opacity: .85; }
.org-arrow::after { border-top-color: var(--blue-700); }