/* Programs page specific styles (builds on base.css) */

/* Hero meta list (no images, clean text) */
.programs-hero-meta { display: flex; align-items: center; }
.programs-hero-list { display: grid; gap: var(--space-3); padding-left: 0; }
.programs-hero-list li { list-style: none; }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.filter-bar .btn { background: var(--gray-100); color: var(--gray-900); border-color: var(--gray-200); box-shadow: none; }
.filter-bar .btn.is-active { background: rgba(37,99,235,0.12); color: var(--color-primary); border-color: rgba(37,99,235,0.35); }

/* Bullet lists inside cards */
.programs-bullets { margin: 0; padding-left: 0; display: grid; gap: var(--space-3); }
.programs-bullets li { list-style: none; position: relative; padding-left: 20px; }
.programs-bullets li::before {
  content: "•";
  position: absolute; left: 0; top: 0; line-height: 1;
  color: var(--color-primary);
}
.section {
  padding-block: 39px 14px;
}
/* Mini list for schedule cells */
.programs-mini { margin: 0; padding-left: 0; display: grid; gap: var(--space-2); }
.programs-mini li { list-style: none; color: var(--gray-700); }

/* Steps */
.programs-steps { counter-reset: step; padding-left: 0; display: grid; gap: var(--space-6); }
.programs-steps li { list-style: none; position: relative; padding-left: 40px; }
.programs-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* Table */
.table-wrap { overflow-x: auto; }
.programs-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.programs-table th, .programs-table td {
  border: 1px solid var(--gray-200);
  padding: 12px 14px; text-align: left; vertical-align: top;
}
.programs-table thead th {
  background: var(--gray-100);
  font-weight: var(--weight-semibold);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .programs-hero-meta { margin-top: var(--space-9); }
  .filter-bar { gap: var(--space-4); }
}

/* Card rhythm adjustments */
.card h3 { margin-bottom: var(--space-4); }
.card p + .programs-bullets { margin-top: var(--space-4); }

/* Accessibility niceties */
:where(section) > .container > h2 { scroll-margin-top: 80px; }