/* =====================================================================
   ABOUT PAGE STYLES — Revamped
   ===================================================================== */

/* Split Layout */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5xl);
  align-items: center;
}

.about-split.reverse {
  direction: rtl;
}

.about-split.reverse > * {
  direction: ltr;
}

.about-image img {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  object-fit: cover;
}

.about-content h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-xl);
}

.about-content p {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.doctor-title-text {
  color: var(--color-accent) !important;
  font-weight: 600;
  font-size: var(--font-size-lg);
  font-family: var(--font-heading);
}

/* Stats Row */
.about-stats {
  display: flex;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-divider);
}

.about-stat-item {
  display: flex;
  flex-direction: column;
}

.about-stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.2;
}

.about-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: 4px;
}

/* Facility Card */
.facility-card {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.facility-card .icon-box {
  margin-bottom: var(--space-sm);
}

.facility-card h3 {
  font-size: var(--font-size-lg);
}

.facility-card p {
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 1024px) {
  .about-split,
  .about-split.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .about-split .about-image {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .about-stats {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .about-content h2 {
    font-size: var(--font-size-2xl);
  }
}