/*--------------------------------------------------------------
# Staff Profile Page (team/staff_detail.html)
#
# Bootstrap 5 handles grid/spacing/cards, and static/css/custom.css
# already supplies the shared .icon-circle / .hover-outline components
# reused on this page. This file adds only what neither covers: the hero
# cover strip + avatar ring, the quick-fact chips, the Personal
# Information rows, the Professional Experience timeline, and the
# Academic Background cards.
#
# Class map
#   .staff-hero            header card wrapper (cover strip + identity)
#   .staff-hero-cover       gradient strip behind the avatar
#   .staff-avatar           avatar ring, overlapping the cover strip
#   .staff-status-dot       small active/inactive indicator on the avatar
#   .staff-meta-chip        pill for one quick fact (nationality, joined ...)
#   .staff-info-row         one icon + label + value row (Personal Information)
#   .staff-timeline         vertical timeline wrapper (Professional Experience)
#     .staff-timeline-item  one entry, with its own connector dot
#   .staff-edu-card         one Academic Background card
#   .staff-role-card        one Roles & Responsibilities card
#   .staff-sidebar-sticky    keeps the Employee Information card in view
#                            while scrolling, without sliding under/over
#                            the site's own sticky header
--------------------------------------------------------------*/

.staff-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  box-shadow: 0 20px 45px color-mix(in srgb, var(--default-color), transparent 91%);
}

.staff-hero-cover {
  height: 7.5rem;
  background: linear-gradient(135deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color), #000 30%));
  position: relative;
}

.staff-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, #fff, transparent 78%) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .6;
}

@media (max-width: 575.98px) {
  .staff-hero-cover {
    height: 5.5rem;
  }
}

/* Only the avatar overlaps the cover strip (via its own negative margin,
   below) -- the identity text sits in normal flow, starting safely clear
   of the cover. Sharing one negative margin between the avatar and the
   text used to pull the name/role up onto the cover too, where dark
   heading text on a dark cover was effectively unreadable. */
.staff-hero-body {
  padding: 1.5rem 2rem 2rem;
}

@media (max-width: 575.98px) {
  .staff-hero-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

.staff-avatar {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  padding: .3rem;
  margin-top: -4.25rem;
  background-color: var(--surface-color);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--default-color), transparent 85%);
}

/* Centering below md is handled in markup (.mx-auto.mx-md-0) since the
   hero body switches from a flex row to a stacked block there. */
@media (max-width: 767.98px) {
  .staff-avatar {
    width: 7rem;
    height: 7rem;
    margin-top: -3.5rem;
  }
}

.staff-avatar img,
.staff-avatar a img {
  width: 100%;
  height: 100%;
  display: block;
}

.staff-avatar a {
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.staff-photo-zoom {
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.staff-avatar:hover .staff-photo-zoom,
.staff-avatar:focus-within .staff-photo-zoom {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .staff-photo-zoom { transition: none; }
}

.staff-avatar .icon-circle {
  width: 100%;
  height: 100%;
}

.staff-status-dot {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 3px solid var(--surface-color);
  background-color: #b0b7c3;
}

.staff-status-dot.is-active {
  background-color: #2ea043;
}

.staff-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 30px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 93%);
  color: var(--heading-color);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
}

.staff-meta-chip i {
  color: var(--accent-color);
  font-size: 1rem;
}

/* Personal Information -------------------------------------------------- */

.staff-info-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 93%);
}

.staff-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.staff-info-row:first-child {
  padding-top: 0;
}

.staff-info-row i {
  color: var(--accent-color);
  font-size: 1.05rem;
  width: 1.25rem;
  text-align: center;
  margin-top: .2rem;
  flex-shrink: 0;
}

.staff-info-row .staff-info-label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.staff-info-row .staff-info-value {
  font-weight: 500;
  color: var(--heading-color);
}

/* Professional Experience timeline --------------------------------------- */

.staff-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.5rem;
}

.staff-timeline::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: .65rem;
  width: 2px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 78%);
}

.staff-timeline-item {
  position: relative;
  padding-bottom: 1.75rem;
}

.staff-timeline-item:last-child {
  padding-bottom: 0;
}

.staff-timeline-item::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: -2.5rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--surface-color);
  border: 3px solid var(--accent-color);
}

.staff-timeline-item.is-current::before {
  background-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* Academic Background cards ---------------------------------------------- */

.staff-edu-card {
  height: 100%;
  padding: 1.25rem 1.4rem;
  border-radius: .9rem;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-left: 4px solid color-mix(in srgb, var(--accent-color), transparent 55%);
  transition: border-left-color .3s ease, box-shadow .3s ease;
}

.staff-edu-card:hover {
  border-left-color: var(--accent-color);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Roles & Responsibilities cards ------------------------------------------ */

.staff-role-card {
  height: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border-radius: .9rem;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-left: 4px solid color-mix(in srgb, var(--accent-color), transparent 55%);
  transition: border-left-color .3s ease, box-shadow .3s ease;
}

.staff-role-card:hover {
  border-left-color: var(--accent-color);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Section heading icon badge ----------------------------------------------- */

.staff-section-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Sidebar sticky offset ----------------------------------------------------
   templates/includes/header.html renders the site nav as <header id="header"
   class="header sticky-top">, so it's already pinned to the very top of the
   viewport at z-index 997 (see .header in assets/css/main.css) -- once
   scrolled far enough for main.js to add body.scrolled, it settles at
   roughly 79px tall (branding + nav row; the topbar collapses to 0). Using
   Bootstrap's own .sticky-lg-top here would stick this card at top:1.5rem
   with z-index:1020, i.e. above and *on top of* that header instead of
   below it. This offsets past the header instead, with a plain z-index
   comfortably under the header's so the two can never visually collide,
   even mid-transition while the topbar is collapsing. Only kicks in at the
   lg breakpoint, matching the two-column layout it's paired with -- below
   that the sidebar isn't next to anything tall enough to need it. */
@media (min-width: 992px) {
  .staff-sidebar-sticky {
    position: sticky;
    top: 6rem;
    z-index: 10;
  }
}