/* ============================================================
   SV INSTITUTE – ABOUT PAGE CSS
   Module 3: Banner · Story · MVV · Timeline · Faculty ·
             Facilities · Stats · Recognition
   ============================================================ */


/* ── 1. PAGE BANNER (about variant) ──────────────────────── */
.svi-page-banner--about {
  padding: calc(var(--svi-nav-height) + 3.5rem) 0 4rem;
  min-height: 440px;
  display: flex;
  align-items: center;
}
.svi-page-banner--about .svi-page-banner__title-accent {
  background:              var(--svi-gradient);
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}
.svi-page-banner__particles {
  position:   absolute;
  inset:      0;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(30,136,229,0.12) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(21,101,192,0.10) 0%, transparent 40%),
    radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  pointer-events: none;
}

/* Banner stat grid (desktop only) */
.svi-about-banner-stats {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            rgba(255,255,255,0.08);
  border-radius:         var(--svi-radius-xl);
  overflow:              hidden;
  border:                1px solid rgba(255,255,255,0.1);
}
.svi-about-banner-stats__item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1.5rem;
  background:      rgba(255,255,255,0.04);
  text-align:      center;
  transition:      background 0.25s;
}
.svi-about-banner-stats__item:hover { background: rgba(255,255,255,0.08); }
.svi-about-banner-stats__num {
  font-family:  var(--svi-font-heading);
  font-size:    clamp(1.75rem, 4vw, 2.5rem);
  font-weight:  800;
  color:        var(--svi-white);
  line-height:  1;
  margin-bottom: 0.4rem;
}
.svi-about-banner-stats__label {
  font-size:  var(--svi-text-xs);
  font-weight: 600;
  color:       rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ── 2. STORY VISUAL ──────────────────────────────────────── */
.svi-story-visual {
  position:   relative;
  padding:    2rem;
  min-height: 360px;
}
.svi-story-visual__frame {
  background:    var(--svi-gradient-dark);
  border-radius: var(--svi-radius-xl);
  overflow:      hidden;
  position:      relative;
  height:        320px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    var(--svi-shadow-lg);
}
.svi-story-visual__frame::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 70% 30%, rgba(30,136,229,0.25) 0%, transparent 60%);
}
.svi-story-visual__inner {
  text-align:  center;
  position:    relative;
  z-index:     1;
}
.svi-story-visual__icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--svi-gradient);
  color:           var(--svi-white);
  font-size:       2rem;
  margin-bottom:   1.25rem;
  box-shadow:      var(--svi-shadow-blue);
}
.svi-story-visual__year {
  display:       block;
  font-family:   var(--svi-font-heading);
  font-size:     var(--svi-text-2xl);
  font-weight:   800;
  color:         var(--svi-white);
  margin-bottom: 0.4rem;
}
.svi-story-visual__tagline {
  display:   block;
  font-size: var(--svi-text-sm);
  color:     rgba(255,255,255,0.65);
}

/* Floating achievement badges on visual */
.svi-story-visual__badge {
  position:      absolute;
  background:    var(--svi-white);
  border-radius: var(--svi-radius-lg);
  padding:       0.85rem 1.1rem;
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  box-shadow:    var(--svi-shadow-lg);
  z-index:       2;
}
.svi-story-visual__badge i {
  font-size: 1.4rem;
  color:     var(--svi-blue);
  flex-shrink: 0;
}
.svi-story-visual__badge strong {
  display:     block;
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-base);
  font-weight: 800;
  color:       var(--svi-navy);
  line-height: 1;
}
.svi-story-visual__badge span {
  display:   block;
  font-size: var(--svi-text-xs);
  color:     var(--svi-text-muted);
  margin-top: 2px;
}
.svi-story-visual__badge--1 {
  bottom: -20px;
  left:   -10px;
  animation: svi-float-badge 4s ease-in-out infinite;
}
.svi-story-visual__badge--2 {
  top:   -20px;
  right: -10px;
  animation: svi-float-badge 4s ease-in-out 1.2s infinite;
}
@keyframes svi-float-badge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Story text */
.svi-story-text p { color: var(--svi-text); line-height: 1.85; margin-bottom: 1.15rem; }
.svi-story-text p:last-child { margin-bottom: 0; }
.svi-story-text strong { color: var(--svi-navy); }


/* ── 3. MISSION / VISION / VALUES CARDS ───────────────────── */
.svi-mvv-card {
  background:    var(--svi-white);
  border-radius: var(--svi-radius-lg);
  border:        1px solid var(--svi-border);
  padding:       var(--svi-space-lg);
  height:        100%;
  transition:    var(--svi-transition-slow);
  position:      relative;
  overflow:      hidden;
}
.svi-mvv-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     4px;
  border-radius: var(--svi-radius-lg) var(--svi-radius-lg) 0 0;
}
.svi-mvv-card--mission::before { background: var(--svi-gradient); }
.svi-mvv-card--vision::before  { background: linear-gradient(135deg, #7C3AED, #4F46E5); }
.svi-mvv-card--values::before  { background: linear-gradient(135deg, #059669, #10B981); }

.svi-mvv-card:hover {
  transform:   translateY(-5px);
  box-shadow:  var(--svi-shadow-lg);
  border-color: transparent;
}
.svi-mvv-card__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   var(--svi-radius-md);
  margin-bottom:   var(--svi-space-md);
  font-size:       1.5rem;
}
.svi-mvv-card--mission .svi-mvv-card__icon { background: var(--svi-blue-light);        color: var(--svi-blue-dark); }
.svi-mvv-card--vision  .svi-mvv-card__icon { background: #EDE9FE;                     color: #4F46E5; }
.svi-mvv-card--values  .svi-mvv-card__icon { background: #D1FAE5;                     color: #059669; }

.svi-mvv-card:hover .svi-mvv-card__icon { background: var(--svi-gradient); color: var(--svi-white); }

.svi-mvv-card__title {
  font-size:     var(--svi-text-xl);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: var(--svi-space-sm);
}
.svi-mvv-card__text {
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text-muted);
  line-height: 1.8;
  margin:      0;
}
.svi-mvv-card__list {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           0.6rem;
}
.svi-mvv-card__list li {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text);
  font-weight: 500;
}
.svi-mvv-card__list li i { color: #059669; font-size: 0.9rem; flex-shrink: 0; }


/* ── 4. TIMELINE ──────────────────────────────────────────── */
.svi-timeline {
  position:    relative;
  max-width:   760px;
  margin:      var(--svi-space-xl) auto 0;
  padding-left: 0;
}

/* Vertical line */
.svi-timeline::before {
  content:    '';
  position:   absolute;
  top:        0;
  bottom:     0;
  left:       80px;
  width:      2px;
  background: linear-gradient(to bottom, var(--svi-blue) 0%, rgba(30,136,229,0.1) 100%);
}

.svi-timeline__item {
  display:       flex;
  gap:           2rem;
  margin-bottom: 2.5rem;
  position:      relative;
}
.svi-timeline__item:last-child { margin-bottom: 0; }

.svi-timeline__marker {
  flex-shrink: 0;
  width:       80px;
  display:     flex;
  flex-direction: column;
  align-items:    flex-end;
  padding-right:  1.25rem;
  position:       relative;
}
.svi-timeline__year {
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-sm);
  font-weight: 800;
  color:       var(--svi-blue);
  white-space: nowrap;
  line-height: 1;
  padding-top: 0.15rem;
}
.svi-timeline__dot {
  position:      absolute;
  right:         -7px;
  top:           0.25rem;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--svi-white);
  border:        3px solid var(--svi-blue);
  box-shadow:    0 0 0 4px rgba(30,136,229,0.12);
  transition:    background 0.25s, box-shadow 0.25s;
}
.svi-timeline__item:hover .svi-timeline__dot {
  background:  var(--svi-blue);
  box-shadow:  0 0 0 6px rgba(30,136,229,0.18);
}

.svi-timeline__content {
  flex:          1;
  background:    var(--svi-white);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-lg);
  padding:       1.5rem;
  transition:    var(--svi-transition-slow);
}
.svi-timeline__item:hover .svi-timeline__content {
  box-shadow:  var(--svi-shadow-md);
  border-color: rgba(30,136,229,0.2);
  transform:   translateX(4px);
}
.svi-timeline__title {
  font-size:     var(--svi-text-lg);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: 0.5rem;
}
.svi-timeline__text {
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text-muted);
  line-height: 1.8;
  margin:      0;
}

/* Timeline mobile */
@media (max-width: 575.98px) {
  .svi-timeline::before { left: 16px; }
  .svi-timeline__item   { gap: 1rem; }
  .svi-timeline__marker {
    width:         40px;
    padding-right: 0;
    align-items:   center;
  }
  .svi-timeline__year  { display: none; }
  .svi-timeline__dot   { position: static; }
  .svi-timeline__content { padding: 1.1rem; }
  .svi-timeline__item:hover .svi-timeline__content { transform: none; }
}


/* ── 5. FACULTY CARDS ─────────────────────────────────────── */
.svi-faculty-card {
  background:    var(--svi-white);
  border-radius: var(--svi-radius-xl);
  border:        1px solid var(--svi-border);
  overflow:      hidden;
  height:        100%;
  transition:    var(--svi-transition-slow);
  text-align:    center;
}
.svi-faculty-card:hover {
  transform:   translateY(-6px);
  box-shadow:  var(--svi-shadow-lg);
  border-color: transparent;
}

.svi-faculty-card__avatar {
  position:      relative;
  padding:       2rem 2rem 1rem;
  display:       flex;
  justify-content: center;
}
.svi-faculty-card__initials {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--svi-gradient);
  font-family:     var(--svi-font-heading);
  font-size:       1.5rem;
  font-weight:     800;
  color:           var(--svi-white);
  position:        relative;
  z-index:         1;
}
.svi-faculty-card__avatar-ring {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         96px;
  height:        96px;
  border-radius: 50%;
  border:        2px solid rgba(30,136,229,0.2);
  transition:    var(--svi-transition);
}
.svi-faculty-card:hover .svi-faculty-card__avatar-ring {
  border-color: var(--svi-blue);
  box-shadow:   0 0 0 6px rgba(30,136,229,0.08);
}

.svi-faculty-card__body {
  padding: 0.5rem 1.5rem 1.75rem;
}
.svi-faculty-card__name {
  font-size:     var(--svi-text-lg);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: 0.2rem;
}
.svi-faculty-card__role {
  display:        block;
  font-size:      var(--svi-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--svi-blue);
  margin-bottom:  0.2rem;
}
.svi-faculty-card__dept {
  display:       block;
  font-size:     var(--svi-text-xs);
  color:         var(--svi-text-muted);
  margin-bottom: var(--svi-space-sm);
}
.svi-faculty-card__bio {
  font-size:     var(--svi-text-sm);
  color:         var(--svi-text-muted);
  line-height:   1.75;
  margin-bottom: var(--svi-space-sm);
}
.svi-faculty-card__stats {
  display:         flex;
  justify-content: center;
  gap:             1.5rem;
  padding-top:     0.85rem;
  border-top:      1px solid var(--svi-border);
  font-size:       var(--svi-text-xs);
  color:           var(--svi-text-muted);
}
.svi-faculty-card__stats strong {
  display:     block;
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-sm);
  font-weight: 700;
  color:       var(--svi-navy);
  margin-bottom: 1px;
}


/* ── 6. FACILITY CARDS ────────────────────────────────────── */
.svi-facility-card {
  background:    var(--svi-white);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-lg);
  padding:       var(--svi-space-lg);
  height:        100%;
  transition:    var(--svi-transition-slow);
  display:       flex;
  flex-direction: column;
  gap:           1rem;
}
.svi-facility-card:hover {
  transform:   translateY(-5px);
  box-shadow:  var(--svi-shadow-lg);
  border-color: rgba(30,136,229,0.2);
}
.svi-facility-card__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  border-radius:   var(--svi-radius-md);
  background:      var(--svi-blue-light);
  color:           var(--svi-blue-dark);
  font-size:       1.4rem;
  flex-shrink:     0;
  transition:      var(--svi-transition);
}
.svi-facility-card:hover .svi-facility-card__icon {
  background: var(--svi-gradient);
  color:      var(--svi-white);
}
.svi-facility-card__title {
  font-size:   var(--svi-text-lg);
  font-weight: 700;
  color:       var(--svi-navy);
  margin:      0;
}
.svi-facility-card__text {
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text-muted);
  line-height: 1.8;
  margin:      0;
  flex:        1;
}


/* ── 7. ABOUT STATS DARK BAND ─────────────────────────────── */
.svi-about-stats {
  background:  var(--svi-gradient-dark);
  padding:     var(--svi-space-2xl) 0;
  position:    relative;
  overflow:    hidden;
}
.svi-about-stats__bg {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 60% 40%, rgba(30,136,229,0.15) 0%, transparent 55%);
  pointer-events: none;
}
.svi-about-stat {
  padding: var(--svi-space-md);
}
.svi-about-stat__num {
  display:       block;
  font-family:   var(--svi-font-heading);
  font-size:     clamp(2.25rem, 5vw, 3.25rem);
  font-weight:   800;
  color:         var(--svi-white);
  line-height:   1;
  margin-bottom: 0.5rem;
}
.svi-about-stat__label {
  display:    block;
  font-size:  var(--svi-text-sm);
  font-weight: 500;
  color:      rgba(255,255,255,0.65);
}


/* ── 8. RECOGNITION CARDS ─────────────────────────────────── */
.svi-recognition-card {
  background:    var(--svi-white);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-lg);
  padding:       var(--svi-space-lg);
  height:        100%;
  transition:    var(--svi-transition-slow);
  text-align:    center;
}
.svi-recognition-card:hover {
  transform:   translateY(-5px);
  box-shadow:  var(--svi-shadow-lg);
  border-color: transparent;
}
.svi-recognition-card__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      linear-gradient(135deg, #FEF3C7, #FDE68A);
  color:           #D97706;
  font-size:       1.6rem;
  margin-bottom:   1.25rem;
  transition:      var(--svi-transition);
}
.svi-recognition-card:hover .svi-recognition-card__icon {
  background: var(--svi-gradient);
  color:      var(--svi-white);
}
.svi-recognition-card__title {
  font-size:     var(--svi-text-xl);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: 0.75rem;
}
.svi-recognition-card__text {
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text-muted);
  line-height: 1.8;
  margin:      0;
}


/* ── 9. RESPONSIVE OVERRIDES ──────────────────────────────── */
@media (max-width: 991.98px) {
  .svi-page-banner--about {
    padding: calc(var(--svi-nav-height-mobile) + 2.5rem) 0 3rem;
    min-height: auto;
  }
  .svi-story-visual { margin-bottom: 1rem; }
}

@media (max-width: 575.98px) {
  .svi-story-visual__badge--1,
  .svi-story-visual__badge--2 { display: none; }
  .svi-faculty-card__body { padding: 0.5rem 1rem 1.25rem; }
}