/* ============================================================================
   ADMINISTRATORS — the school's leadership team, distinct from the general
   Faculty & Staff directory. Deliberately not a copy of faculty.css's
   department-masthead flow: this page opens with a quick-reference tile
   grid, then gives each administrator a full profile section — large
   photo, a real paragraph about what they actually do, not just a name
   and a one-line title. The kind of depth a "meet the team" page usually
   skips in favor of a card grid and nothing else.
   ============================================================================ */


/* ── Hero — full-bleed photo with a bottom-anchored gradient for text
   legibility, matching the pattern already used across the site's other
   photo heroes rather than the flat navy panel this page had before. ── */
.admin-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: var(--royal-deep);
}
.admin-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
.admin-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 15, 29, 0.92) 0%,
    rgba(6, 15, 29, 0.55) 32%,
    rgba(6, 15, 29, 0.12) 60%
  );
  pointer-events: none;
}

.admin-hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 168px 40px 64px;
}
.admin-hero-grid > div { max-width: 640px; }

.admin-hero .breadcrumb {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}
.admin-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.admin-hero .breadcrumb a:hover { color: #fff; }

.admin-hero h1 {
  color: #fff;
  font-size: clamp(34px, 4.6vw, 54px);
  max-width: 14ch;
  margin: 0 0 18px;
  line-height: 1.1;
}
.admin-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.6;
  max-width: 54ch;
}

@media (max-width: 768px) {
  .admin-hero-grid { padding: 130px 22px 48px; }
}
@media (max-width: 640px) {
  .admin-hero { min-height: 56vh; }
  .admin-hero h1 { font-size: clamp(28px, 8vw, 38px); }
}

/* ── Quick-reference tile grid ───*/
.admin-tiles { padding: 72px 0; background: var(--paper-dim); }
.admin-tiles-intro { max-width: 56ch; margin-bottom: 40px; }
.admin-tiles-intro .eyebrow { display: block; margin-bottom: 12px; }
.admin-tiles-intro h2 { font-size: clamp(24px, 2.8vw, 32px); }

.faculty-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.faculty-tile {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,27,51,0.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.faculty-tile:hover,
.faculty-tile:focus-visible {
  box-shadow: 0 12px 28px rgba(11,27,51,0.16);
  transform: translateY(-3px);
  border-color: var(--royal-deep);
}
.faculty-tile-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.faculty-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* keeps the top of the frame fully visible */
}
.faculty-tile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--accent-sky);
  color: var(--royal-deep);
  padding: 12px 16px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  transition: background-color .18s ease, color .18s ease;
}
.faculty-tile-arrow {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.faculty-tile:hover .faculty-tile-bar,
.faculty-tile:focus-visible .faculty-tile-bar {
  background: var(--royal-deep);
  color: #fff;
}
.faculty-tile:hover .faculty-tile-arrow,
.faculty-tile:focus-visible .faculty-tile-arrow {
  transform: translateX(4px);
}
.faculty-tile-desc {
  display: block;
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
  flex: 1;
}
.faculty-tile-desc strong {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ── Full profile sections — ── */
.admin-profile {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}
.admin-profile:last-child { border-bottom: none; }
.admin-profile--reverse .admin-profile-photo { order: 2; }

.admin-profile-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.admin-profile-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.admin-profile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,27,51,0.28) 0%, rgba(11,27,51,0) 40%);
  pointer-events: none;
}

.admin-profile-role {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 10px;
}
.admin-profile-content h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  margin-bottom: 6px;
}
.admin-profile-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 24px;
}
.admin-profile-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 56ch;
  margin-bottom: 16px;
}
.admin-profile-content p:last-of-type { margin-bottom: 0; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
  .faculty-tiles-grid { grid-template-columns: 1fr 1fr; }
  .admin-profile { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .admin-profile--reverse .admin-profile-photo { order: 0; }
  .admin-profile-photo img { aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
  .admin-hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

@media (max-width: 640px) {
  .admin-hero { padding: 130px 0 48px; }
  .admin-tiles { padding: 48px 0; }
  .faculty-tiles-grid { grid-template-columns: 1fr; gap: 18px; }
}