/* ============================================================
   CollegeNP - Course / Service detail page
   Loaded alongside college-detail.css, which supplies the shared
   detail-page system (tokens, .cd-hero, .cd-section, .cd-btn,
   .cd-prose, .cd-sectionnav, sidebar cards...). The course view's
   root carries BOTH .college-detail and .course-detail, so every
   .cd-* component already applies here; this file only adds the
   pieces a course page needs and the course-specific overrides.
   ============================================================ */

/* The legacy style.css collapses .course-detail .colz-info to display:block
   and pins the old hero; the new hero does not use those rules. */
.course-detail .cd-hero { display: block; }


/* ------------------------------------------------------------
   1. Hero - title, then degree / course type, then the college
   ------------------------------------------------------------ */
.cu-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; padding: 0; list-style: none; }
.cu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cd-primary-soft);
  color: var(--cd-primary);
}
.cu-badge--level { background: #EDE9FB; color: #5B3FBF; }
.cu-badge--cat { background: #E7F3EC; color: #1B7A4B; }

/* The owning college / university, sitting below the degree + course type */
.cu-owner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 7px;
  background: #F3F6F9;
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--cd-t), background var(--cd-t);
}
.cu-owner:hover { border-color: #BFD6E5; background: var(--cd-primary-soft); text-decoration: none; }
.cu-owner-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cd-primary-soft);
  color: var(--cd-primary);
  font-size: 12px;
}
.cu-owner-text { min-width: 0; line-height: 1.3; }
.cu-owner-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--cd-heading);
}
.cu-owner:hover .cu-owner-name { color: var(--cd-primary); }
.cu-owner-place { display: block; font-size: 12px; font-weight: 600; color: var(--cd-meta); }
.cu-owner-tick { color: var(--cd-primary); font-size: 11px; margin-left: 3px; }


/* ------------------------------------------------------------
   2. Fee highlight (hero + sidebar)
   ------------------------------------------------------------ */
.cu-fee {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--cd-radius-sm);
  background: linear-gradient(135deg, #EAF7F0, #F4FBF7);
  border: 1px solid #CBE7D8;
}
.cu-fee > i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #1B7A4B;
  color: #fff;
  font-size: 15px;
}
.cu-fee-k {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2F6B4F;
}
.cu-fee-v {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #14603C;
}
.cu-fee-note { display: block; font-size: 11.5px; color: #4C7A63; font-weight: 600; }


/* ------------------------------------------------------------
   3. Course spec table (the full fact sheet)
   ------------------------------------------------------------ */
.cu-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
  overflow: hidden;
}
.cu-specs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cd-line);
  border-right: 1px solid var(--cd-line);
  background: #fff;
}
.cu-specs li > i {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--cd-primary-soft);
  color: var(--cd-primary);
  font-size: 13px;
}
.cu-spec-k {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cd-meta);
  margin-bottom: 2px;
}
.cu-spec-v {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cd-heading);
  line-height: 1.45;
  word-break: break-word;
}
.cu-spec-v a { color: var(--cd-primary); text-decoration: none; }
.cu-spec-v a:hover { text-decoration: underline; }


/* ------------------------------------------------------------
   4. Similar courses elsewhere
   ------------------------------------------------------------ */
.cu-alt { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cu-alt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
  text-decoration: none;
  transition: border-color var(--cd-t), box-shadow var(--cd-t), transform var(--cd-t);
}
.cu-alt-card:hover { border-color: #BFD6E5; box-shadow: var(--cd-shadow); transform: translateY(-2px); text-decoration: none; }
.cu-alt-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #fff center / contain no-repeat;
  border: 1px solid var(--cd-line);
}
.cu-alt-logo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #005B8F, #0A7BB8);
  border-color: transparent;
  color: #fff;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
}
.cu-alt-main { min-width: 0; flex: 1 1 auto; }
.cu-alt-college {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cd-heading);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-alt-card:hover .cu-alt-college { color: var(--cd-primary); }
.cu-alt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cd-meta);
}
.cu-alt-meta i { font-size: 11px; opacity: .8; margin-right: 3px; }
.cu-alt-fee { color: #1B7A4B; }


/* ------------------------------------------------------------
   5. Sidebar - owning institution card
   ------------------------------------------------------------ */
.cu-side-owner { text-align: center; padding: 4px 0 2px; }
.cu-side-owner-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 11px;
  border-radius: 14px;
  background: #fff center / contain no-repeat;
  border: 1px solid var(--cd-line);
  padding: 6px;
}
.cu-side-owner-logo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #005B8F, #0A7BB8);
  border-color: transparent;
  color: #fff;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
}
.cu-side-owner-name {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cd-heading);
  margin: 0 0 4px;
}
.cu-side-owner-name a { color: inherit; text-decoration: none; }
.cu-side-owner-name a:hover { color: var(--cd-primary); }
.cu-side-owner-place { font-size: 13px; font-weight: 600; color: var(--cd-meta); margin: 0 0 13px; }
.cu-side-owner-place i { color: var(--cd-primary); margin-right: 4px; }


/* ------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .cu-specs { grid-template-columns: 1fr; }
  .cu-specs li { border-right: 0; }
  .cu-alt, .cu-alt-card { grid-template-columns: 1fr; }
  .cu-fee-v { font-size: 18px; }
}

@media print {
  .cu-alt { display: none !important; }
}