/* ============================================================
   FACULTY SHOWCASE
============================================================ */
.faculty{ background:#fff; color:#12093f; padding:5.5rem 0; }
.faculty-eyebrow{ color:#000000; margin-bottom:.4rem; }
.faculty-h,.faculty-h .purple,.faculty-h .dim{
	font-family:var(--font-polymath-bold);
	font-weight:700;
	font-size:58px;
}
.faculty-h{
  color:#160A4D;
  line-height:1.25;
  margin-bottom:1rem;
}
.faculty-h .purple{
	background: linear-gradient(90deg, #5641E0 0%, #B53C72 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.faculty-h .dim{ color:#5B5B5B; }
.faculty-p{ font-size:18px; max-width:820px; margin-bottom:3rem; }

.fstat-list{
	display:flex;
	flex-direction:column;
	height:100%;
	justify-content:space-between;
	position:sticky;
	top:2rem;
}
.fstat-list .btn-pu{
	margin-top:30px;
}
.fstat{
  display:flex; align-items:center; gap:.6rem;
  width:100%;
  background:none; border:none; padding:0;
  text-align:left; cursor:pointer;
}
.fstat b{
  font-family:var(--font-polymath-bold); font-weight:700; font-size:64px; line-height:1;
  color:#c7c7d6;
  transition:color .3s ease;
}
.fstat.fstat--active b{
  background:linear-gradient(90deg,#7B4FD6,#C13B7B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fstat span{ font-size:20px; font-weight:600; color:#B8B8B8; line-height:1.3; }
.fstat--active span{
	color:#000;
}
.fstat--last span{ color:#9a9aab; }
.fstat-line{ width:2px; height:100%; background:#e4e4ec; margin:.4rem 0 .4rem 1.05rem; transition:background .3s ease; }
.fstat-line--active{ background:var(--pu-insight-yellow); }

.faculty-panel{ display:none; position:relative; }
.faculty-panel.is-active{ display:block; }
.faculty-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  max-height:calc(2 * 300px + 1rem);
  overflow-y:auto;
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* legacy Edge/IE */
}
.faculty-grid::-webkit-scrollbar{ display:none; }  /* Chrome/Safari/Edge */
@media (max-width:767px){ .faculty-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:575px){ .faculty-grid{ grid-template-columns:1fr; } }

.fcard{ background:#12093f; border-radius:16px; overflow:hidden; height:100%; }
.fcard-media{
  height:180px;
  background:linear-gradient(160deg,#7B4FD6 0%,#4B2FA6 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; gap:.4rem;
  padding:.9rem;
}
.fcard-media-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.fcard-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.5) 100%);
}
.social-icons{
  	z-index: 2;
	position: relative;
	display: flex;
	align-items: center;
	column-gap: 6px;
}
.fcard-ico{ display:inline-flex; line-height:0; }
.fcard-ico svg{ display:block; }
.fcard-body{ padding:1rem 1.1rem 1.2rem; }
.fcard-body b{ display:block; color:#fff; font-size:24px; }
.fcard-dept{ display:block; color:var(--pu-insight-yellow); font-size:20px; margin:.15rem 0 .6rem; }
.fcard-tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.fcard-tags span{
	display: flex;
	padding: 6px 8px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.10);
	color: #FFF;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
}
@media (max-width: 991.98px){

  /* sidebar full width, sticky nahi */
  .fstat-list{
    position: static;
    height: auto;
    display: block;
  }

  /* JS in dividers ko hide karta hai (unki jagah slider aata hai);
     ye rule tab bhi kaam karta hai jab JS na chale */
  .fstat-line{ display: none; }

  .fstat{ margin-bottom: 1rem; }

  /* har panel apne stat ke neeche. overflow:hidden se cards
     viewport ke left/right bahar nahi nikalte */
  .faculty-panel{
    display: block;
    margin: 0 0 2.5rem;
    overflow: hidden;
  }

  /* grid -> slick slider.
     --fcard-gap = AADHA gap (do cards ke beech = iska double) */
  .faculty-grid{
    display: block;
    max-height: none !important;
    overflow: visible;
    --fcard-gap: 8px;          /* 16px gap */
  }

  /* negative list margin + slide margin = slick ka standard gutter
     pattern, jisse slide ki width calculation sahi rehti hai */
  .faculty-grid .slick-list{
    overflow: hidden;
    margin-left:  calc(var(--fcard-gap) * -1);
    margin-right: calc(var(--fcard-gap) * -1);
  }
  .faculty-grid .slick-track{
    display: flex;
    align-items: stretch;
  }
  .faculty-grid .slick-slide{
    height: auto;
    margin-left:  var(--fcard-gap);
    margin-right: var(--fcard-gap);
  }

  /* IMPORTANT: slick `.slick-slide` class SEEDHA .fcard par lagata hai
     (koi wrapper div nahi). Desktop ka `.fcard{height:100%}` yahan flex
     track ke saath milkar card ki height collapse kar deta tha, aur
     `overflow:hidden` .fcard-body ko poora kaat deta tha. */
  .faculty-grid .fcard{
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .faculty-grid .fcard-media{
    flex: 0 0 180px;
    height: 180px;
  }
  .faculty-grid .fcard-body{
    flex: 1 1 auto;
  }

  /* slick init hone se pehle cards stack rahein, gayab na hon */
  .faculty-grid:not(.slick-initialized) > .fcard + .fcard{
    margin-top: 1rem;
  }
}

/* cards ke beech ka spacing — breakpoint ke hisaab se */
@media (max-width: 767.98px){ .faculty-grid{ --fcard-gap: 7px; } .fcard-body b{font-size:22px;} .fcard-dept{font-size:18px;} .fcard-tags span{font-size:15px;}}  /* 14px */
@media (max-width: 575.98px){ .faculty-grid{ --fcard-gap: 6px; } .fcard-body b{font-size:20px !important;} .fcard-dept{font-size:16px !important;}.fcard-tags span{font-size:14px !important;}}  /* 12px */
@media (max-width: 375.98px){ .faculty-grid{ --fcard-gap: 5px; } .fcard-body b{font-size:18px !important;} .fcard-dept{font-size:15px !important;}.fcard-tags span{font-size:13px !important;}}  /* 10px */