/* ==========================================================================
   About page — page head, offerings, faculty (.person), results strip (copy
   of the homepage strip styles, see SHARED_REQUESTS.md), address card, links,
   closing CTA. Requires tokens.css + base.css. Mobile-first (360).
   ========================================================================== */

/* Page head (shared pattern) ------------------------------------------- */
.page-head { padding-block: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.page-head__text { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; max-width: 72ch; }
.page-head__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-red-text);
}
.page-head__title { font-size: var(--fs-h1); }
.page-head__intro { color: var(--c-text); }
.page-head__text .btn-row { width: 100%; margin-top: var(--s-1); }
.about-aka { font-size: var(--fs-sm); color: var(--c-text-muted); }

.crumbs { margin-bottom: var(--s-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { text-decoration: underline; }

@media (min-width: 960px) {
  .page-head { padding-block: var(--s-4) var(--s-5); }
}

/* Faculty: .person -------------------------------------------------------- */
.person {
  display: grid;
  gap: var(--s-3);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--s-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.person__media { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--c-surface); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person__text { display: grid; gap: var(--s-1); min-width: 0; }
.person__name { font-size: var(--fs-h3); }
.person__role { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-red-text); }
.person__line { color: var(--c-text-muted); }
.person__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: var(--s-1); }
@media (min-width: 640px) {
  .person { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--s-4); }
  .person--no-photo { grid-template-columns: minmax(0, 1fr); }
}

/* Results strip (mirrors home.css) ---------------------------------------- */
.strip-wrap { margin-inline: calc(-1 * var(--gutter)); }
.strip {
  --strip-h: 300px;
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-inline: var(--gutter);
  padding-block: var(--s-1) var(--s-2);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.year-card {
  flex: 0 0 auto;
  width: min(calc(var(--strip-h) * var(--w) / var(--h)), 100%);
  scroll-snap-align: start;
}
.year-card:last-child { scroll-snap-align: end; }
.year-card__link {
  display: grid;
  grid-template-rows: var(--strip-h) auto;
  gap: var(--s-2);
  justify-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
}
.year-card__media { width: 100%; height: var(--strip-h); display: grid; align-items: center; }
.year-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease), transform var(--ease);
}
.year-card__link:hover img,
.year-card__link:focus-visible img { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.year-card__label { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.strip-foot { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.strip-controls { display: none; gap: var(--s-1); }
.strip-controls[hidden] { display: none; }
@media (min-width: 640px)  { .strip { --strip-h: 380px; } }
@media (min-width: 960px) {
  .strip { --strip-h: 420px; }
  .strip-foot { display: flex; align-items: center; justify-content: space-between; }
  .strip-controls { display: flex; }
  .strip-foot .link-more { margin-left: auto; }
}

/* Where to find us --------------------------------------------------------- */
.find { max-width: 560px; margin-inline: auto; }
.find__card address { font-style: normal; line-height: var(--lh-body); color: var(--c-text); }
.find__card .btn-row { margin-top: var(--s-1); }

/* Offerings: batch tag in the card foot (reads from site.json) ------------- */
.card__foot .tag { font-weight: 400; }

/* Closing CTA --------------------------------------------------------------- */
.cta-row { justify-content: center; }