/* hospitals page styles (moved out of hospitals.php) */

/* ================= GLOBAL STYLES ================= */
* { box-sizing: border-box; }

body { 
  margin: 0; 
  background: #f6f8fb; 
  color: #212529; /* solid dark text */
  font-family: var(--font-sans); 
}

/* ================= HEADINGS ================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: #102a56;
}

/* ================= PARAGRAPHS ================= */
p, li, .small, .text-muted {
  font-family: var(--font-sans);
  font-weight: 400;
  color: rgba(33,37,41,0.75) !important; /* force dark text */
}

/* ================= MENU FIX ================= */
#menu {
  background-color: #ffffff;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-space { height: 90px; }

/* ================= HERO SECTION ================= */
.hospitals-hero {
  background: #eef3f9;
  padding: 40px 0;
  text-align: center;
}
.hospitals-hero h1 { 
  font-weight: 700; 
  color: #102a56; 
  margin-bottom: 15px; 
}
.hospitals-hero p { 
  color: black; 
  font-size: var(--fs-base); 
  max-width: 700px; 
  margin: 0 auto; 
}

/* ================= SEARCH FORM ================= */
.search-form { 
  background: #fff; 
  padding: 30px; 
  border-radius: 16px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  margin-bottom: 40px; 
  margin-top: -30px; 
  position: relative; 
  z-index: 10; 
}
.search-form .form-label { 
  font-weight: 600; 
  color: #102a56; 
}
.search-form .btn { 
  background: #102a56; 
  border: none; 
  padding: 10px 20px; 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.search-form .btn:hover { 
  background: #0a1f3d; 
}

/* ================= HOSPITAL CARDS ================= */
.hospital-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  gap: 25px; 
  margin-bottom: 50px; 
}

.hospital-card { 
  background: #fff; 
  border-radius: 16px; 
  padding: 25px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
  transition: transform 0.3s; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
}
.hospital-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

.hospital-img-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 15px;
  border: 3px solid #eef3f9;
  background-color: #ffffff; /* Adds a clean background */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hospital-card img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* <--- Change this back to cover */
  /* Remove the padding line we added earlier! */
}

.hospital-card h5 { 
  font-weight: 600; 
  font-size: var(--fs-lg);      /* smaller size */
  line-height: var(--lh-tight);
  color: #102a56; 
  margin-bottom: 5px; 
}

.hospital-card .type { 
  color: #28a745; 
  font-weight: 600; 
  font-size: var(--fs-sm); 
  margin-bottom: 10px; 
  text-transform: uppercase; 
}
.hospital-card p { 
  margin: 5px 0; 
  color: #212529; 
  font-size: var(--fs-base); 
}

.btn-enquire { 
  background: #28a745; 
  color: white; 
  border: none; 
  padding: 10px 20px; 
  border-radius: 50px; 
  font-weight: 600; 
  margin-top: auto; 
  width: 100%; 
  transition: 0.3s; 
}
.btn-enquire:hover { 
  background: #218838; 
}

/* ================= NO RESULTS ================= */
.no-results { 
  text-align: center; 
  color: #212529; 
  font-size: var(--fs-base); 
  padding: 50px; 
  width: 100%; 
  grid-column: 1 / -1; 
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .hospital-grid { grid-template-columns: 1fr; }
  .search-form { padding: 20px; }
}