/*
 * SMANJA v15.2.0 — Yayasan Fullwidth & Social Polish
 * Final visual refinement: full-bleed banner, slightly larger principal card,
 * slimmer latest-news visual, Instagram-style sidebar frame, 6-column services,
 * and a compact institutional highlight strip.
 */
body.smanja-v152{
  --sj152-navy:#072f4c;
  --sj152-blue:#0874b8;
  --sj152-cyan:#11a8d0;
  --sj152-gold:#e7bb48;
  --sj152-line:#d8e5ed;
  --sj152-soft:#f5f9fc;
  --sj152-ink:#173d58;
  --sj152-muted:#6f8595;
  --sj152-shadow:0 12px 30px rgba(7,43,76,.075);
}

/* ========================================================================
   FULL-BLEED BANNER — only the banner escapes the normal content width.
   ======================================================================== */
body.smanja-v152 .sj15-banner-only{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#061f35!important;
  overflow:hidden;
}
body.smanja-v152 .sj15-banner-wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
body.smanja-v152 .sj15-banner-slider{
  width:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.smanja-v152 .sj15-banner-slider .sj92-slides{
  aspect-ratio:4.05/1!important;
  max-height:430px!important;
  min-height:220px!important;
}
body.smanja-v152 .sj15-banner-slider img{
  object-position:center center!important;
}
body.smanja-v152 .sj15-banner-controls{
  right:max(18px,calc((100vw - 1280px)/2 + 18px))!important;
  bottom:14px!important;
}

/* ========================================================================
   SMALL INSTITUTIONAL STRIP — elegant, low-profile school identity cue.
   ======================================================================== */
body.smanja-v152 .sj152-trust-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin:10px 0 0;
  overflow:hidden;
  border:1px solid #dce8ef;
  border-radius:10px;
  background:#dce8ef;
  box-shadow:0 6px 18px rgba(7,43,76,.04);
}
body.smanja-v152 .sj152-trust-strip>a{
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  background:#fff;
  color:var(--sj152-ink);
  text-decoration:none!important;
  transition:background .2s ease,transform .2s ease;
}
body.smanja-v152 .sj152-trust-strip>a:hover,
body.smanja-v152 .sj152-trust-strip>a:focus-visible{
  background:#f6fbfe;
  outline:0;
}
body.smanja-v152 .sj152-trust-strip i{
  width:27px;
  height:27px;
  min-width:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#e9f4fa;
  color:#0874b8;
  font-size:11px;
}
body.smanja-v152 .sj152-trust-strip a:nth-child(2) i{background:#fff3df;color:#b47a0b}
body.smanja-v152 .sj152-trust-strip a:nth-child(3) i{background:#e8f8f2;color:#247d66}
body.smanja-v152 .sj152-trust-strip a:nth-child(4) i{background:#fff0f1;color:#c24750}
body.smanja-v152 .sj152-trust-strip span{display:block;min-width:0}
body.smanja-v152 .sj152-trust-strip strong{
  display:block;
  overflow:hidden;
  font-size:9px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.smanja-v152 .sj152-trust-strip small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#7a8e9c;
  font-size:6.8px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Ticker stays compact after adding the identity strip. */
body.smanja-v152 .sj15-ticker{
  min-height:39px!important;
  margin-top:8px!important;
}
body.smanja-v152 .sj15-ticker .sj92-ticker-label{padding:6px 10px!important;font-size:8px!important}
body.smanja-v152 .sj15-ticker .sj92-ticker-items a{font-size:9.5px!important}

/* ========================================================================
   SCHOOL BOARD BALANCE
   Principal gets a little more presence; the latest-news visual gets shorter.
   ======================================================================== */
@media(min-width:992px){
  body.smanja-v152 .sj151-schoolboard{
    grid-template-columns:minmax(0,2.55fr) minmax(285px,.98fr)!important;
    gap:18px!important;
  }
}
body.smanja-v152 .sj151-board-sidebar{gap:12px!important}
body.smanja-v13.smanja-v13complete.smanja-v15.smanja-v151.smanja-v152 .sj13-board-slider.sj151-headline-slider .sj92-slides{
  aspect-ratio:16/5.65!important;
}
body.smanja-v152 .sj151-board-news{margin-top:10px!important}
body.smanja-v152 .sj151-headline-slider{border-radius:11px!important;box-shadow:0 9px 23px rgba(7,43,76,.07)!important}
body.smanja-v152 .sj151-headline-slider .sj15-headline-cue{padding:5px 9px!important;font-size:8px!important}

body.smanja-v152 .sj151-principal-card{
  padding:16px!important;
  border-radius:12px!important;
  box-shadow:0 9px 24px rgba(7,43,76,.06)!important;
}
body.smanja-v152 .sj151-principal-card>img{
  height:162px!important;
  margin:10px 0 10px!important;
  border-radius:9px!important;
}
body.smanja-v152 .sj151-principal-card h3{font-size:14px!important;margin:7px 0 4px!important}
body.smanja-v152 .sj151-principal-card small{font-size:7.4px!important}
body.smanja-v152 .sj151-principal-card p{
  margin:9px 0!important;
  font-size:8.4px!important;
  line-height:1.58!important;
  -webkit-line-clamp:4!important;
}
body.smanja-v152 .sj151-calendar-card{padding:13px!important}

/* ========================================================================
   INSTAGRAM-STYLE FRAME BELOW CALENDAR
   Uses existing CMS Instagram URL + gallery thumbnails; no fragile iframe API.
   ======================================================================== */
body.smanja-v152 .sj152-social-card{
  overflow:hidden;
  border:1px solid #d9e6ed;
  border-radius:12px;
  background:#fff;
  box-shadow:0 9px 24px rgba(7,43,76,.055);
}
body.smanja-v152 .sj152-social-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px 9px;
  border-bottom:1px solid #edf2f5;
}
body.smanja-v152 .sj152-social-brand{display:flex;align-items:center;gap:8px;min-width:0}
body.smanja-v152 .sj152-social-brand>i{
  width:30px;height:30px;min-width:30px;display:grid;place-items:center;
  border-radius:9px;color:#fff;font-size:15px;
  background:linear-gradient(135deg,#6653d8 8%,#cf3d83 48%,#f06b3c 78%,#f7c55a 100%);
  box-shadow:0 5px 13px rgba(190,55,119,.19);
}
body.smanja-v152 .sj152-social-brand span{display:block;min-width:0}
body.smanja-v152 .sj152-social-brand small{display:block;color:#8b9aa6;font-size:5.8px;font-weight:800;letter-spacing:.12em}
body.smanja-v152 .sj152-social-brand strong{display:block;margin-top:1px;overflow:hidden;color:#23465e;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
body.smanja-v152 .sj152-social-head>a,
body.smanja-v152 .sj152-social-card footer>a{color:#0874b8;font-size:7px;font-weight:800;text-decoration:none!important;white-space:nowrap}
body.smanja-v152 .sj152-social-feed{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  min-height:176px;
  padding:3px;
  background:#eef3f6;
}
body.smanja-v152 .sj152-social-photo{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#dce7ed}
body.smanja-v152 .sj152-social-photo-0{grid-row:1/3}
body.smanja-v152 .sj152-social-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease,filter .35s ease}
body.smanja-v152 .sj152-social-photo:hover img{transform:scale(1.045);filter:saturate(1.06)}
body.smanja-v152 .sj152-social-placeholder{
  grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;align-content:center;gap:7px;
  min-height:176px;color:#fff;text-align:center;text-decoration:none!important;
  background:linear-gradient(135deg,#664ccf,#d53c7c 53%,#f0763c);
}
body.smanja-v152 .sj152-social-placeholder i{font-size:30px}
body.smanja-v152 .sj152-social-placeholder span{font-size:9px;font-weight:700}
body.smanja-v152 .sj152-social-card footer{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;color:#7b8e9c;font-size:6.5px;
}
body.smanja-v152 .sj152-social-card footer span{display:flex;align-items:center;gap:5px;min-width:0}
body.smanja-v152 .sj152-social-card footer i{color:#d44c75}

/* ========================================================================
   SERVICE GRID — 6 horizontal columns on desktop, responsive thereafter.
   ======================================================================== */
body.smanja-v152 .sj15-service-panel .sj9-service-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
}
body.smanja-v152 .sj15-service-panel .sj9-service-card{
  min-height:98px!important;
  padding:12px!important;
}
body.smanja-v152 .sj15-service-panel .sj9-service-top img{width:31px!important;height:31px!important}
body.smanja-v152 .sj15-service-panel .sj9-service-card strong{font-size:10px!important;line-height:1.25!important}
body.smanja-v152 .sj15-service-panel .sj9-service-card small{font-size:7px!important}

/* A few quiet finishing touches rather than adding another bulky section. */
body.smanja-v152 .sj9-section-head h2,
body.smanja-v152 .sj15-priority h2{letter-spacing:-.015em}
body.smanja-v152 .sj15-media-section,
body.smanja-v152 .sj15-teacher-section{position:relative}
body.smanja-v152 .sj15-media-section:before,
body.smanja-v152 .sj15-teacher-section:before{
  content:"";position:absolute;left:0;top:20px;width:42px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,#0b75b7,#e2b83e);
}

@media(max-width:1199.98px){
  body.smanja-v152 .sj15-banner-slider .sj92-slides{aspect-ratio:3.55/1!important;max-height:390px!important}
  body.smanja-v152 .sj15-service-panel .sj9-service-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.smanja-v152 .sj152-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:991.98px){
  body.smanja-v152 .sj15-banner-wrap{width:100%!important}
  body.smanja-v152 .sj15-banner-slider{border-radius:0!important}
  body.smanja-v152 .sj15-banner-slider .sj92-slides{aspect-ratio:2.7/1!important;min-height:190px!important;max-height:330px!important}
  body.smanja-v152 .sj15-banner-controls{right:10px!important;bottom:9px!important}
  body.smanja-v152 .sj151-schoolboard{grid-template-columns:1fr!important}
  body.smanja-v152 .sj151-board-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.smanja-v152 .sj152-social-card{grid-column:1/-1}
  body.smanja-v152 .sj152-social-feed{min-height:220px;grid-template-columns:1.65fr 1fr}
  body.smanja-v152 .sj15-service-panel .sj9-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:767.98px){
  body.smanja-v152 .sj15-banner-only{padding:0!important}
  body.smanja-v152 .sj15-banner-wrap{width:100%!important}
  body.smanja-v152 .sj15-banner-slider{border-radius:0!important}
  body.smanja-v152 .sj15-banner-slider .sj92-slides{aspect-ratio:2.05/1!important;min-height:170px!important}
  body.smanja-v152 .sj152-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px;border-radius:9px}
  body.smanja-v152 .sj152-trust-strip>a{min-height:45px;padding:7px 8px;gap:7px}
  body.smanja-v152 .sj152-trust-strip i{width:25px;height:25px;min-width:25px;font-size:10px}
  body.smanja-v152 .sj152-trust-strip strong{font-size:8px}
  body.smanja-v152 .sj152-trust-strip small{font-size:6px}
  body.smanja-v13.smanja-v13complete.smanja-v15.smanja-v151.smanja-v152 .sj13-board-slider.sj151-headline-slider .sj92-slides{aspect-ratio:16/7.6!important}
  body.smanja-v152 .sj151-principal-card{padding:13px!important}
  body.smanja-v152 .sj151-principal-card>img{height:132px!important}
  body.smanja-v152 .sj151-board-sidebar{grid-template-columns:1fr!important}
  body.smanja-v152 .sj152-social-card{grid-column:auto}
  body.smanja-v152 .sj152-social-feed{min-height:205px}
  body.smanja-v152 .sj15-service-panel .sj9-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  body.smanja-v152 .sj15-service-panel .sj9-service-card{min-height:88px!important;padding:10px!important}
}

@media(max-width:420px){
  body.smanja-v152 .sj15-banner-slider .sj92-slides{aspect-ratio:1.9/1!important;min-height:165px!important}
  body.smanja-v152 .sj152-trust-strip{grid-template-columns:1fr 1fr}
  body.smanja-v152 .sj152-social-feed{min-height:188px}
  body.smanja-v152 .sj15-service-panel .sj9-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(prefers-reduced-motion:reduce){
  body.smanja-v152 .sj152-trust-strip>a,
  body.smanja-v152 .sj152-social-photo img{transition:none!important}
  body.smanja-v152 .sj152-social-photo:hover img{transform:none!important}
}