:root {
    --bg:        #ffffff;
    --surface:   #f7f5f2;
    --line:      #e4ddd6;
    --gold:      #9a6f2e;
    --gold-dim:  #c9a870;
    --ink:       #1a1410;
    --muted:     #8a8070;
    --tag-bg:    #f0ece6;
    --hod:       #8a5e10;
    --prof:      #2d7da0;
    --assoc:     #2e7a45;
    --asst:      #7040a0;
    --resident:  #a03040;
    --tutor:     #7a5c30;
  }
  
 
  /* ─────────────────────────────────────────
     Scoped to .fac-section — zero bleed into
     the host page. No max-width, no margin:auto
     on inner elements. Fits any column width.
  ───────────────────────────────────────── */
 
  .fac-section {
    width: 100%;
    color: var(--ink);
    background: transparent;
  }
 
  .fac-section *,
  .fac-section *::before,
  .fac-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* Header */
  .fac-section .fac-header {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
  }
 
 
  .fac-section .fac-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
 
  .fac-section .fac-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ink);
  }
 
  .fac-section .fac-title em {
    font-style: italic;
    color: var(--gold);
  }
 
  .fac-section .fac-count {
    font-size: 64px;
    font-weight: 300;
    color: var(--line);
    line-height: 1;
    letter-spacing: -0.04em;
    flex-shrink: 0;
    user-select: none;
  }
 
  /* Body */
  .fac-section .fac-body {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
 
  /* Each rank group: left label | right cards
     Left column = 26% (min 140px), right = rest */
  .fac-section .rank-group {
    display: grid;
    grid-template-columns: minmax(140px, 26%) 1fr;
    gap: 0 28px;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
    opacity: 0;
    transform: translateY(14px);
    animation: facFadeUp 0.5s ease forwards;
  }
 
  .fac-section .rank-group:nth-child(1) { animation-delay: 0.05s; }
  .fac-section .rank-group:nth-child(2) { animation-delay: 0.12s; }
  .fac-section .rank-group:nth-child(3) { animation-delay: 0.19s; }
  .fac-section .rank-group:nth-child(4) { animation-delay: 0.26s; }
  .fac-section .rank-group:nth-child(5) { animation-delay: 0.33s; }
  .fac-section .rank-group:nth-child(6) { animation-delay: 0.40s; }
 
  @keyframes facFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
 
  /* Rank label (left) */
  .fac-section .rank-label {
    padding-top: 6px;
  }
 
  .fac-section .rank-badge {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    margin-bottom: 7px;
    white-space: nowrap;
  }
 
  .fac-section .rank-group[data-rank="hod"]      .rank-badge { background: rgba(138,94,16,0.08);   color: var(--hod);      border: 1px solid rgba(138,94,16,0.22); }
  .fac-section .rank-group[data-rank="prof"]     .rank-badge { background: rgba(45,125,160,0.08);  color: var(--prof);     border: 1px solid rgba(45,125,160,0.22); }
  .fac-section .rank-group[data-rank="assoc"]    .rank-badge { background: rgba(46,122,69,0.08);   color: var(--assoc);    border: 1px solid rgba(46,122,69,0.22); }
  .fac-section .rank-group[data-rank="asst"]     .rank-badge { background: rgba(112,64,160,0.08);  color: var(--asst);     border: 1px solid rgba(112,64,160,0.22); }
  .fac-section .rank-group[data-rank="resident"] .rank-badge { background: rgba(160,48,64,0.08);   color: var(--resident); border: 1px solid rgba(160,48,64,0.22); }
  .fac-section .rank-group[data-rank="tutor"]    .rank-badge { background: rgba(122,92,48,0.08);   color: var(--tutor);    border: 1px solid rgba(122,92,48,0.22); }
 
  .fac-section .rank-count  {
    display: block;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
 
  /* Faculty cards (right) */
  .fac-section .faculty-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
 
  .fac-section .fac-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    transition: background 0.18s;
    cursor: default;
  }
 
  .fac-section .fac-card:hover { background: var(--tag-bg); }
 
  .fac-section .fac-card + .fac-card {
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .fac-section .fac-card + .fac-card:hover,
  .fac-section .fac-card:hover + .fac-card {
    border-top-color: transparent;
  }
 
  /* Avatar */
  .fac-section .fac-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
  }
 
  .fac-section .rank-group[data-rank="hod"]      .fac-avatar { background: rgba(138,94,16,0.10);  color: var(--hod); }
  .fac-section .rank-group[data-rank="prof"]     .fac-avatar { background: rgba(45,125,160,0.10); color: var(--prof); }
  .fac-section .rank-group[data-rank="assoc"]    .fac-avatar { background: rgba(46,122,69,0.10);  color: var(--assoc); }
  .fac-section .rank-group[data-rank="asst"]     .fac-avatar { background: rgba(112,64,160,0.10); color: var(--asst); }
  .fac-section .rank-group[data-rank="resident"] .fac-avatar { background: rgba(160,48,64,0.10);  color: var(--resident); }
  .fac-section .rank-group[data-rank="tutor"]    .fac-avatar { background: rgba(122,92,48,0.10);  color: var(--tutor); }
 
  
 
  .fac-section .fac-name {
    font-size: 16.5px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
 
  .fac-section .fac-quals {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.05em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
 
  /* ── Mobile: stack label above cards ── */
  @media (max-width: 540px) {
    .fac-section .fac-header       { flex-direction: column; align-items: flex-start; }
    .fac-section .fac-count        { display: none; }
 
    .fac-section .rank-group {
      grid-template-columns: 1fr;
      gap: 12px 0;
      padding: 20px 0;
    }
 
    .fac-section .fac-name  { font-size: 15px; }
    .fac-section .fac-quals { font-size: 9.5px; }
    .fac-section .fac-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 11px; }
  }

/* Fix overlapping grid on smaller containers */
.fac-section .rank-group {
  grid-template-columns: 1fr;  /* single column always — label above cards */
}

/* Left-align everything regardless of page's text-align */
.fac-section,
.fac-section * {
  text-align: left !important;
}

/* Re-apply the two-column layout only on wide screens */
@media (min-width: 900px) {
  .fac-section .rank-group {
    grid-template-columns: minmax(140px, 26%) 1fr;
  }
}
section.tab_menu.tab_student_passed .department {
    margin-left: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
}