/* =========================================================
   about.css — styles used only by about.php
   (mission split, numbered objectives list, milestone timeline)

   Depends on the same color variables as style.css
   (--maroon, --gold, --ivory, --line, --shadow, etc).
   Load this file TOGETHER WITH style.css.
   ========================================================= */

/* ---------- Mission split (text + image) ---------- */
.mission-section{background:var(--white);}
.mission-grid{
  display:grid; grid-template-columns:1fr 0.85fr; gap:52px; align-items:center;
}
.mission-grid h2{
  font-size:clamp(24px,3.2vw,32px); color:var(--maroon-dark); margin-bottom:18px;
}
.mission-grid p{font-size:16px; color:#4a382c; margin-bottom:16px;}
.mission-quote{
  border-left:4px solid var(--gold); padding:6px 0 6px 18px; margin-top:22px;
}
.mission-quote p{
  font-family:'Kavivanar',cursive; font-size:19px; color:var(--maroon-dark); margin:0;
}
.mission-quote span{font-size:13px; color:#8a7461; margin-top:6px; display:block;}

.mission-image{
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  border:4px solid var(--white); aspect-ratio:4/3.3;
}
.mission-image img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- Objectives (numbered list) ---------- */
.objectives-section{background:var(--ivory-deep);}
.objectives-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.objective-item{
  display:flex; gap:16px; background:var(--white); border:1px solid var(--line);
  border-radius:8px; padding:20px 22px; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.objective-item:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.objective-num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--maroon); color:var(--white); font-family:'Kavivanar',cursive;
  font-size:16px; display:flex; align-items:center; justify-content:center;
}
.objective-text{font-size:14.8px; color:#4a382c; line-height:1.6;}

/* ---------- Milestone timeline ---------- */
.timeline-section{background:var(--white);}
.timeline{
  position:relative; max-width:780px; margin:0 auto;
  padding-left:34px;
}
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:var(--line);
}
.timeline-item{position:relative; padding-bottom:34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-34px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--maroon); border:3px solid var(--gold-light);
}
.timeline-year{
  font-family:'Kavivanar',cursive; font-size:20px; color:var(--maroon-dark); margin-bottom:4px;
}
.timeline-item h3{
  font-family:'Catamaran',sans-serif; font-weight:800; font-size:16px; color:var(--brown); margin-bottom:6px;
}
.timeline-item p{font-size:14.5px; color:#5a4636;}

/* ---------- CTA banner ---------- */
.about-cta{
  background:var(--maroon-dark); color:var(--ivory-deep);
  text-align:center; padding:56px 0;
}
.about-cta h2{
  font-size:clamp(22px,3vw,30px); color:var(--white); margin-bottom:14px;
}
.about-cta p{font-size:15.5px; color:#e6d9c8; max-width:56ch; margin:0 auto 26px;}
.about-cta .cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .mission-grid{grid-template-columns:1fr;}
  .mission-image{order:-1; max-width:420px; margin:0 auto;}
  .objectives-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .timeline{padding-left:28px;}
  .timeline-dot{left:-28px; width:16px; height:16px;}
  .about-cta .cta-actions{flex-direction:column; align-items:stretch;}
}