/* Jeevan Rekha Chikitsalaya hospital page — page-specific layout only. Component look (cards/buttons/grids) comes from base.css. */

.section-title { margin-bottom: var(--space-5); }

/* 1. Hero */
.hospital-hero-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background: var(--color-primary-dark);
  color: #fff;
}
.hospital-hero { max-width: 78ch; }
.hospital-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: var(--space-2); }
.hospital-hero-subtitle {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.hospital-hero-address {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}
.hospital-hero-phones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.hospital-phone-link {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}
.hospital-phone-link:hover { color: var(--color-gold); }
.hospital-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hospital-hero-actions .btn--outline { border-color: #fff; color: #fff; }
.hospital-hero-actions .btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

/* 2. About the hospital */
.hospital-about { max-width: 80ch; }
.hospital-about p { color: var(--color-text-muted); }

/* 3. Doctor team */
.doctor-card { text-align: left; }
.doctor-card h3 { margin-bottom: var(--space-2); color: var(--color-primary-dark); }
.doctor-qualification { font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-2); }
.doctor-specialty { color: var(--color-text-muted); }

/* 4. Facilities */
.facilities-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .facilities-list { grid-template-columns: repeat(2, 1fr); }
}
.facilities-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.facility-icon { font-size: 1.3rem; }

/* 5. Discount / tie-up banner */
.discount-banner {
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.discount-banner h2 { color: #fff; margin-bottom: var(--space-4); }
.discount-headline { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-3); }
.discount-partners { color: rgba(255, 255, 255, 0.9); }

/* 6. Map */
.hospital-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hospital-map iframe { display: block; }

/* 7. Photo gallery strip */
.hospital-gallery {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.hospital-gallery img {
  flex: 0 0 auto;
  width: 320px;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .2s ease;
}
.hospital-gallery img:hover { transform: scale(1.02); }

/* Mobile readability guard */
@media (max-width: 480px) {
  .hospital-gallery img { width: 240px; height: 180px; }
}