/* =========================================================
   VISION-MISSION PAGE — page-specific only.
   Loaded solely by vision-mission.php via $pageExtraCss.
   ========================================================= */

/* ---- Section scaffolding ---- */
.vm-section{ padding:80px 0; }
.vm-section--tint{ background:var(--cream); }

.vm-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-700); margin-bottom:12px;
}
.vm-kicker::before{ content:''; width:22px; height:2px; background:var(--gold-500); }

.vm-heading{
  font-size:clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight:800; color:var(--green-900); max-width:680px; margin:0 0 40px;
}

/* ---- Vision split cards ---- */
.vision-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.vision-card{
  border-radius:var(--radius-lg);
  padding:36px 36px 32px;
  position:relative; overflow:hidden;
}
.vision-card--inst{
  background:var(--green-900); color:#fff;
}
.vision-card--dept{
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
}
.vision-card::before{
  content:'';
  position:absolute; right:-30px; top:-30px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
.vision-card-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:18px;
}
.vision-card--inst .vision-card-label{ color:var(--gold-500); }
.vision-card--dept .vision-card-label{ color:var(--green-700); }
.vision-card-label svg{ width:16px; height:16px; }
.vision-card p{
  font-size:1.02rem; line-height:1.8; margin:0;
  font-style:italic;
}
.vision-card--inst p{ color:rgba(255,255,255,.88); }
.vision-card--dept p{ color:var(--ink-soft); }
@media (max-width:760px){ .vision-grid{ grid-template-columns:1fr; } }

/* ---- Mission lists ---- */
.mission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
.mission-block h3{
  font-size:1rem; font-weight:700; color:var(--green-900);
  margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.mission-block h3 span{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  background:var(--green-100); color:var(--green-700); flex-shrink:0;
}
.mission-block h3 span svg{ width:15px; height:15px; }
.mission-list{ display:flex; flex-direction:column; gap:14px; }
.mission-item{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px 18px;
}
.vm-section--tint .mission-item{ background:var(--cream); }
.mission-code{
  font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:800;
  color:var(--green-700); background:var(--green-100);
  border-radius:6px; padding:4px 8px; flex-shrink:0; white-space:nowrap;
  margin-top:1px;
}
.mission-text{ font-size:.94rem; line-height:1.7; color:var(--ink-soft); }
@media (max-width:820px){ .mission-grid{ grid-template-columns:1fr; } }

/* ---- Objectives numbered list ---- */
.objectives-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:0;
}
.objective-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px 22px;
  display:flex; gap:16px; align-items:flex-start;
}
.objective-num{
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:1.55rem; line-height:1; color:var(--green-100);
  flex-shrink:0; min-width:36px;
}
.objective-text{ font-size:.93rem; line-height:1.7; color:var(--ink-soft); }
@media (max-width:980px){ .objectives-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .objectives-grid{ grid-template-columns:1fr; } }

/* ---- Core values ---- */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.value-card{
  background:var(--green-900);
  border-radius:var(--radius-lg);
  padding:28px 26px;
  color:#fff;
  position:relative; overflow:hidden;
}
.value-card::after{
  content:'';
  position:absolute; right:-20px; bottom:-20px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.value-icon{
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  color:var(--gold-500);
}
.value-icon svg{ width:22px; height:22px; }
.value-card h3{
  font-size:1rem; font-weight:700; color:#fff; margin:0 0 8px;
}
.value-card p{
  font-size:.86rem; line-height:1.65;
  color:rgba(255,255,255,.72); margin:0;
}
@media (max-width:980px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

/* ---- Commitment two-col ---- */
.commitment-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.commitment-card{
  background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 30px;
}
.commitment-card-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--green-900); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.commitment-card-icon svg{ width:26px; height:26px; }
.commitment-card h3{ font-size:1.1rem; color:var(--green-900); font-weight:700; margin:0 0 12px; }
.commitment-card p{ font-size:.95rem; line-height:1.78; color:var(--ink-soft); margin:0; }
@media (max-width:700px){ .commitment-grid{ grid-template-columns:1fr; } }

/* ---- Closing future band ---- */
.vm-closing{
  background:linear-gradient(135deg, var(--green-900), var(--green-700));
  padding:72px 0; text-align:center; position:relative; overflow:hidden;
}
.vm-closing::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(240,168,0,.15), transparent 60%);
}
.vm-closing .wrap{ position:relative; z-index:1; }
.vm-closing svg.deco{
  width:48px; height:48px; color:var(--gold-500); margin:0 auto 20px; display:block;
}
.vm-closing h2{
  color:#fff; font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:800; max-width:680px; margin:0 auto 18px;
}
.vm-closing p{
  color:rgba(255,255,255,.8); font-size:1.02rem;
  line-height:1.75; max-width:680px; margin:0 auto;
}