/* =============================================
   Institute Admin Cards — Frontend Styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

.ia-section *,
.ia-section *::before,
.ia-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ia-section {
  padding: 20px 24px 80px;
  background: transparent;
  font-family: 'Inter', sans-serif;
}

/* ── GRID ── */
.ia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── CARD BASE ── */
.ia-card {
  position: relative;
  border-radius: 20px;
  padding: 24px 22px 22px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.88) inset,
    0 4px 18px rgba(0,0,0,0.06),
    0 8px 30px rgba(0,0,0,0.07);
  transition:
    transform   0.38s cubic-bezier(0.34, 1.46, 0.64, 1),
    box-shadow  0.38s ease,
    border-color 0.38s ease;
  overflow: hidden;
  cursor: default;
}

/* red overlay on hover */
.ia-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #bd1921 0%, #8f1018 100%);
  opacity: 0;
  transition: opacity 0.38s ease;
  z-index: 0;
  border-radius: inherit;
}
.ia-card:hover {
  transform: translateY(-10px) scale(1.016);
  box-shadow:
    0 20px 44px rgba(189,25,33,0.28),
    0 6px 18px rgba(189,25,33,0.18);
  border-color: rgba(189,25,33,0.28);
}
.ia-card:hover::after { opacity: 1; }

/* ── PHOTO ── */
.ia-photo-wrap {
  position: relative;
  width: calc(100% + 44px);
  margin: -24px -22px 18px;
  height: 200px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.ia-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}
.ia-card:hover .ia-photo { transform: scale(1.06); }

.ia-photo-shimmer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to top, rgba(255,255,255,0.55), transparent);
  transition: background 0.38s ease;
}
.ia-card:hover .ia-photo-shimmer {
  background: linear-gradient(to top, rgba(189,25,33,0.45), transparent);
}

/* ── INNER ── */
.ia-inner { position: relative; z-index: 1; }

/* ── TOP ROW (icon + number) ── */
.ia-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* icon box */
.ia-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(189,25,33,0.09);
  border: 1px solid rgba(189,25,33,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.32s, border-color 0.32s;
}
.ia-icon i {
  font-size: 22px;
  color: #bd1921;
  transition: color 0.32s;
  line-height: 1;
}
.ia-card:hover .ia-icon { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.42); }
.ia-card:hover .ia-icon i { color: #fff; }

/* number badge */
.ia-num {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(189,25,33,0.4);
  transition: color 0.32s;
  padding-top: 2px;
}
.ia-card:hover .ia-num { color: rgba(255,255,255,0.5); }

/* divider line */
.ia-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(189,25,33,0.22) 0%, rgba(189,25,33,0.04) 100%);
  margin-bottom: 14px;
  border-radius: 2px;
  transition: background 0.32s;
}
.ia-card:hover .ia-line {
  background: linear-gradient(90deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.04) 100%);
}

/* name */
.ia-name {
  font-family: 'Urbanist', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #1c1c1c;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
  transition: color 0.32s;
}
.ia-card:hover .ia-name { color: #fff; }

/* role */
.ia-role {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  color: #888;
  line-height: 1.55;
  transition: color 0.32s;
}
.ia-card:hover .ia-role { color: rgba(255,255,255,0.72); }

/* designation pill */
.ia-designation {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #bd1921;
  background: rgba(189,25,33,0.08);
  border: 1px solid rgba(189,25,33,0.16);
  padding: 5px 10px;
  border-radius: 20px;
  line-height: 1.45;
  transition: color 0.32s, background 0.32s, border-color 0.32s;
}
.ia-designation i { font-size: 13px; line-height: 1.4; flex-shrink: 0; }
.ia-card:hover .ia-designation {
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.38);
}

/* contact */
.ia-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #666;
  transition: color 0.32s;
}
.ia-contact i {
  font-size: 14px;
  color: #bd1921;
  transition: color 0.32s;
  line-height: 1;
}
.ia-card:hover .ia-contact       { color: rgba(255,255,255,0.82); }
.ia-card:hover .ia-contact i     { color: rgba(255,255,255,0.92); }

/* ── RESPONSIVE ── */
@media (max-width: 500px) {
  .ia-section { padding: 24px 14px 60px; }
  .ia-grid    { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 501px) and (max-width: 860px) {
  .ia-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .ia-grid { grid-template-columns: repeat(3, 1fr); }
}