/* =====================================================================
   Components for the sections restored from the earlier website:
   quick FAQ, Strategic Collaboration, Entrepreneurship course, Dean + About,
   course cards, departments, Who can join, blog rows, scholarships,
   the Get Notified pop-up and the form note.
   Same tokens and palette as the rest of the site.
   ===================================================================== */

.section--tight{padding:40px 0}

/* ---------- form note (Request More Information) ---------- */
.sf-note{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.hero--form .enquiry h3{margin-bottom:14px}

/* ---------- Strategic Collaboration (text only, centred) ---------- */
.collab-center{max-width:880px;margin:0 auto;text-align:center}
.collab-center h2{margin:16px 0 10px}
.collab-lead{font-size:18px;color:#f1e3e4;margin-bottom:22px}
.collab-p{color:#d8c3c5;font-size:15.5px;line-height:1.75}
.collab-center .collab-p{text-align:left}
.collab-closing{
  margin-top:24px;padding:18px 22px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:15.5px;
}

/* ---------- Entrepreneurship course ---------- */
.ent-title{font-size:clamp(24px,2.7vw,34px);line-height:1.2}
.ent-title span{display:block;color:var(--brand)}
.ent-tagline{font-family:var(--head-font);font-weight:600;color:var(--ink);font-size:16.5px;margin-bottom:12px}
.ent-hl-title{font-size:18px;color:var(--brand);margin:22px 0 12px}
.ent-highlights{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ent-highlights li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--body)}
.ent-highlights strong{color:var(--ink)}
.ent-highlights .hi,.future-join .hi{
  flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-050);color:var(--brand);border:1px solid var(--brand-100);margin-top:-3px;
}
.ent-media{position:relative;max-width:420px;margin:0 auto;width:100%}
.ent-media img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-lg)}
.ent-media-cap{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;
  background:var(--brand);color:#fff;font-family:var(--head-font);font-size:12px;font-weight:700;
  padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(126,3,5,.5);
}
@media(max-width:900px){.ent-media{order:-1}}

/* ---------- Dean + About ---------- */
.dean-feature{margin:0;max-width:380px;width:100%;justify-self:center;text-align:center}
.dean-feature img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;border-radius:18px;box-shadow:var(--shadow-lg)}
.dean-feature figcaption{margin-top:14px}
.dean-feature b{display:block;font-family:var(--head-font);font-size:18px;color:var(--ink)}
.dean-feature span{display:block;font-size:14px;color:var(--muted)}

/* ---------- course & fellowship cards ---------- */
.prog-grid{align-items:stretch}
.prog-card .card-body{display:flex;flex-direction:column}
.prog-card .card-body p{flex:1}
.prog-btn{align-self:flex-start;margin-top:4px}
.prog-card--link{color:inherit}
.prog-card--link:hover{color:inherit}

/* ---------- departments ---------- */
.dept-list{max-width:980px;margin:0 auto;display:grid;gap:10px}
.dept{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dept summary{
  display:grid;grid-template-columns:44px 1fr auto 22px;gap:12px;align-items:center;
  padding:14px 18px;cursor:pointer;list-style:none;
}
.dept summary::-webkit-details-marker{display:none}
.dept summary::after{
  content:'+';width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand-050);color:var(--brand);font-weight:700;
}
.dept[open] summary::after{content:'\2212';background:var(--brand);color:#fff}
.dept-num{font-family:var(--head-font);font-weight:700;font-size:13px;color:var(--brand)}
.dept-name{font-family:var(--head-font);font-weight:600;font-size:15px;color:var(--ink)}
.dept-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.dept-body{padding:0 18px 18px 74px}
.dept-courses{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.dept-courses a{display:inline-flex;gap:8px;align-items:baseline;font-size:15px;color:var(--body)}
.dept-courses a::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;transform:translateY(-2px)}
.dept-courses a:hover{color:var(--brand)}
@media(max-width:600px){
  .dept summary{grid-template-columns:34px 1fr 22px}
  .dept-count{display:none}
  .dept-body{padding:0 16px 16px 16px}
}

/* ---------- Who can join (inside Future Skills) ---------- */
.future-join-title{color:#fff;font-size:18px;margin:26px 0 12px}
.future-join{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.future-join li{display:flex;gap:12px;align-items:flex-start;color:#e3cccd;font-size:15px}
.future-join strong{color:#fff}
.future-join .hi{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}

/* ---------- Programs To Choose From ---------- */
.track-card .card-foot{border-top:1px solid var(--line-2)}
.track-count{font-family:var(--head-font);font-weight:700;color:var(--brand);font-size:13.5px}

/* ---------- Latest Blog & News: two-by-two rows ---------- */
.blog-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:900px){.blog-rows{grid-template-columns:1fr}}
.blog-row{
  display:grid;grid-template-columns:40% 1fr;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(28,21,23,.04),0 6px 16px -10px rgba(28,21,23,.10);
}
.blog-row-media{position:relative;display:block;min-height:220px;background:var(--light)}
.blog-row-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-row-media .ph{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;color:#fff;font-family:var(--head-font);font-weight:700;
  background:linear-gradient(150deg,var(--brand-800),var(--brand));
}
.blog-row-body{padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start}
.blog-row-body h3{font-size:16.5px;line-height:1.35;margin-bottom:8px}
.blog-row-body h3 a{color:var(--ink)}
.blog-row-body h3 a:hover{color:var(--brand)}
.blog-row-body p{font-size:14px;color:var(--muted);flex:1;margin-bottom:14px}
@media(max-width:520px){
  .blog-row{grid-template-columns:1fr}
  .blog-row-media{min-height:0;aspect-ratio:16/10}
}

/* ---------- Scholarships ---------- */
.scholar-band{
  max-width:880px;margin:0 auto;text-align:center;padding:40px 34px;border-radius:18px;
  background:linear-gradient(160deg,var(--brand-050),#fff);border:1px solid var(--brand-100);
}
.scholar-kicker{margin:0 0 10px;display:flex;flex-direction:column;gap:2px;align-items:inherit}
.scholar-band .scholar-kicker{align-items:center}
.scholar-kicker span{font-family:var(--head-font);font-weight:700;color:var(--brand);letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.scholar-kicker small{font-size:13px;color:var(--muted)}
.scholar-band p:not(.scholar-kicker){max-width:640px;margin-inline:auto}
@media(max-width:600px){.scholar-band{padding:28px 20px}}

/* ---------- Testimonials photo strip ---------- */
.gal--strip{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.gal--strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Get Notified pop-up ---------- */
.notify-dialog{
  width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;
  border:0;border-radius:18px;padding:30px;box-shadow:0 30px 80px -20px rgba(28,21,23,.45);
}
.notify-dialog::backdrop{background:rgba(28,10,12,.55);backdrop-filter:blur(2px)}
.notify-dialog h3{margin:0 0 4px;padding-right:30px}
.notify-dialog .sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.notify-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
}
.notify-close:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:520px){.notify-dialog{padding:22px 18px}}

/* ---------- tabbed galleries (honoris / LTA / excellence / testimonial / convocation) ---------- */
.tgal-title{text-align:center;margin-bottom:18px}
.tgal-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 28px}
.tgal-tabs button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:var(--head-font);font-size:13px;font-weight:600;
}
.tgal-tabs button span{font-size:11.5px;color:var(--muted);font-weight:600}
.tgal-tabs button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.tgal-tabs button.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.tgal-tabs button.is-active span{color:rgba(255,255,255,.8)}
.tgal-tabs button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- About page (old structure) ---------- */
.about-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(max-width:800px){.about-cols{grid-template-columns:1fr}}
.about-col,.about-commit{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.about-commit{max-width:980px;margin:0 auto}
.about-icon{width:56px;height:56px;object-fit:contain;margin-bottom:12px}
.about-col h3,.about-commit h3{margin-bottom:10px}
.dean-sign{display:flex;flex-direction:column}
.dean-sign b{font-family:var(--head-font);color:var(--ink);font-size:17px}
.dean-sign span{color:var(--muted);font-size:14.5px}

/* ---------- Contact offices ---------- */
.contact-offices{max-width:980px;margin:0 auto}
.contact-offices .office dd small{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--head-font);font-weight:600}

/* ---------- Research & Publication ---------- */
.books{display:grid;grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;gap:40px}
@media(max-width:700px){.books{grid-template-columns:minmax(0,340px)}}
.book{margin:0;text-align:center}
.book-cover{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg);transition:transform .25s var(--ease)}
.book-cover:hover{transform:translateY(-4px)}
.book-cover img{width:100%;display:block}
.book figcaption{margin-top:18px}

/* ---------- Coming Soon ---------- */
.coming-soon{max-width:640px;margin:20px auto;text-align:center}
.coming-soon img{margin:0 auto 14px;border-radius:50%}
.coming-soon h1{margin-bottom:8px}

/* ---------- legal pages ---------- */
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.legal-prose h2{font-size:clamp(20px,2.2vw,25px);margin:34px 0 12px;scroll-margin-top:110px}
.legal-prose h3{font-size:17px;margin:22px 0 8px;scroll-margin-top:110px}
.legal-prose ul{padding-left:20px}
.legal-prose li{margin-bottom:6px}

/* ---------- Certificate Verification (old awardeespage layout) ---------- */
.cert-verify{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
@media(max-width:900px){.cert-verify{grid-template-columns:1fr;gap:30px}}
.cert-info h2{margin-bottom:12px}

/* ---------- header / footer as on the old site ---------- */
.tb-social{display:inline-flex;gap:12px;align-items:center}
.tb-social a{display:inline-flex}
.nav ul.nav-wide{min-width:420px;max-height:70vh;overflow:auto}
@media(max-width:1200px){.nav ul.nav-wide{min-width:0;max-height:none}}

.float-pay{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:880;
  background:var(--brand);color:#fff;font-family:var(--head-font);font-weight:700;font-size:14px;
  padding:12px 16px;border-radius:10px 0 0 10px;box-shadow:0 8px 20px -8px rgba(126,3,5,.6);
}
.float-pay:hover{background:var(--brand-600);color:#fff}
.float-wa{
  position:fixed;right:18px;bottom:18px;z-index:880;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35);
}
.float-wa:hover{color:#fff;transform:translateY(-2px)}
@media(max-width:640px){
  .float-pay{top:auto;bottom:84px;font-size:13px;padding:10px 12px}
  .float-wa{width:48px;height:48px;right:14px;bottom:14px}
}

.foot-grid--old{grid-template-columns:1.2fr .9fr 1.4fr}
.foot-grid--old:has(> div:nth-child(5)){grid-template-columns:1.2fr .9fr .9fr 1.4fr .9fr}
.foot-brand h4{margin-bottom:8px}
.foot-brand p{font-size:14px;line-height:1.7}
.foot-base{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
@media(max-width:1000px){.foot-grid--old,.foot-grid--old:has(> div:nth-child(5)){grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid--old,.foot-grid--old:has(> div:nth-child(5)){grid-template-columns:1fr}}

/* ---------- Pay Now (old single card) ---------- */
.pay-card{max-width:560px;margin:0 auto}
.pay-card .enquiry{text-align:left}
.pay-logo{display:block;margin:0 auto 10px;border-radius:50%;width:88px;height:88px;object-fit:cover}
.pay-card .enquiry > h3{text-align:center}
.pay-card .enquiry > .sub{text-align:center}