/* ==========================================================================
   KNOWLEDGE ACADEMIA — SUBJECT / PROGRAM DETAIL PAGES
   Shares tokens + base rules from css/style.css. This file only adds the
   components used on subjects/*.html pages.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* BREADCRUMB                                                              */
/* ---------------------------------------------------------------------- */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600;
  color: rgba(246,248,251,0.6);
  margin-bottom:22px;
  flex-wrap:wrap;
}
.breadcrumb a{
  color: rgba(246,248,251,0.85);
  transition: color var(--dur-fast) ease;
}
.breadcrumb a:hover{ color: var(--gold-warm); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color: var(--gold-warm); }

/* ---------------------------------------------------------------------- */
/* SUBJECT PAGE HERO                                                       */
/* ---------------------------------------------------------------------- */
.subject-hero{
  position:relative;
  padding: calc(var(--nav-h) + 56px) 0 72px;
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy-deep) 60%, #050f21 100%);
  overflow:hidden;
  isolation:isolate;
}
.subject-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(560px 320px at 88% -10%, rgba(217,166,46,0.22), transparent 70%),
    radial-gradient(480px 320px at 6% 110%, rgba(31,93,184,0.28), transparent 70%);
  z-index:-1;
}
.subject-hero-grid{
  display:grid;
  grid-template-columns: 1.3fr auto;
  gap: 40px;
  align-items:end;
}
.subject-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px;
  border-radius: var(--radius-full);
  background: rgba(217,166,46,0.12);
  border:1px solid rgba(217,166,46,0.35);
  color: var(--gold-warm);
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:20px;
}
.subject-hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.08;
  color:#fff;
  margin-bottom:18px;
  max-width: 18ch;
}
.subject-hero h1 .text-gold-serif{ color: var(--gold-warm); }
.subject-hero p{
  font-size:16.5px;
  line-height:1.7;
  color: rgba(246,248,251,0.72);
  max-width: 62ch;
  margin-bottom: 26px;
}
.subject-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.subject-hero-stats{
  display:flex; flex-direction:column; gap:14px;
  min-width: 220px;
}
.subject-hero-stat{
  background: rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding:16px 20px;
  backdrop-filter: blur(6px);
}
.subject-hero-stat strong{
  display:block;
  font-family: var(--font-display);
  font-size:1.5rem;
  color: var(--gold-warm);
  margin-bottom:2px;
}
.subject-hero-stat span{
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: rgba(246,248,251,0.55);
}

@media (max-width: 860px){
  .subject-hero-grid{ grid-template-columns: 1fr; }
  .subject-hero-stats{ flex-direction:row; flex-wrap:wrap; }
  .subject-hero-stat{ flex:1 1 160px; }
}

/* ---------------------------------------------------------------------- */
/* GROUP TABS (used on Intermediate page: Pre-Medical / Pre-Eng / ICS)     */
/* ---------------------------------------------------------------------- */
.group-tabs{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:46px;
}
.group-tab{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 22px;
  border-radius: var(--radius-md);
  background: var(--bg-white);
  border:1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  transition: all var(--dur-fast) var(--ease);
  text-align:left;
}
.group-tab strong{ font-size:15px; color: var(--text-navy); }
.group-tab span{ font-size:12.5px; color: var(--text-grey); }
.group-tab.active{
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-deep));
  border-color: var(--navy-deep);
  box-shadow: var(--shadow-md);
}
.group-tab.active strong{ color: var(--gold-warm); }
.group-tab.active span{ color: rgba(246,248,251,0.65); }
.group-panel{ display:none; }
.group-panel.active{ display:block; }
.group-intro{
  font-size:15px; color: var(--text-grey); line-height:1.7;
  max-width:74ch; margin-bottom:34px;
}

/* ---------------------------------------------------------------------- */
/* SUBJECTS SECTION                                                        */
/* ---------------------------------------------------------------------- */
.subjects-section{ padding: 88px 0; }
.subjects-section.alt{ background: var(--bg-light-blue); }

.subject-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px){ .subject-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .subject-grid{ grid-template-columns: 1fr; } }

.subject-card{
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position:relative;
  overflow:hidden;
}
.subject-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--gold-warm), var(--gold));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform var(--dur-med) var(--ease);
}
.subject-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(217,166,46,0.35);
}
.subject-card:hover::before{ transform: scaleX(1); }

.subject-card-icon{
  width:52px; height:52px;
  border-radius: 15px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-deep));
  color: var(--gold-warm);
  margin-bottom:20px;
}
.subject-card-icon svg{ width:26px; height:26px; }

.subject-card h3{
  font-size:1.14rem;
  font-weight:700;
  color: var(--text-navy);
  margin-bottom:10px;
}
.subject-card p{
  font-size:14.5px;
  line-height:1.65;
  color: var(--text-grey);
  margin-bottom:18px;
}

.subject-topics{
  display:flex; flex-wrap:wrap; gap:8px;
}
.subject-topics li{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color: var(--navy-blue);
  background: rgba(31,93,184,0.08);
  border:1px solid rgba(31,93,184,0.16);
  padding:5px 11px;
  border-radius: var(--radius-full);
}

.subject-card-featured{
  border-color: rgba(217,166,46,0.5);
  box-shadow: var(--shadow-gold);
}
.subject-card-featured::before{ transform: scaleX(1); }
.subject-card-tag{
  position:absolute; top:22px; right:22px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--navy-deep);
  background: linear-gradient(135deg, var(--gold-warm), var(--gold));
  padding:5px 11px;
  border-radius: var(--radius-full);
}

/* ---------------------------------------------------------------------- */
/* INFO / PATHWAY STRIP                                                    */
/* ---------------------------------------------------------------------- */
.pathway-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  margin-top: 54px;
}
@media (max-width: 860px){ .pathway-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pathway-strip{ grid-template-columns: 1fr; } }

.pathway-step{
  background: var(--bg-white);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  position:relative;
}
.pathway-step .step-num{
  font-family: var(--font-display);
  font-size:1.6rem;
  color: rgba(217,166,46,0.4);
  display:block;
  margin-bottom:10px;
}
.pathway-step h4{ font-size:14.5px; margin-bottom:6px; color: var(--text-navy); }
.pathway-step p{ font-size:13px; color: var(--text-grey); line-height:1.55; }

/* ---------------------------------------------------------------------- */
/* OTHER PROGRAMS STRIP (cross-links at bottom of every subject page)      */
/* ---------------------------------------------------------------------- */
.related-section{ padding: 76px 0 96px; }
.related-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
@media (max-width: 980px){ .related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .related-grid{ grid-template-columns: 1fr; } }

.related-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-white);
  border:1px solid var(--border-soft);
  font-weight:700;
  font-size:14.5px;
  color: var(--text-navy);
  transition: all var(--dur-fast) var(--ease);
}
.related-card:hover{
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-deep));
  color:#fff;
  border-color: var(--navy-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.related-card .arrow{ transition: transform var(--dur-fast) var(--ease); }
.related-card:hover .arrow{ transform: translateX(4px); color: var(--gold-warm); }

/* ---------------------------------------------------------------------- */
/* SUBJECT PAGE CTA (compact variant of homepage .cta)                    */
/* ---------------------------------------------------------------------- */
.subject-cta{
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-deep));
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.subject-cta::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(420px 220px at 90% 0%, rgba(217,166,46,0.22), transparent 70%);
}
.subject-cta-copy{ position:relative; z-index:1; max-width: 46ch; }
.subject-cta-copy h3{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color:#fff;
  margin-bottom:8px;
}
.subject-cta-copy p{ color: rgba(246,248,251,0.7); font-size:14.5px; }
.subject-cta-actions{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------- */
/* CLICKABLE COURSE CARDS ON HOMEPAGE                                      */
/* ---------------------------------------------------------------------- */
.course-card{ cursor:pointer; }
.course-view-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700;
  color: var(--navy-blue);
  margin-top:2px;
  transition: gap var(--dur-fast) ease, color var(--dur-fast) ease;
}
.course-view-link:hover{ gap:10px; color: var(--gold); }
.course-card-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-top: 6px;
  flex-wrap:wrap;
}