/*
 * SMANJA v24.0.1 — Visual Balance & Contrast Refinement
 * Compatibility layer for Yayasan screens still used by the portal.
 */

body.smanja-v2401{
  --sj2401-navy:#0b3558;
  --sj2401-blue:#0b6fa8;
  --sj2401-teal:#168f96;
  --sj2401-gold:#e5b73f;
  --sj2401-ink:#18364d;
  --sj2401-body:#5e7486;
  --sj2401-line:#d9e5ed;
  --sj2401-soft:#f5f9fc;
  --sj2401-white:#fff;
}

/* ---------------------------------------------------------
   LIGHT SURFACES MUST STAY DARK-ON-LIGHT
   Fixes false positives from the v22.3.8 auto contrast layer.
   --------------------------------------------------------- */
body.smanja-v2401 #content .sj221-school-profile,
body.smanja-v2401 #content .sj222-gallery-section,
body.smanja-v2401 #content .sj222-teacher-section,
body.smanja-v2401 #content .sj15-media-section,
body.smanja-v2401 #content .sj15-teacher-section{
  color:var(--sj2401-ink)!important;
}
body.smanja-v2401 #content .sj221-school-profile :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2401 #content .sj222-gallery-section :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2401 #content .sj222-teacher-section :is(h1,h2,h3,h4,h5,h6){
  color:var(--sj2401-navy)!important;
  text-shadow:none!important;
}
body.smanja-v2401 #content .sj221-school-profile p,
body.smanja-v2401 #content .sj222-gallery-section p,
body.smanja-v2401 #content .sj222-teacher-section p,
body.smanja-v2401 #content .sj221-school-profile small,
body.smanja-v2401 #content .sj222-gallery-section small,
body.smanja-v2401 #content .sj222-teacher-section small{
  color:var(--sj2401-body)!important;
}
body.smanja-v2401 #content .sj221-school-profile .sj9-eyebrow,
body.smanja-v2401 #content .sj222-gallery-section .sj9-eyebrow,
body.smanja-v2401 #content .sj222-teacher-section .sj9-eyebrow{
  color:var(--sj2401-blue)!important;
}
body.smanja-v2401 #content .sj222-gallery-section .sj9-text-link,
body.smanja-v2401 #content .sj222-teacher-section .sj9-text-link{
  color:var(--sj2401-blue)!important;
}

/* ---------------------------------------------------------
   PROFILE — more compact, stronger hierarchy
   --------------------------------------------------------- */
body.smanja-v2401 .sj221-school-profile{
  grid-template-columns:minmax(0,1fr) 170px!important;
  gap:24px!important;
  padding:23px 24px!important;
  background:
    radial-gradient(circle at 94% 18%,rgba(11,111,168,.08),transparent 23%),
    linear-gradient(135deg,#ffffff 0%,#f8fbfd 64%,#eef7fb 100%)!important;
  border:1px solid var(--sj2401-line)!important;
  border-radius:18px!important;
  box-shadow:0 12px 28px rgba(9,54,84,.07)!important;
}
body.smanja-v2401 .sj221-school-profile:before{
  top:20px!important;
  bottom:20px!important;
  width:3px!important;
  background:linear-gradient(var(--sj2401-gold),var(--sj2401-blue))!important;
}
body.smanja-v2401 .sj221-school-profile h2{
  margin:5px 0 8px!important;
  color:var(--sj2401-navy)!important;
  font-size:clamp(27px,2.35vw,36px)!important;
  line-height:1.06!important;
}
body.smanja-v2401 .sj221-school-lead{
  max-width:760px!important;
  color:var(--sj2401-body)!important;
  font-size:13px!important;
  line-height:1.62!important;
  margin-bottom:12px!important;
}
body.smanja-v2401 .sj221-school-profile .sj13-values strong{
  color:#0b6798!important;
  background:#e9f4fa!important;
}
body.smanja-v2401 .sj221-school-profile .sj13-values span{color:#60798c!important}
body.smanja-v2401 .sj221-school-profile .sj154-profile-points{
  margin-top:13px!important;
  padding-top:13px!important;
  gap:8px!important;
}
body.smanja-v2401 .sj221-school-profile .sj154-profile-points>a{
  min-height:50px!important;
  padding:8px 9px!important;
  border-color:#dce7ef!important;
  background:#fff!important;
}
body.smanja-v2401 .sj221-school-profile .sj154-profile-points i{
  width:31px!important;height:31px!important;min-width:31px!important;
  background:linear-gradient(145deg,var(--sj2401-navy),var(--sj2401-blue))!important;
}
body.smanja-v2401 .sj221-school-profile .sj154-profile-points strong{
  color:var(--sj2401-ink)!important;font-size:10.5px!important;
}
body.smanja-v2401 .sj221-school-profile .sj154-profile-points small{
  color:#7a8d9b!important;font-size:8.5px!important;
}
body.smanja-v2401 .sj221-emblem{
  width:155px!important;min-height:178px!important;padding:13px 10px 10px!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,#fff,#eef7fb)!important;
}
body.smanja-v2401 .sj221-emblem-halo{width:124px!important;height:124px!important;top:15px!important}
body.smanja-v2401 .sj221-emblem img{max-width:116px!important;max-height:116px!important}
body.smanja-v2401 .sj221-emblem small{color:#587286!important;font-size:8px!important}

/* ---------------------------------------------------------
   PAGE HERO — less oversized
   --------------------------------------------------------- */
body.smanja-v2401 .page-title-box{
  padding:36px 28px!important;
  margin:22px 0!important;
  border-radius:22px!important;
  box-shadow:0 14px 34px rgba(8,47,91,.22)!important;
}
body.smanja-v2401 .page-title-badge{
  padding:7px 14px!important;
  margin-bottom:14px!important;
  font-size:10px!important;
}
body.smanja-v2401 .page-title-box h1{
  font-size:clamp(28px,3vw,40px)!important;
  line-height:1.2!important;
  min-height:0!important;
}
body.smanja-v2401 .page-title-box small{
  margin-top:14px!important;
  padding:8px 14px!important;
  font-size:12px!important;
}

/* ---------------------------------------------------------
   GALLERY / VIDEO — white surface + high contrast
   --------------------------------------------------------- */
body.smanja-v2401 .sj222-gallery-section{
  padding:19px 20px 21px!important;
  border-radius:17px!important;
  border:1px solid var(--sj2401-line)!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%)!important;
  box-shadow:0 10px 28px rgba(9,54,84,.06)!important;
}
body.smanja-v2401 .sj222-gallery-section .sj9-section-head{margin-bottom:12px!important}
body.smanja-v2401 .sj222-gallery-section .sj9-section-head h2{
  color:var(--sj2401-navy)!important;
  font-size:clamp(22px,2vw,29px)!important;
}
body.smanja-v2401 .sj15-photo-panel,
body.smanja-v2401 .sj15-video-card{
  border-color:#dce7ef!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(9,54,84,.045)!important;
}
body.smanja-v2401 .sj15-video-copy{
  background:#fff!important;
  color:var(--sj2401-ink)!important;
}
body.smanja-v2401 .sj15-video-copy .sj9-eyebrow{color:#bf513b!important}
body.smanja-v2401 .sj15-video-copy h3{color:var(--sj2401-navy)!important;text-shadow:none!important}
body.smanja-v2401 .sj15-video-copy p{color:var(--sj2401-body)!important}
body.smanja-v2401 .sj15-photo-card>span{
  background:linear-gradient(180deg,transparent 8%,rgba(5,35,60,.92) 100%)!important;
}
body.smanja-v2401 .sj15-photo-card>span small,
body.smanja-v2401 .sj15-photo-card>span strong{color:#fff!important}

/* ---------------------------------------------------------
   TEACHERS — one coherent premium palette, not rainbow
   --------------------------------------------------------- */
body.smanja-v2401 .sj222-teacher-section{
  padding:18px 20px 19px!important;
  border-radius:17px!important;
  border:1px solid var(--sj2401-line)!important;
  background:
    radial-gradient(circle at 96% 8%,rgba(229,183,63,.08),transparent 16rem),
    linear-gradient(180deg,#fff,#f7fbfd)!important;
  box-shadow:0 10px 28px rgba(9,54,84,.06)!important;
}
body.smanja-v2401 .sj222-teacher-section .sj9-section-head{margin-bottom:10px!important}
body.smanja-v2401 .sj222-teacher-section .sj9-section-head h2{
  color:var(--sj2401-navy)!important;
  font-size:clamp(22px,2vw,29px)!important;
}
body.smanja-v2401 .sj15-teacher-card,
body.smanja-v2401 .sj15-teacher-card:nth-child(n){
  --teacher-a:#0b5f88!important;
  --teacher-b:#093955!important;
  --teacher-accent:#e7bd50!important;
  background:linear-gradient(155deg,var(--teacher-a),var(--teacher-b))!important;
  border:1px solid rgba(9,57,85,.12)!important;
  box-shadow:0 8px 18px rgba(9,54,84,.11)!important;
  filter:none!important;
}
body.smanja-v2401 .sj15-teacher-card:nth-child(even){
  --teacher-a:#167d83!important;
  --teacher-b:#0b4e62!important;
  --teacher-accent:#f0c85f!important;
}
body.smanja-v2401 .sj15-teacher-card:before{
  background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 45%)!important;
}
body.smanja-v2401 .sj15-teacher-photo{
  background:#e8f3f7!important;
  border-color:rgba(255,255,255,.32)!important;
}
body.smanja-v2401 .sj15-teacher-copy{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.08))!important;
}
body.smanja-v2401 .sj15-teacher-copy h3{color:#fff!important;text-shadow:none!important}
body.smanja-v2401 .sj15-teacher-copy small{color:#f4ce69!important}
body.smanja-v2401 .sj15-teacher-copy p{color:#d9e9f3!important}
body.smanja-v2401 .sj15-teacher-section .sj15-carousel-nav{
  background:#fff!important;color:var(--sj2401-blue)!important;border-color:#cfe0eb!important;
}
body.smanja-v2401 .sj15-teacher-section .sj15-carousel-nav:hover{
  background:var(--sj2401-navy)!important;color:#fff!important;
}

/* Explicitly neutralize wrong dark-surface classification on known light blocks. */
body.smanja-v2401 #content .sj221-school-profile.sj238-dark-surface,
body.smanja-v2401 #content .sj222-gallery-section.sj238-dark-surface,
body.smanja-v2401 #content .sj222-teacher-section.sj238-dark-surface{
  color:var(--sj2401-ink)!important;
}

@media(max-width:991.98px){
  body.smanja-v2401 .sj221-school-profile{grid-template-columns:minmax(0,1fr) 145px!important;padding:20px!important}
  body.smanja-v2401 .sj221-emblem{width:135px!important;min-height:158px!important}
  body.smanja-v2401 .sj221-emblem-halo{width:106px!important;height:106px!important}
  body.smanja-v2401 .sj221-emblem img{max-width:98px!important;max-height:98px!important}
}
@media(max-width:767.98px){
  body.smanja-v2401 .sj221-school-profile{grid-template-columns:1fr!important;padding:17px!important}
  body.smanja-v2401 .sj221-school-profile .sj154-profile-points{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.smanja-v2401 .sj221-emblem{justify-self:start!important;width:125px!important;min-height:145px!important}
  body.smanja-v2401 .page-title-box{padding:28px 18px!important;border-radius:18px!important}
  body.smanja-v2401 .sj222-gallery-section,
  body.smanja-v2401 .sj222-teacher-section{padding:15px!important}
}