/* ============================================================
   FACILITIES.CSS
   All styles scoped to the facilities section
   ============================================================ */

/* ── 1. SECTION WRAPPER ──────────────────────────────────── */
#facilities {
  background: var(--gray-100);
}

/* ── 2. FACILITY CARD ────────────────────────────────────── */
.facility-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  height: 100%;
}

.facility-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(30, 91, 198, 0.18);
}

.facility-card-header {
  background: var(--grad-blue);
  padding: 1.8rem;
  text-align: center;
  position: relative;
}

.facility-icon {
  font-size: 2.4rem;
  color: var(--gold);
}

.facility-tag {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 3. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .facility-card-header {
    padding: 1.4rem;
  }
}