/* === PANELS & CARDS === */
.info-panel {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 32px;
}

.info-panel--dark {
  background: var(--medical-blue-dark);
  border: none;
  color: white;
}

.info-panel--dark h1,
.info-panel--dark h2,
.info-panel--dark h3,
.info-panel--dark h4,
.info-panel--dark p {
  color: white;
}

.btn-on-dark.btn-primary {
  background: white;
  color: var(--medical-blue);
}

/* Same reasoning as .cta-buttons .btn-primary:hover — white-to-almost-
   white reads as no hover feedback at all on a dark card. */
.btn-on-dark.btn-primary:hover {
  background: var(--bg-primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Single canonical definition. This used to be declared here AND in
   pages/single/university.css with different size/gap/spacing and an
   extra divider, so the same panel title rendered one way on archive
   pages (which don't load that file) and another on single/page
   templates (which do) — same component, two looks, decided purely by
   which stylesheet happened to be enqueued. */
.info-panel-title {
  font-size: 1.05rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-panel-title .icon {
  width: 36px;
  height: 36px;
  background: var(--sky-blue);
  color: var(--medical-blue);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* === PROGRAM CARDS === */
.program-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}

.program-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out;
  position: relative;
  display: flex;
  flex-direction: column;
}

.program-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--sky-accent);
}

.program-card-icon {
  width: 60px;
  height: 60px;
  background: var(--sky-blue);
  color: var(--medical-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 24px;
}

.program-card-name {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.program-card-name a {
  color: var(--text-primary);
}

.program-card-name a:hover {
  color: var(--medical-blue);
}

.program-card-name--sm {
  font-size: 1.15rem;
}

.program-card-duration {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.program-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.program-card--placeholder {
  border-style: dashed;
  border-color: var(--border-dark);
  box-shadow: none;
}

.program-card--placeholder:hover {
  box-shadow: none;
  border-color: var(--border-dark);
}

.program-card--placeholder .program-card-icon {
  background: var(--bg-section);
  color: var(--text-muted);
}

.program-card--placeholder .program-card-duration {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.program-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}

.program-stat {
  display: flex;
  flex-direction: column;
}

.program-stat-label {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.program-stat-value {
  font-weight: 700;
  color: var(--text-primary);
}

.program-card .btn-card-link {
  margin-top: auto;
}

/* blog-card.php wraps its body in .program-card-content, which had no
   rule — so it wasn't a flex column and the margin-top:auto above had
   nothing to push against, leaving each blog card's "Read Full Story"
   link wherever its text happened to end instead of pinned to the
   bottom. That's why blog cards in a row looked ragged. */
.program-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.program-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

/* === UNIVERSITY CARDS === */
.uni-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.uni-card:hover {
  border-color: var(--sky-accent);
  box-shadow: var(--shadow-md);
}

.uni-card--demo {
  border-style: dashed;
  border-color: var(--border-dark);
  box-shadow: none;
}

.uni-card--demo:hover {
  border-color: var(--border-dark);
  box-shadow: none;
}

.uni-card-img {
  position: relative;
  min-height: 132px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
}

.uni-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uni-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sky-blue), var(--sky-accent));
  font-size: 2.25rem;
  color: var(--medical-blue-light);
}

.uni-card-img-placeholder--muted {
  background: var(--bg-section);
  color: var(--border-dark);
}

.uni-card .uni-sector-badge {
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
}

/* Category chip overlaid on the archive-card thumbnail — was previously
   undefined, so it rendered as bare unstyled text sitting directly on
   top of the post image with no guaranteed contrast against it. */
.uni-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(22, 32, 41, 0.65);
  color: white;
  z-index: 2;
}

.uni-card .badge-public {
  background: var(--success-light);
  color: var(--success-green);
}

.uni-card .badge-private {
  background: var(--sky-blue);
  color: var(--medical-blue);
}

.uni-card .badge-featured {
  left: 16px;
  right: auto;
  top: 16px;
  background: var(--warning-light);
  color: var(--warning-amber);
}

.uni-card-media-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uni-card-media-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 600;
}

.uni-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  background: var(--bg-white);
}

.uni-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.uni-card-head {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.uni-card-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uni-card-eyebrow-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Reserve two lines of title height so a card whose name wraps (e.g.
   "Dow University of Health Sciences") doesn't push its tags, stats and
   footer out of line with the single-line cards beside it in the grid. */
.uni-card-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  min-height: calc(1.1rem * 1.3 * 2);
}

.uni-card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.uni-card-title a:hover {
  color: var(--medical-blue);
}

.uni-card-summary {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Recognition as one quiet line, not a bordered box. PMDC/HEC status is
   worth showing (students filter on it) but it doesn't warrant its own
   panel inside an already-bordered card. */
.uni-card-recognition {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.uni-card-recognition i {
  color: var(--success-green);
}

.uni-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* A lone stat shouldn't be squeezed into half the card width. */
.uni-card-stats--single {
  grid-template-columns: 1fr;
}

/* No border here on purpose — the card itself already has one, and a
   bordered+filled box for every stat inside an already-bordered card
   reads as "cards inside a card." A soft fill is enough to group the
   label+value pair without doubling up on the border. */
.uni-card-stat {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

/* Weight contrast, not weight agreement, is what makes "MERIT 2024"
   read as a caption and "85.00%" read as the answer — matching this to
   .uni-card-stat-value's 700 (as it briefly was) makes both shout at
   once and the card loses its hierarchy. Same reasoning as the
   existing .stat-label/.stat-number pair in layout/hero-sections.css. */
.uni-card-stat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.uni-card-stat-value {
  display: block;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}

.uni-card-stat--status .uni-card-stat-value {
  font-size: 1rem;
}

.uni-programs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.program-tag {
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--medical-blue);
  font-size: 0.76rem;
  font-weight: 600;
}

.uni-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.uni-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.uni-card-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--medical-blue);
  text-decoration: none;
  box-shadow: none;
}

.uni-card-secondary-action:hover {
  background: var(--sky-blue);
}

.uni-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--medical-blue);
  text-decoration: none;
  box-shadow: none;
  font-weight: 700;
  white-space: nowrap;
}

.uni-card-cta:hover {
  background: transparent;
  box-shadow: none;
  color: var(--medical-blue-dark);
}

@media (max-width: 640px) {
  .uni-cards-grid,
  .uni-card-stats,
  .uni-card-actions {
    grid-template-columns: 1fr;
  }

  .uni-card {
    border-radius: var(--radius-sm);
  }

  .uni-card-body {
    padding: 20px;
  }

  .uni-card-img {
    min-height: 132px;
  }
}