/* ==========================================
   User fixes v5
   Clean facilities + official activities
   ========================================== */

/* ---------- Clean facilities ---------- */
#fasilitas .section-heading{
  margin-bottom:24px !important;
}
.facility-clean-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.facility-clean-card{
  position:relative;
  height:218px;
  border-radius:20px;
  overflow:hidden;
  background:#e9e4e3;
  box-shadow:0 10px 25px rgba(59,5,12,.06);
}
.facility-clean-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:54%;
  background:linear-gradient(transparent,rgba(27,4,8,.84));
}
.facility-clean-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.facility-clean-card__copy{
  position:absolute;
  z-index:2;
  left:16px;
  right:16px;
  bottom:14px;
  color:#fff;
}
.facility-clean-card__copy strong{
  display:block;
  font-size:.88rem;
  line-height:1.2;
}
.facility-clean-card__copy span{
  display:block;
  margin-top:4px;
  font-size:.66rem;
  line-height:1.45;
  color:#efdce0;
}
.facility-clean-card--classroom img{object-position:center 58%}
.facility-clean-card--gym img{object-position:center 56%}
.facility-clean-card--bedroom img{object-position:center 55%}
.facility-clean-card--dining img{object-position:center 72%}
.facility-clean-card--courtyard img{object-position:center 58%}
.facility-clean-card--common img{object-position:center 52%}
.facility-clean-card--reception img{object-position:center 55%}
.facility-clean-card--kitchen img{object-position:center 56%}
.facility-clean-card--pingpong img{object-position:center 54%}
.facility-clean-card--stairs img{object-position:center 55%}

/* ---------- Official activities ---------- */
#kegiatan-makala .section-heading{
  margin-bottom:24px !important;
}
.activity-official-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.activity-official-card{
  position:relative;
  aspect-ratio:.76;
  border-radius:22px;
  overflow:hidden;
  background:#e8e3e2;
  box-shadow:0 12px 28px rgba(59,5,12,.07);
}
.activity-official-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:50%;
  background:linear-gradient(transparent,rgba(23,3,7,.88));
}
.activity-official-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.activity-official-card__copy{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:16px;
  color:#fff;
}
.activity-official-card__copy small{
  display:block;
  margin-bottom:5px;
  color:#f4bdc5;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.activity-official-card__copy strong{
  display:block;
  font-family:"Archivo",sans-serif;
  font-size:1.05rem;
  line-height:1.12;
}
.activity-official-card__copy span{
  display:block;
  margin-top:6px;
  color:#efdce0;
  font-size:.69rem;
  line-height:1.45;
}
.activity-official-card--class img{object-position:center 52%}
.activity-official-card--running img{object-position:center 50%}
.activity-official-card--dufan img{object-position:center 48%}
.activity-official-card--leader img{object-position:center 48%}
.activity-section.section{
  padding-top:36px !important;
  padding-bottom:42px !important;
}

/* Hide legacy layout only inside the facilities section after HTML migration safety */
#fasilitas > .facility-grid,
#fasilitas > .facility-more{
  display:none !important;
}

@media(max-width:1100px){
  .facility-clean-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .activity-official-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .activity-official-card{aspect-ratio:1.05}
}
@media(max-width:780px){
  .facility-clean-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .facility-clean-card{height:185px;border-radius:16px}
  .facility-clean-card__copy{left:13px;right:13px;bottom:12px}
  .activity-official-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .activity-official-card{aspect-ratio:.82;border-radius:17px}
  .activity-official-card__copy{left:14px;right:14px;bottom:13px}
  .activity-official-card__copy strong{font-size:.88rem}
  .activity-official-card__copy span{font-size:.62rem}
}
@media(max-width:520px){
  .facility-clean-card{height:165px}
  .facility-clean-card__copy span{display:none}
  .activity-official-grid{grid-template-columns:1fr}
  .activity-official-card{aspect-ratio:1.18}
  .activity-official-card__copy strong{font-size:1rem}
  .activity-official-card__copy span{font-size:.68rem}
}