/* Directory Component Styles - Jinan University */

/* ===============================
   DIRECTORY SECTION
   =============================== */

.directory-section {
  background: var(--bg-gradient-light);
  /* Earlier this had padding: var(--section-spacing) 0 + min-height: 100vh.
     Those were for a single full-page directory layout; on faculty pages
     that split staff into many small per-department sections, each
     section was forced to a full viewport-height with extra section
     padding — leaving huge empty gaps between sections. The outer
     `.directory-embedded-section` already controls page-level chrome;
     the per-department `.directory-section` div just needs to hold
     its cards with the wrapper's `mb-3` separating it from the next. */
}

/* Embedded Directory Styling - Remove top margin and padding for tabber */
.directory-embedded-section {
  padding-top: var(--space-md) !important;
  margin-top: 0 !important;
  min-height: auto;
}

/* ===============================
   STAFF CARDS
   =============================== */

.staff-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Explicit property list with ease-out-quart for a smooth, non-jarring
     lift. `all` + ease was producing the "sudden" feel the user reported
     because ease has a fast start. */
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease;
  height: 100%;
  position: relative;
  border: var(--border-width) solid var(--border-color-light);
  will-change: transform;
}

.staff-card:hover,
.staff-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--jinan-gold, #f7b243);
}

.staff-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-gradient-gold);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.staff-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-portrait);
  overflow: hidden;
  background: var(--light-grey);
}

.staff-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Match the card's 380ms cubic-bezier so lift + scale move together. */
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-card:hover .staff-image,
.staff-card:focus-within .staff-image {
  /* Slight tighter zoom — 1.1 was too aggressive next to the new
     gentler card lift. */
  transform: scale(1.06);
}

.staff-content {
  padding: var(--space-lg);
  text-align: center;
}

.staff-name {
  color: var(--jinan-teal);
  font-family: var(--font-headings);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-snug);
}

.staff-position {
  color: var(--jinan-gold-dark);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
  line-height: var(--line-height-normal);
}

.staff-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--dark-grey);
  margin-bottom: var(--space-sm);
  gap: var(--space-sm);
}

.staff-contact i {
  color: var(--jinan-teal);
  width: 15px;
  text-align: center;
}

.staff-contact a {
  color: var(--dark-grey);
  text-decoration: none;
  transition: var(--transition-standard);
}

.staff-contact a:hover {
  color: var(--jinan-gold-dark);
  text-decoration: underline;
}

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

.directory-column {
  /* No explicit margin-bottom — the parent .row.g-4 already provides
     1.5rem of vertical gutter between card rows. Doubling it here
     made multi-section directory pages feel very airy under each row;
     dropping it tightens spacing without losing breathing room. */
}

/* Non-embedded view uses original 4-column layout */
.section:not(.directory-embedded-section) .directory-column {
  /* Reset to original 4-column layout for non-embedded views */
}

@media (min-width: 992px) {
  .section:not(.directory-embedded-section) .directory-column.col-lg-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .section:not(.directory-embedded-section) .directory-column.col-md-6 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* ===============================
   SEARCH SECTION
   =============================== */

.directory-search {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  border: var(--border-width) solid var(--border-color-light);
  position: relative;
  margin-top: var(--section-spacing);
}

.directory-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-gradient-gold);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.search-container {
  position: relative;
}

.search-input {
  border: var(--border-width-thick) solid var(--border-color);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: var(--input-padding);
  font-size: var(--font-size-base);
  transition: var(--transition-standard);
  border-inline-end: none;
}

.search-input:focus {
  border-color: var(--jinan-teal);
  box-shadow: none;
  outline: none;
}

.search-btn {
  background: var(--jinan-teal);
  border: var(--border-width-thick) solid var(--jinan-teal);
  color: var(--white);
  border-radius: 0;
  padding: var(--input-padding);
  transition: var(--transition-standard);
}

.search-btn:hover {
  background: var(--jinan-teal-hover);
  border-color: var(--jinan-teal-hover);
  color: var(--white);
}

.clear-btn {
  background: var(--jinan-gold);
  border: var(--border-width-thick) solid var(--jinan-gold);
  color: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--input-padding);
  transition: var(--transition-standard);
  border-inline-start: none;
}

.clear-btn:hover {
  background: var(--jinan-gold-hover);
  border-color: var(--jinan-gold-hover);
  color: var(--white);
}

.search-results {
  font-size: var(--font-size-sm);
  color: var(--dark-grey);
  text-align: center;
  margin-top: var(--space-md);
}

.results-count {
  background: var(--light-grey);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-2xl);
  display: inline-block;
}

/* ===============================
   ANIMATIONS
   =============================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

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

@media (max-width: 991.98px) {
  .staff-content {
    padding: var(--space-xl);
  }

  .directory-search {
    padding: var(--space-lg);
  }
}

@media (max-width: 575.98px) {
  /* Mobile padding override removed — the inner per-department section
     no longer carries its own padding (see base rule above). */

  .staff-image-container {
    height: 160px;
  }

  .staff-content {
    padding: var(--space-md);
  }

  .staff-name {
    font-size: var(--font-size-base);
  }

  .staff-position {
    font-size: var(--font-size-xs);
  }

  .staff-contact {
    font-size: var(--font-size-xs);
  }

  .directory-search {
    padding: var(--space-xl);
    margin-top: var(--space-xl);
  }

  .search-input {
    font-size: var(--font-size-sm);
    padding: var(--space-md) var(--space-lg);
  }

  .search-btn,
  .clear-btn {
    padding: var(--space-md) var(--space-lg);
  }
}

/* ===============================
   RTL SUPPORT
   =============================== */

html[dir="rtl"] .staff-contact,
html[lang="ar"] .staff-contact {
  flex-direction: row-reverse;
}

html[dir="rtl"] .search-input,
html[lang="ar"] .search-input {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

html[dir="rtl"] .search-btn,
html[lang="ar"] .search-btn {
  border-radius: 0;
}

html[dir="rtl"] .clear-btn,
html[lang="ar"] .clear-btn {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ===============================
   STAFF CARD HOVER EFFECTS
   =============================== */

.staff-card .staff-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--jinan-teal-light),
    var(--jinan-gold-light)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Overlay rides the same cubic-bezier as the card lift, slight
     delay so it fades in just after the card starts lifting. */
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
  z-index: 2;
  pointer-events: none;
}

.staff-card:hover .staff-overlay,
.staff-card:focus-within .staff-overlay {
  opacity: 1;
  pointer-events: auto;
}

.staff-actions {
  display: flex;
  gap: var(--space-md);
}

.staff-actions .btn {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: var(--border-width-thick) solid rgba(255, 255, 255, 0.8);
  color: var(--white);
  transition: var(--transition-standard);
  backdrop-filter: blur(10px);
}

.staff-actions .btn:hover {
  background: var(--jinan-gold);
  border-color: var(--jinan-gold);
  color: var(--jinan-teal);
  transform: scale(1.1);
}

/* ===============================
   UTILITY CLASSES
   =============================== */

.text-gold {
  color: var(--jinan-gold-dark) !important;
}

.text-teal {
  color: var(--jinan-teal) !important;
}

/* ===============================
   BILINGUAL CONTENT
   =============================== */

.english-content,
.arabic-content {
  display: inline;
}

html[data-lang="ar"] .english-content {
  display: none;
}

html[data-lang="en"] .arabic-content {
  display: none;
}

/* Arabic typography adjustments */
html[data-lang="ar"] .staff-name,
html[data-lang="ar"] .staff-position,
html[lang="ar"] .staff-name,
html[lang="ar"] .staff-position {
  font-family: "Lato", "Cairo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  direction: rtl;
  text-align: center;
}

/* ===============================================================
   BUG-020a: In-page jump nav for long staff directory pages.
   Sticky chip-style strip beneath the page hero; horizontal scroll
   on mobile so many departments don't wrap into a wall. Active
   section is highlighted via scrollspy (CSS only — :target).
   =============================================================== */
.directory-jumpnav {
  position: sticky;
  top: calc(80px + 0.5rem); /* same offset as the major page sidebar */
  z-index: 5;
  margin: 0 auto 2rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(var(--jinan-teal-rgb), 0.12);
}
.directory-jumpnav ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.directory-jumpnav li { flex: 0 0 auto; }
.directory-jumpnav a {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jinan-teal, #00846e);
  background: rgba(var(--jinan-teal-rgb), 0.06);
  border: 1px solid rgba(var(--jinan-teal-rgb), 0.18);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}
.directory-jumpnav a:hover,
.directory-jumpnav a:focus-visible {
  background: var(--jinan-teal, #00846e);
  color: #fff;
  transform: translateY(-1px);
}

/* Smooth scroll + anchor offset so the section title isn't hidden
   behind the sticky middleNav when the user clicks a jump-link. */
html { scroll-behavior: smooth; }
.directory-section {
  scroll-margin-top: calc(80px + 5rem);
}

@media (max-width: 768px) {
  .directory-jumpnav { top: 0.5rem; padding: 0.25rem; }
  .directory-jumpnav a { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}