/* ============================================================
   YCI – Young Changemaker Incubator
   Mobile-First Stylesheet
   ─────────────────────────────────────────────────────────────
   Table of Contents
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base Styles
   3.  Container
   4.  Hero Section
       4a. Partner Logo Strip
       4b. Hero Heading & Stats
   5.  SDG Colour Bar
   6.  Buttons
   7.  Shared Section Styles
   8.  About Section
   9.  Unified Programme Comparison
       9a. Mobile Tab Switcher
       9b. Desktop Comparison Table
   10. Pre-YCI Poster Banner
   11. Alumni Cards — "Meet Our Changemakers"
       (Cards are rendered dynamically by js/main.js)
   12. YCI in the Press
   13. Impact Section
   14. News Cards
   15. Bottom CTA Section
   16. Footer
   17. Back to Top Button
   18. Responsive Breakpoints (640 px, 900 px, 1100 px)
   19. Utilities
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ─────────────────────────────────────────
   Edit these values to retheme the entire site at once.
   ============================================================ */
:root {
  /* Brand colours */
  --color-primary:     #1a56a0;   /* brand blue — used for labels, links, borders */
  --color-primary-mid: #2272c3;   /* mid blue — hover states */
  --color-primary-lt:  #deeaf8;   /* light blue tint — backgrounds, badges */
  --color-accent:      #f5a623;   /* warm amber — focus rings, highlights */
  --color-navy:        #0a1f3d;   /* deep navy — headings, hero, footer */
  --color-navy-lt:     #163366;   /* lighter navy — used in gradients */

  /* Text colours */
  --color-text:        #0f1e35;   /* primary body text */
  --color-text-mid:    #3d5068;   /* secondary / descriptive text */
  --color-text-light:  #6b7f96;   /* muted / metadata text */

  /* Background colours */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f2f6fc;   /* alternating section background */
  --color-border:      #d4e3f5;   /* card and table borders */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;

  /* Border radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  /* Shadows */
  --shadow-sm:  0 2px 8px  rgba(26, 86, 160, 0.10);
  --shadow-md:  0 4px 20px rgba(26, 86, 160, 0.15);
  --shadow-lg:  0 8px 40px rgba(26, 86, 160, 0.18);

  /* Global transition speed */
  --transition: 0.25s ease;

  /* Spacing scale */
  --space-xs:  0.4rem;
  --space-sm:  0.8rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  2.5rem;
}


/* ============================================================
   2. RESET & BASE STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  overflow-x: hidden;
}

/* #yci-page img    { max-width: 100%; height: auto; display: block; } */
a      { color: inherit; text-decoration: none; }
a:hover { color: #ffffff; }
ul     { list-style: none; }
#yci-page button { cursor: pointer; border: none; background: none; font-family: inherit; }


/* ============================================================
   3. CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;    /* 16px on mobile */
}
@media (min-width:  640px) { .container { padding-inline: 1.5rem; } }
@media (min-width:  900px) { .container { padding-inline: 2rem;   } }
@media (min-width: 1200px) { .container { padding-inline: 1.5rem; } }


/* ============================================================
   4. HERO SECTION
   ============================================================ */
.hero {
  background: linear-gradient(160deg, #0a1f3d 0%, #1a56a0 60%, #2272c3 100%);
  color: #fff;
  padding: 2rem 0 1.75rem;
}

.hero-content { position: relative; z-index: 1; }


/* ────────────────────────────────────────────
   4a. Partner Logo Strip
   ────────────────────────────────────────────
   2-col grid on mobile → 4-col on desktop.
   Each .partner-card holds either:
     – a real <img> (shown when the file exists), or
     – a .partner-logo-fallback text badge (shown via onerror).
   ──────────────────────────────────────────── */
.hero-partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  max-width: 80%;
}

.partner-card {
  background: #fff;
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.10);
  min-height: 80px;
}

/* Real logo image — drop PNG/SVG files into images/ to activate */
.partner-logo {
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  display: block;
}

/* Text fallback — hidden by default; shown when image 404s via onerror */
.partner-logo-fallback {
  display: none;             /* switched to flex by JS onerror handler */
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-align: center;
}

/* Legacy SVG logo support (kept for backwards compatibility) */
.partner-card svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}


/* ────────────────────────────────────────────
   4b. Hero Heading, Sub-copy & Stats
   ──────────────────────────────────────────── */
.hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
  white-space: normal;
}

.hero-sub {
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 680px;
  margin-bottom: 1.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

/* Primary CTA button (teal, used in hero) */
.btn-consult {
  background: #008DCB;
  color: #fff;
  border: 2px solid #008DCB;
  border-radius: 4px;
  padding: 0.7rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.btn-consult:hover {
  background: #0072a8;
  border-color: #ffffff;
}

/* Hero statistic strip */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1.1rem;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stat strong {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: #7dd3f5;
}
.stat span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.25rem;
  line-height: 1.3;
}


/* ============================================================
   5. SDG COLOUR BAR
   A thin full-width strip of SDG goal colours.
   ============================================================ */
.sdg-bar {
  display: flex;
  height: 6px;
}
.sdg-bar span { flex: 1; }


/* ============================================================
   6. BUTTONS
   ─────────────────────────────────────────
   Base .btn class handles layout/spacing.
   Modifier classes control colour variant.
   ============================================================ */
#yci-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Solid blue — light backgrounds */
.btn-primary {
  background: #008DCB;
  color: #fff;
}
.btn-primary:hover {
  background: #0072a8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 141, 203, 0.4);
}

/* Outlined — transparent on dark backgrounds */
.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Solid blue — dark section backgrounds (same colour, kept as separate class) */
.btn-primary-dark {
  background: #008DCB;
  color: #fff;
}
.btn-primary-dark:hover {
  background: #0072a8;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 141, 203, 0.35);
}

/* Outlined — light backgrounds, blue border */
.btn-outline-dark {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-outline-dark:hover {
  background: #0b4364;
}

/* Outlined — white border/text, for dark section backgrounds */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}


/* ============================================================
   7. SHARED SECTION STYLES
   ============================================================ */
.section { padding: 2rem 0; }
@media (min-width: 640px) { .section { padding: 2.5rem 0; } }
@media (min-width: 900px) { .section { padding: 3rem 0; } }

/* Alternate grey-blue section background */
.section-alt { background: var(--color-bg-alt); }

/* Small pill label above section headings */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-lt);
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 0.6rem;
}
.section-label.light {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Main section heading */
.section-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}
.section-title.light { color: #fff; }

/* Introductory paragraph below a section title */
.section-intro {
  font-size: 0.97rem;
  color: var(--color-text-mid);
  max-width: 700px;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}


/* ============================================================
   8. ABOUT SECTION
   ============================================================ */

/* Main about heading (larger than .section-title) */
.about-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

/* Lead paragraph */
.about-lead {
  font-size: clamp(0.93rem, 2vw, 1.02rem);
  color: var(--color-text-mid);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-width: 100%;
}
.about-lead strong { color: var(--color-text); }

/* Feature bullet list */
.about-list {
  list-style: disc;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}
.about-list li {
  font-size: clamp(0.88rem, 2vw, 0.97rem);
  color: var(--color-text-mid);
  line-height: 1.65;
}
.about-list li strong {
  color: var(--color-text);
  font-weight: 700;
}

/* About section CTA paragraph */
.about-cta-text {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--color-text-mid);
  line-height: 1.7;
  max-width: 680px;
}

/* Inline hyperlink — used inside table cells, list items, paragraphs */
.about-free-link,
.inline-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color var(--transition);
}
.about-free-link:hover,
.inline-link:hover { color: var(--color-primary-mid); }

/* ── IB / EPQ note block ── */
.about-extra {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

.about-ib-note {
  font-size: clamp(0.88rem, 2vw, 0.97rem);
  color: var(--color-text-mid);
  line-height: 1.65;
  background: var(--color-primary-lt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.about-ib-note #epq-link {
  text-decoration: underline !important;
}
.about-ib-note #epq-link:hover {
  color: var(--color-primary-mid);
}
.about-ib-note strong { color: var(--color-primary); }

/* 16:9 responsive video embed wrapper */
.video-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-md);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Blue gradient placeholder shown before video URL is added */
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1f3d 0%, #1a56a0 100%);
}
.video-placeholder-inner {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 1rem;
}
.video-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  color: #fff;
  padding-left: 4px; /* optical centre for ▶ */
}
.video-placeholder-inner p {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.video-placeholder-inner small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  display: block;
  max-width: 260px;
  margin-inline: auto;
}

/* SDG mini colour grid (18-square decorative element) */
.sdg-mini-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 180px;
}
.sdg-mini-grid span {
  aspect-ratio: 1;
  border-radius: 3px;
}


/* ============================================================
   9. UNIFIED PROGRAMME COMPARISON
   ─────────────────────────────────────────
   Mobile: tab switcher (three .prog-tab buttons + .prog-panel)
   Desktop (≥900px): full comparison table (hidden on mobile)
   ============================================================ */

/* ── Shared track accent colours ── */
.cm-member    { background: #4C9F38; }  /* green */
.cm-founder   { background: var(--color-primary); }  /* blue */
.cm-executive { background: #0A97D9; }  /* cyan */


/* ─────────────────────────────────
   9a. Mobile Tab Switcher
   ───────────────────────────────── */
.prog-tabs {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-bottom: none;
}

.prog-tab {
  flex: 1;
  padding: 0.65rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-mid);
  background: var(--color-bg-alt);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background var(--transition), color var(--transition);
  line-height: 1.2;
  text-align: center;
}
.prog-tab:last-child { border-right: none; }
.prog-tab:hover {
  background: var(--color-primary-lt);
  color: var(--color-primary);
}

/* Active tab — white background, coloured bottom border */
.prog-tab.active {
  background: #fff;
  color: var(--color-navy);
  border-bottom: 3px solid transparent;
}
.prog-tab[data-track="member"].active    { border-bottom-color: #4C9F38; }
.prog-tab[data-track="founder"].active   { border-bottom-color: var(--color-primary); }
.prog-tab[data-track="executive"].active { border-bottom-color: #0A97D9; }

/* Coloured dot preceding tab label */
.tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-member    { background: #4C9F38; }
.dot-founder   { background: var(--color-primary); }
.dot-executive { background: #0A97D9; }

/* Mobile panel — hidden by default, shown with .active */
.prog-panel {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.prog-panel.active { display: block; }

/* Coloured header strip inside each panel */
.prog-panel-header {
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Two-column definition list layout inside panels */
.prog-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
}
.prog-dl dt,
.prog-dl dd {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: unset;
}
.prog-dl dt {
  font-weight: 600;
  color: var(--color-text-mid);
  background: var(--color-bg-alt);
}
.prog-dl dd { color: var(--color-text); }

/* Goals list inside panels */
.prog-goals {
  list-style: disc;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.prog-goals li {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text);
}


/* ─────────────────────────────────
   9b. Desktop Comparison Table
   Hidden on mobile; shown at ≥900px via media query below.
   ───────────────────────────────── */

/* Wrapper hidden on mobile */
.prog-table-wrap { display: none; }

.prog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Header row */
.prog-table thead th {
  padding: 0.85rem 1.1rem;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.col-label      { background: var(--color-navy);  width: 130px; }
.th-member      { background: #4C9F38; }
.th-founder     { background: var(--color-primary); }
.th-executive   { background: #0A97D9; }

/* Body rows */
.prog-table tbody tr { border-bottom: 1px solid var(--color-border); }
.prog-table tbody tr:last-child { border-bottom: none; }
.prog-table tbody tr:nth-child(even) td,
.prog-table tbody tr:nth-child(even) th { background: var(--color-bg-alt); }

/* Row label (first column) */
.prog-table .row-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text) !important;
  background: var(--color-bg-alt);
  padding: 0.75rem 1.1rem;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

/* Data cells */
.prog-table td {
  padding: 0.75rem 1.1rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  vertical-align: top;
  text-align: left;
}

/* Goals row (taller due to bullet lists) */
.row-goals td { padding: 0.85rem 1.1rem; }

/* Bullet list inside a table cell */
.cell-list {
  list-style: disc;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cell-list li {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text-mid);
}

/* "OR" divider inside a cell list */
.or-divider {
  list-style: none;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
  margin: 0.2rem 0;
  padding-left: 0;
}

/* Small note text inside a cell */
.cell-note {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 0.15rem;
}

/* "Book a Free Consultation" CTA below the comparison table */
.prog-cta {
  display: flex;
  justify-content: center;
  padding: 1.75rem 0 0.25rem;
}


/* ============================================================
   10. PRE-YCI POSTER BANNER
   ─────────────────────────────────────────
   The full poster image is used directly.
   The "Enrol Now" button is absolutely positioned
   over the bottom-left corner of the image (the blank
   area visible in the original poster design).
   ============================================================ */

/* Wrapper: relative positioning context for the button overlay */
.pre-yci-poster-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  /* 21:9 cinematic crop — much shorter than 16:9, shows the key content band */
  aspect-ratio: 21 / 9;
}

/* Poster image — cropped to fill the narrower frame.
   object-position centres vertically so the title + photo stay in view. */
.pre-yci-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;  /* show upper portion: title text + students */
  display: block;
}

/* "Enrol Now" button — overlaid on the bottom-left blank area of the poster */
.pre-yci-enrol-btn {
  position: absolute;
  bottom: clamp(0.75rem, 3%,  1.5rem);
  left:   clamp(0.75rem, 3%,  1.75rem);
  background: #008DCB;
  color: #fff;
  border: 2px solid #008DCB;
  padding: 0.6rem 1.4rem;
  font-size: clamp(0.78rem, 1.8vw, 0.95rem);
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  transition: background var(--transition),
              border-color var(--transition),
              transform var(--transition);
  white-space: nowrap;
}
.pre-yci-enrol-btn:hover {
  background: #0072a8;
  border-color: #0072a8;
  transform: translateY(-2px);
  color: #ffffff;
}


/* ============================================================
   11. ALUMNI CARDS — "Meet Our Changemakers"
   ─────────────────────────────────────────
   DYNAMIC RENDERING: Cards are generated entirely by
   renderAlumniCards() in js/main.js. The #alumni-grid
   element starts empty in HTML; JavaScript populates it
   from the ALUMNI data array on DOMContentLoaded.

   Layout:
   • Mobile:  horizontal scroll (snap-scroll), cards 220px wide
   • Tablet:  horizontal scroll, cards 240px wide
   • Desktop (≥900px): static 4-column grid, no scroll

   To update a card: edit the ALUMNI array in js/main.js.
   To add a photo:   add a `photo` field to an ALUMNI entry.
   ============================================================ */

/* ── Outer wrapper (enables edge-bleed on mobile) ── */
.alumni-scroll-outer {
    position: relative;
    padding: 0 50px;
}

/* ── Scrollable track (mobile) / grid (desktop) ──
   The same element does double duty:
   flex + overflow-x  → horizontal scroll on mobile
   grid               → 4-col layout on desktop (via media query)
   ── */
.alumni-grid {
  list-style: none;
  display: flex;
  gap: 1rem;

  /* Horizontal scroll on mobile */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  padding: 0.25rem 1rem 1rem;         /* side padding so first/last card don't clip */
  scrollbar-width: none;              /* hide scrollbar on Firefox */
  max-width: 1200px;
  margin: 0 auto;
}
/* Hide scrollbar on Chrome / Safari */
.alumni-grid::-webkit-scrollbar { display: none; }

/* ── Individual card shell ── */
.alumni-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);

  /* Snap behaviour: each card snaps to the left edge */
  scroll-snap-align: start;

  /* Fixed width on mobile so the next card peeks into view */
  flex: 0 0 220px;
  min-width: 220px;
}
.alumni-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── Photo area (top portion of card) ──
   aspect-ratio 3:2 gives a landscape thumbnail proportion.
   Holds either:
     • .alumni-photo-img  (real photo, supplied via `photo` field)
     • .alumni-photo-placeholder  (coloured initials circle, default)
   ── */
.alumni-photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  min-height: 350px;
}

/* Real photo image */
.alumni-photo-wrap img,
.alumni-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Coloured initials placeholder ──
   Shown when no photo is supplied.
   Uses CSS custom property --ac (accent colour) set inline
   by renderAlumniCards() from the ALUMNI data array.

   Example rendered output:
   <div class="alumni-photo-placeholder" style="--ac: #E5243B">AW</div>
   ── */
.alumni-photo-placeholder {
  width: 100%;
  height: 100%;

  /* Light tint of the accent colour as background */
  background: color-mix(in srgb, var(--ac) 18%, #fff);

  /* Bold bottom border in the full accent colour */
  border-bottom: 4px solid var(--ac);

  display: flex;
  align-items: center;
  justify-content: center;

  /* Large initials text in the accent colour */
  font-size: 2rem;
  font-weight: 800;
  color: var(--ac);
  letter-spacing: 0.05em;
  font-family: var(--font-body);
}

/* ── Text body (lower portion of card) ── */
.alumni-body {
  padding: 0.75rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;        /* stretch to fill card height */
  gap: 0.15rem;
}

/* Initiative / project name — small uppercase label */
.alumni-initiative-name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

/* Alumni full name */
.alumni-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0.1rem 0 0;
}

/* Optional school/cohort label (kept for future use) */
.alumni-school {
  font-size: 0.76rem;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.4;
}

/* Short description paragraph */
.alumni-desc {
  font-size: 0.78rem;
  color: var(--color-text-mid);
  line-height: 1.5;
  margin: 0.4rem 0 0;
  flex: 1;   /* pushes the "Learn More" link to the bottom of the card */
}

/* "Learn More →" link */
.alumni-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #008DCB;
  transition: color var(--transition);
}
.alumni-link:hover { color: #0072a8; }

/* ── Mobile scroll-hint dots ──
   8 dots (one per card) highlight the currently visible card.
   Dot colours are updated by the scroll listener in js/main.js.
   Hidden on desktop (see media query below).
   ── */
.alumni-scroll-hint {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding-bottom: 0.25rem;
}
.alumni-scroll-hint span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s;
}
.alumni-scroll-hint span.active {
  background: var(--color-primary);
}

/* ── "See All" footer link below the grid ── */
.alumni-footer {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}


/* ============================================================
   12. YCI IN THE PRESS
   ============================================================ */

/* Three-column card grid (responsive) */
.press-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card shell */
.press-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.press-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Image / preview area — 3:4 portrait ratio for article screenshots */
.press-img-link { display: block; text-decoration: none; }
.press-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f0f0f0;
}
.press-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  object-position: top left;
}
.press-card:hover .press-img-wrap img { transform: scale(1.04); }

/* Text body below image */
.press-body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
}
.press-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.press-meta time {
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.press-body h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
}
.press-body p {
  font-size: 0.84rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Source badge colours */
.source-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  color: #fff;
}
.source-badge.scmp { background: #c62828; }
.source-badge.un   { background: #0072c6; }
.source-badge.sdg  { background: #4C9F38; }
.source-badge.ibt  { background: #117a65; }

/* "Read article →" link */
.news-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition);
}
.news-link:hover { gap: 0.6rem; }


/* ============================================================
   13. IMPACT SECTION
   Dark gradient background with translucent stat cards.
   ============================================================ */
.section-impact {
  background: linear-gradient(135deg, #0a1f3d 0%, #1a56a0 100%);
  color: #fff;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-top: 1rem;
}

.impact-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.75rem;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}
.impact-card:hover { background: rgba(255, 255, 255, 0.18); }

.impact-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.impact-card strong {
  display: block;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.impact-card span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}


/* ============================================================
   14. NEWS CARDS (secondary news list, not press section)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.news-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.news-source {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.news-source time {
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.news-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.news-card p {
  font-size: 0.85rem;
  color: var(--color-text-mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}


/* ============================================================
   15. BOTTOM CTA SECTION
   Full-width dark gradient section with centred CTA.
   ============================================================ */
.section-bottom-cta {
  background: linear-gradient(135deg, #0a1f3d 0%, #1a56a0 100%);
  padding: 2.5rem 0;
}

.bottom-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.bottom-cta-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7dd3f5;
  margin: 0;
}

.bottom-cta-heading {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.1rem 0 0.75rem;
}

.bottom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}


/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.75);
}

.footer-inner {
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.footer-brand .footer-logo-text {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #26BDE2, var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 0.4rem;
}
.footer-brand p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.footer-nav h4,
.footer-contact h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.85rem;
}
.footer-nav ul { display: flex; flex-direction: column; gap: 0.35rem; }
.footer-nav a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--color-accent); }

.footer-contact p { font-size: 0.88rem; margin-bottom: 0.3rem; }
.footer-contact a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}
.footer-contact a:hover { color: var(--color-accent); }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover {
  background: var(--color-primary-mid);
  color: #fff;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.25);
  padding: 0.6rem 0;
}
.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* Partners logos strip (in footer or standalone section) */
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
}
.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-item img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter var(--transition);
}
.partner-item img:hover { filter: grayscale(0%); }
.partner-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-mid);
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}


/* ============================================================
   17. BACK TO TOP BUTTON
   Fixed bottom-right; fades in after scrolling 400px.
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 200;
}
/* Shown by JS toggling .visible class */
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--color-primary-mid); }


/* ============================================================
   18. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet: ≥ 640px ── */
@media (min-width: 640px) {
  /* Alumni: slightly wider fixed-width cards (still scroll) */
  .alumni-card { flex: 0 0 240px; min-width: 240px; }

  /* News: 2-column grid */
  .news-grid { grid-template-columns: 1fr 1fr; }

  /* Impact stats: 3-column row */
  .impact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Desktop: ≥ 900px ── */
@media (min-width: 900px) {
  /* Hero */
  .hero { padding: 2.5rem 0 2rem; }

  /* Partner logo strip: 4 columns */
  .hero-partners { grid-template-columns: repeat(4, 1fr); }

  /* News: 3-column row */
  .news-grid { grid-template-columns: repeat(3, 1fr); }

  /* Impact stats: 6-column row (all in one line) */
  .impact-grid { grid-template-columns: repeat(6, 1fr); }
  .impact-card { padding: 1rem 0.6rem; }

  /* Programme comparison: hide mobile tabs, show desktop table */
  .prog-tabs       { display: none; }
  .prog-panel      { display: none !important; }
  .prog-table-wrap { display: block; overflow-x: auto; }

  /* ── Alumni: switch from horizontal scroll to 4-column static grid ──
     The .alumni-grid flex layout is overridden to a CSS grid.
     .alumni-card fixed widths are unset so cards fill grid columns.
     Scroll hint dots are hidden (not needed on desktop).
     ── */
  .alumni-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0.25rem 0 0;
    gap: 1rem;
  }
  .alumni-card {
    flex: unset;
    min-width: unset;
  }
  .alumni-scroll-hint { display: none; }

  /* Footer: 3-column layout */
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ── Large desktop: ≥ 1100px ── */
@media (min-width: 1100px) {
  /* Reserved for future layout adjustments */
}


/* ============================================================
   19. UTILITIES
   ============================================================ */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Scroll margin — prevents section headings being hidden under a sticky header */
[id] { scroll-margin-top: 16px; }