/* Page: Fasilitas — selaras dengan home (flat, center, grid 3-2-1) */

/* Container mengikuti variable global */
#page-fasilitas .section__inner{
  width: min(100%, var(--container-max, 1200px));
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Header */
#page-fasilitas .fac-head{
  display:flex; align-items:flex-end; gap:16px;
  justify-content:space-between; flex-wrap:wrap;
  margin-bottom: 14px;
}
#page-fasilitas .fac-title h2{
  font: 800 clamp(22px, 3vw, 30px)/1.15 "Manrope", system-ui, sans-serif;
  margin: 0 0 4px 0; letter-spacing: -.02em; color: var(--heroBrandLight, #0b1324);
}
#page-fasilitas .fac-title p{
  margin: 0; color: #64748b; font-size: 14px;
}

/* Search */
#page-fasilitas .fac-search{
  display:flex; gap:8px; align-items:center;
}
#page-fasilitas .fac-search__input{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; min-width:220px;
}
#page-fasilitas .fac-search__btn{
  padding:10px 12px; border-radius:10px; border:0; background:#2563eb; color:#fff; cursor:pointer;
}
#page-fasilitas .fac-search__btn:hover{ filter:brightness(.96); transform: translateY(-1px); }

/* Filter pills */
#page-fasilitas .fac-filter{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin: 6px 0 12px;
}
#page-fasilitas .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; border:1px solid #cbd5e1; background:#f8fafc; color:#0f172a;
  text-decoration:none; font-size:14px;
}
#page-fasilitas .pill.is-active{ background:#0f172a; color:#fff; border-color:#0f172a; }

/* Grid (ikut .ive-grid) */
#page-fasilitas .fac-grid{ grid-auto-rows: 1fr; }

/* Card */
.fac-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:12px;
  display:flex; flex-direction:column; box-shadow: var(--ive-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.fac-card__media{
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio: 16/9;
  background:#0b1220;
}
.fac-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.fac-ph{
  width:100%; height:100%; display:grid; place-items:center; background:#0b1220;
}
.fac-ph svg{ width:48px; height:48px; fill:#64748b; opacity:.35 }

/* Type chip + price */
.fac-chip{
  position:absolute; left:10px; top:10px;
  background:rgba(2,6,23,.55); backdrop-filter: blur(6px);
  color:#e2e8f0; border:1px solid rgba(148,163,184,.25);
  border-radius:999px; padding:6px 10px; font-size:12px;
}
.fac-chip--ok { background:#0d9488; border-color:#0d9488; color:#fff; }
.fac-chip--warn{ background:#7c3aed; border-color:#7c3aed; color:#fff; }

.fac-price{
  position:absolute; right:10px; bottom:10px;
  background:#0f172a; color:#fff; border-radius:10px; padding:6px 10px; font-weight:700; font-size:13px;
  box-shadow: 0 10px 20px rgba(2,6,23,.25);
}

/* Body */
.fac-card__body{ padding:10px 4px 8px; }
.fac-title__h3{ margin:4px 0 6px; font-size:18px; letter-spacing:-.01em; }
.fac-desc{ margin:0; color:#475569; font-size:14px; }

/* Actions */
.fac-card__actions{
  margin-top:auto; display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.badge-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px;
}
.badge-pill--ok{ background:#ecfdf5; color:#065f46; }

/* Empty state */
.fac-empty{ display:grid; place-items:center; padding:30px 0; }
.fac-empty__card{
  background:#fff; border:1px dashed #cbd5e1; border-radius:12px; padding:18px; text-align:center;
}
.fac-empty__icon{ font-size:28px; margin-bottom:6px; }

/* Responsive tweaks */
@media (max-width: 900px){
  #page-fasilitas .fac-head{ align-items:stretch; }
  #page-fasilitas .fac-search__input{ min-width: 180px; }
}