/* ============================================================
   Smart Coaching Centre — About Page Styles
   ============================================================ */

/* ── STORY GRID ────────────────────────────────────────────── */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.story-left p {
  color: var(--text-body);
  margin-bottom: 16px;
  font-size: 0.98rem;
  line-height: 1.8;
}
.story-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.sh-item { text-align: center; }
.sh-num  {
  font-size: 2rem; font-weight: 900;
  color: var(--primary); line-height: 1;
  margin-bottom: 6px;
}
.sh-label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Story Right */
.story-right { display:flex; flex-direction:column; gap:24px; }
.story-img-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-light), var(--bg-white));
  border: 1px solid var(--border);
  display: flex; flex-direction:column; align-items:center;
  padding: 40px 32px 28px;
  position: relative;
  box-shadow: var(--shadow-md);
}
.story-logo { height:140px; width:auto; object-fit:contain; margin-bottom:16px; }
.story-badge {
  display: inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 700;
}
.story-badge i { color: var(--gold); }
.story-mission {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-xs);
}
.story-mission .icon-box { margin: 0; flex-shrink: 0; }
.story-mission h4 { margin-bottom: 6px; }
.story-mission p  { font-size: 0.9rem; color:var(--text-muted); }

/* ── WHAT WE TEACH GRID ────────────────────────────────────── */
.teach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.teach-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction:column; gap:14px;
  transition: var(--ease);
  position: relative; overflow:hidden;
}
.teach-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin:left;
  transition: transform 0.35s ease;
}
.teach-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.teach-card:hover::before { transform:scaleX(1); }
.teach-card h3 { font-size:1.2rem; }
.teach-card p  { font-size:0.9rem; color:var(--text-muted); flex:1; line-height:1.7; }
.sc-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.88rem; font-weight:700; color:var(--primary);
  transition:var(--ease-fast);
  margin-top:4px;
}
.sc-link:hover { color:var(--accent); gap:13px; }

/* ── LOCATIONS ─────────────────────────────────────────────── */
.about-locs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.aloc-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction:column; gap:10px;
  transition: var(--ease);
}
.aloc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.aloc-primary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(26,75,140,0.05), rgba(26,75,140,0.02));
  border-color: rgba(26,75,140,0.2);
}
.aloc-primary h3 { margin:0; }
.aloc-primary p  { grid-column:2; grid-row:2; margin:0; font-size:0.9rem; color:var(--text-muted); }
.aloc-icon {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(26,75,140,0.1);
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.aloc-card:not(.aloc-primary) .aloc-icon { margin-bottom:4px; }
.aloc-card h4 { margin:0; font-size:1rem; }
.aloc-card p  { font-size:0.88rem; color:var(--text-muted); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1024px) {
  .teach-grid   { grid-template-columns:repeat(2,1fr); }
  .about-locs   { grid-template-columns:1fr 1fr; }
  .aloc-primary { grid-column:1/-1; grid-template-columns:auto 1fr; }
}
@media (max-width:768px) {
  .story-grid         { grid-template-columns:1fr; gap:40px; }
  .story-highlights   { grid-template-columns:repeat(2,1fr); }
  .teach-grid         { grid-template-columns:1fr; }
  .about-locs         { grid-template-columns:1fr; }
  .aloc-primary       { grid-template-columns:auto 1fr; }
}