/* ==================================================
  PROGRAM CARDS (programs.html and the homepage's "Our programs")
  One card per public program (js/pages/programs.page.js). The picture block is the program
  tiles' .program-selector__visual (components.css); the program's colour arrives as
  --program-selector-color on the card and runs along the bottom of the picture.
================================================== */
.program-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:var(--space-6);
}

.program-cards + p{
  margin-top:var(--space-6);
}

.program-cards[data-program-count="1"]{
  grid-template-columns:minmax(0, 620px);
}

.program-card{
  --program-selector-color:var(--primary);
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0;
  overflow:hidden;
}

.program-card .program-card__visual{
  aspect-ratio:16 / 9;
  min-height:0;
  align-items:flex-end;
  padding:var(--space-5) var(--space-6);
  border-bottom:4px solid var(--program-selector-color);
}

/* No type sits on the photo, so it keeps its own light: no tile scrim, no initials. The colour block
   (no photo) shows the program's initials. */
.program-card .program-card__visual.has-image::after,
.program-card .program-card__visual.has-image .program-selector__mark{
  display:none;
}

.program-card .program-selector__mark{
  font-size:clamp(3rem, 7vw, 4.25rem);
}

.program-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-5) var(--space-6) var(--space-6);
}

.program-card__title{
  margin:0;
  font-size:clamp(1.3rem, 2.4vw, 1.55rem);
  line-height:1.2;
}

.program-card__description{
  margin:0;
  max-width:60ch;
  color:var(--text-200);
  font-size:var(--text-md);
  line-height:1.5;
}

.program-card__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text);
  font-size:var(--text-sm);
  font-weight:600;
}

.program-card__facts li{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}

.program-card__facts .icon{
  flex:none;
  color:var(--program-selector-color);
}

/* Price and actions share the bottom row, lined up across the cards of one row. */
.program-card__footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid var(--line-muted);
}

.program-card__price{
  margin:0;
  color:var(--text-200);
  font-size:var(--text-sm);
}

.program-card__price strong{
  margin-right:.1rem;
  color:var(--text);
  font-size:1.75rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}

.program-card__actions{
  gap:var(--space-3);
}

.program-card__actions .btn-compact{
  display:inline-flex;
}