/* ============================================================
   VARSITY WISE — programme_detail.css
   Aesthetic: Editorial magazine · Deep crimson · Refined
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --crimson:        #9e0157;
  --crimson-dark:   #7a0041;
  --crimson-deeper: #5c0030;
  --crimson-light:  #fce7f3;
  --crimson-mid:    #f3c6dc;

  --ink:            #0f1117;
  --ink-80:         #1e2333;
  --ink-60:         #3d4461;
  --ink-40:         #6b7280;
  --ink-20:         #94a3b8;
  --ink-10:         #e2e8f0;
  --ink-05:         #f8fafc;

  --surface:        #ffffff;
  --surface-2:      #f9fafb;
  --surface-3:      #f1f5f9;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --safe-l: env(safe-area-inset-left,  0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--surface-3);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* ── Skip link ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px;
  width: auto; height: auto;
  padding: 10px 18px;
  background: var(--crimson);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 8px;
  z-index: 9999;
  text-decoration: none;
}

/* ── Programme hero ──────────────────────────────────────── */
.prog-hero {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--crimson-deeper);
}

/* Faint geometric circles — same as every other dark hero */
.prog-hero::before,
.prog-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.05);
}
.prog-hero::before { width: 460px; height: 460px; top: -180px; right: -110px; }
.prog-hero::after  { width: 260px; height: 260px; bottom: -120px; left: -70px; }

/* Dark gradient overlay */
.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.80) 100%);
  pointer-events: none;
}

.prog-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding:
    clamp(20px, 4vw, 36px)
    calc(clamp(14px, 4vw, 40px) + var(--safe-r))
    clamp(24px, 4vw, 40px)
    calc(clamp(14px, 4vw, 40px) + var(--safe-l));
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.breadcrumb-nav { margin-bottom: clamp(14px, 3vw, 20px); }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  gap: 0;
  font-size: clamp(.72rem, 1.5vw, .8rem);
}

.breadcrumb-item { display: contents; }

.breadcrumb-link {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
}
.breadcrumb-link:hover { color: #fff; }
.breadcrumb-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.breadcrumb-sep {
  color: rgba(255,255,255,.28);
  margin: 0 7px;
  font-size: .7rem;
  flex-shrink: 0;
}

.breadcrumb-current {
  color: rgba(255,255,255,.58);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Faculty back link */
.prog-faculty-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(.78rem, 1.8vw, .86rem);
  color: rgba(255,255,255,.60);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .15s;
  min-height: 40px;
}
.prog-faculty-link:hover { color: rgba(255,255,255,.90); }
.prog-faculty-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* H1 */
.prog-hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-shadow: 0 2px 8px rgba(0,0,0,.30);
  margin-bottom: 16px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Hero badges */
.prog-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.prog-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: clamp(.72rem, 1.8vw, .78rem);
  font-weight: 700;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  font-family: var(--font-body);
}

/* APS badge variant — crimson tint */
.prog-badge.aps {
  background: rgba(158,1,87,.55);
  border-color: rgba(158,1,87,.4);
}

/* NSFAS badge — green tint */
.prog-badge.nsfas {
  background: rgba(52,211,153,.28);
  border-color: rgba(52,211,153,.35);
}

/* ── APS mobile strip ────────────────────────────────────── */
.aps-hero-strip {
  display: none;
  align-items: center;
  gap: 16px;
  background: var(--crimson);
  border-radius: 12px;
  padding: clamp(14px, 3vw, 18px) clamp(16px, 4vw, 24px);
  color: #fff;
  box-shadow: 0 4px 16px rgba(158,1,87,.28);
  margin-bottom: 0;
}

.aps-hero-strip .aps-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -.03em;
}
.aps-hero-strip .aps-info { display: flex; flex-direction: column; gap: 3px; }
.aps-hero-strip .aps-lbl {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .82;
  font-weight: 700;
}
.aps-hero-strip .aps-nqf { font-size: .85rem; font-weight: 600; opacity: .90; }

@media (max-width: 860px) {
  .breadcrumb-nav    { display: none; }
  .aps-hero-strip    { display: flex; margin: 16px auto; max-width: 80%; }
  .aps-sidebar-only  { display: none; }
}

/* ── Page wrapper ────────────────────────────────────────── */
.prog-page {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding:
    clamp(16px, 3vw, 36px)
    calc(clamp(14px, 4vw, 40px) + var(--safe-r))
    calc(clamp(64px, 12vw, 100px) + var(--safe-b))
    calc(clamp(14px, 4vw, 40px) + var(--safe-l));
  overflow-x: hidden;
}

/* ── Layout grid ─────────────────────────────────────────── */
.prog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  align-items: start;
}

@media (min-width: 900px) {
  .prog-layout { grid-template-columns: 1fr 300px; }
  .prog-sidebar { position: sticky; top: 16px; align-self: start; }
}

.prog-main    { min-width: 0; }
.prog-sidebar { min-width: 0; }

/* ── Info cards ──────────────────────────────────────────── */
.info-card {
  background: var(--surface);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(14px, 3vw, 18px);
  overflow: hidden;
  min-width: 0;
}

/* Crimson top rule — system signature */
.info-card-header {
  padding: clamp(11px, 2.5vw, 13px) clamp(16px, 3vw, 22px);
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-10);
  font-weight: 700;
  font-size: .72rem;
  color: var(--crimson);
  letter-spacing: .09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
}

.info-card-body {
  padding: clamp(16px, 3vw, 24px);
  overflow-wrap: break-word;
}

.info-card-body p {
  color: var(--ink-60);
  line-height: 1.8;
  font-size: .93rem;
}

/* ── Specs grid ──────────────────────────────────────────── */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 10px;
}

.spec-item {
  background: var(--surface-3);
  border-radius: 10px;
  padding: clamp(12px, 2.5vw, 14px);
  border-left: 3px solid var(--crimson);
  min-width: 0;
  overflow: hidden;
}

.spec-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-20);
  font-weight: 700;
  margin-bottom: 5px;
}

.spec-value {
  font-family: var(--font-display);
  font-size: clamp(.88rem, 2.5vw, 1rem);
  font-weight: 700;
  color: var(--ink-80);
  overflow-wrap: break-word;
  word-break: break-word;
  letter-spacing: -.01em;
}

/* ── Subjects list ───────────────────────────────────────── */
.subjects-list { display: flex; flex-direction: column; gap: 8px; }

.subject-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface-3);
  border-radius: 10px;
  border-left: 3px solid var(--crimson);
}

.subject-name {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-80);
  line-height: 1.4;
  min-width: 0;
}

.subject-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  background: var(--crimson);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.01em;
}

.level-pct {
  font-size: .67rem;
  color: var(--ink-20);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Requirements list ───────────────────────────────────── */
.req-list { list-style: none; display: flex; flex-direction: column; }

.req-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--ink-60);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-05);
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: break-word;
}
.req-list li:last-child { border-bottom: none; }

.req-list li::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ecfdf5 url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23065f46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/9px 7px;
  border: 1px solid #a7f3d0;
  flex-shrink: 0;
  margin-top: 2px;
}

.req-note {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 9px 9px 0;
  padding: 12px 16px;
  font-size: .85rem;
  color: #92400e;
  margin-top: 12px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.selection-warning {
  margin-top: 14px;
  background: #fef2f2;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  color: #991b1b;
  font-weight: 600;
  border: 1px solid #fca5a5;
}

/* ── Career tags ─────────────────────────────────────────── */
.careers-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.career-tag {
  padding: 5px 13px;
  background: var(--crimson-light);
  color: var(--crimson-dark);
  border: 1px solid var(--crimson-mid);
  border-radius: 9999px;
  font-size: clamp(.77rem, 1.8vw, .82rem);
  font-weight: 600;
  font-family: var(--font-body);
}

/* ── Sidebar cards ───────────────────────────────────────── */
.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sidebar-card-rule {
  height: 3px;
  background: var(--crimson);
}

.sidebar-card-inner {
  padding: clamp(16px, 3vw, 22px);
}

.sidebar-card-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-20);
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink-10);
}

/* APS sidebar block */
.aps-sidebar-block {
  text-align: center;
  padding: clamp(18px, 4vw, 24px) 14px;
  background: var(--crimson);
  border-radius: 10px;
  color: #fff;
  margin-bottom: 13px;
}

.aps-sidebar-block .aps-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.aps-sidebar-block .aps-lbl {
  font-size: .72rem;
  opacity: .82;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* Apply button */
.apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  background: var(--crimson);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(158,1,87,.28);
  transition: background .18s, transform .18s, box-shadow .18s;
  min-height: 50px;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .01em;
}
.apply-btn:hover {
  background: var(--crimson-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(158,1,87,.35);
}
.apply-btn:active { transform: scale(.98); }
.apply-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.apply-sub { font-size: .82rem; color: var(--ink-40); line-height: 1.55; margin-bottom: 12px; }

/* Closing dates */
.closing-dates { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }

.date-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .84rem;
  padding: 7px 10px;
  background: var(--surface-2);
  border-radius: 7px;
  border-left: 3px solid var(--crimson);
  gap: 10px;
  flex-wrap: wrap;
}
.date-label {
  color: var(--ink-40);
  font-weight: 500;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-val { color: var(--ink-80); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* Info rows */
.info-row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-10);
  align-items: flex-start;
  font-size: .85rem;
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row .icon { flex-shrink: 0; font-size: 1rem; width: 20px; text-align: center; margin-top: 1px; }
.info-row .val  { color: var(--ink-60); line-height: 1.5; overflow-wrap: break-word; word-break: break-word; min-width: 0; flex: 1; }
.info-row .val a { color: var(--crimson); text-decoration: none; font-weight: 500; }
.info-row .val a:hover { text-decoration: underline; }

/* ── Inline section labels ───────────────────────────────── */
.section-sublabel {
  font-weight: 700;
  margin-bottom: 12px;
  font-size: .82rem;
  color: var(--ink-20);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── Mobile sticky apply ─────────────────────────────────── */
.mobile-apply-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100vw;
  max-width: 100vw;
  background: var(--surface);
  box-shadow: 0 -2px 16px rgba(0,0,0,.10);
  padding: 12px clamp(14px, 4vw, 24px);
  padding-bottom: max(12px, var(--safe-b));
  z-index: 200;
}
.mobile-apply-bar .apply-btn { font-size: .95rem; }

@media (max-width: 899px) { .mobile-apply-bar { display: block; } }

/* ── Focus rings ─────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .apply-btn { transition: none !important; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .mobile-apply-bar, .aps-hero-strip, .skip-link { display: none !important; }
  .prog-layout { grid-template-columns: 1fr; }
  .aps-sidebar-only { display: block !important; }
}