/* =================================================================
   ABOUT — page-specific styles
   ================================================================= */

/* ---------------------------------------------------------------
   TIMELINE
   --------------------------------------------------------------- */
.timeline{ display:flex; flex-direction:column; gap: 0; }
.timeline-row{
  display:flex; gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
}
.timeline-row:last-child{ border-bottom:none; }
.timeline-row__tag{
  flex: 0 0 100px;
  font-family: var(--f-display); font-weight:700; font-size:0.78rem;
  color: var(--accent-dark); text-transform:uppercase; letter-spacing:0.04em;
}
.timeline-row__body h4{ margin-bottom:0.3rem; }
.timeline-row__body p{ font-size:0.92rem; color: var(--muted); margin:0; }

/* ---------------------------------------------------------------
   VALUES
   --------------------------------------------------------------- */
.value-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.value-card{
  flex: 1 1 calc(25% - 0.94rem);
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.value-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-card:hover .value-card__icon{ box-shadow: var(--shadow-icon-hover); transform: scale(1.05); }
.value-card__icon{
  width:46px; height:46px; border-radius: var(--radius-sm);
  background: var(--grad-amber); color: #fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-icon);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.value-card__icon svg{ width:22px; height:22px; }
.value-card h3{ font-size:1.02rem; margin-bottom:0.5rem; }
.value-card p{ font-size:0.88rem; color: var(--muted); margin:0; line-height:1.6; }

@media (max-width: 1024px){ .value-card{ flex-basis: calc(33.333% - 0.84rem); } }
@media (max-width: 700px){ .value-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 460px){ .value-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   LEADERSHIP
   --------------------------------------------------------------- */
.leader-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.leader-card{
  flex: 1 1 calc(33.333% - 0.84rem);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.leader-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.leader-card__avatar{
  width:54px; height:54px; border-radius: 50%;
  background: var(--grad-navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:800; font-size:1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-icon-navy);
}
.leader-card h3{ font-size:1.08rem; margin-bottom:0.3rem; }
.leader-card .role{
  display:block; font-family: var(--f-display); font-size:0.78rem; font-weight:700;
  color: var(--accent-dark); margin-bottom: 0.9rem;
}
.leader-card p{ font-size:0.89rem; color: var(--muted); margin:0; line-height:1.6; }

@media (max-width: 900px){ .leader-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 560px){ .leader-card{ flex-basis: 100%; } }

/* ---------------------------------------------------------------
   LOCATIONS (full detail — moved here from homepage per content brief)
   --------------------------------------------------------------- */
.location-grid{ display:flex; flex-wrap:wrap; gap: 1.25rem; }
.location-card{
  flex: 1 1 calc(25% - 0.94rem);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
}
.location-card__no{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family: var(--f-display); font-weight:700; font-size:0.72rem;
  color: #fff; background: var(--grad-amber);
  text-transform:uppercase; letter-spacing:0.04em;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(234,88,12,0.25);
  margin-bottom: 0.9rem;
}
.location-card h4{ margin-bottom:0.5rem; }
.location-card p{ font-size:0.89rem; color: var(--muted); margin:0; line-height:1.6; }

@media (max-width: 1150px){ .location-card{ flex-basis: calc(50% - 0.6rem); } }
@media (max-width: 900px){ .location-card{ flex-basis: 100%; } }