/**
 * IntegralPlatforms.com - Site-Specific Styles
 * The base theme is provided by vendor/integralthemes/theme/theme.css
 * Override CSS variables here: :root { --primary: #custom-color; }
 */

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* h3s on this site are prose sub-headings, not decorative — keep dark */
h3 {
  color: var(--text-primary);
}

/* Restore section breathing room — this page is content-heavy */
.section {
  padding: var(--spacing-3xl) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--spacing-2xl) 0;
  }
}

/* ============================================
   CARD LAYOUT FIXES
   ============================================ */

/* base.css sets h4 { text-align: left } which overrides the
   text-align: center inherited from .process-card. Restore centering. */
.process-card h4,
.process-card .card-title {
  text-align: center;
}

.process-outcome h4 {
  text-align: center;
}

/* Remove 70ch paragraph clipping inside cards and content blocks */
.process-card .card-description,
.service-content p,
.about-content p {
  max-width: none;
}

/* ============================================
   PHOTO BACKGROUND SECTION
   ============================================ */

.photo-background-section {
  /* Swap in your background image when ready: */
  /* background-image: url('assets/your-background.png'); */
  background-color: var(--primary-dark);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  padding: var(--spacing-xl) 0;
  position: relative;
}

.photo-background-section .content {
  max-width: 600px;
}

.photo-background-section h2,
.photo-background-section p {
  color: white;
  text-align: left;
  max-width: none;
}

.photo-background-section h2 {
  margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
  .photo-background-section .content {
    max-width: 100%;
  }
}

/* ============================================
   APPROACH SECTION
   ============================================ */

/* Force 3-column layout for the 3 approach cards */
.approach-cards {
  grid-template-columns: repeat(3, 1fr);
}

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

/* ============================================
   PROCESS OUTCOME CARD
   ============================================ */

/* Match service-card visual style (gray border, white bg), centered below timeline */
.process-outcome {
  background: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0 0;
  text-align: center;
}

.process-outcome h3 {
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 600;
}