/* ==========================================================
   SECTION KEPALA SEKOLAH + LINK TERKAIT
   Background motif cenderawasih hanya pada section ini.
   File: assets/css/pimpinan-link-terkait.css
   Motif: assets/images/hero-berita-bg.png
   ========================================================== */
.school-leaders-links,
.school-leaders-links * { box-sizing: border-box; }

.school-leaders-links {
  --sl-blue: #0868c9;
  --sl-navy: #07376f;
  --sl-yellow: #ffd323;
  width: 100%;
  margin: 0;
  padding: 38px 24px 42px;
  color: #084e99;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #07366f;
  background-image:
    linear-gradient(rgba(4, 48, 101, .28), rgba(4, 48, 101, .28)),
    url("../images/hero-berita-bg.png");
  background-repeat: repeat, repeat;
  background-position: center center, center center;
  background-size: auto, 440px auto;
}

/* Dua panel putih berada di atas background motif */
.school-leaders-links .leaders-block,
.school-leaders-links .related-links-block {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 25px 28px 29px;
  border: 1px solid rgba(222, 235, 248, .96);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 24, 58, .16);
}
.school-leaders-links .related-links-block { margin-top: 28px; }

.school-leaders-links .school-line-heading {
  position: relative;
  padding: 0 0 11px;
  margin: 0 0 25px;
  border-bottom: 1px solid var(--sl-yellow);
}
.school-leaders-links .school-line-heading h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--sl-blue);
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.35px;
}
.school-leaders-links .school-line-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 172px;
  max-width: 100%;
  height: 3px;
  background: var(--sl-yellow);
}
.school-leaders-links .leaders-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    padding: 0 8px 2px;
}
.school-leaders-links .leader-person { min-width: 0; text-align: center; padding: 0 4px; }
.school-leaders-links .leader-person img {
    display: block;
    width: clamp(88px, 7.4vw, 124px);
    aspect-ratio: 1;
    margin: 0 auto 13px;

    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;

    background: #edf3f8;
    border: 1px solid #e3eaf1;
    box-shadow: 0 5px 18px rgba(8, 80, 153, .08);

    /* Pastikan foto tetap berwarna */
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;

    transition: transform .25s, box-shadow .25s;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.school-leaders-links .leader-person:hover img { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(8,80,153,.14); }
.school-leaders-links .leader-person h3 {
  margin: 0 0 6px;
  color: #064c97;
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.45;
  font-weight: 800;
  text-transform: uppercase;
}
.school-leaders-links .leader-person p { margin: 0; color: #0868c9; font-size: 10px; line-height: 1.5; text-transform: uppercase; }
.school-leaders-links .related-links-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  padding: 0;
}
.school-leaders-links .related-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 12px;
  text-decoration: none;
  border: 1px solid #edf3f9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(12, 65, 112, .06);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.school-leaders-links .related-logo:hover { background: #f4f9ff; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(12,65,112,.1); }
.school-leaders-links .related-logo img { display: block; max-width: 100%; width: auto; height: auto; max-height: 60px; object-fit: contain; }
.school-leaders-links a:focus-visible { outline: 3px solid #ffd323; outline-offset: 3px; }

@media (max-width: 800px) {
  .school-leaders-links { padding: 28px 16px 32px; background-size: auto, 340px auto; }
  .school-leaders-links .leaders-block,
  .school-leaders-links .related-links-block { padding: 20px 18px 23px; border-radius: 11px; }
  .school-leaders-links .leaders-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 25px; }
  .school-leaders-links .leader-person img { width: clamp(82px, 14vw, 112px); }
  .school-leaders-links .leader-person h3 { font-size: 11px; }
  .school-leaders-links .related-links-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .school-leaders-links { padding: 22px 12px 26px; background-size: auto, 280px auto; }
  .school-leaders-links .leaders-block,
  .school-leaders-links .related-links-block { padding: 17px 12px 20px; }
  .school-leaders-links .related-links-block { margin-top: 18px; }
  .school-leaders-links .school-line-heading h2 { font-size: 18px; }
  .school-leaders-links .leaders-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 12px; padding: 0; }
  .school-leaders-links .leader-person img { width: 100px; }
  .school-leaders-links .leader-person h3 { font-size: 10px; }
  .school-leaders-links .leader-person p { font-size: 9px; }
  .school-leaders-links .related-links-row { gap: 8px; }
  .school-leaders-links .related-logo { min-height: 66px; padding: 8px; }
  .school-leaders-links .related-logo img { max-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .school-leaders-links *, .school-leaders-links *::before, .school-leaders-links *::after { transition-duration: .01ms !important; }
}