/* ==========================================================================
   program-detail.css — program detail page (hero meta, fact band, careers,
   curriculum, tuition, teach-out banner). No inline form per Ali's feedback.
   ========================================================================== */

/* Teach-out banner — prominent, unmistakable, accessible (not color-only). */
.teachout-banner {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}
.teachout-banner__inner {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding-block: var(--space-3);
}
.teachout-banner .icon { color: #b45309; flex-shrink: 0; margin-top: 2px; }
.teachout-banner strong { color: #854d0e; display: block; margin-bottom: 0.15rem; }
.teachout-banner p { color: #713f12; margin: 0; font-size: var(--text-sm); max-width: 90ch; }

/* Hero meta chips (credential, credits, length, format) */
.prog-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); }
.prog-meta li {
  display: inline-flex; align-items: center; gap: 0.4rem; list-style: none;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.1); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.prog-meta .icon { color: #ffd9a3; }

/* Fact band beneath the hero */
.fact-band { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.fact-band__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  padding-block: var(--space-4);
}
.fact { display: flex; gap: var(--space-2); align-items: flex-start; }
.fact__icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); background: #e7f0fb; color: var(--color-accent-hover); }
.fact__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.fact__value { font-weight: var(--weight-semibold); color: var(--color-primary); }

/* Careers grid */
.careers-grid { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.careers-grid li {
  display: flex; align-items: center; gap: 0.6rem; list-style: none;
  padding: var(--space-2); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}
.careers-grid .icon { color: var(--color-accent); flex-shrink: 0; }

/* Curriculum */
/* Single column: every course is an expandable disclosure, so a 2-up grid made
   rows jump around as they opened. */
.curriculum { display: grid; gap: var(--space-6); }
.course-group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-lg); margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 2px solid var(--color-border); }
.course-group h3 span { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.course-group__note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.course { font-size: var(--text-sm); }
.course__d { border-bottom: 1px solid var(--color-border); }
.course__d[open] { background: var(--color-surface); border-radius: var(--radius-md); border-bottom-color: transparent; }

.course__d > summary,
.course--static {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.6rem 0.5rem;
}
.course__d > summary { cursor: pointer; list-style: none; }
.course__d > summary::-webkit-details-marker { display: none; }
.course__d > summary:hover { background: var(--color-surface); }
.course__d > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }

/* Chevron drawn from the title cell so it never collides with the credits column. */
.course__title { position: relative; padding-right: 1.25rem; }
.course__d > summary .course__title::after {
  content: ''; position: absolute; right: 0; top: 0.35em;
  width: 0.45rem; height: 0.45rem;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.course__d[open] > summary .course__title::after { transform: rotate(-135deg); }

.course__code { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.course__credits { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.course--static { color: var(--color-text-muted); }

.course__body { padding: 0 0.5rem 0.9rem 6rem; }
.course__body p { margin: 0; color: var(--color-text-muted); line-height: var(--leading-relaxed); }
.course__prereq { margin-top: var(--space-2) !important; font-size: var(--text-xs); }
.course__prereq strong { color: var(--color-text); }

.concentration { margin-top: var(--space-4); }
.concentration h4 { font-size: var(--text-base); margin: 0 0 var(--space-1); }

@media (max-width: 560px) {
  .course__d > summary, .course--static { grid-template-columns: 1fr auto; row-gap: 0.15rem; }
  .course__code { grid-column: 1 / -1; }
  .course__body { padding-left: 0.5rem; }
}

/* Tuition table */
.tuition-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.tuition-table th, .tuition-table td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.tuition-table td:last-child, .tuition-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tuition-table tfoot td { font-weight: var(--weight-bold); color: var(--color-primary); border-top: 2px solid var(--color-border-strong); border-bottom: none; font-size: var(--text-lg); }
.tuition-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Sidebar within program body (sticky facts/CTA) */
.prog-layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .prog-layout { grid-template-columns: 1fr 320px; gap: var(--space-8); } }
.prog-aside { align-self: start; }
@media (min-width: 960px) { .prog-aside { position: sticky; top: calc(var(--sticky-top) + var(--space-3)); } }
.prog-aside__card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-3); }
.prog-aside__card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.prog-aside__card .btn { width: 100%; margin-bottom: var(--space-1); }