/* ==========================================================================
   TWO-COLUMN CONTENT SECTION
   ========================================================================== */

.two-column-section {
  padding: var(--section-padding-lg) 0;
  /* Surface with a whisper of the theme green mixed in */
  background: color-mix(in srgb, var(--color-brand-green) 7%, var(--color-surface));
  /* A rounded panel inset from the viewport edge (capped at the container
     width by .container-custom), not an edge-to-edge strip */
  width: calc(100% - 2 * var(--space-md));
  border-radius: var(--radius-xl);
}

/* When the panel is the last thing on the page (contact, free audit), leave
   the same strip below it as above it so it doesn't sit flush on the footer */
.site-main > .two-column-section:last-child {
  margin-bottom: var(--band-gap);
}

.two-column-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.column-left,
.column-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.column-left h2 {
  font-size: var(--font-size-3xl);
  margin: 0;
  line-height: 1.2;
}

.column-left p {
  margin: 0;
  line-height: 1.7;
}

/* Feature graphic styling */
.feature-graphic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variant: Reverse columns */
.two-column-section.reverse .two-column-content {
  direction: rtl;
}

.two-column-section.reverse .column-left,
.two-column-section.reverse .column-right {
  direction: ltr;
}

/* Variant: Dark background */
.two-column-section.dark {
  background: var(--color-base);
}

/* Variant: Accent background */
.two-column-section.accent {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-hover) 100%
  );
}

.two-column-section.accent h2,
.two-column-section.accent p {
  color: white;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .two-column-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .column-right {
    order: -1;
  }

  .two-column-section.reverse .two-column-content {
    direction: ltr;
  }

  /* Variant: two plain-text columns (e.g. mission/values) - keep source
     order on mobile instead of leading with the right column, which is
     tuned for graphic-lead layouts like the homepage's dashboard preview. */
  .two-column-section.text-pair .column-right {
    order: 0;
  }
}

@media (max-width: 768px) {
  .column-left h2 {
    font-size: var(--font-size-2xl);
  }

  .dash-preview {
    max-width: 300px;
  }
}