/* ==========================================================================
   PAGE UTILITIES
   Helper classes originally extracted from inline `style="..."` attributes
   scattered across the page templates (about, activities, alumni,
   curriculum, events, facilities, faculty, gallery, hasta-luego, rankers,
   research-and-development). Every declaration below now reads from the
   design-token scale in tokens.css (spacing / font-size / color / etc.)
   instead of a bare literal, so this file is a real (if utility-first)
   part of the design system rather than a one-off extraction — the
   rendered values are unchanged, only how they're expressed.
   ========================================================================== */

/* ---- 1. Spacing ----
   One class per step of the tokens.css spacing scale, both directions —
   nothing else. No fine-step/in-between values: 6 steps is the whole
   scale, same as the font-size one. */
.mt-xs  { margin-top: var(--spacing-xs); }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.pad-lg    { padding: var(--spacing-lg); }
.pad-xl    { padding: var(--spacing-xl); }
.pad-md-lg { padding: var(--spacing-md) var(--spacing-lg); }

.h-full     { height: 100%; }
.w-full     { width: 100%; }
.flex-1     { flex: 1; }
.text-center { text-align: center; }
.list-reset { list-style: none; }

/* ---- 2. Font sizes ----
   One class per step of the tokens.css font-size scale — nothing else.
   Name matches the token tier, not the raw value, so the class itself
   never bakes in a magic number. */
.fs-3xs  { font-size: var(--fs-3xs); }
.fs-2xs  { font-size: var(--fs-2xs); }
.fs-xs   { font-size: var(--fs-xs); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md   { font-size: var(--fs-md); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }
.fs-2xl  { font-size: var(--fs-2xl); }

/* ---- 3. Font weight / transform ---- */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.text-upper { text-transform: uppercase; }
.tracked    { letter-spacing: 0.08em; }

/* ---- 4. Text colors ---- */
.text-default      { color: var(--color-text); }
.text-primary      { color: var(--color-primary); }
.text-accent       { color: var(--color-accent); }
.text-accent-hover { color: var(--color-accent-hover); }
.text-slate-500     { color: var(--color-slate-500); }
.text-slate-600     { color: var(--color-slate-600); }
.text-slate-700     { color: var(--color-slate-700); }
.text-slate-800     { color: var(--color-slate-800); }
.text-slate-900     { color: var(--color-slate-900); }

/* ---- 5. Tone badges (background + foreground pairs) ---- */
.badge-tone--primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-tone--accent  { background: var(--color-accent-light); color: var(--color-accent-hover); }
.badge-tone--neutral { background: var(--color-slate-100); color: var(--color-slate-800); }

/* ---- 6. Eyebrow / kicker label (small caps label above a heading) ---- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}
.eyebrow--tracked {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
}

/* ---- 7. Mono label (small mono-font tag, e.g. activities section badge) ---- */
.mono-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

/* ---- 8. Feature icon (glyph sitting above a card title) ---- */
.feature-icon {
  display: inline-block;
  line-height: 1;
}
/* Icon glyph sizes, not body text — deliberately outside the font-size
   scale (same reasoning as icon-badge's 40px below). */
.feature-icon--sm { font-size: 1.8rem; }
.feature-icon--lg { font-size: 2rem; }
.feature-icon--primary { color: var(--color-primary); }
.feature-icon--accent  { color: var(--color-accent); }

/* ---- 9. Icon badge (rounded square icon chip, e.g. Vision/Mission) ----
   40px box is fixed component geometry (the chip's own shape), not a
   spacing-scale value — left as a literal on purpose. */
.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
}
.icon-badge--primary { background: var(--color-primary-light); color: var(--color-primary); }
.icon-badge--accent  { background: var(--color-accent-light); color: var(--color-accent-hover); }

/* ---- 10. Border-left accent block (publications / highlight list items) ----
   3px border is a decorative stroke weight, not a spacing value — left
   as a literal on purpose. */
.border-accent {
  border-left: 3px solid var(--color-slate-400);
  padding-left: var(--spacing-md);
}
.border-accent--primary { border-left-color: var(--color-primary); }
.border-accent--accent  { border-left-color: var(--color-accent); }

/* ---- 11. Photo frame (faculty portrait box) ----
   200x260px is fixed component geometry (the frame's own aspect), left
   as a literal on purpose. */
.photo-frame {
  width: 200px;
  height: 260px;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 2px solid rgba(136, 19, 55, 0.2);
  background: var(--color-slate-100);
}
.photo-frame--soft { border-color: rgba(136, 19, 55, 0.15); }

.img-cover-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---- 12. Long-form body text (relaxed line-height paragraph) ---- */
.text-body-relaxed {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-slate-700);
}

/* ---- 13. Contact / info block (faculty profile sidebar) ---- */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: var(--fs-sm);
  text-align: left;
  margin-bottom: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

/* ---- 14. Separator between stacked list items ---- */
.list-item-divider {
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* ---- 15. Grid column-template overrides ----
   minmax()'s lower bound is a hard minimum — on phones narrower than
   the value itself (plus container padding) the grid would force
   overflow instead of shrinking, so each collapses to a single column
   before that point. */
.grid-fit-360  { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid-fit-340  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-fill-340 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

@media (max-width: 576px) {
  .grid-fit-360,
  .grid-fit-340,
  .grid-fill-340 {
    grid-template-columns: 1fr;
  }
}