/* ==========================================================================
   iBtech High School — division extras (loaded on high-school/* pages only).
   Uses shared tokens from style.css; no hard-coded division colours.
   .hs-plan ...... hero visual: sample OSSD plan card (index)
   .hs-code ...... hero visual: course-code anatomy card (courses)
   .hs-jump ...... subject jump links (courses)
   .hs-types ..... course-type legend (courses)
   .hs-subject ... subject heading + table row (courses)
   .hs-path ...... sample courses by grade (programs)
   .hs-contact ... campus contact list (admissions)
   ========================================================================== */

.card .more svg { transition: transform .2s; }
.card.link:hover .more svg { transform: translateX(3px); }

/* ---------- Hero cards (shared look) ---------- */
.hs-plan, .hs-code {
  background: var(--card); color: var(--text);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.8vw, 30px);
  box-shadow: 0 30px 60px -24px rgba(22, 20, 58, .5);
  max-width: 460px; margin-left: auto;
}
.hs-plan { transform: rotate(-1.5deg); }
.hs-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.hs-card-head b { font: 800 20px/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }

/* Sample plan rows */
.hs-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hs-plan li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--soft); font-size: 15px;
}
.hs-plan li .code { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.hs-plan li .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-plan li .st {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.hs-plan li .st.wip { background: var(--accent-2); color: var(--accent-2-ink); }
.hs-plan li .st svg { width: 15px; height: 15px; }
.hs-plan-foot { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--muted); }
.hs-bar { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 8px; }
.hs-bar span { display: block; height: 100%; width: 78%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Course-code anatomy */
.hs-code-parts { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; }
.hs-code-parts > div { border-radius: 18px; padding: 16px 10px 14px; text-align: center; }
.hs-code-parts b { display: block; font: 800 clamp(38px, 5vw, 60px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.hs-code-parts span { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.hs-code-parts > :nth-child(1) { background: var(--accent); color: var(--accent-ink); }
.hs-code-parts > :nth-child(2) { background: var(--accent-2); color: var(--accent-2-ink); }
.hs-code-parts > :nth-child(3) { background: var(--accent-soft); color: var(--accent-soft-ink); }
.hs-code p { margin: 16px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Courses: jump links ---------- */
.hs-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hs-jump a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card);
  text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.2;
  transition: background-color .2s, border-color .2s, color .2s;
}
.hs-jump a:hover { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: transparent; }
.hs-jump svg { width: 16px; height: 16px; color: var(--accent-text); }
.hs-jump a:hover svg { color: inherit; }

/* ---------- Courses: type legend ---------- */
.hs-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs-types li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.section.alt .hs-types li { background: var(--bg); }
.hs-types .tag { min-width: 28px; text-align: center; margin-right: 6px; }
.hs-types b { font-size: 16px; }
.hs-types small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- Courses: subject blocks ---------- */
.hs-subject {
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); padding-block: clamp(32px, 4vw, 48px);
}
.hs-subject:first-child { padding-top: 0; }
.hs-subject:last-child { padding-bottom: 0; }
.hs-subject + .hs-subject { border-top: 1px solid var(--line); }
.hs-subject h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 16px; }
.hs-subject p { color: var(--muted); margin-top: 10px; font-size: 16px; }
.hs-subject .tbl td:nth-child(3), .hs-subject .tbl td:nth-child(4) { white-space: nowrap; }
.hs-subject .tbl .tag { margin-right: 6px; min-width: 26px; text-align: center; }

@media (min-width: 561px) {
  /* Same column widths in every subject table. */
  .hs-subject .tbl th:nth-child(1) { width: 96px; }
  .hs-subject .tbl th:nth-child(3) { width: 84px; }
  .hs-subject .tbl th:nth-child(4) { width: 210px; }
}

/* ---------- Programs: sample courses by grade ---------- */
.hs-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hs-path li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: var(--soft);
}
.hs-path li > b { font: 800 18px/1.1 "Bricolage Grotesque", sans-serif; color: var(--accent-text); }
.hs-path li > span { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-path li:last-child { background: var(--accent); color: var(--accent-ink); }
.hs-path li:last-child > b { color: inherit; }

/* ---------- Admissions: contact list ---------- */
.hs-contact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.hs-contact li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.hs-contact svg { width: 22px; height: 22px; color: var(--accent-text); margin-top: 2px; }
.hs-contact a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.hs-contact a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hs-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hs-subject { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hs-plan, .hs-code { margin-inline: 0; }
  .hs-plan { transform: none; }
}
@media (max-width: 560px) {
  /* Fit course tables without sideways scrolling: tighter cells, type letter only. */
  .hs-subject .tbl { min-width: 0; font-size: 15px; }
  .hs-subject .tbl th, .hs-subject .tbl td { padding: 12px 10px; }
  .hs-subject .tbl .tag { margin-right: 0; }
  .hs-subject .tlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 480px) {
  .hs-types { grid-template-columns: 1fr; }
  .hs-path li { grid-template-columns: 1fr; gap: 8px; }
}