/* ==========================================================================
   Home page — scoped under .page-home
   ========================================================================== */

/* ---------- Hero ---------- */
.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(5rem, 4rem + 5vw, 8rem);
}
.page-home .home-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 88% 12%, rgb(226 174 60 / 0.22), transparent 38%),
    radial-gradient(circle at 5% 90%, rgb(31 138 87 / 0.10), transparent 40%),
    var(--cream-100);
}
/* green swoosh top-right, like the flyer corner */
.page-home .home-hero__bg::after {
  content: ""; position: absolute; top: -140px; right: -140px;
  width: 340px; height: 340px; border-radius: 50%;
  background: var(--green-700);
  box-shadow: 0 0 0 18px var(--cream-100), 0 0 0 21px var(--gold-400);
  opacity: 0.95;
}

.page-home .home-hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .page-home .home-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-7); }
}

.page-home .home-hero__copy { position: relative; }

/* Ribbon badge echoing the gold banner on the flyer */
.page-home .home-ribbon {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0.55em 2.1em;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--green-900);
  font-family: var(--font-display);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9em) 50%, 100% 100%, 0 100%, 0.9em 50%);
  transform: rotate(-2deg);
  transform-origin: left center;
  box-shadow: inset 0 -3px 0 rgb(168 118 26 / 0.35);
}
.page-home .home-ribbon__status {
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase;
}
.page-home .home-ribbon__range { font-weight: 600; font-size: var(--fs-lg); line-height: 1.2; }

.page-home .home-hero__title {
  position: relative;
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--green-800);
  max-width: 13ch;
  margin-bottom: var(--space-5);
}
.page-home .home-hero__title .highlight::after { height: 0.32em; opacity: 0.7; }
.page-home .home-hero__lead {
  font-size: var(--fs-lg);
  color: var(--ink-700);
  max-width: 50ch;
  margin-bottom: var(--space-6);
}
.page-home .home-hero__actions { margin-bottom: var(--space-5); }
.page-home .home-hero__call {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--ink-700); margin: 0;
}
.page-home .home-hero__call .icon { color: var(--gold-700); margin-top: 0.25em; }
.page-home .home-hero__call a { font-weight: 800; white-space: nowrap; }

@media (max-width: 479px) {
  .page-home .home-hero__actions .btn { width: 100%; }
}

/* Photo in an organic frame */
.page-home .home-hero__visual {
  position: relative;
  max-width: 680px;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-4);
}
.page-home .home-hero__frame {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 58% 42% 46% 54% / 50% 48% 52% 50%;
  overflow: hidden;
  border: 8px solid var(--white);
  box-shadow: var(--shadow-lg);
  background: var(--sun-400);
  animation: home-morph 7s ease-in-out 1;
}
.page-home .home-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.page-home .home-hero__ring {
  position: absolute; inset: 0;
  border: 3px dashed var(--gold-500);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  transform: rotate(-4deg) scale(1.02);
  opacity: 0.8;
}
.page-home .home-hero__ring::after {
  content: ""; position: absolute; right: 4%; bottom: -4%;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: var(--green-700); z-index: -1;
}

.page-home .home-chip {
  position: absolute; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.55em 1em;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--green-800);
  font-weight: 800; font-size: var(--fs-sm);
  box-shadow: var(--shadow);
  white-space: nowrap;
  animation: home-float 5s ease-in-out 1;
}
.page-home .home-chip .icon { color: var(--gold-600); width: 1.3em; height: 1.3em; }
.page-home .home-chip--a { left: 0; bottom: 10%; }
.page-home .home-chip--b { right: 0; top: 6%; animation-delay: 0.6s; background: var(--green-700); color: var(--white); }
.page-home .home-chip--b .icon { color: var(--gold-400); }
@media (max-width: 400px) {
  .page-home .home-chip { font-size: var(--fs-xs); }
}

/* Doodles */
.page-home .home-doodle {
  position: absolute; z-index: -1;
  fill: none; stroke: var(--green-700); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.page-home .home-doodle--rays {
  display: none;
  position: absolute; left: -2.2rem; top: -1.6rem; z-index: 0;
  width: 2.4rem; height: 2.4rem; stroke: var(--gold-500); stroke-width: 3.5;
}
@media (min-width: 1024px) { .page-home .home-doodle--rays { display: block; } }
.page-home .home-doodle--plane {
  width: clamp(90px, 10vw, 140px); left: 1%; bottom: 3%;
  opacity: 0.75;
  animation: home-drift 5s ease-in-out 1;
}
.page-home .home-doodle__trail { stroke-dasharray: 4 7; animation: home-dash 2.5s linear 2; }
.page-home .home-doodle--bulb {
  width: clamp(48px, 6vw, 80px); right: 4%; bottom: 8%;
  stroke: var(--green-700);
}
.page-home .home-doodle__glow { stroke: var(--gold-500); stroke-width: 3; animation: home-glow 2.5s ease-in-out 2; }
.page-home .home-doodle--star { width: 22px; stroke-width: 2; animation: home-twinkle 4s ease-in-out 1; }
.page-home .home-doodle--star-1 { left: 46%; top: 8%; }
.page-home .home-doodle--star-2 { left: 47%; top: 58%; stroke: var(--gold-600); animation-delay: 0.5s; }
.page-home .home-doodle--star-3 { right: 42%; bottom: 14%; width: 16px; animation-delay: 1s; }
@media (max-width: 959px) {
  .page-home .home-hero__bg::after { width: 220px; height: 220px; top: -130px; right: -130px; }
  .page-home .home-doodle--plane { left: auto; right: 4%; top: 150px; bottom: auto; width: 96px; opacity: 0.5; }
  .page-home .home-doodle--bulb { display: none; }
  .page-home .home-doodle--star-1 { left: auto; right: 30%; top: 1.2rem; }
  .page-home .home-doodle--star-2,
  .page-home .home-doodle--star-3 { display: none; }
}
@media (max-width: 599px) {
  .page-home .home-doodle--plane { display: none; }
}

/* Decorative motion plays briefly once on load, then stops (WCAG 2.2.2: nothing moves for more than about five seconds). */
@keyframes home-float { 50% { transform: translateY(-8px); } }
@keyframes home-drift { 50% { transform: translate(8px, -10px) rotate(-3deg); } }
@keyframes home-dash { to { stroke-dashoffset: -44; } }
@keyframes home-glow { 50% { opacity: 0.35; } }
@keyframes home-twinkle { 50% { transform: scale(0.75) rotate(20deg); opacity: 0.6; } }
@keyframes home-morph {
  50% { border-radius: 46% 54% 56% 44% / 54% 44% 56% 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero__frame,
  .page-home .home-chip,
  .page-home .home-doodle,
  .page-home .home-doodle__trail,
  .page-home .home-doodle__glow { animation: none; }
}

/* ---------- Four pillars (overlaps hero) ---------- */
.page-home .home-pillars { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -2rem - 3vw, -3rem); }
.page-home .home-pillars__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5);
}
.page-home .home-pillars__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .page-home .home-pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .page-home .home-pillars__panel { padding: var(--space-7) var(--space-6); }
  .page-home .home-pillars__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .page-home .home-pillar { padding-inline: var(--space-5); }
  .page-home .home-pillar + .home-pillar { border-left: 2px dashed var(--line); }
}
.page-home .home-pillar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: start;
}
.page-home .home-pillar__icon { grid-row: span 2; }
@media (min-width: 1040px) {
  .page-home .home-pillar { display: block; text-align: center; }
}
.page-home .home-pillar__icon {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: var(--space-3);
  border-radius: 20px 20px 20px 6px;
  background: var(--green-50); color: var(--green-700);
  transition: transform var(--dur) var(--ease);
}
.page-home .home-pillar:hover .home-pillar__icon { transform: rotate(-6deg) scale(1.06); }
.page-home .home-pillar__icon .icon { width: 30px; height: 30px; }
.page-home .home-pillar__icon--gold { background: var(--gold-100); color: var(--gold-700); }
.page-home .home-pillar__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.page-home .home-pillar p { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); }
.page-home .home-pillars__more { margin: var(--space-5) 0 0; text-align: center; }
.page-home .home-pillars__more .card__link { padding-top: 0; }

/* ---------- Welcome ---------- */
.page-home .home-welcome__media { position: relative; isolation: isolate; max-width: 480px; margin-inline: auto; padding: var(--space-5); }
.page-home .home-welcome__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 200px 200px var(--radius-xl) var(--radius-xl); border: 8px solid var(--white); }
.page-home .home-welcome__blob {
  position: absolute; inset: 12% -2% -2% 14%; z-index: -1;
  border-radius: 42% 58% 38% 62% / 50% 40% 60% 50%;
  background: var(--gold-100);
}
.page-home .home-welcome__blob::before {
  content: ""; position: absolute; left: -6%; top: -10%;
  width: 90px; height: 90px;
  background: radial-gradient(var(--green-500) 2.5px, transparent 3px) 0 0 / 16px 16px;
  opacity: 0.5;
}
.page-home .home-welcome__note {
  position: absolute; right: 0; bottom: 12%; margin: 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.6em 1.1em; border-radius: var(--radius-pill);
  background: var(--green-700); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  box-shadow: var(--shadow); transform: rotate(-4deg);
}
.page-home .home-welcome__note .icon { color: var(--gold-400); }
.page-home .home-welcome__list { margin-block: var(--space-5) var(--space-6); }

/* ---------- Programmes ---------- */
.page-home .home-prog { --accent: var(--green-600); --accent-soft: var(--green-50); border-top: 6px solid var(--accent); overflow: hidden; }
.page-home .home-prog::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--accent-soft); z-index: 0;
}
.page-home .home-prog > * { position: relative; z-index: 1; }
.page-home .home-prog--pink { --accent: var(--pink-400); --accent-soft: #fde8f0; }
.page-home .home-prog--blue { --accent: var(--blue-500); --accent-soft: #e3ecfa; }
.page-home .home-prog--gold { --accent: var(--gold-500); --accent-soft: var(--gold-100); }
.page-home .home-prog__icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: var(--space-4);
  border-radius: 50%; background: var(--accent-soft); color: var(--green-800);
  border: 2px solid var(--accent);
}
.page-home .home-prog__icon .icon { width: 28px; height: 28px; }
.page-home .home-prog__stage {
  margin: 0 0 var(--space-1);
  font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500);
}
.page-home .home-prog h3 { font-size: var(--fs-2xl); }

/* ---------- Learning by doing ---------- */
.page-home .home-doing { position: relative; overflow: hidden; isolation: isolate; }
.page-home .home-doing__deco {
  position: absolute; z-index: -1; left: -120px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 60px solid rgb(226 174 60 / 0.14);
}
.page-home .home-doing__head h2 { color: var(--white); }
.page-home .home-doing__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .page-home .home-doing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.page-home .home-feature {
  display: flex; flex-direction: column;
  background: var(--cream-50); color: var(--ink-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-home .home-feature__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-50); }
/* Portrait photo: keep the child's face and tie in frame */
.page-home .home-feature__media img { object-position: 50% 18%; }
.page-home .home-feature__media img,
.page-home .home-feature__media .placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0; }
.page-home .home-feature__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
/* Tablet, one card per row: photo beside the text so the portrait image is not blown up */
@media (min-width: 600px) and (max-width: 899px) {
  .page-home .home-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .page-home .home-feature__media { aspect-ratio: auto; min-height: 100%; }
  .page-home .home-feature__media img { object-position: 50% 30%; }
  .page-home .home-feature .home-feature__tag { margin-top: 0; }
}
@media (min-width: 900px) {
  .page-home .home-feature__media { aspect-ratio: 16 / 11; }
}
.page-home .home-feature h3 { color: var(--green-800); font-size: var(--fs-2xl); }
.page-home .home-feature p { color: var(--ink-700); }
.page-home .home-feature__tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: calc(var(--space-6) * -1 - 1.2em) 0 var(--space-4);
  padding: 0.5em 1em; border-radius: var(--radius-pill);
  background: var(--green-700); color: var(--white);
  font-weight: 800; font-size: var(--fs-sm);
  box-shadow: var(--shadow);
  position: relative;
}
.page-home .home-feature__tag .icon { color: var(--gold-400); }
.page-home .home-feature__tag--gold { background: var(--gold-500); color: var(--green-900); }
.page-home .home-feature__tag--gold .icon { color: var(--green-800); }
.page-home .home-feature__points {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
}
.page-home .home-feature__points li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--fs-sm); color: var(--green-800);
}
.page-home .home-feature__points .icon { color: var(--gold-700); }

/* ---------- Quick facts ---------- */
.page-home .home-facts { background: var(--gold-500); color: var(--green-900); padding-block: var(--space-7); position: relative; }
.page-home .home-facts::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.08) 0 12px, transparent 12px 24px);
}
.page-home .home-facts__list {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 900px) { .page-home .home-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-home .home-fact__value {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 0.9rem + 2vw, 2.25rem); line-height: 1.1;
  color: var(--green-800);
}
.page-home .home-fact__label { display: block; margin-top: var(--space-1); font-weight: 700; font-size: var(--fs-sm); }

/* ---------- Why RMS ---------- */
.page-home .home-why__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.page-home .home-why__item {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: start;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.page-home .home-why__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-400); }
.page-home .home-why__item .card__icon { grid-row: span 2; margin: 0; width: 52px; height: 52px; border-radius: 16px; }
.page-home .home-why__item .card__icon .icon { width: 26px; height: 26px; }
.page-home .home-why__item h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.page-home .home-why__item p { margin: 0; color: var(--ink-700); font-size: var(--fs-sm); }

/* ---------- News ---------- */
.page-home .home-news__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.page-home .home-news__head h2 { margin: 0; }
.page-home .home-news__meta { margin-bottom: var(--space-3); }
.page-home .home-news__card img { object-position: 50% 0; }
.page-home .home-news__card .placeholder { border: 0; min-height: 0; }

/* ---------- Visit ---------- */
.page-home .home-visit__card {
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0%, rgb(226 174 60 / 0.25), transparent 45%),
    var(--cream-50);
  border: 2px dashed var(--gold-400);
}
@media (min-width: 900px) {
  .page-home .home-visit__card { grid-template-columns: 1.1fr 1fr; align-items: center; padding: var(--space-7); gap: var(--space-7); }
}
.page-home .home-visit__intro h2 { font-size: var(--fs-2xl); }
.page-home .home-visit__details { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.page-home .home-visit__details li { display: flex; gap: var(--space-4); align-items: flex-start; }
.page-home .home-visit__details strong { display: block; color: var(--green-800); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
.page-home .home-visit__details a { font-weight: 700; }
.page-home .home-visit__icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-700); color: var(--gold-400);
}

/* Motto line in the welcome section */
.page-home .home-welcome__motto {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  background: var(--gold-100);
  color: var(--green-900);
  font-weight: 700;
}

/* ---------- Three-card rows (programmes, news): no orphan card on tablets ---------- */
.page-home .home-trio { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 1023px) {
  .page-home .home-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .home-trio > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .page-home .home-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* news: 2 + 1, the last card keeps the same card layout, centred at half width */
  .page-home .home-news__grid > :last-child { justify-self: center; width: calc((100% - var(--space-5)) / 2); }
}

/* ---------- Real photos (responsive <picture> from {{img}}) ---------- */
.page-home main picture { display: contents; }
.page-home .home-welcome__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }

/* Programme cards: photo band across the top of each card */
.page-home .home-prog { padding-top: 0; }
.page-home .home-prog__media {
  margin: 0 calc(var(--card-pad, var(--space-6)) * -1) var(--space-5);
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--accent-soft);
}
.page-home .home-prog__media img { width: 100%; height: 100%; object-fit: cover; }
.page-home .home-prog--pink .home-prog__media img { object-position: 50% 20%; }
.page-home .home-prog--blue .home-prog__media img { object-position: 60% 30%; }
.page-home .home-prog--gold .home-prog__media img { object-position: 55% 40%; }
.page-home .home-prog::after { top: auto; bottom: -60px; }
.page-home .home-prog__icon { margin-top: -54px; background: var(--white); box-shadow: var(--shadow); }

/* Learning by doing: landscape photos */
.page-home .home-feature__media img { object-position: 50% 50%; }
.page-home .home-doing__grid .home-feature:last-child .home-feature__media img { object-position: 70% 60%; }

/* News cards: event photos, faces in the upper part */
.page-home .home-news__card img { flex: none; height: auto; aspect-ratio: 3 / 2; object-position: 50% 30%; }

/* Tour video */
.page-home .home-tour__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .page-home .home-tour__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8, 4rem); }
}
.page-home .home-tour__copy h2 { margin-bottom: var(--space-3); }
.page-home .home-tour__copy p:last-child { margin-bottom: 0; }

/* Visit: campus building photo across the top of the card */
.page-home .home-visit__photo {
  grid-column: 1 / -1; margin: 0;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 900px) { .page-home .home-visit__photo { aspect-ratio: 5 / 2; } }
.page-home .home-visit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.page-home .home-tour { padding-top: 0; }
@media (min-width: 900px) { .page-home .home-visit__photo { aspect-ratio: 3 / 1; } }