/* Specialist pathways and capstone styles for the Applied AI programme. */

/* ---------- ICT track index ----------
   One open track (full-width, thread strip, real links) and three planned
   tracks (quieter, deliberately link-free). Status is carried by the label
   text, never by colour alone. */
.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.track-card-open {
  grid-column: 1 / -1;
  overflow: hidden;
  padding-top: 33px;
  box-shadow: 0 18px 42px rgba(10, 22, 38, 0.07);
}
.track-card-open::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--thread);
}
.track-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.track-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.track-status-open { color: var(--green-deep); }
.track-status-open::before { background: var(--green-bright); }
.track-status-planned { color: var(--muted); }
.track-status-planned::before { border: 2px solid var(--muted); }
.track-card h3 { margin: 0 0 12px; font-size: 25px; font-weight: 750; line-height: 1.12; letter-spacing: -0.015em; }
.track-card-open h3 { font-size: 33px; }
.track-summary { margin: 0 0 auto; color: var(--muted); }
.track-card-open .track-summary { max-width: 760px; font-size: 17.5px; }
.track-scope { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.track-scope span {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* The shared .chip-list is used with a <ul> here, so the UA list padding and
   markers have to be cleared; flexing already blockifies the list items. */
.track-card .chip-list { margin-top: 22px; padding: 0; list-style: none; }
.track-actions { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.track-note {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--muted-dark);
  color: var(--muted);
  background: var(--white);
}
.track-note strong { color: var(--ink); }

.programme-principle {
  margin: 28px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--blue);
  color: var(--muted);
  background: var(--surface);
}
.programme-principle strong { color: var(--ink); }
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.route-card {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 42px rgba(10, 22, 38, 0.07);
}
.route-card::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -86px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(23, 129, 188, 0.16);
  border-radius: 50%;
}
.route-card-technical {
  color: var(--white);
  border-color: var(--line-dark);
  background: radial-gradient(circle at 92% 10%, rgba(46, 158, 221, 0.2), transparent 42%), var(--ink);
}
.route-code {
  display: inline-block;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.route-card-technical .route-code { color: var(--blue-bright); }
.route-card h3 {
  margin: 54px 0 12px;
  font-size: 29px;
  line-height: 1.08;
}
.route-card > p { min-height: 78px; color: var(--muted); }
.route-card-technical > p { color: var(--muted-dark); }
.route-card ul { margin: 25px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.route-card-technical ul { border-color: var(--line-dark); }
.route-card li { position: relative; margin: 9px 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.route-card-technical li { color: #cbd9e6; }
.route-card li::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.capstone-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 82px; align-items: start; }
.capstone-layout h2 { margin: 0; font-size: 44px; line-height: 1.08; }
.capstone-grid { border-top: 1px solid var(--line-dark); }
.capstone-grid article { padding: 27px 0; border-bottom: 1px solid var(--line-dark); }
.capstone-grid span { color: var(--green-bright); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.capstone-grid h3 { margin: 9px 0 7px; font-size: 24px; }
.capstone-grid p { margin: 0; color: var(--muted-dark); }

@media (max-width: 980px) {
  .track-grid { grid-template-columns: 1fr; }
  .track-card-open { grid-column: auto; }
  .track-card-open h3 { font-size: 29px; }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 0; }
  .route-card > p { min-height: 0; }
  .route-card h3 { margin-top: 32px; }
  .capstone-layout { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 600px) {
  .track-card { padding: 25px 22px 22px; }
  .track-card-open { padding-top: 27px; }
  .track-card h3 { font-size: 23px; }
  .track-card-open h3 { font-size: 26px; }
  .track-card-open .track-summary { font-size: 16.5px; }
  .track-note { padding: 18px; }
  .route-card { padding: 25px 22px; }
  .route-card h3 { font-size: 26px; }
  .capstone-layout h2 { font-size: 34px; }
  .programme-principle { padding: 18px; }
}