/* =========================================================
   Block: Our Reach IL
   File: blocks/il-our-reach/style.css
   ========================================================= */

.il-our-reach-section,
.il-our-reach-editor {
  position: relative;
  width: 100%;
  max-width: none !important;
  padding-top: var(--or-il-section-padding-top, 112px);
  padding-bottom: var(--or-il-section-padding-bottom, 112px);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background:
    radial-gradient(
      circle at 31% 48%,
      var(--or-il-glow, rgba(255, 255, 255, 0.08)),
      transparent 22rem
    ),
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--or-il-gradient-color, rgba(26, 48, 26, 0.22)) calc(var(--or-il-gradient-opacity, 1) * 100%),
        transparent
      ),
      transparent 64%
    ),
    var(--or-il-bg, #4a8a4a);
  color: var(--or-il-text, #ffffff);
  border-style: none !important;
  box-shadow:
    inset 0 1px 0 var(--or-il-edge-line-color, rgba(255, 255, 255, 0.16)),
    inset 0 -1px 0 var(--or-il-edge-line-color, rgba(255, 255, 255, 0.16));
}

.il-our-reach-section {
  margin: 0;
}


/* =========================================================
   Decorative background
   ========================================================= */

.il-our-reach-section::before,
.il-our-reach-editor::before {
  content: "";
  display: var(--or-il-grid-pattern-display, block);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(
      var(--or-il-grid-pattern-color, rgba(255, 255, 255, 0.08)) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--or-il-grid-pattern-color, rgba(255, 255, 255, 0.08)) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  opacity: var(--or-il-grid-pattern-opacity, 0.24);
}

.il-our-reach-section::after,
.il-our-reach-editor::after {
  content: "";
  display: var(--or-il-circle-display, block);
  position: absolute;
  left: 28%;
  top: 50%;
  z-index: 1;
  width: 260px;
  height: 260px;
  border: 1px solid var(--or-il-circle-color, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: var(--or-il-circle-opacity, 0.35);
  pointer-events: none;
  animation: var(--or-il-circle-animation, ilReachPulse 5.4s ease-in-out infinite);
}


/* =========================================================
   Layout
   ========================================================= */

.il-our-reach__container {
  position: relative;
  z-index: 2;
  width: min(
    calc(100% - (var(--or-il-container-padding-x, 48px) * 2)),
    var(--or-il-container-max-width, 1240px)
  );
  max-width: none;
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    var(--or-il-left-width, 420px)
    minmax(0, var(--or-il-content-max-width, 650px));
  gap: var(--or-il-grid-gap, 120px);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.il-our-reach-section[style*="--or-il-container-max-width:none"] .il-our-reach__container,
.il-our-reach-editor[style*="--or-il-container-max-width:none"] .il-our-reach__container {
  width: calc(100% - (var(--or-il-container-padding-x, 48px) * 2));
  max-width: none;
}

.il-our-reach__content {
  width: 100%;
  max-width: var(--or-il-content-max-width, 650px);
  text-align: var(--or-il-content-text-align, left);
  box-sizing: border-box;
}


/* =========================================================
   Stats
   ========================================================= */

.il-our-reach__stats {
  display: grid;
  gap: var(--or-il-stat-gap, 28px);
  box-sizing: border-box;
}

.il-our-reach__stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--or-il-stat-content-gap, 34px);
  box-sizing: border-box;
}

.il-our-reach__stat-line {
  width: 1px;
  height: var(--or-il-stat-line-height, 72px);
  display: block;
  margin-left: var(--or-il-stat-line-offset, 30px);
  background: var(--or-il-line, rgba(255, 255, 255, 0.45));
  box-shadow:
    0 0 0 1px rgba(38, 173, 33, 0.03),
    0 0 22px rgba(38, 173, 33, 0.34);
  transform-origin: center;
  animation: var(--or-il-stat-line-animation, ilReachLine 2.8s ease-in-out infinite);
}

.il-our-reach__stat:nth-child(2) .il-our-reach__stat-line {
  animation-delay: 0.22s;
}

.il-our-reach__stat:nth-child(3) .il-our-reach__stat-line {
  animation-delay: 0.44s;
}

.il-our-reach__stat-content {
  min-width: 0;
}

.il-our-reach__stat-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--or-il-stat-value-color, #ffffff);
  font-family: var(--or-il-stat-value-family, Inter, Arial, sans-serif);
  font-size: var(--or-il-stat-value-size, 48px);
  font-weight: var(--or-il-stat-value-weight, 900);
  line-height: var(--or-il-stat-value-line, 1);
  letter-spacing: var(--or-il-stat-value-spacing, -0.04em);
  text-transform: var(--or-il-stat-value-transform, none);
}

.il-our-reach__stat-suffix {
  color: var(--or-il-stat-suffix-color, #1a301a);
}

.il-our-reach__stat-label {
  margin: 8px 0 0;
  color: var(--or-il-stat-label-color, #ffffff);
  font-family: var(--or-il-stat-label-family, Inter, Arial, sans-serif);
  font-size: var(--or-il-stat-label-size, 12px);
  font-weight: var(--or-il-stat-label-weight, 700);
  line-height: var(--or-il-stat-label-line, 1);
  letter-spacing: var(--or-il-stat-label-spacing, 0.04em);
  text-transform: var(--or-il-stat-label-transform, uppercase);
}


/* =========================================================
   Eyebrow
   ========================================================= */

.il-our-reach__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--or-il-eyebrow-line-gap, 10px);
  margin: 0 0 var(--or-il-eyebrow-margin-bottom, 16px);
  color: var(--or-il-eyebrow-color, #ffffff);
  font-family: var(--or-il-eyebrow-family, Inter, Arial, sans-serif);
  font-size: var(--or-il-eyebrow-size, 13px);
  font-weight: var(--or-il-eyebrow-weight, 700);
  line-height: var(--or-il-eyebrow-line, 1);
  letter-spacing: var(--or-il-eyebrow-spacing, 0em);
  text-transform: var(--or-il-eyebrow-transform, uppercase);
}

.il-our-reach__eyebrow::before {
  content: "";
  display: var(--or-il-eyebrow-line-display, block);
  width: var(--or-il-eyebrow-line-width, 28px);
  height: var(--or-il-eyebrow-line-thickness, 1px);
  flex: 0 0 var(--or-il-eyebrow-line-width, 28px);
  background: var(--or-il-eyebrow-line-color, #ffffff);
}


/* =========================================================
   Heading
   ========================================================= */

.il-our-reach__heading {
  max-width: 100%;
  margin: 0 0 var(--or-il-heading-margin-bottom, 24px);
  color: var(--or-il-heading-color, #ffffff);
  font-family: var(--or-il-heading-family, Inter, Arial, sans-serif);
  font-size: var(--or-il-heading-size, 48px);
  font-weight: var(--or-il-heading-weight, 700);
  line-height: var(--or-il-heading-line, 1.12);
  letter-spacing: var(--or-il-heading-spacing, 0em);
  text-transform: var(--or-il-heading-transform, none);
}

.il-our-reach__heading span {
  display: inline;
}

.il-our-reach__heading-highlight {
  color: var(--or-il-heading-highlight-color, #1a301a);
}


/* =========================================================
   Description
   ========================================================= */

.il-our-reach__description {
  max-width: 100%;
  margin: 0;
  color: var(--or-il-description-color, rgba(255, 255, 255, 0.86));
  font-family: var(--or-il-description-family, Lato, Arial, sans-serif);
  font-size: var(--or-il-description-size, 16px);
  font-weight: var(--or-il-description-weight, 400);
  line-height: var(--or-il-description-line, 1.6);
  letter-spacing: var(--or-il-description-spacing, 0em);
  text-transform: var(--or-il-description-transform, none);
}


/* =========================================================
   Animations
   ========================================================= */

@keyframes ilReachLine {
  0%,
  100% {
    transform: scaleY(0.88);
    opacity: 0.72;
  }

  50% {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

@keyframes ilReachPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: calc(var(--or-il-circle-opacity, 0.35) * 0.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: var(--or-il-circle-opacity, 0.35);
  }
}


/* =========================================================
   Tablet / small desktop
   ========================================================= */

@media (max-width: 1100px) {
  .il-our-reach__container {
    grid-template-columns: minmax(0, 1fr);
    gap: min(var(--or-il-grid-gap, 120px), 70px);
    justify-content: start;
  }

  .il-our-reach__stats {
    max-width: 520px;
  }

  .il-our-reach__content {
    max-width: min(100%, 760px);
  }

  .il-our-reach__heading {
    font-size: clamp(34px, 5vw, var(--or-il-heading-size, 48px));
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .il-our-reach-section,
  .il-our-reach-editor {
    padding-top: var(--or-il-mobile-section-padding-top, 76px);
    padding-bottom: var(--or-il-mobile-section-padding-bottom, 76px);
  }

  .il-our-reach-section::after,
  .il-our-reach-editor::after {
    left: 72%;
    top: 22%;
    width: 220px;
    height: 220px;
  }

  .il-our-reach__container {
    width: calc(100% - (var(--or-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--or-il-mobile-grid-gap, 48px);
    justify-content: start;
  }

  .il-our-reach-section[style*="--or-il-container-max-width:none"] .il-our-reach__container,
  .il-our-reach-editor[style*="--or-il-container-max-width:none"] .il-our-reach__container {
    width: calc(100% - (var(--or-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .il-our-reach__content {
    max-width: 100%;
    text-align: var(--or-il-mobile-text-align, left);
  }

  .il-our-reach__stats {
    max-width: 100%;
  }

  .il-our-reach__stat {
    gap: var(--or-il-mobile-stat-content-gap, 22px);
  }

  .il-our-reach__stat-line {
    margin-left: var(--or-il-mobile-stat-line-offset, 0px);
  }

  .il-our-reach__stat-value {
    font-size: var(--or-il-mobile-stat-value-size, 42px);
  }

  .il-our-reach__stat-label {
    font-size: var(--or-il-mobile-stat-label-size, 12px);
    letter-spacing: var(--or-il-mobile-stat-label-spacing, 0.04em);
  }

  .il-our-reach__heading {
    font-size: var(--or-il-mobile-heading-size, 34px);
    line-height: var(--or-il-mobile-heading-line, 1.12);
  }

  .il-our-reach__description {
    font-size: var(--or-il-mobile-description-size, 16px);
    line-height: var(--or-il-mobile-description-line, 1.6);
  }
}


/* =========================================================
   Small mobile
   ========================================================= */

@media (max-width: 480px) {
  .il-our-reach__container {
    width: calc(100% - 28px);
  }

  .il-our-reach__heading {
    font-size: clamp(28px, 9vw, var(--or-il-mobile-heading-size, 34px));
  }

  .il-our-reach__stat-value {
    font-size: clamp(34px, 12vw, var(--or-il-mobile-stat-value-size, 42px));
  }

  .il-our-reach__eyebrow {
    font-size: min(var(--or-il-eyebrow-size, 13px), 12px);
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .il-our-reach-section::after,
  .il-our-reach-editor::after,
  .il-our-reach__stat-line {
    animation: none !important;
  }
}

/* Optional edge separators */
.il-our-reach-section[style*="--or-il-edge-lines-display:none"],
.il-our-reach-editor[style*="--or-il-edge-lines-display:none"] {
  box-shadow: none;
}