/* About Page Specific Styles */

.section-spacing {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .section-spacing {
    padding-block: var(--space-12);
  }
}

.bg-surface {
  background-color: var(--c-bg-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Hero Grid */
.hero-grid {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lead-text {
  font-size: var(--ts-lg);
  color: var(--c-text-main);
}

.hero-image img,
.feature-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* Text Grid (Mission/Trust) */
.text-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .text-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.content-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid var(--c-primary);
}

/* Feature Grids (Alternating) */
.feature-grid {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 992px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Columns Grid (Support/Vision) */
.columns-grid {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .columns-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}