/* ============================================================
   ABOUT.CSS — page-specific styles for about.php:
   the hero image, the Vision & Mission grid, and the team cards.
   ============================================================ */
:root{
  --hero-bg-image: url('../../assets/img/about.jpeg');
}

/* ===== VISION & MISSION GRID ===== */
.vm-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:700px){.vm-grid{grid-template-columns:1fr;}}

/* ===== TEAM ===== */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.team-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 24px; text-align:center; transition:.35s var(--ease);}
.team-card:hover{transform:translateY(-8px); box-shadow:0 20px 48px rgba(10,79,82,.14); border-color:transparent;}
.team-card .avatar{width:96px; height:96px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--sans); font-size:30px; margin:0 auto 18px;}
.team-card h3{font-size:18px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:4px;}
.team-card .role{display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); margin-bottom:12px;}
.team-card p{font-size:13.5px; margin:0;}
.team-card .social{justify-content:center; margin-top:16px;}
.team-card .social a{border-color:var(--line);}
.team-card .social a:hover{border-color:var(--gold);}
.team-card .social svg{stroke:var(--teal);}
.team-card .social a:hover svg{stroke:#fff;}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;}}