/* ==========================================================================
   Programs (programs.php, program.php) and Our Work (services.php).
   Everything else comes from site.css (.project, .product-*, .specs, .checklist, .service-block …).
   Loaded on every page → every selector is scoped to .prog-* components or the page body classes.
   ========================================================================== */

/* ---- program card (.project.prog-card) ---- */
.prog-card .project-media { position: relative; }
.prog-card .media-badge { left: 14px; bottom: auto; top: 14px; padding: .45em .9em; font-size: .72rem; }
.prog-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.prog-status--completed::before { background: var(--navy); }
.prog-status--upcoming::before { background: var(--blue); }
.prog-card-empty { display: grid; place-items: center; background: var(--silver); color: var(--navy); }
.prog-card-ph .ico { width: 64px; height: 64px; stroke-width: 1.2; opacity: .75; }
.prog-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--muted); font-size: .82rem; font-weight: 500; }
.prog-meta span { display: inline-flex; align-items: center; gap: .4em; }
.prog-meta .ico { width: 1.05em; height: 1.05em; color: var(--amber-2); }

/* ---- single program (program.php) ---- */
.prog-detail .crumbs { margin-bottom: clamp(20px, 3vw, 32px); }
.prog-placeholder { aspect-ratio: 4 / 3; }
.prog-hl-title { font-size: 1.05rem; margin-bottom: 14px; }
.prog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---- Our Work (services.php) ---- */
.page-services .service-copy .prose p:last-child { margin-bottom: 0; }