/* ===========================
   ENGINEERING FACULTY (reference style)
   =========================== */
.ef-section {
  padding: 3rem 0;
  background: radial-gradient(circle at top, #161616, var(--dark));
  color: var(--text-on-dark);
  text-align: center;
  position: relative;
}
.ef-section + .ef-section { border-top: none; }

/* Alternating slanted separators between sections */
.ef-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 2px;
  background: rgba(var(--red-rgb),.2);
  pointer-events: none;
}
#civil::before { display: none; }
#arch::before,
#basic::before {
  transform: rotate(1.5deg);
  transform-origin: left center;
}
#comm::before {
  transform: rotate(-1.5deg);
  transform-origin: right center;
}

.ef-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.ef-title i { color: var(--red); font-size: 1.5rem; }
.ef-badge {
  display: inline-block;
  background: rgba(var(--red-rgb),.15);
  color: var(--red);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .75rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--red-rgb),.3);
}
.ef-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  max-width: 1800px;
  margin: 0 auto 1.25rem;
}
.ef-row.ef-last-row { margin-bottom: 0; }

.member {
  background: #1b1b1b;
  border: 1px solid rgba(var(--red-rgb),.4);
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,.4);
  overflow: hidden;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
  width: 136px;
}
.member:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 18px rgba(var(--red-rgb),.4);
}
.member a { text-decoration: none; display: block; color: inherit; position: relative; }
.member-avatar {
  width: 100%;
  height: 144px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #111);
  font-size: 3rem;
  color: rgba(var(--red-rgb),.5);
  border-bottom: 2px solid var(--red);
  transition: transform .5s ease, filter .3s ease;
  overflow: hidden;
}
.member-avatar img { width:100%;height:100%;object-fit:contain;display:block;background:#fff; }
.member-avatar--blank i { font-size: 3rem; color: rgba(var(--red-rgb),.3); }
[data-theme="light"] .member-avatar--blank i { color: rgba(var(--red-rgb),.15); }

.member:hover .member-avatar {
  transform: scale(1.05);
}
.member:hover .member-avatar i {
  color: var(--red);
  transition: color .3s;
}
.member .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  opacity: 0;
  backdrop-filter: blur(3px);
  transition: opacity .3s ease;
  z-index: 2;
}
.member:hover .overlay { opacity: 1; }
.member .overlay i { margin-left: 5px; color: var(--red); }
.member-role {
  background: linear-gradient(90deg, var(--bg-card), #3a0d0d);
  color: #fff;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .3s ease, box-shadow .3s ease;
}
.member:hover .member-role {
  background: linear-gradient(90deg, #3a0d0d, #6d0000);
  box-shadow: 0 0 10px rgba(var(--red-rgb),.3);
}
.member-role i { color: var(--red); font-size: .95rem; }

/* ===== LIGHT MODE OVERRIDES ===== */
[data-theme="light"] .ef-section {
  background: radial-gradient(circle at top, #f0ede6, #e8e3d8);
  color: #222;
}
[data-theme="light"] .ef-section::before {
  background: rgba(var(--red-rgb),.1);
}
[data-theme="light"] .ef-title { color: #222; }
[data-theme="light"] .member {
  background: #fff;
  border-color: rgba(var(--red-rgb),.2);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .member:hover {
  box-shadow: 0 8px 24px rgba(var(--red-rgb),.15);
}
[data-theme="light"] .member-avatar {
  background: linear-gradient(135deg, #f0ede6, #e8e3d8);
  border-bottom-color: var(--red);
}
[data-theme="light"] .member-avatar i { color: rgba(var(--red-rgb),.25); }
[data-theme="light"] .member-avatar img { background: #fff; }
[data-theme="light"] .member .overlay {
  background: rgba(255,255,255,.7);
  color: #222;
}
[data-theme="light"] .member-role {
  background: linear-gradient(90deg, #f0ede6, #e8d5d0);
  color: #333;
}
[data-theme="light"] .member:hover .member-role {
  background: linear-gradient(90deg, #e8d5d0, #d4b0b0);
}

@media (max-width: 768px) {
  .ef-row { gap: .75rem; padding: 0 10px; }
  .member { width: 120px; }
  .member-avatar { height: 120px; font-size: 2.4rem; }
  .member .overlay { font-size: 11px; }
  .member-role { font-size: 12px; padding: 6px 0; }
  .ef-title { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .member { width: 100px; }
  .member-avatar { height: 100px; font-size: 2rem; }
}