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

/* Page intro */
.branches-intro-section { padding-bottom: var(--space-5); }
.branches-intro-desc { max-width: 70ch; color: var(--color-text-muted); margin-top: var(--space-3); }

/* Branch cards — visual family resemblance with hospital.css's .doctor-card */
.branch-detail-card {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.branch-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.branch-detail-card h2 { color: var(--color-primary-dark); margin-bottom: var(--space-2); font-size: 1.3rem; }
.branch-city { font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-3); }
.branch-address { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.branch-address--pending { font-style: italic; }
.branch-phone { margin-bottom: var(--space-4); }
.branch-phone a { text-decoration: none; color: var(--color-primary-dark); font-weight: 600; }
.branch-phone a:hover { color: var(--color-accent); }

.branch-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}
.branch-map iframe { display: block; }

.branch-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}
.branch-card-actions .btn { width: 100%; justify-content: center; }