/* ============================================================================
   University detail pages — /university/<slug>/
   ----------------------------------------------------------------------------
   One page per university, generated from assets/data/universities_new.js plus
   the verified English names in assets/data/university-names.js.

   Only the pieces the hub does not already provide: the hero, the facts table,
   the photo gallery, the FAQ and the related-university links. Everything else
   (nav, footer, buttons, section shells, tokens) is reused so these pages cannot
   drift from the rest of the site.

   No layout depends on JavaScript: these pages exist to be indexed and read, and
   a crawler must see the content without running anything.
   ========================================================================= */

.uni-page { padding-block: var(--space-8) var(--space-16); }

/* The marketing sections use a display-size h2. On a directory page carrying real
   data that is too loud, and "Programmes at <long university name>" wraps to two
   lines; the h1 already names the university. */
.uni-page .section-header h2 { font-size: var(--text-2xl); }
.uni-page .section-header { margin-bottom: var(--space-4); }

/* ---- breadcrumb ---------------------------------------------------------- */
.uni-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.uni-crumbs a { color: var(--color-ink-soft); text-decoration: none; }
.uni-crumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.uni-crumbs span[aria-hidden] { opacity: .45; }
.uni-crumbs strong { color: var(--color-ink); font-weight: 600; }

/* ---- hero ---------------------------------------------------------------- */
.uni-page-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  margin-bottom: var(--space-8);
}
.uni-page-logo {
  width: 104px; height: 104px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border-light);
  object-fit: contain;
  padding: 8px;
}
.uni-page-h1 {
  font-family: var(--font-display, inherit);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 4px;
}
.uni-page-cn {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}
.uni-page-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.uni-page-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-alt, transparent);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.uni-page-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- facts table --------------------------------------------------------- */
.uni-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-border-light);
  margin-bottom: var(--space-8);
}
.uni-fact {
  background: var(--color-bg-card);
  padding: 14px 16px;
}
.uni-fact dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-soft);
  margin-bottom: 4px;
}
.uni-fact dd { margin: 0; font-weight: 600; font-size: var(--text-base); word-break: break-word; }
.uni-fact dd a { color: var(--color-primary); text-decoration: none; }
.uni-fact dd a:hover { text-decoration: underline; }

/* ---- prose / intro ------------------------------------------------------- */
.uni-prose { max-width: 74ch; color: var(--color-ink-soft); line-height: 1.7; }
.uni-prose p { margin: 0 0 var(--space-4); }
.uni-prose strong { color: var(--color-ink); }

/* ---- photo gallery ------------------------------------------------------- */
.uni-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.uni-gallery figure { margin: 0; }
.uni-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt, #111);
  display: block;
}

/* ---- FAQ ----------------------------------------------------------------- */
.uni-faq { max-width: 80ch; }
.uni-faq details {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.uni-faq summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
}
.uni-faq summary::-webkit-details-marker { display: none; }
.uni-faq summary::after { content: "+"; float: right; opacity: .5; font-weight: 400; }
.uni-faq details[open] summary::after { content: "\2212"; }
.uni-faq details p { margin: 0; padding: 0 16px 16px; color: var(--color-ink-soft); line-height: 1.7; }

/* ---- related ------------------------------------------------------------- */
.uni-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.uni-related a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  text-decoration: none;
  color: inherit;
}
.uni-related a:hover { border-color: var(--color-primary); }
.uni-related .n { font-weight: 600; display: block; margin-bottom: 2px; }
.uni-related .m { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .uni-page-hero { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); }
  .uni-page-logo { width: 72px; height: 72px; padding: 6px; }
  .uni-page-actions { grid-column: 1 / -1; }
  .uni-page-h1 { font-size: var(--text-2xl); }
  .uni-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}