/* =================================================================
   subject-hub.css — Subject Hub Page Layout
   Replaces subject-page.css for all subject index pages.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  background: #f8fafc;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.sh-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 28px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sh-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #0f172a;
  text-decoration: none;
  letter-spacing: -.02em;
}
.sh-nav {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sh-nav a {
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
}
.sh-nav a:hover { color: #0f172a; }
.sh-nav a.sh-active { font-weight: 700; }

/* ── Hero ─────────────────────────────────────────────────────── */
.sh-hero {
  padding: 36px 36px 32px;
}
.sh-hero-image {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 260px;
  background-color: #070b1a;
  background-repeat: no-repeat;
  background-size: auto 112%;
  background-position: right center;
}
.sh-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0.94) 0%, rgba(15,23,42,0.78) 38%, rgba(15,23,42,0.28) 68%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}
.sh-hero-image > * {
  position: relative;
  z-index: 1;
}
.sh-hero-image .sh-crumbs a { color: rgba(255,255,255,0.8); }
.sh-hero-image .sh-stat strong,
.sh-hero-image .sh-stat span { color: #fff; }
.sh-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  opacity: .62;
  margin-bottom: 14px;
}
.sh-crumbs a { color: currentColor; text-decoration: none; }
.sh-crumbs a:hover { text-decoration: underline; }
.sh-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 8px;
}
.sh-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 0;
  line-height: 1;
}
.sh-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 12px;
}
.sh-hero-desc {
  font-size: 14px;
  line-height: 1.52;
  opacity: .84;
  max-width: 58%;
  margin: 0;
}
.sh-stats {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}
.sh-stat strong {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  display: block;
  line-height: 1;
  margin-bottom: 3px;
}
.sh-stat span { font-size: 11px; opacity: .76; }

/* ── Main content ─────────────────────────────────────────────── */
.sh-main {
  padding: 26px 32px 40px;
  background:
    radial-gradient(ellipse 70% 60% at 5% 0%, rgba(241,245,249,0.95), transparent 65%),
    radial-gradient(ellipse 70% 60% at 95% 100%, rgba(226,232,240,0.85), transparent 65%),
    linear-gradient(180deg, #fafaf9 0%, #f3f4f6 100%);
}

.sh-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 14px;
}
.sh-divider + .sh-divider,
.sh-mod-grid + .sh-divider { margin-top: 22px; }
.sh-divider-line { flex: 1; height: 1px; background: #e2e8f0; }
.sh-divider-badge {
  background: #0f172a;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: .08em;
}

/* ── Module grid ──────────────────────────────────────────────── */
.sh-mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.sh-mod-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  padding: 15px 15px 13px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Photo backdrop layer (blurred + desaturated for ambient feel). Set
   --sh-tile-img on a tile to opt in. Tiles without the var fall back
   to whatever `background:` they declare directly. */
.sh-mod-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--sh-tile-img, none);
  background-size: var(--sh-tile-size, cover);
  background-position: var(--sh-tile-pos, center);
  filter: saturate(1.06) contrast(1.03);
  z-index: 0;
}
/* Flat scrim layer (uniform, not a fade) — keeps the photo as ambient
   texture without competing with the text. */
.sh-mod-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sh-tile-overlay, transparent);
  z-index: 1;
}
.sh-mod-tile > * { position: relative; z-index: 2; }
.sh-mod-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.sh-mod-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.sh-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(255,255,255,.52);
  padding: 3px 8px;
  border-radius: 4px;
}
.sh-live {
  font-size: 9.5px;
  font-weight: 600;
  opacity: .72;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sh-live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.sh-dev {
  font-size: 9.5px;
  font-weight: 500;
  opacity: .48;
}
.sh-ttl {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.18;
  letter-spacing: -.01em;
  flex: 1;
  margin-bottom: 9px;
}
.sh-foot {
  font-size: 10.5px;
  opacity: .82;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.48);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sh-foot strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

/* Dark-text-on-dark-tile overrides */
.sh-dark .sh-chip { background: rgba(255,255,255,.18); }
.sh-dark .sh-foot { border-top-color: rgba(255,255,255,.22); }

/* Coming soon: muted + no hover */
.sh-coming-soon {
  opacity: .52;
  cursor: default;
  pointer-events: none;
}
.sh-coming-soon .sh-foot { display: none; }

/* ── Biology palette (Tropical Leaf) ──────────────────────────── */
.sh-hero-bio { background: linear-gradient(140deg, #d4f5a0 0%, #88d438 52%, #2e7c04 100%); color: #0e4400; }

/* Bio module tiles — each shows its own landscape backdrop under a green scrim. */
.sh-bio-0, .sh-bio-1, .sh-bio-2, .sh-bio-3,
.sh-bio-4, .sh-bio-5, .sh-bio-6, .sh-bio-7 { color: #f0fdf4; }
.sh-bio-0 .sh-chip, .sh-bio-1 .sh-chip, .sh-bio-2 .sh-chip, .sh-bio-3 .sh-chip,
.sh-bio-4 .sh-chip, .sh-bio-5 .sh-chip, .sh-bio-6 .sh-chip, .sh-bio-7 .sh-chip {
  background: rgba(255,255,255,0.94); color: #14532d;
}
.sh-bio-0 .sh-foot, .sh-bio-1 .sh-foot, .sh-bio-2 .sh-foot, .sh-bio-3 .sh-foot,
.sh-bio-4 .sh-foot, .sh-bio-5 .sh-foot, .sh-bio-6 .sh-foot, .sh-bio-7 .sh-foot {
  border-top-color: rgba(255,255,255,0.28);
}
.sh-bio-0, .sh-bio-1, .sh-bio-2, .sh-bio-3,
.sh-bio-4, .sh-bio-5, .sh-bio-6, .sh-bio-7 { --sh-tile-overlay: rgba(14,68,0,0.60); }
.sh-bio-0 { --sh-tile-img: url('assets/backgrounds/bio-m1-bg.webp'); }
.sh-bio-1 { --sh-tile-img: url('assets/backgrounds/bio-m2-bg.webp'); }
.sh-bio-2 { --sh-tile-img: url('assets/backgrounds/bio-m3-bg.webp'); }
.sh-bio-3 { --sh-tile-img: url('assets/backgrounds/bio-m4-bg.webp'); }
.sh-bio-4 { --sh-tile-img: url('assets/backgrounds/bio-m5-bg.webp'); }
.sh-bio-5 { --sh-tile-img: url('assets/backgrounds/bio-m6-bg.webp'); }
.sh-bio-6 { --sh-tile-img: url('assets/backgrounds/bio-m7-bg.webp'); }
.sh-bio-7 { --sh-tile-img: url('assets/backgrounds/bio-m8-bg.webp'); }

/* ── Chemistry palette (Blue family) ─────────────────────────── */
.sh-hero-chem { background: linear-gradient(140deg, #dbeafe 0%, #60a5fa 52%, #1e40af 100%); color: #1e3a8a; }

/* Chem module tiles — each shows its own landscape backdrop under a slate scrim. */
.sh-chem-0, .sh-chem-1, .sh-chem-2, .sh-chem-3,
.sh-chem-4, .sh-chem-5, .sh-chem-6, .sh-chem-7 { color: #f0f9ff; }
.sh-chem-0 .sh-chip, .sh-chem-1 .sh-chip, .sh-chem-2 .sh-chip, .sh-chem-3 .sh-chip,
.sh-chem-4 .sh-chip, .sh-chem-5 .sh-chip, .sh-chem-6 .sh-chip, .sh-chem-7 .sh-chip {
  background: rgba(255,255,255,0.94); color: #1e3a8a;
}
.sh-chem-0 .sh-foot, .sh-chem-1 .sh-foot, .sh-chem-2 .sh-foot, .sh-chem-3 .sh-foot,
.sh-chem-4 .sh-foot, .sh-chem-5 .sh-foot, .sh-chem-6 .sh-foot, .sh-chem-7 .sh-foot {
  border-top-color: rgba(255,255,255,0.28);
}
.sh-chem-0, .sh-chem-1, .sh-chem-2, .sh-chem-3,
.sh-chem-4, .sh-chem-5, .sh-chem-6, .sh-chem-7 { --sh-tile-overlay: rgba(15,23,42,0.60); }
.sh-chem-0 { --sh-tile-img: url('assets/backgrounds/chem-m1-bg.webp'); }
.sh-chem-1 { --sh-tile-img: url('assets/backgrounds/chem-m2-bg.webp'); }
.sh-chem-2 { --sh-tile-img: url('assets/backgrounds/chem-m3-bg.webp'); }
.sh-chem-3 { --sh-tile-img: url('assets/backgrounds/chem-m4-bg.webp'); }
.sh-chem-4 { --sh-tile-img: url('assets/backgrounds/chem-m5-bg.webp'); }
.sh-chem-5 { --sh-tile-img: url('assets/backgrounds/chem-m6-bg.webp'); }
.sh-chem-6 { --sh-tile-img: url('assets/backgrounds/chem-m7-bg.webp'); }
.sh-chem-7 { --sh-tile-img: url('assets/backgrounds/chem-m8-bg.webp'); }

/* ── Physics palette (Amber/Orange family) ───────────────────── */
.sh-hero-phy { background: linear-gradient(140deg, #fed7aa 0%, #fb923c 52%, #9a3412 100%); color: #431407; }
.sh-hero-phy.sh-hero-image {
  color: #fff;
  background-image: url('assets/heroes/phy-subject-hero.webp');
  background-size: auto 118%;
  background-position: right center;
}
.sh-hero-phy.sh-hero-image::before {
  background: linear-gradient(90deg, rgba(15,23,42,0.96) 0%, rgba(15,23,42,0.84) 42%, rgba(15,23,42,0.28) 74%, rgba(15,23,42,0.08) 100%);
}
.sh-phy-0 { background: linear-gradient(140deg, #fff7ed, #fed7aa 80%); color: #431407; }
.sh-phy-1 { background: linear-gradient(140deg, #fed7aa, #fdba74 80%); color: #431407; }
.sh-phy-2 { background: linear-gradient(140deg, #fdba74, #fb923c 80%); color: #431407; }
.sh-phy-3 { background: linear-gradient(140deg, #fb923c, #f97316 80%); color: #431407; }
.sh-phy-4 { background: linear-gradient(140deg, #f97316, #ea580c 80%); color: #fff7ed; }
.sh-phy-5 { background: linear-gradient(140deg, #ea580c, #c2410c 80%); color: #fed7aa; }
.sh-phy-6 { background: linear-gradient(140deg, #c2410c, #9a3412 80%); color: #fdba74; }
.sh-phy-7 { background: linear-gradient(140deg, #9a3412, #7c2d12 80%); color: #fed7aa; }
.sh-phy-0, .sh-phy-1, .sh-phy-2, .sh-phy-3,
.sh-phy-4, .sh-phy-5, .sh-phy-6, .sh-phy-7 {
  --sh-tile-overlay: rgba(67,20,7,0.58);
  color: #fff7ed;
}
.sh-phy-0 { --sh-tile-img: url('assets/heroes/phy-subject-hero.webp'); --sh-tile-pos: 62% center; }
.sh-phy-1 { --sh-tile-img: url('assets/heroes/phy-m2-hero.webp'); --sh-tile-pos: 58% center; }
.sh-phy-2 { --sh-tile-img: url('assets/heroes/phy-m3-hero.webp'); --sh-tile-pos: 56% center; }
.sh-phy-3 { --sh-tile-img: url('assets/heroes/phy-m4-hero.webp'); --sh-tile-pos: 58% center; }
.sh-phy-4 { --sh-tile-img: url('assets/heroes/phy-m5-hero.webp'); --sh-tile-pos: 58% center; }
.sh-phy-5,
.sh-phy-6,
.sh-phy-7 { --sh-tile-img: url('assets/heroes/phy-subject-hero.webp'); --sh-tile-pos: 62% center; }

/* ── Maths palette (Purple family) ──────────────────────────── */
.sh-hero-math { background: linear-gradient(140deg, #ede9fe 0%, #a78bfa 52%, #5b21b6 100%); color: #2e1065; }
.sh-hero-maths-standard.sh-hero-image {
  background-image: url('assets/heroes/maths-std-subject-hero.webp');
  background-position: 58% center;
}
.sh-hero-maths-standard.sh-hero-image::before {
  background: linear-gradient(90deg, rgba(15,23,42,0.94) 0%, rgba(46,16,101,0.76) 34%, rgba(46,16,101,0.36) 64%, rgba(15,23,42,0.18) 100%);
}
.sh-hero-math.sh-hero-image { color: #fff; }
.sh-hero-maths-advanced.sh-hero-image {
  background-image: url('assets/heroes/maths-adv-subject-hero.webp');
  background-position: 56% center;
}
.sh-hero-maths-advanced.sh-hero-image::before {
  background: linear-gradient(90deg, rgba(15,23,42,0.94) 0%, rgba(30,14,75,0.76) 34%, rgba(30,14,75,0.36) 64%, rgba(15,23,42,0.18) 100%);
}
.sh-math-0 { background: linear-gradient(140deg, #f5f3ff, #ede9fe 80%); color: #2e1065; }
.sh-math-1 { background: linear-gradient(140deg, #ede9fe, #ddd6fe 80%); color: #2e1065; }
.sh-math-2 { background: linear-gradient(140deg, #ddd6fe, #c4b5fd 80%); color: #2e1065; }
.sh-math-3 { background: linear-gradient(140deg, #c4b5fd, #a78bfa 80%); color: #3b0764; }
.sh-math-4 { background: linear-gradient(140deg, #a78bfa, #8b5cf6 80%); color: #f5f3ff; }
.sh-math-5 { background: linear-gradient(140deg, #8b5cf6, #7c3aed 80%); color: #f5f3ff; }
.sh-math-6 { background: linear-gradient(140deg, #7c3aed, #6d28d9 80%); color: #ede9fe; }
.sh-math-7 { background: linear-gradient(140deg, #6d28d9, #5b21b6 80%); color: #ede9fe; }
.sh-std-m0 { --sh-tile-img: url('assets/heroes/maths-std-m1-hero.webp'); --sh-tile-overlay: rgba(46,16,101,0.58); color: #fff; }
.sh-std-m1 { --sh-tile-img: url('assets/heroes/maths-std-m2-hero.webp'); --sh-tile-overlay: rgba(46,16,101,0.56); color: #fff; }
.sh-std-m2 { --sh-tile-img: url('assets/heroes/maths-std-m3-hero.webp'); --sh-tile-overlay: rgba(46,16,101,0.58); color: #fff; }
.sh-std-m3,
.sh-std-m4,
.sh-std-m5,
.sh-std-m6,
.sh-std-m7 { --sh-tile-img: url('assets/heroes/maths-std-subject-hero.webp'); --sh-tile-overlay: rgba(46,16,101,0.60); color: #fff; }
.sh-adv-m0 { --sh-tile-img: url('assets/heroes/maths-adv-m1-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.58); color: #fff; }
.sh-adv-m1 { --sh-tile-img: url('assets/heroes/maths-adv-m2-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.58); color: #fff; }
.sh-adv-m2 { --sh-tile-img: url('assets/heroes/maths-adv-m3-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.58); color: #fff; }
.sh-adv-m3 { --sh-tile-img: url('assets/heroes/maths-adv-m4-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.58); color: #fff; }
.sh-adv-m4 { --sh-tile-img: url('assets/heroes/maths-adv-subject-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.60); color: #fff; }
.sh-adv-m5 { --sh-tile-img: url('assets/heroes/maths-adv-m6-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.56); color: #fff; }
.sh-adv-m6,
.sh-adv-m7 { --sh-tile-img: url('assets/heroes/maths-adv-subject-hero.webp'); --sh-tile-overlay: rgba(30,14,75,0.60); color: #fff; }

/* ── Active nav link colours per subject ─────────────────────── */
.sh-nav a.sh-active-bio  { color: #2e7c04; }
.sh-nav a.sh-active-chem { color: #1d4ed8; }
.sh-nav a.sh-active-phy  { color: #c2410c; }
.sh-nav a.sh-active-math { color: #6d28d9; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sh-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-hero h1 { font-size: 34px; }
  .sh-hero-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sh-hero-desc { max-width: 100%; }
  .sh-stats { gap: 20px; }
  .sh-hero-image { background-position: 70% center; }
  .sh-hero-image::before { background: linear-gradient(90deg, rgba(15,23,42,0.96) 0%, rgba(15,23,42,0.88) 58%, rgba(15,23,42,0.56) 100%); }
}
@media (max-width: 600px) {
  .sh-topbar { padding: 11px 16px; }
  .sh-nav { gap: 14px; overflow-x: auto; }
  .sh-hero { padding: 24px 18px 20px; }
  .sh-main { padding: 18px 16px 32px; }
  .sh-hero h1 { font-size: 28px; }
  .sh-mod-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sh-stat strong { font-size: 22px; }
}