/* Hero student cluster (see cluster.js). Grid of 1760 units mapped to the stage width with cqw. */
.mc-host { height: auto !important; overflow: visible !important; }
.mc-host > :not(.mc-stage) { display: none !important; }

.mc-stage { width: 100vw; position: relative; margin-inline: calc(50% - 50vw);
  padding: 10px 0 70px; overflow-x: clip; overflow-y: visible; direction: ltr;
  background: radial-gradient(42% 46% at 50% 62%, rgba(94, 234, 212, .26), rgba(94, 234, 212, 0) 100%); }
.mc-grid { position: relative; width: min(100%, 1640px); margin: 0 auto; aspect-ratio: 1760 / 520; container-type: inline-size; }

.mc-tile { position: absolute; margin: 0; aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  background: rgb(236, 234, 228); box-shadow: 0 1.2cqw 2.6cqw rgba(53, 13, 88, .14); }
.mc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
.mc-tile:hover img { scale: 1.06; }
.mc-p6 { aspect-ratio: 280 / 290; }
.mc-p5 { z-index: 2; } .mc-p6 { z-index: 3; } .mc-p3, .mc-p8 { z-index: 2; }

.mc-accent { position: absolute; z-index: 4; filter: drop-shadow(0 .6cqw .8cqw rgba(53, 13, 88, .2)); }

.mc-pill { position: absolute; z-index: 6; display: flex; align-items: center; gap: 1cqw; direction: rtl;
  padding: .55cqw 1.7cqw .55cqw .55cqw; padding-inline: .55cqw 1.9cqw; border-radius: 999px; background: #fff;
  box-shadow: 0 1.4cqw 3cqw rgba(53, 13, 88, .16), 0 0 0 1px rgba(53, 13, 88, .05); white-space: nowrap; }
.mc-ico { flex: none; display: grid; place-items: center; width: 4.6cqw; aspect-ratio: 1; border-radius: 50%;
  background: rgb(230, 251, 246); }
.mc-ico img { width: 78%; height: 78%; object-fit: contain; }
.mc-txt { display: grid; gap: .15cqw; text-align: right; }
.mc-txt b { font: 400 max(15px, 2.05cqw)/1.05 Lalezar, sans-serif; color: rgb(53, 13, 88); }
.mc-txt small { font: 500 max(10px, 1cqw)/1.3 "Readex Pro", sans-serif; color: rgb(22, 22, 22); }

/* Pop-in: scale + fade from the centre outwards, slight overshoot. Content stays fully visible after. */
.mc-tile, .mc-pill, .mc-accent { opacity: 0; scale: .82; transition: opacity .5s ease var(--delay),
  scale .8s cubic-bezier(.34, 1.56, .64, 1) var(--delay); }
.mc-pill { scale: .9; }
.mc-stage.is-in .mc-tile, .mc-stage.is-in .mc-pill, .mc-stage.is-in .mc-accent { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .mc-tile, .mc-pill, .mc-accent { opacity: 1; scale: 1; transition: none; }
}

/* Phones: a wider grid centred in the screen so faces stay big; the outer edge tiles fall off-screen. */
@media (max-width: 760px) {
  .mc-stage { padding-bottom: 40px; }
  .mc-grid { width: 172vw; margin-inline: -36vw; }
  .mc-pill { padding: 4px; padding-inline: 4px 10px; gap: 6px; }
  .mc-ico { width: 28px; }
  .mc-txt b { font-size: 13px; }
  .mc-txt small { font-size: 9px; }
  .mc-pill:nth-of-type(2) { margin-left: -7cqw; }
}