/* ==========================================================================
   Program card — degree program tile used on /programs/ and Home.
   A11Y: whole card is keyboard-reachable via the heading link; the card
   "stretched link" pattern keeps a single focusable target with a clear
   focus ring, while the badge/metadata stay readable (not link-colored).
   ========================================================================== */
.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}
.program-card:focus-within { box-shadow: var(--shadow-lg); }

.program-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--color-surface-2); }
.program-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Category icon chip overlapping the photo */
.program-card__icon {
  position: absolute;
  left: var(--space-2); bottom: -22px;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-accent);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.program-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-3); padding-top: var(--space-4); }

.program-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: var(--space-1);
}
.program-card__level {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}
.program-card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}
.program-card__title a { color: var(--color-primary); text-decoration: none; }
/* Stretched-link: the title link covers the whole card for a big target. */
.program-card__title a::after { content: ''; position: absolute; inset: 0; }
.program-card:hover .program-card__title a { color: var(--color-accent-hover); }

.program-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }

.program-card__facts {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.program-card__facts span { display: inline-flex; align-items: center; gap: 0.35rem; }
.program-card__facts .icon { color: var(--color-accent); }

.program-card__cue {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-accent-hover);
}
.program-card:hover .program-card__cue .btn__arrow { transform: translateX(3px); }

/* Icon-led banner variant (no photo) — used on Home + the catalog grid. */
.program-card__banner {
  position: relative;
  display: grid; place-items: center;
  height: 132px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy-700));
  color: #fff;
  overflow: hidden;
}
.program-card__banner::after { /* faint decorative orange arc, top rule only */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--color-orange), #ffbf66);
}
.program-card__banner .icon { width: 44px; height: 44px; opacity: 0.95; }
.program-card__banner--business { background: linear-gradient(135deg, #0d3c76, #2172c1); }
.program-card__banner--technology { background: linear-gradient(135deg, #082141, #134a8e); }
.program-card__family {
  position: absolute; left: var(--space-2); top: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
}
.program-card--compact .program-card__body { padding-top: var(--space-3); }

/* Teach-out variant — muted, with a clear status ribbon (not enrolling). */
.program-card--teachout { background: var(--color-surface); }
.program-card--teachout .program-card__media img { filter: grayscale(0.35); }
.program-card__status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  align-self: flex-start;
  padding: 0.2rem 0.6rem; margin-bottom: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  background: #fef3c7; color: #854d0e; /* amber-100 / amber-800 = 6.1:1 */
}