/* ============================================================================
   PERSON PROFILE — shared by every individual administrator and faculty
   page. One stylesheet, many pages, same principle as news-article.css.

   Responsive in the same way the reference site is: a single stacked
   column on small screens (photo on top, everything else below), but a
   genuine two-column split from 900px up — photo in a fixed left column,
   name/role/meta/body/back-link all together in one right-hand column.
   This requires photo and content to share one grid container rather than
   living in separate page sections, which is why the HTML merges them
   into a single .profile-hero section instead of a hero + a later
   .page-section the way the previous version worked.
   ============================================================================ */


.profile-hero,
.profile-content,
.profile-meta,
.profile-body,
.profile-back {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.profile-hero {
  background: var(--paper);
  padding: 168px 0 72px;
}

.profile-grid {
  max-width: 560px;
  margin: 0 auto;
}

.profile-photo {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
}
.profile-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.profile-content h1 {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 40px);
  color: var(--royal-deep);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.profile-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--royal-deep);
  margin-bottom: 28px;
}

/* ── Meta rows — icon + label, for a detail like location or
   qualifications. Optional: only renders where the HTML includes a
   .profile-meta-row, so pages without this markup are unaffected. ── */
.profile-meta { margin-bottom: 28px; }
.profile-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.profile-meta-row:last-child { margin-bottom: 0; }
.profile-meta-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--royal-deep);
}
.profile-meta-icon svg { width: 100%; height: 100%; }
.profile-meta-text {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--royal-deep);
  line-height: 1.5;
  padding-top: 2px;
}

/* ── Body — navy-toned, not pure black, matching the reference. ── */
.profile-body p {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--royal-deep);
  margin-bottom: 22px;
}
.profile-body p:last-child { margin-bottom: 0; }

/* ── Back navigation ── */
.profile-back {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  margin-top: 40px;
}
.profile-back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--royal-deep);
  border: 1.5px solid var(--royal-deep);
  padding: 8px 26px 8px 8px;
  border-radius: 999px;
  overflow: hidden;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  z-index: 0;
  transition: color .3s ease;
}
/* Fill layer — starts exactly the width of the circle (so only the circle
   reads as filled by default), then expands to the pill's full width on
   hover, growing the color outward from the circle rather than sliding
   the whole pill's background in from off-screen. */
.profile-back-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34px;
  background: var(--royal-deep);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.profile-back-link:hover::before {
  width: 100%;
}
.profile-back-link:hover {
  color: #fff;
}

.profile-back-link .arrow-circle {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.profile-back-link:hover .arrow-circle {
  transform: translateX(-2px);
}

/* ============================================================================
   LARGE SCREENS — genuine two-column split: photo fixed in a left column,
   name/role/meta/body/back all together in the right column, top-aligned.
   ============================================================================ */
@media (min-width: 900px) {
  .profile-grid {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
  }
  .profile-photo { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .profile-hero { padding-top: 130px; }
  .profile-photo { border-radius: 16px; }
}