/* Course pages (Medicine, Dentistry): plain information pages. Builds on site.css tokens, header, footer, reviews and FAQs. */

.m-sec{padding-block:48px}
.m-sec.mint{background:var(--mint)}
.m-h2{font:700 22px/1.25 var(--head);letter-spacing:-.015em}

/* Page header */
.m-head{padding-block:24px 40px;border-bottom:1px solid var(--line)}
.m-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
.m-crumb a{color:var(--teal-dark);font-weight:500}
.m-head h1{margin-top:14px;font:700 34px/1.1 var(--head);letter-spacing:-.025em}
.m-head > .wrap > p{margin-top:12px;max-width:60ch;font-size:16px;color:var(--ink-soft)}

/* Course structure */
.m-years{margin-top:22px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.m-years i{height:8px;border-radius:4px;background:var(--mint-2);position:relative;overflow:hidden}
.m-years i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--teal);transform:none;transform-origin:left;transition:none}
.m-years i:nth-child(n+3)::after{background:var(--teal-deep)}
/* A final year that only some countries have (Dentistry: 5 or 6 years) */
.m-years i.opt{background:none;outline:1.5px dashed var(--ink-faint);outline-offset:-1.5px}
.m-years i.opt::after{opacity:.35}
.m-ylabels{margin-top:8px;display:flex;justify-content:space-between;font:600 12px/1 var(--body);color:var(--ink-soft)}
.m-phases{margin-top:18px;display:grid;gap:10px}
.m-phase{border-radius:16px;padding:18px;background:var(--mint)}
.m-phase.dark{background:var(--teal-deep);color:#fff}
.m-phase small{display:block;font:600 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark)}
.m-phase.dark small{color:var(--teal)}
.m-phase h3{margin-top:8px;font:700 18px/1.2 var(--head)}
.m-phase p{margin-top:4px;font-size:14.5px;color:var(--ink-soft)}
.m-phase.dark p{color:rgba(255,255,255,.75)}

/* Popular countries */
.m-countries{margin-top:20px;display:grid;gap:10px}
.m-country{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--white);border-radius:14px;box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.m-country:active{transform:scale(.98)}
.m-country img{width:40px;height:27px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px var(--line);flex:0 0 auto}
.m-country span{flex:1;min-width:0}
.m-country b{display:block;font:600 16px/1.2 var(--head)}
.m-country small{display:block;margin-top:3px;font-size:13px;color:var(--ink-soft)}
.m-country svg{color:var(--ink-faint);flex:0 0 auto}

/* Popular universities */
.m-uni svg{color:var(--ink-faint)}
.m-uni{transition:transform .2s var(--ease),border-color .2s ease}
.m-uni:active{transform:scale(.98)}
.m-unis{margin-top:16px;display:grid;gap:8px}
.m-uni{display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:14px}
.m-uimg{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--mint-2)}
.m-uimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-uni h3{font:600 14px/1.3 var(--head)}
.m-uloc{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;color:var(--ink-soft)}
.m-uloc img{width:14px;height:14px;border-radius:50%;object-fit:cover}

.m-quiz{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:16px;background:var(--mint);text-align:center}
.m-quiz p{font:600 15px/1.3 var(--head)}
.m-quiz .btn{height:46px;padding:0 20px;font-size:15px;width:100%;max-width:320px}


/* Working in the UK */
.m-steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.m-steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:14px 16px;background:var(--white);border-radius:14px;box-shadow:var(--shadow)}
.m-steps li::before{content:counter(s);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--head)}
.m-steps b{font:600 15.5px/1.3 var(--head)}
.m-steps span{font-size:13.5px;color:var(--ink-soft)}

/* FAQs */
.m-faqs{margin-top:20px}

/* Reviews, small, at the bottom */
.m-reviews{padding-block:32px 36px;background:var(--mint);border-top:1px solid var(--line)}
.m-rhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.m-rhead h2{font:700 17px/1.2 var(--head)}
.m-reviews .tp{box-shadow:none}
.m-reviews .quotes{margin-top:16px}
.m-reviews .q{text-align:left}
.m-reviews .q blockquote{font:400 15px/1.55 var(--body);letter-spacing:0}
.m-reviews .q blockquote::before{display:none}
.m-reviews .q figcaption{margin-top:8px;font-size:13px}
.m-reviews .qnav{margin-top:14px;justify-content:flex-start;gap:12px}
.m-reviews .qnav button.arrow{width:32px;height:32px}

@media (min-width:960px){
  .m-sec{padding-block:72px}
  .m-h2{font-size:30px}
  .m-head{padding-block:36px 56px}
  .m-head h1{font-size:52px;margin-top:18px}
  .m-head > .wrap > p{font-size:18px}

  .m-years{margin-top:30px;gap:10px}
  .m-ylabels{font-size:13px}
  .m-phases{grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  .m-phase{padding:24px}
  .m-phase h3{font-size:21px}
  .m-phase p{font-size:15.5px}

  .m-countries{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
  .m-country{padding:18px}
  .m-country:hover{transform:translateY(-3px)}
  .m-uni:hover{border-color:var(--teal)}

  .m-unis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:24px}
  .m-uni svg{display:none}
  .m-uni{grid-template-columns:44px 1fr;padding:10px 12px}

  .m-quiz{flex-direction:row;justify-content:space-between;padding:18px 24px;text-align:left}
  .m-quiz p{font-size:17px}
  .m-quiz .btn{width:auto}
  .m-steps{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
  .m-steps li{padding:20px}

  .m-faqs{max-width:none;margin:28px 0 0}

  .m-reviews{padding-block:40px}
  .m-reviews .quotes{max-width:760px;margin:18px 0 0}
  .m-reviews .q blockquote{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .m-years i::after{transform:none}
}

/* University pages */

.u-text{margin-top:12px;max-width:62ch;font-size:15.5px;color:var(--ink-soft)}
.u-req li{grid-template-columns:32px 1fr;align-items:center}
.u-req li::before{grid-row:auto}
.u-req span{font-size:14.5px;color:var(--ink)}
.u-note{margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
@media (min-width:960px){
  .u-text{font-size:17px}
  .u-req{grid-template-columns:1fr!important;max-width:720px}
  .u-req span{font-size:15.5px}
}

/* University pages: course cards (same colours and animated art as the homepage course tiles) */
.u-courses{margin-top:18px;display:grid;gap:10px}
.u-course{position:relative;display:flex;flex-direction:column;min-height:0;padding:14px 14px 12px;border-radius:16px;color:#fff;overflow:hidden;transition:transform .3s var(--ease)}
.u-course.med{background:var(--teal)}
.u-course.dent{background:var(--teal-deep)}
.u-course:active{transform:scale(.98)}
.u-art{position:absolute;right:-4px;top:4px;width:96px;height:auto;opacity:.95}
.u-cname{font:600 14px/1 var(--head);opacity:.9}
.u-fee{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;padding-top:26px}
.u-fee b{font:700 28px/1 var(--head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.u-fee small{font-size:12px;opacity:.85}
.u-cmeta{margin-top:5px;font-size:12px;opacity:.85}
.u-cgo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;font-size:13px!important;border-top:1px solid rgba(255,255,255,.22);font:600 14px/1 var(--body)}
.u-cgo svg{transition:transform .25s var(--ease)}
.u-course:hover .u-cgo svg{transform:translateX(4px)}
@media (min-width:960px){
  .u-courses{grid-template-columns:1fr 1fr;max-width:720px;gap:16px;margin-top:24px}
  .u-course{padding:22px 24px 20px;border-radius:20px}
  .u-course:hover{transform:translateY(-4px)}
  .u-art{width:116px;right:4px;top:6px}
  .u-fee b{font-size:36px}
}

/* Closing contact panel */
.cp-sec{padding-block:8px 48px}
.cp{background:var(--teal-deep);color:#fff;border-radius:22px;padding:30px 22px 26px;text-align:center}
.cp h2{font:700 24px/1.2 var(--head);letter-spacing:-.02em}
.cp p{margin:8px auto 0;max-width:32ch;font-size:15px;color:rgba(255,255,255,.75)}
.cp-btns{margin-top:22px;display:grid;gap:10px}
.cp-btns a{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:14px;font:600 16px/1 var(--body);transition:transform .15s ease,background .2s ease}
.cp-btns a:active{transform:scale(.97)}
.cp-call{background:#fff;color:var(--teal-deep)}
.cp-call svg{color:var(--teal-dark)}
.cp-wa{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.cp-wa svg{color:#25D366}
.cp-wa:hover{background:rgba(255,255,255,.16)}
.cp small{display:block;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.55)}
@media (min-width:960px){
  .cp-sec{padding-block:16px 72px}
  .cp{padding:52px 48px 44px;border-radius:28px}
  .cp h2{font-size:36px}
  .cp p{font-size:17px;max-width:44ch}
  .cp-btns{grid-template-columns:auto auto;justify-content:center;gap:12px;margin-top:28px}
  .cp-btns a{padding:0 28px;height:54px}
}

/* Entrance exam: month timeline and three steps */
.ex-sit{margin-top:26px}
.ex-sit h3,.ex-steps h3{font:600 16px/1.3 var(--head)}
.ex-months{position:relative;margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.ex-months::before,.ex-months::after{content:"";position:absolute;top:8px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:2px;border-radius:2px}
.ex-months::before{background:var(--mint-2)}
.ex-months::after{background:var(--teal)}
.ex-months li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.ex-months i{width:18px;height:18px;border-radius:50%;background:var(--teal);border:2px solid var(--teal)}
.ex-months span{font:500 13px/1.2 var(--body);color:var(--ink)}
.ex-months span small{display:block;margin-top:3px;font:600 11px/1 var(--body);color:var(--teal-deep);text-align:center}
/* September resit: deep teal so it reads as a different kind of sitting */
.ex-months li.resit i{background:var(--teal-deep);border-color:var(--teal-deep)}
.ex-months span{text-align:center}
.ex-steps{margin:30px 0 0;padding:0;list-style:none;counter-reset:ex;display:grid;gap:20px}
.ex-steps li{counter-increment:ex;position:relative;padding-left:44px}
.ex-steps li::before{content:counter(ex);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--mint-2);color:var(--teal-dark);display:grid;place-items:center;font:700 14px/1 var(--head)}
.ex-steps p{margin-top:4px;font-size:14.5px;color:var(--ink-soft)}
@media (min-width:960px){
  .ex-sit{margin-top:36px;max-width:720px}
  .ex-months span{font-size:15px}
  .ex-steps{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
  .ex-steps p{font-size:15.5px}
}

/* University page header: mint band, location label, short intro, photo */
.u-head{background:var(--mint);padding-block:20px 32px}
.u-hero{margin-top:22px;display:grid;gap:22px}
.u-loc{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:20px;background:var(--white);font:600 13px/1 var(--head);color:var(--teal-dark)}
.u-loc img{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.u-h1{margin-top:14px;font:700 32px/1.1 var(--head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.u-intro{margin-top:12px;max-width:44ch;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.u-hphoto{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--mint-2);box-shadow:var(--shadow)}
.u-hphoto img{width:100%;height:100%;object-fit:cover}
.js .u-head .up{animation:rise .9s var(--ease) both}
.js .u-head .u-h1{animation-delay:.06s}
.js .u-head .u-intro{animation-delay:.12s}
.js .u-head .u-hphoto{animation-delay:.18s}
@media (min-width:960px){
  .u-head{padding-block:32px 72px}
  .u-hero{grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;margin-top:36px}
  .u-loc{font-size:14px}
  .u-h1{font-size:54px;margin-top:18px}
  .u-intro{font-size:19px;margin-top:18px}
  .u-hphoto{border-radius:24px}
}

/* University page: "at a glance" headline answers, no borders or boxes */
.u-glance{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.u-glance div{min-width:0}
.u-glance dd{margin:0;font:700 24px/1.1 var(--head);letter-spacing:-.02em;color:var(--teal-dark)}
.u-glance dt{margin-top:4px;font-size:12.5px;color:var(--ink-soft)}
.u-glance dd,.u-glance dt{white-space:nowrap}
.js .u-head .u-glance{animation-delay:.16s}
@media (min-width:960px){
  .u-glance{grid-template-columns:repeat(4,max-content);justify-content:start;gap:12px 36px;margin-top:30px}
  .u-glance dd{font-size:30px}
  .u-glance dt{font-size:13.5px}
}