/*
 * SMANJA v15.3.0 — Yayasan Social Ribbon & Principal Balance
 * Social media moved below the breaking-news ticker, principal welcome copy is
 * expanded to balance the school-board columns, and the full-bleed banner is
 * hardened so it keeps filling the viewport even at unusual browser zoom levels.
 */
body.smanja-v153{
  --sj153-navy:#062f4e;
  --sj153-blue:#0878ba;
  --sj153-gold:#e8bb45;
  --sj153-line:#dbe7ee;
  --sj153-ink:#173e59;
  --sj153-muted:#748a99;
  --sj153-soft:#f5f9fb;
  --sj153-shadow:0 10px 26px rgba(7,43,76,.07);
}

/* ========================================================================
   FULL-WIDTH BANNER HARDENING
   Avoid intrinsic-image width taking over on very wide/zoomed-out viewports.
   ======================================================================== */
body.smanja-v153 .sj15-banner-slider .sj92-slides,
body.smanja-v153 .sj15-banner-slider .sj92-slide,
body.smanja-v153 .sj15-banner-slider .sj92-slide>a{
  width:100%!important;
  max-width:none!important;
}
body.smanja-v153 .sj15-banner-slider .sj92-slide{
  position:absolute!important;
  inset:0!important;
}
body.smanja-v153 .sj15-banner-slider img{
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Berita terkini sedikit dirampingkan supaya social ribbon mendapat napas. */
body.smanja-v153 .sj15-ticker{
  min-height:36px!important;
  margin-top:7px!important;
  border-radius:8px!important;
}
body.smanja-v153 .sj15-ticker .sj92-ticker-label{
  padding:5px 9px!important;
  font-size:7.6px!important;
}
body.smanja-v153 .sj15-ticker .sj92-ticker-items a{font-size:9px!important}
body.smanja-v153 .sj15-ticker>button{width:27px!important;height:27px!important;font-size:11px!important}

/* ========================================================================
   SOCIAL MEDIA RIBBON — now lives directly under Berita Terkini.
   Uses existing CMS links (Instagram / Facebook / YouTube / Twitter) and
   gallery thumbnails, so no external embed script is required.
   ======================================================================== */
body.smanja-v153 .sj153-social-ribbon{
  display:grid;
  grid-template-columns:minmax(245px,.9fr) minmax(0,2.1fr);
  min-height:132px;
  margin-top:9px;
  overflow:hidden;
  border:1px solid var(--sj153-line);
  border-radius:11px;
  background:#fff;
  box-shadow:0 8px 22px rgba(7,43,76,.05);
}
body.smanja-v153 .sj153-social-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:14px 16px;
  color:#fff;
  background:
    radial-gradient(circle at 95% 0%,rgba(23,168,209,.28),transparent 42%),
    linear-gradient(135deg,#062f4e 0%,#0a527d 100%);
}
body.smanja-v153 .sj153-social-copy:after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-34px;
  width:100px;
  height:100px;
  border:18px solid rgba(255,255,255,.045);
  border-radius:50%;
  pointer-events:none;
}
body.smanja-v153 .sj153-social-copy .sj9-eyebrow{
  color:#f3ca66!important;
  font-size:6.6px!important;
  letter-spacing:.15em!important;
}
body.smanja-v153 .sj153-social-copy h2{
  margin:3px 0 4px!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1.2!important;
}
body.smanja-v153 .sj153-social-copy p{
  max-width:360px;
  margin:0 0 9px!important;
  color:#d8e8f2!important;
  font-size:7.6px!important;
  line-height:1.55!important;
}
body.smanja-v153 .sj153-social-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
body.smanja-v153 .sj153-social-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#fff!important;
  font-size:7px;
  font-weight:750;
  line-height:1;
  text-decoration:none!important;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
body.smanja-v153 .sj153-social-btn:hover,
body.smanja-v153 .sj153-social-btn:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);
  outline:0;
}
body.smanja-v153 .sj153-social-instagram i{color:#ff9cbf}
body.smanja-v153 .sj153-social-facebook i{color:#a9d1ff}
body.smanja-v153 .sj153-social-youtube i{color:#ff9d9d}
body.smanja-v153 .sj153-social-twitter i{color:#a9dff8}
body.smanja-v153 .sj153-social-handle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:7px;
  color:#eaf5fb!important;
  font-size:7px;
  font-weight:700;
  text-decoration:none!important;
}
body.smanja-v153 .sj153-social-handle span{color:#f3ca66}

body.smanja-v153 .sj153-social-visual{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3px;
  min-width:0;
  padding:3px;
  background:#eaf1f5;
}
body.smanja-v153 .sj153-social-shot{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#dbe6ec;
  text-decoration:none!important;
}
body.smanja-v153 .sj153-social-shot img{
  display:block;
  width:100%;
  height:100%;
  min-height:126px;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
body.smanja-v153 .sj153-social-shot:hover img{transform:scale(1.045);filter:saturate(1.08)}
body.smanja-v153 .sj153-social-shot-0:after{
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(180deg,transparent,rgba(5,36,58,.78));
  pointer-events:none;
}
body.smanja-v153 .sj153-social-shot>span{
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#fff;
  font-size:7px;
  font-weight:750;
}
body.smanja-v153 .sj153-social-empty{
  grid-column:1/-1;
  min-height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:#fff!important;
  text-align:center;
  text-decoration:none!important;
  background:linear-gradient(135deg,#654dcc,#cf3f7e 55%,#f27a3d);
}
body.smanja-v153 .sj153-social-empty i{font-size:24px}
body.smanja-v153 .sj153-social-empty strong{font-size:9px}
body.smanja-v153 .sj153-social-empty small{font-size:7px;opacity:.9}

/* ========================================================================
   SCHOOL-BOARD BALANCE
   Social media is no longer in the right sidebar. The principal card gets
   more editorial copy so its height naturally balances the left column.
   ======================================================================== */
body.smanja-v153 .sj151-schoolboard{margin-top:14px!important}
body.smanja-v153 .sj151-board-sidebar{gap:12px!important}
body.smanja-v153 .sj151-principal-card{
  padding:16px!important;
  border-radius:12px!important;
}
body.smanja-v153 .sj151-principal-card>img{
  height:166px!important;
  margin:10px 0 10px!important;
  border-radius:9px!important;
}
body.smanja-v153 .sj151-principal-card h3{font-size:14px!important;margin:7px 0 4px!important}
body.smanja-v153 .sj151-principal-card small{font-size:7.4px!important;line-height:1.5!important}
body.smanja-v153 .sj151-principal-card p{
  display:-webkit-box!important;
  margin:10px 0 11px!important;
  overflow:hidden!important;
  color:#596f7e!important;
  font-size:8.5px!important;
  line-height:1.62!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:9!important;
}
body.smanja-v153 .sj151-principal-card .sj9-text-link{font-size:8.2px!important}
body.smanja-v153 .sj151-calendar-card{padding:13px 14px!important}

/* v15.2 sidebar social card is intentionally retired in v15.3. */
body.smanja-v153 .sj151-board-sidebar>.sj152-social-card{display:none!important}

@media(max-width:1199.98px){
  body.smanja-v153 .sj153-social-ribbon{grid-template-columns:minmax(225px,.9fr) minmax(0,1.7fr)}
  body.smanja-v153 .sj153-social-visual{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.smanja-v153 .sj153-social-shot-3{display:none}
}

@media(max-width:991.98px){
  body.smanja-v153 .sj153-social-ribbon{grid-template-columns:1fr 1.55fr}
  body.smanja-v153 .sj153-social-visual{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.smanja-v153 .sj151-board-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.smanja-v153 .sj151-principal-card p{-webkit-line-clamp:7!important}
}

@media(max-width:767.98px){
  body.smanja-v153 .sj153-social-ribbon{grid-template-columns:1fr;margin-top:8px;border-radius:10px}
  body.smanja-v153 .sj153-social-copy{padding:13px 14px}
  body.smanja-v153 .sj153-social-copy p{max-width:none}
  body.smanja-v153 .sj153-social-visual{grid-template-columns:repeat(3,minmax(0,1fr));min-height:130px}
  body.smanja-v153 .sj153-social-shot img{min-height:130px}
  body.smanja-v153 .sj153-social-shot-3{display:none}
  body.smanja-v153 .sj151-board-sidebar{grid-template-columns:1fr!important}
  body.smanja-v153 .sj151-principal-card{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;column-gap:12px!important}
  body.smanja-v153 .sj151-principal-card>img{width:104px!important;height:136px!important;margin-top:8px!important}
  body.smanja-v153 .sj151-principal-card p{-webkit-line-clamp:5!important;font-size:8.2px!important}
}

@media(max-width:480px){
  body.smanja-v153 .sj153-social-actions{gap:4px}
  body.smanja-v153 .sj153-social-btn{padding:5px 7px}
  body.smanja-v153 .sj153-social-visual{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.smanja-v153 .sj153-social-shot-2{display:none}
}

@media(prefers-reduced-motion:reduce){
  body.smanja-v153 .sj153-social-btn,
  body.smanja-v153 .sj153-social-shot img{transition:none!important}
  body.smanja-v153 .sj153-social-btn:hover,
  body.smanja-v153 .sj153-social-shot:hover img{transform:none!important}
}

@media(min-width:992px){
  body.smanja-v153 .sj151-schoolboard{align-items:stretch!important}
  body.smanja-v153 .sj151-board-sidebar{
    display:flex!important;
    flex-direction:column;
    height:100%;
  }
  body.smanja-v153 .sj151-principal-card{
    display:flex!important;
    flex:1 1 auto;
    flex-direction:column;
  }
  body.smanja-v153 .sj151-principal-card .sj9-text-link{margin-top:auto!important;align-self:flex-start}
  body.smanja-v153 .sj151-calendar-card{flex:0 0 auto}
}