/* ============================================================
   MODULE PAGES — Shared styles for individual module pages
   EHR, PMS, CRM, Patient App, Analytics, Payments, AI Tools, RCM
   ============================================================ */

/* ── Module Hero ── */
.mod-hero {
  position: relative;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}

.mod-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.mod-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mod-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.mod-hero__breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.mod-hero__breadcrumb a:hover {
  text-decoration: underline;
}

.mod-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 1em;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.mod-hero__badge--blue    { background: #dfebf2; color: #0069a6; }
.mod-hero__badge--green   { background: #dcfce7; color: #16a34a; }
.mod-hero__badge--purple  { background: #ede9fe; color: #7c3aed; }
.mod-hero__badge--orange  { background: #fef3c7; color: #d97706; }
.mod-hero__badge--red     { background: #fee2e2; color: #dc2626; }
.mod-hero__badge--teal    { background: #ccfbf1; color: #0d9488; }
.mod-hero__badge--violet  { background: #f0e8fb; color: #8b5cf6; }

.mod-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.mod-hero__subtitle {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 540px;
}

.mod-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.mod-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hero mockup enlargement */
.mod-mockup--hero {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

/* ── Color-themed hero backgrounds ── */
.mod-hero--blue  { background: linear-gradient(135deg, rgba(0,105,166,0.04) 0%, rgba(22,55,96,0.06) 100%); }
.mod-hero--green { background: linear-gradient(135deg, rgba(22,163,74,0.04) 0%, rgba(5,150,105,0.06) 100%); }
.mod-hero--purple { background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(139,92,246,0.06) 100%); }
.mod-hero--orange { background: linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(249,115,22,0.06) 100%); }
.mod-hero--red    { background: linear-gradient(135deg, rgba(239,68,68,0.04) 0%, rgba(220,38,38,0.06) 100%); }
.mod-hero--teal   { background: linear-gradient(135deg, rgba(20,184,166,0.04) 0%, rgba(13,148,136,0.06) 100%); }
.mod-hero--violet { background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(124,58,237,0.06) 100%); }

/* ── Connected Modules Grid ── */
.mod-connect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.mod-connect-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-6);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mod-connect-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mod-connect-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.mod-connect-card__icon--blue   { background: #dfebf2; color: #0069a6; }
.mod-connect-card__icon--green  { background: #dcfce7; color: #16a34a; }
.mod-connect-card__icon--purple { background: #ede9fe; color: #7c3aed; }
.mod-connect-card__icon--orange { background: #fef3c7; color: #d97706; }
.mod-connect-card__icon--red    { background: #fee2e2; color: #dc2626; }
.mod-connect-card__icon--teal   { background: #ccfbf1; color: #0d9488; }
.mod-connect-card__icon--violet { background: #f0e8fb; color: #8b5cf6; }

.mod-connect-card h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.mod-connect-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .mod-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .mod-hero__visual {
    order: -1;
  }

  .mod-mockup--hero {
    transform: scale(0.95);
  }

  .mod-connect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mod-hero {
    padding: clamp(6rem, 10vw, 8rem) 0 var(--space-10);
  }

  .mod-hero__title {
    font-size: var(--text-4xl);
  }

  .mod-connect-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .mod-mockup--hero {
    transform: scale(0.85);
  }
}

@media (max-width: 480px) {
  .mod-hero__actions {
    flex-direction: column;
  }

  .mod-hero__actions .btn {
    width: 100%;
    text-align: center;
  }
}