/* Masjid Display v4.2.33 — Pengumuman Pintar sentiasa muat dalam skrin. */
.smart-announcement-stage,
.smart-announcement-slot,
.smart-announcement-card,
.smart-announcement-copy,
.smart-announcement-copy-inner,
.smart-announcement-media{box-sizing:border-box;min-width:0;min-height:0}
.smart-announcement-slot{max-width:100%;max-height:100%}
.smart-announcement-card{width:100%;max-width:100%;max-height:100%}
.smart-announcement-copy{overflow:hidden}
.smart-announcement-copy-inner{
  width:100%;
  max-width:100%;
  transform:scale(var(--announcement-fit-scale,1));
  transform-origin:left center;
}
.smart-announcement-copy h1,
.smart-announcement-copy p,
.smart-announcement-copy footer,
.smart-announcement-topline span,
.smart-announcement-event strong{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.smart-announcement-topline,
.smart-announcement-event{flex-wrap:wrap}
.smart-announcement-copy p{white-space:normal}
.smart-announcement-card.fit-scaled .smart-announcement-copy-inner{will-change:transform}

/* Pelarasan awal mengikut jumlah teks, kemudian JS mengukur ruang sebenar. */
.smart-announcement-card.density-compact .smart-announcement-copy,
.smart-announcement-card.fit-compact .smart-announcement-copy{padding:clamp(28px,3.9vw,72px)}
.smart-announcement-card.density-compact .smart-announcement-copy h1,
.smart-announcement-card.fit-compact .smart-announcement-copy h1{font-size:clamp(46px,4.8vw,98px);margin-bottom:clamp(16px,2vw,32px)}
.smart-announcement-card.density-compact .smart-announcement-copy p,
.smart-announcement-card.fit-compact .smart-announcement-copy p{font-size:clamp(23px,1.95vw,42px);line-height:1.28}
.smart-announcement-card.density-compact .smart-announcement-topline,
.smart-announcement-card.fit-compact .smart-announcement-topline{margin-bottom:clamp(14px,1.7vw,28px)}

.smart-announcement-card.density-tight .smart-announcement-copy,
.smart-announcement-card.fit-tight .smart-announcement-copy{padding:clamp(24px,3.2vw,58px)}
.smart-announcement-card.density-tight.has-media,
.smart-announcement-card.fit-tight.has-media{grid-template-columns:minmax(300px,35%) minmax(0,1fr)}
.smart-announcement-card.density-tight .smart-announcement-copy h1,
.smart-announcement-card.fit-tight .smart-announcement-copy h1{font-size:clamp(38px,4vw,80px);line-height:1.02;margin-bottom:clamp(12px,1.5vw,24px)}
.smart-announcement-card.density-tight .smart-announcement-copy p,
.smart-announcement-card.fit-tight .smart-announcement-copy p{font-size:clamp(20px,1.65vw,34px);line-height:1.24}
.smart-announcement-card.density-tight .smart-announcement-copy footer,
.smart-announcement-card.fit-tight .smart-announcement-copy footer{margin-top:clamp(14px,1.7vw,26px);padding-top:clamp(10px,1.2vw,18px)}
.smart-announcement-card.density-tight .smart-announcement-topline,
.smart-announcement-card.fit-tight .smart-announcement-topline{margin-bottom:clamp(10px,1.2vw,20px)}
.smart-announcement-card.density-tight .smart-announcement-type,
.smart-announcement-card.fit-tight .smart-announcement-type{margin-bottom:1vh}

.smart-announcement-card.density-ultra .smart-announcement-copy,
.smart-announcement-card.fit-ultra .smart-announcement-copy{padding:clamp(18px,2.5vw,44px)}
.smart-announcement-card.density-ultra.has-media,
.smart-announcement-card.fit-ultra.has-media{grid-template-columns:minmax(220px,29%) minmax(0,1fr)}
.smart-announcement-card.density-ultra .smart-announcement-copy h1,
.smart-announcement-card.fit-ultra .smart-announcement-copy h1{font-size:clamp(31px,3.25vw,64px);line-height:1.04;margin-bottom:clamp(9px,1vw,17px)}
.smart-announcement-card.density-ultra .smart-announcement-copy p,
.smart-announcement-card.fit-ultra .smart-announcement-copy p{font-size:clamp(17px,1.32vw,28px);line-height:1.18}
.smart-announcement-card.density-ultra .smart-announcement-copy footer,
.smart-announcement-card.fit-ultra .smart-announcement-copy footer{font-size:clamp(14px,1vw,21px);margin-top:clamp(10px,1vw,16px);padding-top:clamp(8px,.8vw,13px)}
.smart-announcement-card.density-ultra .smart-announcement-topline,
.smart-announcement-card.fit-ultra .smart-announcement-topline{gap:10px;margin-bottom:clamp(7px,.8vw,13px)}
.smart-announcement-card.density-ultra .smart-announcement-topline span,
.smart-announcement-card.fit-ultra .smart-announcement-topline span{font-size:clamp(13px,1vw,21px)}
.smart-announcement-card.density-ultra .smart-announcement-topline b,
.smart-announcement-card.fit-ultra .smart-announcement-topline b{font-size:clamp(11px,.75vw,17px)}
.smart-announcement-card.density-ultra .smart-announcement-type,
.smart-announcement-card.fit-ultra .smart-announcement-type{font-size:clamp(11px,.78vw,17px);margin:0 0 .7vh}
.smart-announcement-card.density-ultra .smart-announcement-event,
.smart-announcement-card.fit-ultra .smart-announcement-event{gap:.65vw;margin:0 0 1vh;padding:.7vh .8vw;border-left-width:3px}
.smart-announcement-card.density-ultra .smart-announcement-event strong,
.smart-announcement-card.fit-ultra .smart-announcement-event strong{font-size:clamp(14px,1vw,21px)}

/* Skrin HD/TV dengan tinggi rendah. */
@media(max-height:760px){
  .smart-announcement-stage{padding:16px}
  .smart-announcement-slot{height:100%}
  .smart-announcement-card{border-radius:20px}
  .smart-announcement-copy{padding:24px 30px}
  .smart-announcement-copy:before{left:30px;right:30px;height:3px}
  .smart-announcement-copy h1{font-size:clamp(38px,4.5vw,66px);margin-bottom:12px}
  .smart-announcement-copy p{font-size:clamp(18px,1.85vw,29px);line-height:1.2}
  .smart-announcement-topline{margin-bottom:10px}
  .smart-announcement-copy footer{margin-top:12px;padding-top:10px}
  .smart-announcement-counter{right:22px;bottom:14px}
}

@media(max-width:1280px){
  .smart-announcement-card.has-media{grid-template-columns:minmax(250px,34%) minmax(0,1fr)}
  .smart-announcement-copy{padding:clamp(24px,3.5vw,44px)}
  .smart-announcement-copy h1{font-size:clamp(38px,5vw,66px)}
  .smart-announcement-copy p{font-size:clamp(18px,2.2vw,30px)}
}

@media(max-aspect-ratio:4/3){
  .smart-announcement-card.has-media,
  .smart-announcement-card.density-tight.has-media,
  .smart-announcement-card.density-ultra.has-media,
  .smart-announcement-card.fit-tight.has-media,
  .smart-announcement-card.fit-ultra.has-media{
    grid-template-columns:1fr;
    grid-template-rows:minmax(150px,30%) minmax(0,1fr)
  }
}