/* =========================================================
   Block: What We Do IL
   File: blocks/il-what-we-do/style.css
   ========================================================= */

.what-we-do-il-section {
  position: relative;
  padding-top: var(--wwd-il-section-padding-top, 110px);
  padding-bottom: var(--wwd-il-section-padding-bottom, 110px);
  overflow: hidden;
  isolation: isolate;
  background: var(--wwd-il-section-bg, #f0f0f0);
  color: var(--wwd-il-title-color, #000000);
  border-bottom: var(--wwd-il-section-divider, 1px solid rgba(26, 48, 26, 0.08));
}

.what-we-do-il-section::before {
  content: "";
  display: var(--wwd-il-section-glow-display, none);
  position: absolute;
  top: calc(var(--wwd-il-section-glow-size, 520px) * -0.34);
  right: calc(var(--wwd-il-section-glow-size, 520px) * -0.28);
  z-index: 0;
  width: var(--wwd-il-section-glow-size, 520px);
  height: var(--wwd-il-section-glow-size, 520px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--wwd-il-section-accent-bg, rgba(74, 138, 74, 0.08)) 0%,
    transparent 70%
  );
  opacity: var(--wwd-il-section-glow-opacity, 0.12);
  pointer-events: none;
}

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

.what-we-do-il-container {
  position: relative;
  z-index: 2;
  width: min(
    calc(100% - (var(--wwd-il-container-padding-x, 48px) * 2)),
    var(--wwd-il-container-max-width, 1200px)
  );
  max-width: none;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.82fr);
  gap: var(--wwd-il-columns-gap, 96px);
  align-items: var(--wwd-il-columns-align, start);
  box-sizing: border-box;
}

.what-we-do-il-section[style*="--wwd-il-container-max-width:none"] .what-we-do-il-container {
  width: calc(100% - (var(--wwd-il-container-padding-x, 48px) * 2));
  max-width: none;
}

.what-we-do-il-copy {
  width: 100%;
  max-width: var(--wwd-il-intro-area-max-width, 640px);
  margin-left: var(--wwd-il-intro-area-margin-left, 0px);
  margin-right: var(--wwd-il-intro-area-margin-right, auto);
  text-align: var(--wwd-il-intro-text-align, left);
}

.what-we-do-il-cards {
  width: 100%;
  max-width: var(--wwd-il-cards-area-max-width, 520px);
  margin-top: var(--wwd-il-cards-margin-top, 36px);
  margin-left: var(--wwd-il-cards-area-margin-left, 0px);
  margin-right: var(--wwd-il-cards-area-margin-right, auto);
  display: grid;
  gap: var(--wwd-il-cards-gap, 18px);
}

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

.what-we-do-il-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wwd-il-eyebrow-line-gap, 8px);
  margin: 0 0 var(--wwd-il-eyebrow-margin-bottom, 18px);
  color: var(--wwd-il-eyebrow-color, #4a8a4a);
  font-family: var(--wwd-il-eyebrow-family, Inter, Arial, sans-serif);
  font-size: var(--wwd-il-eyebrow-size, 13px);
  font-weight: var(--wwd-il-eyebrow-weight, 700);
  line-height: var(--wwd-il-eyebrow-line, 1);
  letter-spacing: var(--wwd-il-eyebrow-spacing, 0em);
  text-transform: var(--wwd-il-eyebrow-transform, uppercase);
}

.what-we-do-il-eyebrow::before {
  content: "";
  display: var(--wwd-il-eyebrow-line-display, block);
  width: var(--wwd-il-eyebrow-line-width, 18px);
  height: var(--wwd-il-eyebrow-line-thickness, 1px);
  flex: 0 0 var(--wwd-il-eyebrow-line-width, 18px);
  background: var(--wwd-il-eyebrow-line-color, currentColor);
}

/* =========================================================
   Heading and description
   ========================================================= */

.what-we-do-il-title {
  max-width: var(--wwd-il-content-max-width, 640px);
  margin: 0 0 var(--wwd-il-title-margin-bottom, 24px);
  color: var(--wwd-il-title-color, #000000);
  font-family: var(--wwd-il-title-family, Inter, Arial, sans-serif);
  font-size: var(--wwd-il-title-size, 48px);
  font-weight: var(--wwd-il-title-weight, 700);
  line-height: var(--wwd-il-title-line, 1.12);
  letter-spacing: var(--wwd-il-title-spacing, 0em);
  text-transform: var(--wwd-il-title-transform, none);
}

.what-we-do-il-title span {
  display: inline;
}

.what-we-do-il-highlight,
.what-we-do-il-title .what-we-do-il-highlight {
  color: var(--wwd-il-title-highlight-color, #26ad21);
}

.what-we-do-il-description {
  max-width: var(--wwd-il-description-max-width, 560px);
  margin: 0;
  color: var(--wwd-il-description-color, #000000);
  font-family: var(--wwd-il-description-family, Lato, Arial, sans-serif);
  font-size: var(--wwd-il-description-size, 16px);
  font-weight: var(--wwd-il-description-weight, 400);
  line-height: var(--wwd-il-description-line, 1.625);
  letter-spacing: var(--wwd-il-description-spacing, 0em);
  text-transform: var(--wwd-il-description-transform, none);
}

/* =========================================================
   Button / CTA
   ========================================================= */

.what-we-do-il-button {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: var(--wwd-il-button-margin-top, 32px);
  padding-top: var(--wwd-il-button-padding-top, 14px);
  padding-right: var(--wwd-il-button-padding-right, 24px);
  padding-bottom: var(--wwd-il-button-padding-bottom, 14px);
  padding-left: var(--wwd-il-button-padding-left, 24px);
  color: var(--wwd-il-button-color, #ffffff);
  background: var(--wwd-il-button-bg, #4a8a4a);
  border-width: var(--wwd-il-button-stroke-size, 1px);
  border-style: solid;
  border-color: var(--wwd-il-button-stroke, transparent);
  border-radius: var(--wwd-il-button-radius, 999px);
  font-family: var(--wwd-il-button-family, Lato, Arial, sans-serif);
  font-size: var(--wwd-il-button-size, 15px);
  font-weight: var(--wwd-il-button-weight, 700);
  line-height: var(--wwd-il-button-line, 1);
  letter-spacing: var(--wwd-il-button-spacing, 0em);
  text-transform: var(--wwd-il-button-transform, none);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition:
    transform var(--wwd-il-transition-duration, 240ms) ease,
    color var(--wwd-il-transition-duration, 240ms) ease,
    background-color var(--wwd-il-transition-duration, 240ms) ease,
    border-color var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-button--outline {
  background: transparent;
  border-color: var(--wwd-il-button-stroke, #4a8a4a);
}

.what-we-do-il-button--text {
  min-height: auto;
  padding: 0;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.what-we-do-il-button:hover {
  transform: var(--wwd-il-button-hover-transform, translateY(-2px));
  color: var(--wwd-il-button-color-hover, #ffffff);
  background: var(--wwd-il-button-bg-hover, #26ad21);
  border-color: var(--wwd-il-button-stroke-hover, transparent);
}

.what-we-do-il-button--text:hover {
  background: transparent;
  border-color: transparent;
}

.what-we-do-il-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.what-we-do-il-button span {
  display: inline-flex;
  transition: transform var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-button:hover span {
  transform: translateX(var(--wwd-il-button-arrow-hover-x, 4px));
}

/* =========================================================
   Cards
   ========================================================= */

.what-we-do-il-card {
  position: relative;
  min-height: var(--wwd-il-card-min-height, 132px);
  padding-top: var(--wwd-il-card-padding-top, 24px);
  padding-right: var(--wwd-il-card-padding-right, 28px);
  padding-bottom: var(--wwd-il-card-padding-bottom, 24px);
  padding-left: var(--wwd-il-card-padding-left, 28px);
  overflow: hidden;
  background: var(--wwd-il-card-bg, #ffffff);
  border-width: var(--wwd-il-card-stroke-size, 1px);
  border-style: solid;
  border-color: var(--wwd-il-card-stroke, rgba(26, 48, 26, 0.08));
  border-radius: var(--wwd-il-card-radius, 14px);
  box-shadow: none;
  text-align: var(--wwd-il-card-text-align, left);
  transform-origin: center;
  transition:
    transform var(--wwd-il-transition-duration, 240ms) ease,
    border-color var(--wwd-il-transition-duration, 240ms) ease,
    background-color var(--wwd-il-transition-duration, 240ms) ease,
    box-shadow var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-card::before {
  content: "";
  display: var(--wwd-il-card-accent-display, block);
  position: absolute;
  left: 0;
  top: var(--wwd-il-card-accent-top, 28px);
  bottom: var(--wwd-il-card-accent-bottom, 28px);
  z-index: 1;
  width: var(--wwd-il-card-accent-width, 4px);
  background: var(--wwd-il-card-accent, #26ad21);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-card:hover {
  transform: var(--wwd-il-card-hover-transform, translateY(-4px) scale(1.005));
  background: var(--wwd-il-card-bg-hover, #1a301a);
  border-color: var(--wwd-il-card-stroke-hover, #26ad21);
  box-shadow: var(--wwd-il-card-hover-shadow, 0 18px 48px rgba(26, 48, 26, 0.14));
}

.what-we-do-il-card:hover::before {
  transform: scaleY(var(--wwd-il-card-accent-hover-scale, 1));
}

.what-we-do-il-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 var(--wwd-il-card-title-margin-bottom, 8px);
  color: var(--wwd-il-card-title-color, #000000);
  font-family: var(--wwd-il-card-title-family, Inter, Arial, sans-serif);
  font-size: var(--wwd-il-card-title-size, 24px);
  font-weight: var(--wwd-il-card-title-weight, 700);
  line-height: var(--wwd-il-card-title-line, 1.12);
  letter-spacing: var(--wwd-il-card-title-spacing, 0em);
  text-transform: var(--wwd-il-card-title-transform, none);
  transition: color var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--wwd-il-card-text-color, #000000);
  font-family: var(--wwd-il-card-text-family, Lato, Arial, sans-serif);
  font-size: var(--wwd-il-card-text-size, 14px);
  font-weight: var(--wwd-il-card-text-weight, 400);
  line-height: var(--wwd-il-card-text-line, 1.55);
  letter-spacing: var(--wwd-il-card-text-spacing, 0em);
  text-transform: var(--wwd-il-card-text-transform, none);
  transition: color var(--wwd-il-transition-duration, 240ms) ease;
}

.what-we-do-il-card:hover h3 {
  color: var(--wwd-il-card-title-hover-color, #ffffff);
}

.what-we-do-il-card:hover p {
  color: var(--wwd-il-card-text-hover-color, rgba(255, 255, 255, 0.82));
}

.what-we-do-il-card:focus-within {
  outline: 3px solid rgba(38, 173, 33, 0.28);
  outline-offset: 3px;
}

/* =========================================================
   Responsive
   Breakpoints: 1200 / 1024 / 767 / 480
   ========================================================= */

@media (max-width: 1200px) {
  .what-we-do-il-container {
    gap: min(var(--wwd-il-columns-gap, 96px), 72px);
  }
}

@media (max-width: 1024px) {
  .what-we-do-il-container {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .what-we-do-il-cards {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .what-we-do-il-section {
    padding-top: var(--wwd-il-mobile-section-padding-top, 76px);
    padding-bottom: var(--wwd-il-mobile-section-padding-bottom, 76px);
  }

  .what-we-do-il-container {
    width: min(
      calc(100% - (var(--wwd-il-mobile-container-padding-x, 24px) * 2)),
      var(--wwd-il-container-max-width, 1200px)
    );
    grid-template-columns: 1fr;
    gap: var(--wwd-il-mobile-columns-gap, 44px);
  }

  .what-we-do-il-section[style*="--wwd-il-container-max-width:none"] .what-we-do-il-container {
    width: calc(100% - (var(--wwd-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .what-we-do-il-copy {
    max-width: var(--wwd-il-mobile-intro-area-max-width, 1000px);
    margin-left: var(--wwd-il-mobile-area-margin-left, 0px);
    margin-right: var(--wwd-il-mobile-area-margin-right, auto);
    text-align: var(--wwd-il-mobile-text-align, left);
  }

  .what-we-do-il-title {
    max-width: var(--wwd-il-mobile-content-max-width, 1000px);
    margin-bottom: var(--wwd-il-mobile-title-margin-bottom, 22px);
    font-size: var(--wwd-il-mobile-title-size, 38px);
    line-height: var(--wwd-il-mobile-title-line, 1.12);
  }

  .what-we-do-il-eyebrow {
    gap: var(--wwd-il-mobile-eyebrow-line-gap, 8px);
    margin-bottom: var(--wwd-il-mobile-eyebrow-margin-bottom, 16px);
    font-size: var(--wwd-il-mobile-eyebrow-size, 12px);
    line-height: var(--wwd-il-mobile-eyebrow-line, 1);
  }

  .what-we-do-il-eyebrow::before {
    width: var(--wwd-il-mobile-eyebrow-line-width, 18px);
    flex-basis: var(--wwd-il-mobile-eyebrow-line-width, 18px);
  }

  .what-we-do-il-description {
    max-width: var(--wwd-il-mobile-description-max-width, 1000px);
    font-size: var(--wwd-il-mobile-description-size, 16px);
    line-height: var(--wwd-il-mobile-description-line, 1.625);
  }

  .what-we-do-il-button {
    width: var(--wwd-il-mobile-button-width, 100%);
    margin-top: var(--wwd-il-mobile-button-margin-top, 28px);
    padding-top: var(--wwd-il-mobile-button-padding-top, 14px);
    padding-right: var(--wwd-il-mobile-button-padding-right, 22px);
    padding-bottom: var(--wwd-il-mobile-button-padding-bottom, 14px);
    padding-left: var(--wwd-il-mobile-button-padding-left, 22px);
    font-size: var(--wwd-il-mobile-button-size, 15px);
  }

  .what-we-do-il-button--text {
    width: max-content;
    padding: 0;
  }

  .what-we-do-il-cards {
    max-width: var(--wwd-il-mobile-cards-area-max-width, 1000px);
    margin-top: var(--wwd-il-mobile-cards-margin-top, 0px);
    margin-left: var(--wwd-il-mobile-area-margin-left, 0px);
    margin-right: var(--wwd-il-mobile-area-margin-right, auto);
    gap: var(--wwd-il-mobile-cards-gap, 18px);
  }

  .what-we-do-il-card {
    min-height: var(--wwd-il-mobile-card-min-height, 0px);
    padding-top: var(--wwd-il-mobile-card-padding-top, 20px);
    padding-right: var(--wwd-il-mobile-card-padding-right, 22px);
    padding-bottom: var(--wwd-il-mobile-card-padding-bottom, 20px);
    padding-left: var(--wwd-il-mobile-card-padding-left, 22px);
    border-radius: var(--wwd-il-mobile-card-radius, 14px);
    text-align: var(--wwd-il-mobile-card-text-align, left);
  }

  .what-we-do-il-card h3 {
    margin-bottom: var(--wwd-il-mobile-card-title-margin-bottom, 8px);
    font-size: var(--wwd-il-mobile-card-title-size, 20px);
    line-height: var(--wwd-il-mobile-card-title-line, 1.12);
  }

  .what-we-do-il-card p {
    font-size: var(--wwd-il-mobile-card-text-size, 14px);
    line-height: var(--wwd-il-mobile-card-text-line, 1.55);
  }
}

@media (max-width: 480px) {
  .what-we-do-il-button {
    white-space: normal;
    text-align: center;
  }

}

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

@media (prefers-reduced-motion: reduce) {
  .what-we-do-il-button,
  .what-we-do-il-button span,
  .what-we-do-il-card,
  .what-we-do-il-card::before,
  .what-we-do-il-card h3,
  .what-we-do-il-card p {
    transition: none !important;
  }

  .what-we-do-il-button:hover,
  .what-we-do-il-card:hover {
    transform: none !important;
  }
}