/* ==========================================================================
   Dhakker — School Management public page
   Scope: layout and domain surfaces that exist only on /school (the layer
   cards, the hierarchy tree, the capability tiles, the who-sees-what matrix).
   Buttons, nav, footer, and every colour come from landing.css — this file
   adds no parallel button system and no colour of its own.
   ========================================================================== */

/* ---------- Hero ---------- */
.school-hero {
  background: var(--green);
  color: var(--white);
  padding: 140px 0 72px;
  position: relative;
  overflow: hidden;
}

/* A single rotated gold square, the same motif the brand pattern uses. */
.school-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -6rem;
  inset-inline-start: -6rem;
  width: 20rem;
  height: 20rem;
  background: var(--gold);
  opacity: 0.07;
  transform: rotate(45deg);
  pointer-events: none;
}

.school-hero .container { position: relative; }

.school-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.school-diamond {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.school-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin-bottom: 16px;
  text-wrap: balance;
}

.school-promise {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--cream);
  max-width: 34ch;
  margin-bottom: 28px;
}

.school-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.school-chips li {
  border: 1px solid rgba(212, 172, 99, 0.45);
  color: var(--gold-light);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---------- Flow strip ---------- */
.school-flow {
  background: var(--green-dark);
  padding: 18px 0;
}

.school-flow-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.school-flow-inner::-webkit-scrollbar { display: none; }

.school-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 74px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cream);
  text-align: center;
}

.school-flow-step svg {
  width: 22px;
  height: 22px;
  stroke: var(--gold);
}

.school-flow-arrow {
  flex: none;
  color: var(--gold);
  opacity: 0.45;
  font-size: 0.9rem;
}

/* ---------- Sections ---------- */
.school-section { padding: 80px 0; }
.school-section--tint { background: var(--white); }

.school-section-head { max-width: 640px; margin-bottom: 40px; }
.school-section-head .section-title { font-size: 2rem; }

/* ---------- Three layers ---------- */
.school-layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.school-layer {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 24px;
}

.school-section--tint .school-layer { background: var(--cream); }

.school-layer-n {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.school-layer h3 { font-size: 1.3rem; margin-bottom: 8px; }
.school-layer p { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Hierarchy tree ----------
   The indentation is the message: a circle sits inside a term, which sits
   inside a programme. Rendered as nested lists so a screen reader hears the
   same containment a sighted reader sees. */
.school-tree {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 28px;
}
.school-section--tint .school-tree { background: var(--cream); }

.school-tree-branch {
  margin-inline-start: 6px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--cream-dark);
}
.school-tree-branch > li { margin-top: 14px; }

.school-node {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.school-node-dot {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.school-node-dot--hollow { background: none; border: 1px solid var(--text-light); }

.school-node-tick {
  width: 10px;
  height: 1px;
  background: var(--text-light);
  flex: none;
}

.school-node-program { font-size: 1.2rem; font-weight: 700; }
.school-node-term { font-size: 1rem; font-weight: 600; }
.school-node-circle { font-size: 0.95rem; color: var(--text-muted); }

.school-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0;
  padding-inline-start: 18px;
  font-size: 0.82rem;
  color: var(--text-light);
}
.school-facts li { display: flex; align-items: center; gap: 8px; }
.school-facts li + li::before { content: "·"; color: var(--text-light); }

.school-tag {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--cream-dark);
  color: var(--text-light);
  white-space: nowrap;
}

/* An override says "this value was written here, not inherited". */
.school-tag--override {
  color: #8a6520;
  border-color: rgba(200, 154, 75, 0.55);
  background: rgba(200, 154, 75, 0.1);
}

.school-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.school-legend li { display: flex; align-items: center; gap: 8px; }

.school-note {
  margin-top: 20px;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---------- Capability tiles ---------- */
.school-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.school-tile {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
}
.school-section--tint .school-tile { background: var(--cream); }

.school-tile:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.school-tile svg {
  width: 26px;
  height: 26px;
  stroke: var(--green);
  margin-bottom: 14px;
}

.school-tile h3 { font-size: 1.15rem; margin-bottom: 8px; }
.school-tile p { font-size: 0.92rem; color: var(--text-muted); }

/* ---------- Who sees what ---------- */
.school-matrix-wrap { overflow-x: auto; }

.school-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 420px;
}
.school-section--tint .school-matrix { background: var(--cream); }

.school-matrix th,
.school-matrix td { padding: 14px 18px; text-align: start; }

.school-matrix thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
  border-bottom: 1px solid var(--cream-dark);
  white-space: nowrap;
}

.school-matrix thead th:not(:first-child),
.school-matrix td { text-align: center; }

.school-matrix tbody th { font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.school-matrix tbody tr + tr th,
.school-matrix tbody tr + tr td { border-top: 1px solid var(--cream-dark); }

.school-mark {
  display: inline-block;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
}
.school-mark--full { background: var(--green); }
.school-mark--part {
  background: linear-gradient(to right, var(--green) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1px var(--green);
}
.school-mark--none { box-shadow: inset 0 0 0 1px var(--text-light); }

/* ---------- Not in this version ---------- */
/* ---------- Roadmap ----------
   Three stages, nearest first. The rule above each column is the timeline; it
   fades stage by stage so "later" is legible without a date nobody can keep. */
.school-roadmap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  /* The order matters semantically, so this stays an <ol> — but the stage label
     already names the position, and a browser marker would say it twice. */
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 760px) {
  .school-roadmap { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.roadmap-col { padding-block-start: 18px; border-block-start: 2px solid var(--gold); }
.school-roadmap > li:nth-child(2) { border-block-start-color: rgba(200, 154, 75, 0.55); }
.school-roadmap > li:nth-child(3) { border-block-start-color: rgba(200, 154, 75, 0.3); }

.roadmap-stage {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 14px;
}
.roadmap-marker {
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
}
.school-roadmap > li:nth-child(2) .roadmap-stage,
.school-roadmap > li:nth-child(3) .roadmap-stage { color: var(--text-light); }
.school-roadmap > li:nth-child(2) .roadmap-marker { background: none; border: 1.5px solid var(--gold); }
.school-roadmap > li:nth-child(3) .roadmap-marker { background: none; border: 1.5px solid var(--text-light); }

.roadmap-items { display: flex; flex-direction: column; gap: 10px; }
.roadmap-items li {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-muted);
  padding-inline-start: 14px;
  position: relative;
}
.roadmap-items li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 6px;
  block-size: 1.5px;
  background: var(--text-light);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .school-hero { padding: 116px 0 56px; }
  .school-section { padding: 56px 0; }
  .school-tree { padding: 20px; }
  .school-facts { padding-inline-start: 0; }
}

/* ---------- RTL ---------- */
/* Logical properties carry most of it; the arrow glyph is the exception —
   the flow runs the other way, so it must point the other way. */
[dir="rtl"] .school-flow-arrow { transform: scaleX(-1); }

/* ==========================================================================
   Three modules
   Replaces the flat capability grid. The module is the unit a mosque adopts,
   so it gets the heading and the sub-features get one line each. Layout only —
   colours, radii and shadows all come from landing.css tokens.
   ========================================================================== */
.school-modules {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.school-module {
  background: #fff;
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-md);
}

.school-module-head { border-block-end: 1px solid var(--cream-dark); padding-block-end: 14px; }

.school-module-n {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.school-module-title { font-size: 1.22rem; margin-block: 4px 6px; color: var(--green); }
.school-module-lede { font-size: 0.9rem; color: var(--text-light); margin: 0; }

.school-subs { list-style: none; margin: 0; padding: 0; }

.school-sub {
  display: flex;
  gap: 12px;
  padding-block: 14px;
  border-block-end: 1px solid var(--cream);
}
.school-sub:last-child { border-block-end: 0; padding-block-end: 0; }

.school-sub-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  color: var(--gold);
}

.school-sub-body { min-width: 0; }
.school-sub-body h4 { font-size: 0.98rem; margin: 0 0 3px; color: var(--green); }
.school-sub-body p { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* A demo exists for this line — say so quietly, and only where one does. */
.school-sub-demo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block-start: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.school-sub-demo svg { width: 11px; height: 11px; }
.school-sub-demo:hover { color: var(--green); text-decoration: underline; }

.school-modules-foot { text-align: center; margin-block-start: 30px; }

/* ==========================================================================
   Demos page — a list of names beside one stage
   ========================================================================== */
.school-demos-head {
  background: var(--green);
  color: #fff;
  padding-block: 132px 44px;
  text-align: center;
}
.school-demos-head h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-block: 10px 12px; }
.school-demos-head .school-eyebrow,
.school-demos-head .school-promise { justify-content: center; margin-inline: auto; }
.school-demos-note {
  margin-block-start: 14px;
  font-size: 0.82rem;
  color: var(--gold-light);
}

.school-demos { padding-block: 44px 64px; background: var(--cream); }

.school-demos-layout {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(210px, 260px) 1fr;
  align-items: start;
}

.school-demo-list, .school-demo-list ul { list-style: none; margin: 0; padding: 0; }
.school-demo-nav { position: sticky; top: 92px; }
.school-demo-group + .school-demo-group { margin-block-start: 22px; }

.school-demo-group-title {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 8px;
}

.school-demo-link {
  display: block;
  padding: 9px 12px;
  border-inline-start: 2px solid var(--cream-dark);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}
.school-demo-link:hover { color: var(--green); background: rgba(200, 154, 75, 0.08); }
.school-demo-link[aria-current="true"] {
  border-inline-start-color: var(--gold);
  color: var(--green);
  font-weight: 600;
  background: #fff;
}

.school-demo-frame {
  background: var(--green-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* The recordings are 360x780. Past their native width they only get softer,
     so the frame stops there and centres instead of stretching. */
  inline-size: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: 360 / 780;
}
.school-demo-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }

.school-demo-title { font-size: 1.15rem; color: var(--green); margin-block: 18px 6px; }
.school-demo-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.school-demo-caption { font-size: 0.92rem; color: var(--text-muted); margin: 0; max-width: 60ch; }

/* On a phone the list of names sits above the stage and scrolls sideways —
   a sticky column 260px wide would leave nothing for the video. */
@media (max-width: 860px) {
  .school-demos-layout { grid-template-columns: 1fr; gap: 20px; }
  .school-demo-nav { position: static; }
  .school-demo-list { display: flex; gap: 20px; overflow-x: auto; padding-block-end: 6px; }
  .school-demo-group + .school-demo-group { margin-block-start: 0; }
  .school-demo-group { flex: 0 0 auto; }
  .school-demo-list ul { display: flex; gap: 6px; }
  .school-demo-link { white-space: nowrap; border-inline-start: 0; border-block-end: 2px solid var(--cream-dark); }
  .school-demo-link[aria-current="true"] { border-block-end-color: var(--gold); }
}

/* ==========================================================================
   Detail sheet
   Slides up from the bottom edge on every width; on a desktop it stops at a
   readable height and puts the clip beside the list rather than above it, so a
   780px-tall phone recording does not push the words off the screen.
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 31, 26, 0.55);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.sheet-backdrop[data-open="true"] { opacity: 1; }

.sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 201;
  max-block-size: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  box-shadow: 0 -18px 50px rgba(8, 31, 26, 0.28);
  transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sheet[data-open="true"] { transform: translateY(0); }

body.sheet-open { overflow: hidden; }

.sheet-grip {
  flex: 0 0 auto;
  inline-size: 42px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--cream-dark);
  margin: 10px auto 0;
}

.sheet-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--cream-dark);
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  cursor: pointer;
}
.sheet-close svg { inline-size: 15px; block-size: 15px; }
.sheet-close:hover { background: var(--cream-dark); }

.sheet-head {
  flex: 0 0 auto;
  padding: 14px 22px 14px;
  border-block-end: 1px solid var(--cream-dark);
}
.sheet-title { font-size: 1.3rem; color: var(--green); margin: 0 0 5px; padding-inline-end: 42px; }
.sheet-lede { font-size: 0.92rem; color: var(--text-light); margin: 0; }

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px 30px;
  -webkit-overflow-scrolling: touch;
}

.sheet-cols { display: grid; gap: 22px; }

.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li {
  position: relative;
  padding-inline-start: 20px;
  padding-block: 7px;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
}
/* The gold diamond from the hero, at list scale. */
.sheet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 15px;
  inline-size: 6px;
  block-size: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.sheet-clip { margin: 0; }

.sheet-speed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 10px;
  font-size: 0.76rem;
  color: var(--text-light);
}
.sheet-speed-group { display: inline-flex; border: 1px solid var(--cream-dark); border-radius: 999px; overflow: hidden; }
.sheet-speed-group button {
  border: 0;
  background: #fff;
  color: var(--text-muted);
  font: inherit;
  padding: 3px 10px;
  cursor: pointer;
}
.sheet-speed-group button + button { border-inline-start: 1px solid var(--cream-dark); }
.sheet-speed-group button[aria-pressed="true"] { background: var(--green); color: #fff; }

.school-sub-details {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block-start: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  cursor: pointer;
}
.school-sub-details svg { inline-size: 11px; block-size: 11px; }
.school-sub-details:hover { color: var(--green); text-decoration: underline; }
/* The flow runs the other way in Arabic, so the arrow must point that way. */
[dir="rtl"] .school-sub-details svg { transform: scaleX(-1); }

@media (min-width: 760px) {
  .sheet { inset-inline: max(0px, calc(50vw - 480px)); max-block-size: 80vh; }
  .sheet-head { padding-inline: 30px; }
  .sheet-body { padding-inline: 30px; }
  /* Clip beside the list: the recording is taller than it is wide, and stacked
     it would push every bullet below the fold. */
  .sheet-cols { grid-template-columns: 300px 1fr; align-items: start; }
  .sheet-clip .school-demo-frame { inline-size: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { transition: none; }
}

/* ==========================================================================
   Hero stage — the system as one block
   A square in the middle is the product; the eight capabilities sit around it
   and settle inward one after another, then the core rings once. The claim
   "all of this is inside" is made by the arrangement, not by a sentence — so
   it needs no copy of its own beyond the names, which already exist.

   Pure CSS: one keyframe, offset per chip by `--n`, direction per chip by
   `--dx`/`--dy` (sign-flipped in RTL so "inward" stays inward).
   ========================================================================== */

.school-hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1040px) {
  .school-hero-grid { grid-template-columns: 1fr minmax(360px, 460px); gap: 56px; }
}

.school-hero-copy { min-width: 0; }

.school-hero-stage { min-width: 0; }

/* Three by three: the core claims the middle cell and the chips flow around
   it, which keeps the ring aligned at every width and mirrors itself in RTL. */
.school-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-inline-size: 460px;
  margin-inline: auto;
}
.hub-ring { display: contents; }

.hub-chip {
  grid-column: auto;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 172, 99, 0.4);
  background: rgba(244, 241, 234, 0.05);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  animation: hubLand 8s calc(var(--n) * 0.5s) infinite both;
}
[dir="rtl"] .hub-chip { --rtl: -1; }

.hub-dot {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Each chip arrives from further out along its own axis and settles. */
@keyframes hubLand {
  0% {
    opacity: 0;
    transform: translate(calc(var(--dx) * var(--rtl, 1) * 2.4), calc(var(--dy) * 2.4)) scale(0.92);
  }
  8%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.96); }
}

.hub-core {
  grid-area: 2 / 2;
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: var(--green-dark);
  border: 1px solid var(--gold);
  text-align: center;
  animation: hubPulse 8s infinite both;
}

/* The brand motif, sized to read as the block behind the block. */
.hub-core-mark {
  position: absolute;
  inset: 12%;
  background: var(--gold);
  opacity: 0.07;
  transform: rotate(45deg);
}

.hub-core-name {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  text-wrap: balance;
}
.hub-core-sub {
  position: relative;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* One ring, once the last chip has landed (~52% of the loop). */
@keyframes hubPulse {
  0%, 48% { box-shadow: 0 0 0 0 rgba(212, 172, 99, 0); }
  56% { box-shadow: 0 0 0 12px rgba(212, 172, 99, 0.16); }
  66%, 100% { box-shadow: 0 0 0 20px rgba(212, 172, 99, 0); }
}

/* Below the two-column breakpoint the square gets narrow enough that the long
   labels would wrap to three lines; the ring loosens instead. */
@media (max-width: 460px) {
  .school-hub { gap: 8px; }
  .hub-chip { padding: 6px 9px; font-size: 0.66rem; }
  .hub-core-name { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-chip, .hub-core { animation: none; opacity: 1; transform: none; }
}