/* Teaching page: the Courses section. Eight subject cards in two groups, the AI and
   machine learning group first on a navy panel. Each card carries a small live figure
   of its subject (drawn by heroes/courses.js) and a term ribbon, Fall 2023 to Fall 2026.
   Everything reads without the script; the figures are decoration only. */

.courses { --ai-ink: #D6DCF0; --ai-soft: #8FA4F0; --line-dark: rgba(214,220,240,.16); }

/* ---------- Tally ---------- */
.tally { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
         gap: .5rem 3rem; color: var(--ink-2); font-size: .95rem; }
.tally li { display: flex; align-items: baseline; gap: .55rem; }
.tally strong { font: 600 2.6rem/1 var(--serif); color: var(--ece-navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 1ch; }
.tally li:first-child strong { color: var(--ece-deep); }

/* ---------- Ribbon key ---------- */
.key { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 2.25rem; font-size: .86rem; color: var(--ink-2); }
.key .ribbon { width: 6.5rem; }
.key-item { display: inline-flex; align-items: center; gap: .4rem; }
.key-item i { width: 1.1rem; height: 6px; border-radius: 3px; background: var(--ece-deep); }
.key-item i.k-now { background: var(--ece-orange); }

/* ---------- Ribbon ---------- */
.ribbon { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ribbon i { display: block; height: 6px; border-radius: 3px; background: var(--cell); transform-origin: left center; }
.ribbon i.on { background: var(--ece-deep); }
.ribbon i.now { background: var(--ece-orange); }

/* ---------- Groups ---------- */
.cgroup + .cgroup { margin-top: 3rem; }
.cgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.25rem; }
.cgroup-head h3 { font: 600 1.35rem/1.25 var(--serif); margin: 0; color: var(--ink); }
.cgroup-head p { margin: 0; font-size: .88rem; color: var(--ink-2); }

.cgroup-ai { position: relative; overflow: hidden; border-radius: 18px; padding: 1.75rem 1.75rem 1.9rem; color: var(--ai-ink);
             background: radial-gradient(120% 90% at 100% 0%, rgba(59,91,219,.35), rgba(59,91,219,0) 60%),
                         linear-gradient(104deg, var(--ece-navy) 0%, var(--ece-deep) 100%); }
.cgroup-ai .cgroup-head h3 { color: #fff; }
.cgroup-ai .cgroup-head p { color: var(--ai-soft); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

/* ---------- Cards ---------- */
.course { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
          background: #fff; border: 1px solid var(--rule);
          transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.course:hover, .course:focus-within { transform: translateY(-3px); border-color: #C3CCE6; box-shadow: 0 14px 30px -18px rgba(21,29,75,.35); }
.motif { display: none; width: 100%; height: 9.5rem; background: #F2F4FA; border-bottom: 1px solid var(--rule); }
.courses.is-live .motif { display: block; }
.course-body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem 1.2rem 1.2rem; }
.course h4 { font: 600 1.2rem/1.28 var(--serif); margin: 0 0 .35rem; color: var(--ink); text-wrap: balance; }
.codes { margin: 0 0 1rem; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.codes code { font: 500 .82rem var(--mono); color: var(--ece-deep); white-space: nowrap; }
.terms { margin-top: auto; }
.when { margin: .5rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.when strong { font-weight: 600; color: #B8531D; }

/* Teaching now: a small orange flag pinned over the figure (in the flow when there is no figure). */
.flag { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin: 0 0 .5rem; padding: .18rem .6rem .18rem .5rem;
        border-radius: 999px; background: var(--ece-orange); color: var(--ece-navy); font-size: .76rem; font-weight: 600; line-height: 1.5; }
.courses.is-live .flag { position: absolute; top: .75rem; left: .75rem; margin: 0; box-shadow: 0 4px 12px -4px rgba(233,113,50,.6); }
/* The loss curve starts high on the left, so its flag sits on the right. */
.courses.is-live .course[data-motif="descent"] .flag { left: auto; right: .75rem; }
.pulse { position: relative; width: .45rem; height: .45rem; border-radius: 50%; background: #fff; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.note { align-self: flex-start; margin: 0 0 .5rem; padding: .1rem .55rem; border: 1px solid currentColor; border-radius: 999px;
        font-size: .76rem; font-weight: 600; color: var(--ece-deep); }

/* Cards on the navy panel. */
.cgroup-ai .course { background: rgba(255,255,255,.045); border-color: var(--line-dark); }
.cgroup-ai .course:hover, .cgroup-ai .course:focus-within { background: rgba(255,255,255,.07); border-color: rgba(214,220,240,.34); box-shadow: 0 18px 36px -20px rgba(0,0,0,.6); }
.cgroup-ai .motif { background: rgba(8,14,52,.35); border-bottom-color: var(--line-dark); }
.cgroup-ai .course h4 { color: #fff; }
.cgroup-ai .codes { color: var(--ai-ink); opacity: .8; }
.cgroup-ai .codes code { color: #B9C7F7; }
.cgroup-ai .when { color: var(--ai-soft); }
.cgroup-ai .when strong { color: #F5A878; }
.cgroup-ai .note { color: var(--ai-soft); }
.cgroup-ai .ribbon i { background: rgba(214,220,240,.14); }
.cgroup-ai .ribbon i.on { background: var(--ai-soft); }
.cgroup-ai .ribbon i.now { background: var(--ece-orange); }

/* Networking: the one course with a public page, so its card leads the group and links through. */
.course-link { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .6rem 1.05rem; min-height: 2.75rem;
               border-radius: 6px; background: var(--ece-deep); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
               transition: background .25s; }
.course-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }  /* the whole card is the link */
.course:has(.course-link):hover .course-link { background: var(--ece-navy); }
.course-link:focus-visible { outline: 3px solid var(--ece-orange); outline-offset: 3px; }
.course:has(.course-link):has(.course-link:focus-visible) { box-shadow: 0 0 0 3px var(--ece-orange); }
.course-link::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .25s; }
.course:has(.course-link):hover .course-link::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Entrance: set up by the script only when motion is welcome ---------- */
.courses.will-reveal .course { opacity: 0; transform: translateY(14px); }
.courses.will-reveal .course.is-seen { opacity: 1; transform: none;
  transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s), box-shadow .35s, border-color .35s; }
.courses.will-reveal .course.is-seen:hover, .courses.will-reveal .course.is-seen:focus-within { transform: translateY(-3px); transition-delay: 0s; }
.courses.will-reveal .course .ribbon i.on, .courses.will-reveal .course .ribbon i.now { transform: scaleX(0); }
.courses.will-reveal .course.is-seen .ribbon i { transform: none; transition: transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .35s + var(--i, 0) * 70ms); }

/* ---------- Narrower screens ---------- */
@media (max-width: 980px) {
  .tally { grid-template-columns: repeat(2, auto); gap: .75rem 2.5rem; }
  .cgroup-ai .cards { grid-template-columns: 1fr; }
  .cgroup-ai .course { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .cgroup-ai .motif { height: 100%; min-height: 10rem; border-bottom: 0; border-right: 1px solid var(--line-dark); }
  .courses:not(.is-live) .cgroup-ai .course { grid-template-columns: 1fr; }
  .courses.is-live .cgroup-ai .flag { position: static; margin: 0 0 .5rem; box-shadow: none; }
  .cgroup-sys .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tally strong { font-size: 2.1rem; }
  .tally { gap: .6rem 1.5rem; }
  .cgroup-ai { margin-inline: -.5rem; padding: 1.25rem .9rem 1rem; border-radius: 14px; }
  .cgroup-ai .course { display: flex; }
  .courses.is-live .cgroup-ai .flag { position: absolute; margin: 0; }
  .cgroup-ai .motif { height: 8.5rem; min-height: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cgroup-ai .motif { border-bottom-color: var(--line-dark); }
  .cgroup-sys .cards { grid-template-columns: 1fr; }
  .course-body { padding: 1rem 1.05rem 1.1rem; }
  .motif { height: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .course, .course-link, .course-link::after { transition: none; }
  .course:hover, .course:focus-within { transform: none; }
  .pulse::after { animation: none; }
}

/* DS 3000 card link: space above its term ribbon. */
.course .course-link { margin-bottom: 1rem; }

/* The systems group sits in a panel too, so both groups read as matching sections:
   navy for the AI group, which leads, and a light panel for the systems group. */
.cgroup-sys { border-radius: 18px; padding: 1.75rem 1.75rem 1.9rem; background: linear-gradient(180deg, #EEF1F9 0%, #E6EBF7 100%); border: 1px solid #D9DFEE; }
.cgroup-sys .course { background: #fff; }
@media (max-width: 600px) { .cgroup-sys { margin-inline: -.5rem; padding: 1.25rem .9rem 1rem; border-radius: 14px; } }

/* Four AI subjects sit two by two; the new course card carries a short description. */
@media (min-width: 981px) { .cgroup-ai .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course .blurb { margin: .5rem 0 0; font-size: .92rem; line-height: 1.55; color: inherit; opacity: .82; }