/* ============================================================
   File: src/UP.CMS.Web/wwwroot/css/staff.css
   Or append to: src/UP.CMS.Web/wwwroot/css/site.css

   Design-system tokens and component styles for the shared staff
   partials. Matches the approved color system (UP red primary
   accent, warm cream page, gold for academic metadata, slate for
   administrative).

   Included from _Layout.cshtml the same way other stylesheets are
   (<link rel="stylesheet" href="~/css/staff.css" />) OR appended at
   the end of site.css.
   ============================================================ */

/* ------- Tokens (scoped under .staff-context to avoid leaking) ------- */
:root {
  --up-red:         #a51c2c;
  --up-red-dark:    #7d1422;
  --up-red-on-dark: #d94a5c;
  --up-cream:       #faf8f3;
  --up-border:      #e7e3db;
  --up-ink:         #1a1a1a;
  --up-ink-muted:   #6b7280;

  --staff-tone-academic: #8b7540;
  --staff-tone-admin:    #5a6b7a;
}

/* ==================== Staff card ==================== */
.staff-card {
  background: #fff;
  border: 1px solid var(--up-border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}

.staff-card:hover,
.staff-card:focus-within {
  border-color: var(--up-red);
}

.staff-card__photo-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.staff-card__body {
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.staff-card__rank {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--staff-tone-admin);    /* default; overridden inline */
}

.staff-card__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--up-ink);
  line-height: 1.25;
  margin: 0;
}

.staff-card__name-link {
  color: inherit;
  text-decoration: none;
}
.staff-card:hover .staff-card__name-link { color: var(--up-red); }

.staff-card__dept {
  font-size: 12px;
  color: var(--up-ink-muted);
  margin-top: 2px;
}

.staff-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.staff-card__tag {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.1px;
}

.staff-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #f0ede5;
  font-size: 12px;
}

.staff-card__email {
  color: var(--up-ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.staff-card__email:hover { color: var(--up-red); }

.staff-card__profile {
  color: var(--up-red);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}
.staff-card__profile:hover { color: var(--up-red-dark); }

/* ==================== Staff avatar (composable sizes) ==================== */
.staff-avatar {
  display: block;
}

/* ==================== Filter bar ==================== */
.staff-filter-bar {
  background: #fff;
  padding: 14px 16px;
  border-top: 1px solid var(--up-border);
  border-bottom: 1px solid var(--up-border);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.staff-filter-bar__search {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.staff-filter-bar__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c93a0;
  pointer-events: none;
}

.staff-filter-bar__input {
  width: 100%;
  background: var(--up-cream);
  border: 1px solid #e0dbcc;
  border-radius: 4px;
  padding: 9px 12px 9px 34px;
  font-size: 13px;
  color: var(--up-ink);
  box-sizing: border-box;
  font-family: inherit;
}
.staff-filter-bar__input:focus {
  outline: none;
  border-color: var(--up-red);
  box-shadow: 0 0 0 3px rgba(165,28,44,0.15);
}

.staff-filter-bar__select {
  background: #fff;
  border: 1px solid #e0dbcc;
  border-radius: 4px;
  padding: 9px 30px 9px 12px;
  font-size: 13px;
  color: var(--up-ink);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4L5 7L8 4' stroke='%238c93a0' fill='none' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: inherit;
}

.staff-filter-bar__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.staff-filter-bar__submit {
  background: var(--up-red);
  color: #fff;
  border: 1px solid var(--up-red);
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.staff-filter-bar__submit:hover { background: var(--up-red-dark); border-color: var(--up-red-dark); }

.staff-filter-bar__reset {
  color: var(--up-ink-muted);
  font-size: 13px;
  text-decoration: none;
  padding: 9px 8px;
}
.staff-filter-bar__reset:hover { color: var(--up-red); text-decoration: underline; }

/* ==================== Pagination ==================== */
.staff-pagination { margin: 24px 0; }

.staff-pagination__list {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.staff-pagination__item { /* anchor for subclass modifiers */ }

.staff-pagination__link {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0dbcc;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  color: #5f6674;
  text-decoration: none;
  padding: 0 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.staff-pagination__link:hover { border-color: var(--up-red); color: var(--up-red); }

.staff-pagination__link--active {
  background: var(--up-red);
  color: #fff;
  border-color: var(--up-red);
  font-weight: 500;
}
.staff-pagination__link--active:hover {
  background: var(--up-red-dark);
  border-color: var(--up-red-dark);
  color: #fff;
}

.staff-pagination__link--inert {
  opacity: 0.35;
  cursor: default;
}

.staff-pagination__item--ellipsis { align-self: center; color: #8c93a0; padding: 0 4px; }

/* ==================== Listing grid (used by the listing views) ==================== */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 16px 0 28px;
}

@media (max-width: 1199px) {
  .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .staff-grid { grid-template-columns: 1fr; gap: 12px; }
}


/* ==================== Staff page wrapper ==================== */
.staff-page {
  background: var(--up-cream, #faf8f3);
  min-height: 60vh;
}

.staff-page__header {
  margin-bottom: 24px;
}

.staff-page__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--up-ink);
  margin: 0 0 6px;
}

.staff-page__subtitle {
  font-size: 14px;
  color: var(--up-ink-muted);
  margin: 0;
}

/* ==================== Card photo aspect ratio ==================== */
.staff-card__photo-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.staff-card__photo-link .staff-avatar--fallback.staff-avatar--card {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 4 / 3;
  font-size: 48px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==================== Profile page ==================== */
.staff-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 767px) {
  .staff-profile {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.staff-profile__photo { position: relative; }

.staff-profile__img {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.staff-profile__initials {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: linear-gradient(135deg, #2c4764 0%, #4d6b8a 100%);
  color: rgba(255,255,255,0.92);
  font-family: Georgia, serif;
  font-size: 72px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.staff-profile__rank {
  color: var(--staff-tone-admin, #5a6b7a);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 8px;
}

.staff-profile__name {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--up-ink);
  margin: 0 0 8px;
  line-height: 1.2;
}

.staff-profile__dept {
  font-size: 15px;
  color: var(--up-ink-muted);
  margin-bottom: 20px;
}

.staff-profile__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--up-border, #e7e3db);
  border-bottom: 1px solid var(--up-border, #e7e3db);
  margin-bottom: 24px;
}

.staff-profile__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--up-ink);
}

.staff-profile__contact-item i {
  color: var(--up-ink-muted);
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.staff-profile__contact-item a {
  color: var(--up-ink);
  text-decoration: none;
}

.staff-profile__contact-item a:hover {
  color: var(--up-red);
}

.staff-profile__responsibilities {
  margin-top: 4px;
}

.staff-profile__section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--up-ink);
  margin: 0 0 14px;
}

.staff-profile__content {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.staff-profile__content p { margin-bottom: 12px; }
.staff-profile__content ul, .staff-profile__content ol {
  padding-left: 20px;
  margin-bottom: 12px;
}
.staff-profile__content li { margin-bottom: 6px; }
.staff-profile__content strong { font-weight: 600; }



/* ==================== Staff breadcrumb (approved design) ==================== */
.staff-page .breadcrumb,
.staff-profile__hero .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.staff-page .breadcrumb-item {
  color: #6b7280;
}

.staff-page .breadcrumb-item a,
.staff-profile__hero .breadcrumb-item a {
  color: #6b7280 !important;
  text-decoration: none;
}

.staff-page .breadcrumb-item a:hover,
.staff-profile__hero .breadcrumb-item a:hover {
  color: var(--up-ink, #1a1a1a) !important;
  text-decoration: underline;
}

.staff-page .breadcrumb-item.active,
.staff-profile__hero .breadcrumb-item.active {
  color: var(--up-ink, #1a1a1a) !important;
}

.staff-page .breadcrumb-item + .breadcrumb-item::before,
.staff-profile__hero .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: #b5b0a3;
  padding: 0 8px;
}


/* ==================== Profile: Quick stats grid ==================== */
.staff-profile__quickstats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--up-border, #e7e3db);
}

.staff-profile__qs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.staff-profile__qs-label {
  font-size: 10.5px;
  color: #8c93a0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}

.staff-profile__qs-value {
  font-size: 13px;
  color: var(--up-ink, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 6px;
}

.staff-profile__qs-value i {
  color: var(--staff-tone-admin, #5a6b7a);
  font-size: 14px;
}

.staff-profile__qs-value a {
  color: var(--up-ink, #1a1a1a);
  text-decoration: none;
}

.staff-profile__qs-value a:hover {
  color: var(--up-red, #a51c2c);
}

/* ==================== Profile: Tab navigation ==================== */
.staff-profile__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--up-border, #e7e3db);
  margin-top: 32px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.staff-profile__tab {
  padding: 14px 20px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.staff-profile__tab:hover {
  color: var(--up-ink, #1a1a1a);
}

.staff-profile__tab--active {
  color: var(--up-ink, #1a1a1a);
  border-bottom-color: var(--up-red, #a51c2c);
}

/* ==================== Profile: Tab panels ==================== */
.staff-profile__panel {
  display: none;
  padding-top: 28px;
}

.staff-profile__panel--active {
  display: block;
}

/* ==================== Profile: Section headers with red accent ==================== */
.staff-profile__section-title {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--up-ink, #1a1a1a);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--up-border, #e7e3db);
  position: relative;
}

.staff-profile__section-title::after {
  content: ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--up-red, #a51c2c);
}

/* ==================== Profile: Photo size fix ==================== */
.staff-profile__img {
  width: 220px;
  max-width: 220px;
}

.staff-profile__initials {
  width: 220px;
  max-width: 220px;
}

.staff-profile__photo {
  flex: none;
  width: 220px;
}


/* ==================== Profile content: list styling ==================== */
.staff-profile__content ul,
.staff-profile__content ol {
  padding-left: 24px;
  margin-bottom: 14px;
}

.staff-profile__content ul {
  list-style-type: disc;
}

.staff-profile__content ol {
  list-style-type: decimal;
}

.staff-profile__content li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.staff-profile__content ul ul {
  list-style-type: circle;
  margin-top: 6px;
}


/* ==================== Profile content: list styling ==================== */
.staff-profile__content ul,
.staff-profile__content ol {
  padding-left: 24px;
  margin-bottom: 14px;
}

.staff-profile__content ul {
  list-style-type: disc;
}

.staff-profile__content ol {
  list-style-type: decimal;
}

.staff-profile__content li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.staff-profile__content ul ul {
  list-style-type: circle;
  margin-top: 6px;
}


/* ==================== Profile: Hero white section ==================== */
.staff-profile__hero {
  background: #fff;
  border-bottom: 1px solid var(--up-border, #e7e3db);
  padding: 24px 0 0;
}

.staff-profile__hero .container {
  padding-bottom: 0;
}

.staff-profile__body {
  padding-top: 0;
}

/* Tabs sit on the white/cream boundary */
.staff-profile__tabs {
  background: #fff;
  padding: 0;
  margin-top: 0;
}


/* ==================== Mobile: compact row cards ==================== */
@media (max-width: 639px) {
  .staff-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .staff-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px;
  }

  .staff-card__photo-link {
    flex: none;
    width: 64px;
  }

  .staff-card__photo-link img {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    border-radius: 4px;
    object-fit: cover;
  }

  .staff-card__photo-link .staff-avatar--fallback.staff-avatar--card {
    width: 64px !important;
    height: 64px !important;
    aspect-ratio: 1 !important;
    font-size: 22px !important;
    border-radius: 4px !important;
  }

  .staff-card__body {
    flex: 1;
    min-width: 0;
    padding: 0;
  }

  .staff-card__rank {
    font-size: 9px;
  }

  .staff-card__name {
    font-size: 14px;
  }

  .staff-card__dept {
    font-size: 11px;
  }

  .staff-card__foot {
    display: none;
  }

  .staff-card {
    cursor: pointer;
    position: relative;
  }

  /* Make entire card tappable via stretched link */
  .staff-card__name-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Add chevron on the right */
  .staff-card::after {
    content: "\203a";
    color: var(--up-red, #a51c2c);
    font-size: 22px;
    font-weight: 500;
    flex: none;
    padding-right: 4px;
    align-self: center;
  }

  /* Make entire card tappable via stretched link */
  .staff-card__name-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Add chevron on the right */
  .staff-card::after {
    content: "\203a";
    color: var(--up-red, #a51c2c);
    font-size: 22px;
    font-weight: 500;
    flex: none;
    padding-right: 4px;
    align-self: center;
  }

  .staff-filter-bar {
    flex-direction: column;
  }

  .staff-filter-bar__search,
  .staff-filter-bar__select,
  .staff-filter-bar__actions,
  .staff-filter-bar__submit {
    width: 100%;
  }

  .staff-page__title {
    font-size: 22px;
  }
}