/* ============================================
   WINIHARTO — About & Vision Pages (Light Theme)
   ============================================ */

/* ---- About Content ---- */
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.about-text h3 { margin-bottom: var(--space-md); }
.about-text p { margin-bottom: var(--space-lg); }
.about-text p:last-child { margin-bottom: 0; }
.about-image { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.about-image img { width: 100%; height: 400px; object-fit: cover; }

@media (max-width: 768px) {
  .about-content { grid-template-columns: 1fr; }
  .about-image { order: -1; }
}

/* ---- Values Grid ---- */
.values-section { background: var(--bg-secondary); }
.card-feature { padding: 2.5rem 2rem; text-align: center; }

/* ---- Timeline ---- */
.timeline { position: relative; max-width: 700px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px;
  background: var(--border-default);
}
.timeline-item { display: flex; gap: var(--space-xl); margin-bottom: var(--space-2xl); position: relative; }
.timeline-marker {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%;
  background: var(--primary-500); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem; color: var(--dark-900); z-index: 1;
  box-shadow: 0 2px 8px rgba(249, 115, 22,0.3);
}
.timeline-content h4 { margin-bottom: var(--space-xs); font-size: 1.1rem; }
.timeline-content p { font-size: 0.9rem; }

/* ---- Vision & Mission ---- */
.vm-card {
  padding: var(--space-3xl); background: #ffffff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  position: relative; overflow: hidden; margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}
.vm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary-500);
}
.vm-card .vm-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--primary-700); margin-bottom: var(--space-md);
}
.vm-card h2 { margin-bottom: var(--space-lg); }
.vm-card p { font-size: 1.05rem; max-width: 700px; }
.vm-card.mission { text-align: right; }
.vm-card.mission p { margin-left: auto; }
@media (max-width: 768px) {
  .vm-card.mission { text-align: left; }
  .vm-card.mission p { margin-left: 0; }
  .vm-card { padding: var(--space-xl); }
}

/* ---- Contact Page ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
.contact-form-wrapper {
  padding: var(--space-2xl); background: #ffffff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.contact-info-grid { display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-map {
  margin-top: var(--space-lg); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-subtle); height: 200px;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 0.875rem;
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }