PAGE 11: CAMPUS INFRASTRUCTURE
   ═══════════════════════════════════════════ */
.infra-map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.infra-zone-card {
  border-radius: 22px; overflow: hidden;
  position: relative; aspect-ratio: 4/3;
  box-shadow: 0 15px 40px rgba(30,38,109,0.1);
  cursor: default;
}
.infra-zone-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.infra-zone-card:hover img { transform: scale(1.08); }
.infra-zone-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,38,109,0.85) 0%, transparent 60%);
  display: flex; align-items: flex-end; padding: 24px;
  opacity: 0; transition: opacity .3s ease;
}
.infra-zone-card:hover .infra-zone-overlay { opacity: 1; }
.infra-zone-label { font-weight: 800; color: #fff; font-size: 15px; }
.infra-zone-badge {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  color: var(--theme-color); font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.infra-timeline-horizontal {
  display: flex; gap: 0; align-items: stretch;
  background: #fff; border-radius: 20px;
  box-shadow: 0 10px 35px rgba(30,38,109,0.06);
  overflow: hidden;
}
.infra-h-step {
  flex: 1; padding: 30px 20px; text-align: center;
  border-right: 1px solid rgba(30,38,109,0.06);
  position: relative; transition: background .3s ease;
}
.infra-h-step:last-child { border-right: none; }
.infra-h-step:hover { background: linear-gradient(135deg, rgba(30,38,109,0.04), rgba(200,155,44,0.04)); }
.infra-h-step-num {
  position: absolute; top: 12px; right: 14px;
  font-size: 36px; font-weight: 900; color: rgba(30,38,109,0.06); line-height: 1;
}
.infra-h-step i { font-size: 30px; color: var(--theme-color2); margin-bottom: 14px; display: block; }
.infra-h-step h5 { font-size: 14px; font-weight: 800; color: var(--theme-color); margin-bottom: 8px; }
.infra-h-step p { font-size: 12px; color: #888; line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
  .infra-map-grid { grid-template-columns: 1fr; }
  .infra-timeline-horizontal { flex-direction: column; }
  .infra-h-step { border-right: none; border-bottom: 1px solid rgba(30,38,109,0.06); }
}