/* ————————————————————————————————————————————————————————————
   medicine.css — the medicine and dentistry admissions course, on its own
   sheet. Loads AFTER course.css and keeps its chrome only. Plain paper.

   A schematic cake gives the personal stage the focal brand colour.
   The requested split is illustrative, not a university formula. Then
   the admissions road, the assessment day, and the dental lane.
   ———————————————————————————————————————————————————————————— */

.md-page{ --col: 1080px; }

/* plain paper */
.md-page::before, .md-page::after{ content:none; }
body.md-page{ background-image:none; }
@media (min-width:1024px){ body.md-page{ background-image:none; } }
:root[data-room="dark"] body.md-page{ background-image:none; }

.md-page .bar > .wrap, .md-page .foot > .wrap{ max-width: var(--col); padding-inline: var(--pad); }
main.md{ max-width: var(--col); margin-inline:auto; padding-inline: var(--pad); }
.md .crumb{ margin-top: 26px; }

/* ——— section numerals ——— */
.md-h2{
  display:flex; align-items:baseline; gap:14px; margin:0 0 26px; flex-wrap:wrap;
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); line-height:1.4;
}
.md-no{ font-weight:500; font-size:.62em; color: var(--accent); letter-spacing:.5px; position:relative; top:-.08em; }
.md-h2-s{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }

/* ————————————————————————————————————————————————————————————
   THE TITLE — three letters
   ———————————————————————————————————————————————————————————— */
.md-head{
  display:grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 72px); align-items:end;
  padding-block: 22px 44px; border-bottom: 1px solid var(--line);
}
.md-head h1{ margin:0; min-width:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg); line-height:1; }
.h1-kick{ display:block; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); font-weight:700; color: var(--fg-mute); line-height:1.5; margin-bottom:.3em; }
.h1-name{
  display:block; font-size: clamp(5rem, 2.6rem + 12vw, 12rem); line-height:1.08; letter-spacing:-.02em;
  color: var(--accent); margin-inline-start:-.03em; padding-top:.04em;
}
.h1-sub{ display:block; font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2.1rem); font-weight:700; color: var(--fg); line-height:1.4; margin-top:.1em; }
.md-intro{ padding-bottom: 12px; }
.md-lede{ margin:0; font-size: clamp(1.05rem, 1rem + .5vw, 1.26rem); line-height:1.9; font-weight:400; color: var(--fg); max-width: 27em; }
.md-lede b{ font-weight:600; color: var(--accent); }
/* the facts are words, not counts — a course with no hours to print */
.md-facts{ list-style:none; margin: 20px 0 0; padding:0; display:grid; grid-template-columns: repeat(2, auto); gap: 8px 24px; width:fit-content; }
.md-facts li{ position:relative; padding-inline-start: 16px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.98rem; color: var(--fg); line-height:1.6; }
.md-facts li::before{ content:''; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:7px; border-radius:50%; background: var(--accent); }
.md-acts{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 22px; margin-top: 26px; }
.md-link{
  color: var(--fg); text-decoration:none; font-weight:500; font-size:.98rem;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat;
  background-size:100% 1px; background-position: 0 100%; padding-bottom:3px; transition: color .18s ease;
}
.md-link:hover{ color: var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .h1-name{ animation: rise .7s var(--out) both; }
  .h1-sub{ animation: rise .6s .3s var(--out) both; }
  .md-intro{ animation: fade-in .6s .6s ease both; }
}
@keyframes rise{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } }
@media (max-width: 760px){
  .md-head{ grid-template-columns: 1fr; gap: 16px; padding-block: 16px 34px; align-items:start; }
  .md-facts{ grid-template-columns: 1fr; }
}

/* ————————————————————————————————————————————————————————————
   THE CAKE — an illustrative composition, with direct labels
   ———————————————————————————————————————————————————————————— */
.wt{ margin-block: 64px 0; }
.wt-grid{ display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px clamp(32px, 5vw, 72px); align-items:start; }
.wt-txt p{ margin:0 0 14px; font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height:1.95; color: var(--fg-soft); max-width: 30em; }
.wt-txt p:last-child{ margin-bottom:0; }
.wt-lead{ font-size: clamp(1.12rem, 1.02rem + .6vw, 1.36rem) !important; line-height:1.8 !important; color: var(--fg) !important; }
.wt-txt b{ color: var(--fg); font-weight:600; }
.admission-cake{ min-width:0; margin:0; }
.cake-svg{ display:block; width:100%; height:auto; overflow:visible; }
.cake-ink-side{ fill:var(--body-c); }
.cake-ink-top{ fill:var(--ink); stroke:var(--fg-soft); stroke-width:1; stroke-linejoin:round; }
.cake-cut{ fill:var(--pink-hover); }
.cake-side{ fill:var(--pink-press); }
.cake-layer{ fill:none; stroke:var(--pink-light); stroke-width:2; opacity:.5; }
.cake-top{ fill:var(--pink); stroke:var(--pink-light); stroke-width:1; stroke-linejoin:round; }
.cake-label{ fill:var(--s1); font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:32px; }
.cake-academic-label{ fill:var(--fg); font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:600; font-size:25px; }
.cake-leader{ fill:none; stroke:var(--fg-soft); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.cake-leader-dot{ fill:var(--fg-soft); }
.admission-cake figcaption{ margin:0; color:var(--fg-soft); font-size:.82rem; line-height:1.8; max-width:30em; }
#wtTitle, #rdTitle{ scroll-margin-top:30px; }
@media (prefers-reduced-motion: no-preference){
  .md-js .admission-cake:not(.in) .cake-object{ opacity:0; }
  .md-js .admission-cake.in .cake-object{ transform-box:fill-box; transform-origin:center; animation:rise .7s var(--out) both; }
}
@media (max-width: 860px){
  .wt-grid{ grid-template-columns: 1fr; }
  .admission-cake{ width:100%; max-width:560px; margin-inline:auto; }
}
@media (max-width: 520px){
  .cake-label{ font-size:34px; }
  .cake-academic-label{ font-size:27px; }
}

/* ————————————————————————————————————————————————————————————
   THE ROAD — six stops, two of them ours
   ———————————————————————————————————————————————————————————— */
.road{ margin-block: 84px 0; }
.rd{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(6, 1fr); gap: 0 12px; position:relative; }
/* the line the stops sit on */
.rd::before{ content:''; position:absolute; top: 19px; inset-inline: 20px; height:1px; background: var(--rail-line); }
.rd-stop{ position:relative; padding-top: 56px; min-width:0; }
.rd-n{
  position:absolute; top:0; inset-inline-start:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background: var(--paper); border: 1.5px solid var(--fg);
  font-family:'Rubik', system-ui, sans-serif; font-weight:600; font-size:1.05rem; color: var(--fg);
}
.rd-stop b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size: clamp(.98rem, .94rem + .3vw, 1.12rem); line-height:1.5; color: var(--fg); }
.rd-stop > span:last-child{ display:block; margin-top:4px; font-size:.86rem; line-height:1.75; color: var(--fg-mute); }
.rd-stop a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:500; }
.rd-stop a:hover{ color: var(--pink-hover); }
/* the two stops the course covers: pink numeral, and a pink run of the line
   between them */
.rd-here .rd-n{ background: var(--accent); border-color: var(--accent); color:#fff; }
.rd-here b{ color: var(--accent); }
.rd-here::before{ content:''; position:absolute; top:19px; inset-inline-start:20px; width: calc(100% + 12px); height:3px; background: var(--accent); border-radius:2px; }
/* only the first covered stop draws the run — to the next covered stop */
.rd-here + .rd-here::before{ content:none; }
.rd-end .rd-n{ border-width:2.5px; }
.rd-cap{ margin: 26px 0 0; font-size:.98rem; line-height:1.9; color: var(--fg-soft); }
.rd-cap-k{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--accent); }
.md-js .rd:not(.in) .rd-stop{ opacity:0; transform: translateY(8px); }
.md-js .rd.in .rd-stop{ animation: rise .5s var(--out) both; }
.md-js .rd.in .rd-stop:nth-child(2){ animation-delay:.08s; } .md-js .rd.in .rd-stop:nth-child(3){ animation-delay:.16s; }
.md-js .rd.in .rd-stop:nth-child(4){ animation-delay:.24s; } .md-js .rd.in .rd-stop:nth-child(5){ animation-delay:.32s; } .md-js .rd.in .rd-stop:nth-child(6){ animation-delay:.4s; }
@media (max-width: 900px){
  .rd{ grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
  .rd::before{ content:none; }
  .rd-here::before{ content:none; }
}
@media (max-width: 760px){
  .road{ margin-block-start:64px; }
  .rd{ grid-template-columns: 1fr; gap: 0; }
  .rd-stop{ padding:4px 0 28px; padding-inline-start:56px; min-height:40px; }
  .rd-stop:last-child{ padding-bottom:0; }
  .rd-stop:not(:last-child)::after{
    content:''; position:absolute; inset-inline-start:19.5px; top:40px; bottom:0;
    width:1px; background:var(--rail-line);
  }
  /* The digits are LTR; their physical right edge follows the RTL timeline. */
  .rd-n{ top:0; inset-inline-start:auto; right:0; left:auto; }
  .rd-here .rd-n{ background:var(--pink); border-color:var(--pink); color:var(--s1); }
  .rd-stop b{ font-size:1.12rem; line-height:1.6; text-wrap:pretty; }
  .rd-stop > span:last-child{ margin-top:6px; font-size:1rem; line-height:1.85; color:var(--fg-soft); }
  .rd-stop [lang="he"]{ white-space:nowrap; }
  .rd-stop a:hover{ color:var(--fg); }
  .rd-stop a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .rd-here:not(:last-child)::after{ width:3px; inset-inline-start:18.5px; background:var(--accent); }
  .rd-here + .rd-here:not(:last-child)::after{ width:1px; inset-inline-start:19.5px; background:var(--rail-line); }
  .rd-cap{ padding-inline-start:56px; }
}

/* ————————————————————————————————————————————————————————————
   THE DAY — the loop, then the course's four answers
   ———————————————————————————————————————————————————————————— */
.day{ margin-block: 84px 0; }
.day-lead{ margin:0 0 20px; font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.95; color: var(--fg-soft); max-width: 38em; }
.day-ci{ max-width:860px; margin:28px auto 0; padding:4.5rem 1.25rem 5rem; }
.ci{ position:relative; height:clamp(15rem, 72vw, 17.5rem); margin:0; padding:0; list-style:none; }
.ci::before{ content:""; position:absolute; inset:0; border:1.5px solid var(--rail-line); border-radius:50%; }
.ci-stop{ position:absolute; inset:0; }
.ci-n{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%); display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--pink); color:var(--s1); font-family:'Rubik', system-ui, sans-serif; font-weight:600; font-size:1rem; line-height:1; }
.ci-l{ position:absolute; width:calc(50% - 2.25rem); font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:clamp(1.125rem, 1rem + .45vw, 1.4rem); line-height:1.55; color:var(--fg); }
.ci-stop:first-child .ci-l{ bottom:calc(100% + 1.75rem); left:50%; transform:translateX(-50%); width:100%; text-align:center; }
.ci-stop:nth-child(2) .ci-l{ right:1.875rem; top:50%; transform:translateY(-50%); text-align:right; }
.ci-stop:nth-child(5) .ci-l{ left:1.875rem; top:50%; transform:translateY(-50%); text-align:left; }
.ci-stop:nth-child(3) .ci-l, .ci-stop:nth-child(4) .ci-l{ top:calc(var(--y) + 1.75rem); left:var(--x); transform:translateX(-50%); width:calc(50% - .5rem); text-align:center; }
.md-js .day-ci:not(.in) .ci::before,
.md-js .day-ci:not(.in) .ci-stop{ opacity:0; }
.md-js .day-ci.in .ci::before{ animation:fade-in .5s ease both; }
.md-js .day-ci.in .ci-stop{ animation: fade-in .4s ease both; animation-delay: var(--d); }
.day-grid{ margin-top: 40px; border-top: 1px solid var(--fg); padding-top: 18px; display:grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 12px clamp(32px, 5vw, 72px); }
.day-h{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); line-height:1.5; color: var(--accent); }
.day-list{ margin:0; }
.day-list > div{ padding-block: 14px 16px; border-bottom: 1px solid var(--line); }
.day-list > div:first-child{ padding-top: 4px; }
.day-list dt{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem); line-height:1.6; color: var(--fg); }
.day-list dd{ margin: 3px 0 0; font-size:.94rem; line-height:1.85; color: var(--fg-soft); max-width: 34em; }
.md-js .day-list:not(.in) > div{ opacity:0; }
.md-js .day-list.in > div{ animation: fade-in .45s ease both; }
.md-js .day-list.in > div:nth-child(2){ animation-delay:.1s; } .md-js .day-list.in > div:nth-child(3){ animation-delay:.2s; } .md-js .day-list.in > div:nth-child(4){ animation-delay:.3s; }
@media (max-width: 760px){
  .day-grid{ grid-template-columns: 1fr; }
}

/* ————————————————————————————————————————————————————————————
   DENTAL — its own lane
   ———————————————————————————————————————————————————————————— */
.dent{ margin-block: 84px 0; }
.dent-grid{ border-inline-start: 3px solid var(--accent); padding-inline-start: clamp(18px, 3vw, 32px); }
.dent-lead{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg); font-size: clamp(1.15rem, 1.02rem + .8vw, 1.6rem); line-height:1.6; }
.dent-lead b{ color: var(--accent); font-weight:800; }
.md-js .dent-grid:not(.in){ opacity:0; transform: translateY(8px); }
.md-js .dent-grid.in{ animation: rise .55s var(--out) both; }

/* ————————————————————————————————————————————————————————————
   THE ASK — pink ground, white type
   ———————————————————————————————————————————————————————————— */
.talk{ margin-block: 84px 0; }
.talk-in{ background: var(--pink); color:#fff; border-radius:24px; padding: clamp(34px, 5vw, 60px) var(--pad) clamp(36px, 5vw, 60px); text-align:center; box-shadow: var(--cta-shadow); }
.talk h2{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color:#fff; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); line-height:1.35; }
.talk-p{ margin:8px auto 0; max-width: 30em; color: rgba(255,255,255,.86); font-size:1rem; line-height:1.9; }
.talk-tel{
  display:block; margin: 22px auto 0; width:fit-content; color:#fff; text-decoration:none;
  font-family:'Rubik', system-ui, sans-serif; font-weight:600; letter-spacing:-.01em;
  font-size: clamp(2.2rem, 1.6rem + 3.6vw, 4.4rem); line-height:1.1;
  border-bottom: 3px solid rgba(255,255,255,.4); padding-bottom:4px; transition: border-color .18s ease;
}
.talk-tel:hover{ border-color:#fff; }
.talk-acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 26px; }
.tb-1{ background:#fff; color: var(--pink); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.tb-1:hover{ background:#fff5f8; }
.tb-2{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.tb-2:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.talk a:focus-visible{ outline-color:#fff; }

/* ——— the other four ——— */
.sib{ margin-block: 72px 0; }
.sib-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.sib-list a{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 16px 4px; border-bottom:1px solid var(--line); text-decoration:none; color: var(--fg); transition: color .18s ease; }
.sib-list b{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.05rem; }
.sib-list em{ font-style:normal; font-size:.88rem; color: var(--fg-mute); }
.sib-list a:hover, .sib-list a:hover b{ color: var(--accent); }
