/* ============================================================
   OVERVIEW SECTION — "What We Do"
   Design: Editorial split layout. Left = large typographic
   statement. Right = stat panel with alternating rhythm.
   Tone: Precision industrial. Not a card grid.
   ============================================================ */

.overview {
  background: var(--color-dominant);
  padding-top: calc(var(--section-padding-y) / 2.5);
  padding-bottom: var(--section-padding-y);
}

/* ---- Asymmetric 2-col: 55% content / 45% stats ---- */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
}

@media (min-width: 900px) {
  .overview-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-20);
    align-items: center;
  }
}

/* ---- Left column: editorial text block ---- */
.overview-content {
  position: relative;
}

.overview .section-label {
  color: var(--color-secondary);
}

.overview .section-label::before {
  background: var(--color-secondary);
}

.overview .section-title {
  color: var(--color-secondary);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
  /* Large type is the visual anchor — underscore it with space above the text */
  margin-top: var(--space-4);
}

.title-highlight {
  color: var(--color-accent);
}

/* Yellow rule under title — editorial detail */
.overview-content .overview-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: var(--space-8);
}

.overview-text p {
  font-size: var(--text-base);
  color: var(--gray-700);
  line-height: 1.85;
  margin-bottom: var(--space-5);
  max-width: 58ch;
}

.overview-text p:last-child {
  margin-bottom: 0;
}

/* ---- Right column: stat panel (NOT a card grid) ---- */
.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Contained within a vertical strip with a left rule */
  border-left: 2px solid var(--gray-200);
}

/* Each stat: alternating row with its own breath */
.overview-stat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-8);
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  transition: background var(--transition-fast);
}

.overview-stat-row:last-child {
  border-bottom: none;
}

.overview-stat-row:hover {
  background: var(--gray-100);
}

/* Accent pip on the left rule — shows active position */
.overview-stat-row::before {
  content: '';
  position: absolute;
  left: -3px; /* sits over the border-left */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 32px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.overview-stat-row:hover::before {
  opacity: 1;
}

/* Big number — HIERARCHY LEVEL 1 */
.overview-stat-number {
  font-family: var(--font-secondary);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1;
  letter-spacing: -0.04em;
  min-width: 4ch;
  display: block;
}

/* "+" or "/7" suffix in accent */
.overview-stat-number .stat-suffix {
  color: var(--color-accent);
  font-size: 0.6em;
}

.overview-stat-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Stat label — HIERARCHY LEVEL 2 */
.overview-stat-label {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.2;
}

/* Stat detail — HIERARCHY LEVEL 3 */
.overview-stat-detail {
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.3;
}

/* Mobile: full width single column */
@media (max-width: 899px) {
  .overview-stats {
    border-left: none;
    border-top: 2px solid var(--gray-200);
  }

  .overview-stat-row::before {
    left: auto;
    top: -3px;
    width: 32px;
    height: 4px;
    transform: none;
  }
}