/* =====================================================
   Staff Directory — Modern Redesign
   Polished, centered, professional layout
   ===================================================== */

.dir-modern{
  background: var(--bg);
  padding: 2.4rem 0 5rem;
  min-height: 60vh;
}
.dir-modern .container{ padding-top: 0; }

/* ─────────────── HERO ─────────────── */
.dir-hero{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--primary-deeper) 100%);
  color: var(--white);
  padding: 5rem 3.2rem 4.4rem;
  border-radius: var(--r-2xl);
  margin: 0 0 2.4rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.dir-hero::before{
  content:''; position:absolute; top:-9rem; right:-6rem;
  width:28rem; height:28rem; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
  pointer-events:none;
}
.dir-hero::after{
  content:''; position:absolute; bottom:-7rem; left:-4rem;
  width:22rem; height:22rem; border-radius:50%;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 65%);
  opacity:.18; pointer-events:none;
}
.dir-hero-inner{ position: relative; z-index: 1; max-width: 78rem; margin: 0 auto; }
.dir-hero-art{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dir-hero-shape{ position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.dir-hero-shape--1{ width: 20rem; height: 20rem; top: -5rem; right: 6%; opacity: .9; }
.dir-hero-shape--2{ width: 13rem; height: 13rem; bottom: -2.5rem; right: 20%; opacity: .55; }
.dir-hero-shape--3{ width: 9rem; height: 9rem; top: 16%; left: 3%; opacity: .42; }
.dir-hero-shape--4{ width: 6.5rem; height: 6.5rem; bottom: 14%; left: 11%; opacity: .32; background: rgba(var(--accent-rgb),.14); }

.dir-hero-eyebrow{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.4rem;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-full);
  font-size: 1.12rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 auto 1.4rem;
  backdrop-filter: blur(6px);
}
.dir-hero-eyebrow i{ color: var(--gold); }

.dir-hero-title{
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 4.6vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  margin: 0 0 .8rem;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-shadow: 0 2px 14px rgba(0,0,0,.18);
}

.dir-hero-sub{
  color: rgba(255,255,255,.88);
  font-size: 1.5rem;
  line-height: 1.65;
  margin: 0 auto 2.4rem;
  max-width: 62rem;
  font-weight: 400;
}

.dir-hero-stats{
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  position: relative;
}
.dir-hero-stat{
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: 1.6rem 2.6rem;
  min-width: 13rem;
  text-align: center;
  transition: all var(--t-base);
}
.dir-hero-stat:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.dir-hero-stat strong{
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: .4rem;
}
.dir-hero-stat span{
  color: rgba(255,255,255,.82);
  font-size: 1.18rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ─────────────── TOOLBAR ─────────────── */
.dir-toolbar{
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.dir-toolbar-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.dir-toolbar-heading{
  display: flex; align-items: center; gap: 1.2rem;
  flex: 1; min-width: 0;
}
.dir-toolbar-heading-icon{
  width: 4.4rem; height: 4.4rem;
  border-radius: var(--r-md);
  background: var(--primary-mist);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.dir-toolbar-title{
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .2rem;
}
.dir-toolbar-sub{
  font-size: 1.22rem;
  color: var(--text-muted);
  margin: 0;
}
.dir-result-count{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.5rem;
  background: var(--primary-mist);
  color: var(--primary-dark);
  border-radius: var(--r-full);
  font-size: 1.28rem; font-weight: 700;
  flex-shrink: 0;
}
.dir-result-count i{ font-size: 1.2rem; }

.dir-toolbar-bottom{
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.dir-search-wrapper{
  position: relative;
  flex: 1 1 28rem;
  max-width: 44rem;
}
.dir-search-icon{
  position: absolute;
  left: 1.5rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.5rem;
  pointer-events: none;
}
.dir-search{
  width: 100%;
  height: 4.6rem;
  padding: 0 4.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-size: 1.32rem;
  background: var(--white);
  color: var(--text);
  transition: all var(--t-base);
  box-shadow: var(--shadow-xs);
}
.dir-search:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.dir-search::placeholder{ color: var(--text-muted); }
.dir-search-clear{
  position: absolute; right: .6rem; top: 50%;
  transform: translateY(-50%);
  background: var(--gray-100);
  border: none;
  width: 3.2rem; height: 3.2rem;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: all var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center;
}
.dir-search-clear.is-visible{ opacity: 1; visibility: visible; }
.dir-search-clear:hover{ background: #fee2e2; color: #dc2626; }

.dir-filters{
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.dir-filter{
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 1.25rem; font-weight: 600;
  padding: .85rem 1.5rem;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}
.dir-filter i{ font-size: 1.15rem; }
.dir-filter em{
  font-style: normal;
  background: var(--gray-100);
  color: var(--text-muted);
  padding: .15rem .65rem;
  border-radius: var(--r-full);
  font-size: 1.1rem; font-weight: 700;
  min-width: 2.4rem;
  text-align: center;
}
.dir-filter:hover{ border-color: var(--primary); color: var(--primary); }
.dir-filter.is-active{
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}
.dir-filter.is-active em{
  background: rgba(255,255,255,.25);
  color: var(--white);
}

/* ─────────────── GRID ─────────────── */
.dir-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 2rem;
}

/* ─────────────── CARD ─────────────── */
.dir-card{
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--t-base);
  --role-color: #64748b;
}
.dir-card::before{
  content:'';
  position: absolute; top: 0; left: 0; right: 0;
  height: .5rem;
  background: var(--role-color);
  opacity: .95;
  z-index: 2;
}
.dir-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.04);
  border-color: rgba(var(--primary-rgb),.18);
}
.dir-card.is-inactive{ opacity: .85; }
.dir-card.dir-hidden{ display: none; }
.dir-card.dir-reveal{ animation: dirReveal .55s ease both; }
@keyframes dirReveal{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* Photo - larger, square, rounded */
.dir-card-photo{
  position: relative;
  width: calc(100% - 3.2rem);
  height: 22rem;
  margin: 2.4rem auto 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--photo-bg, var(--primary)) 0%, color-mix(in srgb, var(--photo-bg, var(--primary)) 75%, #000) 100%);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 5.6rem; font-weight: 800; font-family: var(--font-heading);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.dir-card-photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.dir-card-status{
  position: absolute;
  top: 1rem; right: 1rem;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: #10b981;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 2;
}
.dir-card-status.is-off{ background: #94a3b8; }
.dir-init{ line-height: 1; user-select: none; }

/* Body - all centered */
.dir-card-body{
  padding: 1.8rem 2rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.dir-card-role-chip{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.08rem; font-weight: 800;
  padding: .42rem 1.1rem;
  border-radius: var(--r-full);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1.5px solid;
}
.dir-card-role-chip-dot{
  width: .55rem; height: .55rem; border-radius: 50%;
  flex-shrink: 0;
}
.dir-card-name{
  font-family: var(--font-heading);
  font-size: 1.7rem; font-weight: 700;
  color: var(--text);
  margin: 0 0 .45rem;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}
.dir-card-code{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.18rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  background: var(--gray-50);
  padding: .35rem .9rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-light);
}
.dir-card-code i{ color: var(--primary); }

.dir-card-divider{
  width: 100%;
  height: 1px;
  background: var(--border-light);
  margin: .2rem 0 1.2rem;
}
.dir-card-info{
  display: flex; flex-direction: column; gap: .55rem;
  width: 100%;
  margin-bottom: 1rem;
}
.dir-card-info-row{
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  font-size: 1.3rem;
  color: var(--text-secondary);
  text-decoration: none !important;
  padding: .55rem .8rem;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  text-align: center;
  word-break: break-word;
  min-height: 3.4rem;
}
.dir-card-info-row:hover{
  background: var(--gray-50);
  color: var(--text);
}
.dir-card-info-row.is-empty{
  color: var(--text-muted);
  cursor: default;
}
.dir-card-info-row.is-empty:hover{ background: transparent; }
.dir-card-info-icon{
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--primary-mist);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.dir-card-info-row.is-empty .dir-card-info-icon{
  background: var(--gray-100);
  color: var(--text-muted);
}
.dir-card-info-text{
  flex: 1; min-width: 0;
  text-align: left;
}

/* Footer actions */
.dir-card-footer{
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1.8rem;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--gray-25) 0%, var(--white) 100%);
  justify-content: center;
}
.dir-card-action{
  width: 3.8rem; height: 3.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--primary);
  text-decoration: none !important;
  transition: all var(--t-base);
  font-size: 1.35rem;
  box-shadow: var(--shadow-xs);
}
.dir-card-action:hover{
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--primary-glow);
}
.dir-card-action-edit:hover{
  background: var(--accent, #f59e0b);
  border-color: var(--accent, #f59e0b);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(245,158,11,.35);
}
.dir-card-spacer{ display: none; }
.dir-card-status-text{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1.1rem; font-weight: 700;
  padding: .35rem .85rem;
  border-radius: var(--r-full);
  color: var(--text-muted);
  background: var(--gray-100);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dir-card-status-text.is-active{
  color: #047857;
  background: #d1fae5;
}
.dir-card-status-text::before{
  content:'';
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ─────────────── EMPTY STATE ─────────────── */
.dir-empty{
  text-align: center;
  padding: 5.5rem 2rem;
  background: var(--white);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-xl);
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.dir-empty[hidden]{ display: none !important; }
.dir-empty-art{ position: absolute; inset: 0; pointer-events: none; }
.dir-empty-shape{ position: absolute; border-radius: 50%; background: var(--primary-mist); opacity: .5; }
.dir-empty-shape--1{ top: -3rem; left: -3rem; width: 10rem; height: 10rem; }
.dir-empty-shape--2{ bottom: -2rem; right: -2rem; width: 8rem; height: 8rem; }
.dir-empty-shape--3{ top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14rem; height: 14rem; background: transparent; border: 2px dashed var(--primary); opacity: .2; }
.dir-empty-icon-wrap{
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: var(--primary-mist);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3.4rem;
  margin: 0 auto 1.6rem;
  position: relative;
}
.dir-empty h3{
  font-family: var(--font-heading);
  font-size: 1.9rem; font-weight: 700;
  color: var(--text);
  margin: 0 0 .6rem;
  position: relative;
}
.dir-empty p{
  color: var(--text-muted);
  font-size: 1.32rem;
  max-width: 42rem;
  margin: 0 auto 1.8rem;
  line-height: 1.65;
  position: relative;
}
.dir-empty-reset{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2.2rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  box-shadow: 0 4px 14px var(--primary-glow);
  text-decoration: none !important;
  position: relative;
}
.dir-empty-reset:hover{
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--primary-glow);
  color: var(--white);
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 991px){
  .dir-hero{ padding: 3.6rem 2rem 3rem; }
  .dir-hero-stat{ min-width: 0; flex: 1; padding: 1.3rem 1.2rem; }
  .dir-hero-stat strong{ font-size: 2.4rem; }
  .dir-grid{ grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
}

@media (max-width: 767px){
  .dir-hero{ padding: 3rem 1.6rem 2.4rem; border-radius: var(--r-xl); }
  .dir-hero-title{ font-size: 2.4rem; }
  .dir-hero-sub{ font-size: 1.32rem; }
  .dir-hero-stats{ gap: .8rem; }
  .dir-hero-stat{ padding: 1.1rem .8rem; min-width: 0; flex: 1 1 40%; }
  .dir-hero-stat strong{ font-size: 2rem; }
  .dir-hero-stat span{ font-size: 1rem; }
  .dir-toolbar{ padding: 1.4rem; }
  .dir-toolbar-top{ flex-direction: column; align-items: stretch; }
  .dir-toolbar-heading{ flex-direction: row; }
  .dir-toolbar-bottom{ flex-direction: column; align-items: stretch; }
  .dir-search-wrapper{ max-width: 100%; }
  .dir-filters{ justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .4rem; }
  .dir-filter{ flex-shrink: 0; }
  .dir-grid{ grid-template-columns: 1fr; gap: 1.4rem; }
  .dir-card-photo{ height: 20rem; }
  .dir-card-body{ padding: 1.4rem 1.4rem 1rem; }
  .dir-card-name{ font-size: 1.5rem; }
}