/*
 * InspireSphere Theme - Our Impact Section
 *
 * Background: white. Uses .container for 1320px max-width + 60px side padding.
 * No .section class - custom padding-block: 48px (Figma py-[48px]).
 *
 * Desktop layout:
 *   Two-column flex, gap 120px, align items start.
 *   Left  - h2 (36px SemiBold #262626) + p desc (16px Regular)
 *   Right - 5 stats in rows of 2, gap 48px between rows:
 *     Row 1: Trophy  "200+ Ideas Nurtured" | Users "100+ Workshops Conducted"
 *     Row 2: Briefcase "75+ Mentor Network" | Briefcase "10+ Ecosystem Partners"
 *     Row 3: Smiley "4500+ Students & Entrepreneurs Reached" (fills full row)
 *   Each stat: flex gap 20px, icon 56x56px, h3 number, p label.
 *
 * Mobile layout:
 *   Single column, gap 35px. Header centered. Stats: gap 40px, each stat column+centered.
 *   Icon shrinks to 36x36px. h3 number stays 24px (overrides h3-mobile=20px).
 */

/* Section wrapper - .container inside handles max-width + padding-inline */
.section--our-impact {
  background: var(--color-white);
  padding-block: 48px;
}

/* Two-column inner layout */
.our-impact__inner {
  display: flex;
  gap: 120px;
  align-items: flex-start;
}

/* Left: heading + description */
.our-impact__intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* h2: 36px SemiBold #262626 - pin line-height */
.our-impact__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  line-height: 1;
}

.our-impact__desc {
  font-size: var(--font-size-body-md);
  color: var(--color-black);
  line-height: 1.5;
}

/* Right: stats column */
.our-impact__stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Each row holds up to 2 stat items (row with 1 item = full width via flex: 1) */
.our-impact__stats-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Single stat item */
.stat-item {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.stat-item__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.stat-item__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.stat-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* h3: inherits 24px SemiBold dark navy from main.css h3.
   Only add Figma letter-spacing (-0.288px ~ -0.012em). */
.stat-item__number {
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.stat-item__label {
  font-size: var(--font-size-body-md);
  color: var(--color-black);
  line-height: 1.5;
}


/* Mobile (<= 768px) */
@media (max-width: 768px) {

  /* Stack the two columns */
  .our-impact__inner {
    flex-direction: column;
    gap: 35px;
    align-items: center;
  }

  /* Centered intro block */
  .our-impact__intro {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  /* h2 on mobile: 24px Bold (Figma mobile shows Bold weight) */
  .our-impact__heading {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-bold);
  }

  .our-impact__stats {
    width: 100%;
    gap: 40px;
  }

  /* Rows become columns - stats stack with 40px gap */
  .our-impact__stats-row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  /* Each stat: column, centered */
  .stat-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* Icon smaller on mobile */
  .stat-item__icon {
    width: 36px;
    height: 36px;
  }

  .stat-item__content {
    align-items: center;
    text-align: center;
  }

  /* Keep stat number at 24px - prevent h3-mobile (20px) from applying */
  .stat-item__number {
    font-size: var(--font-size-h3);
  }
}