/* ==========================================================================
   Staff profile — corporate bio layout for our-staff.html's individual
   member pages (abdulhadi.html, mousa.html, saleh.html, ...). Namespaced
   under `.staff-*` so it never leaks into other pages. Every color,
   gradient, shadow and radius below references the design tokens
   theme-modern.css already establishes in :root (--primary, --secondary,
   --accent, --tm-gradient-*, --tm-shadow-*, --tm-radius-*, --tm-ease), so
   the page inherits the site's brand identity automatically.
   ========================================================================== */

.staff-main {
  background: var(--bg-light);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.staff-breadcrumb-band {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.staff-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 16px 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.staff-breadcrumb li {
  display: flex;
  align-items: center;
}
.staff-breadcrumb li:not(:last-child)::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f105'; /* chevron-right */
  font-size: 10px;
  margin: 0 12px;
  color: var(--border);
}
.staff-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--tm-ease);
}
.staff-breadcrumb a:hover,
.staff-breadcrumb a:focus-visible {
  color: var(--secondary);
}
.staff-breadcrumb li:last-child {
  color: var(--primary);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hero — photo + name + title + intro + socials, on a brand gradient band
   -------------------------------------------------------------------------- */
.staff-hero {
  position: relative;
  background: var(--tm-gradient-primary);
  padding: 44px 0 84px;
  overflow: hidden;
}
.staff-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212, 175, 55, 0.18), transparent 50%);
  pointer-events: none;
}
.staff-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 44px;
}
.staff-hero-photo-wrap {
  flex: 0 0 auto;
  position: relative;
}
.staff-hero-photo {
  width: 188px;
  height: 188px;
  border-radius: 50%;
  object-fit: cover;
  /* Source photos are tall (Instagram-story crops) with the face in the
     upper third — the default center anchor crops into the torso/hands
     instead of the face, so anchor near the top of the frame. */
  object-position: 50% 12%;
  display: block;
  border: 5px solid rgba(255, 255, 255, 0.92);
  outline: 1px solid rgba(255, 255, 255, 0.25);
  outline-offset: 6px;
  box-shadow: var(--tm-shadow-lg);
}
.staff-hero-badge {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 2px;
  background: var(--tm-gradient-accent);
  color: var(--tm-primary-900);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--tm-shadow-gold);
  border: 3px solid var(--primary);
}
.staff-hero-body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.staff-hero-name {
  color: #fff;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
}
.staff-hero-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tm-primary-900);
  background: var(--tm-gradient-accent);
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: var(--tm-shadow-sm);
  margin-bottom: 20px;
}
.staff-hero-intro {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16.5px;
  line-height: 1.85;
  max-width: 640px;
  margin: 0 0 26px;
}
.staff-hero-socials {
  display: flex;
  gap: 12px;
}
.staff-hero-socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 17px;
  transition: transform 0.3s var(--tm-ease), background 0.3s var(--tm-ease), box-shadow 0.3s var(--tm-ease);
}
.staff-hero-socials a:hover,
.staff-hero-socials a:focus-visible {
  background: var(--tm-gradient-accent);
  color: var(--tm-primary-900);
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow-gold);
  outline: none;
}

/* --------------------------------------------------------------------------
   Body — pulled up over the hero band for a layered, editorial feel
   -------------------------------------------------------------------------- */
.staff-body {
  position: relative;
  margin-top: -56px;
  padding-bottom: 90px;
}
/* The -56px pull-up was tuned against .staff-hero's own 84px bottom
   padding (leaving 28px of clearance before the overlap starts) — safe
   there, but PEO/Payroll/HR pair .staff-body with the shorter, shared
   .hero-wrap.hero-wrap-2 banner instead, whose own bottom padding is
   less than 56px, so the card's top edge was colliding with the title
   text. Scoped to only that pairing so the staff bio pages (which still
   use .staff-hero) keep their original overlap untouched. */
.hero-wrap.hero-wrap-2 + .staff-main .staff-body {
  margin-top: 0;
}
.staff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow-lg);
  padding: 40px clamp(22px, 4vw, 52px);
}
.staff-card + .staff-card {
  margin-top: 32px;
}
.staff-card-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.staff-card-title {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 18px;
}
.staff-card-lead {
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsibilities — icon-card grid
   -------------------------------------------------------------------------- */
.staff-resp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.staff-resp-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--tm-radius-md);
  transition: transform 0.3s var(--tm-ease), box-shadow 0.3s var(--tm-ease), border-color 0.3s var(--tm-ease);
}
.staff-resp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tm-shadow-md);
  border-color: transparent;
}
.staff-resp-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--tm-shadow-sm);
}
.staff-resp-text h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
  line-height: 1.4;
}
.staff-resp-text p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Technical expertise — skill chips
   -------------------------------------------------------------------------- */
.staff-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.staff-skill-chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--secondary);
  background: var(--tm-primary-50);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.3s var(--tm-ease);
}
.staff-skill-chip:hover {
  background: var(--tm-gradient-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--tm-shadow-sm);
}

/* --------------------------------------------------------------------------
   Role highlight — callout for "role in the company"
   -------------------------------------------------------------------------- */
.staff-role-card {
  background: var(--tm-gradient-primary);
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.staff-role-card::before {
  content: '\201C';
  position: absolute;
  top: -30px;
  inset-inline-start: 10px;
  font-size: 180px;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  pointer-events: none;
}
.staff-role-card .staff-card-eyebrow {
  color: var(--tm-accent-light);
}
.staff-role-card .staff-card-title {
  color: #fff;
}
.staff-role-card .staff-card-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17.5px;
  position: relative;
}

/* --------------------------------------------------------------------------
   Back link
   -------------------------------------------------------------------------- */
.staff-back-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 999px;
  margin-top: 18px;
  transition: all 0.3s var(--tm-ease);
}
.staff-back-btn:hover,
.staff-back-btn:focus-visible {
  background: var(--tm-gradient-accent);
  color: var(--tm-primary-900);
  border-color: transparent;
  outline: none;
}

/* --------------------------------------------------------------------------
   Scroll reveal — same progressive-enhancement pattern as insight.html:
   elements are visible by default; only hidden once JS opts them into
   .reveal-pending right before observing, and a safety-net timeout forces
   visibility if the observer never fires. See <script> at page bottom.
   -------------------------------------------------------------------------- */
@keyframes staffRevealIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.staff-reveal.reveal-pending {
  opacity: 0;
}
.staff-reveal.reveal-pending.in-view {
  animation: staffRevealIn 0.7s var(--tm-ease) both;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .staff-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .staff-hero-socials {
    justify-content: center;
  }
  .staff-hero-intro {
    margin-inline: auto;
  }
  .staff-resp-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .staff-hero-photo,
  .staff-hero-icon {
    width: 140px;
    height: 140px;
  }
  .staff-hero-icon {
    font-size: 48px;
  }
  .staff-card {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .staff-reveal.reveal-pending.in-view,
  .staff-resp-card,
  .staff-skill-chip,
  .staff-hero-socials a,
  .staff-back-btn {
    animation: none !important;
    transition: none !important;
  }
}