/* ==========================================================================
   APPROACH BLOCK
   Layout: section title → vision (title + body + 1–2 images) → mission (title + 4-col steps)
   ========================================================================== */

/* ── CSS custom properties ────────────────────────────────────── */
.approach-block {
  --ab2-title-color: var(--hng-orange, #f58220);
  --ab2-sub-title-color: var(--hng-white, #ffffff);
  --ab2-body-color: var(--hng-muted, rgba(255, 255, 255, 0.72));
  --ab2-img-radius: var(--radius-image, 40px);
  --ab2-step-num-bg: var(--hng-orange, #f58220);
  --ab2-step-num-color: var(--hng-white, #ffffff);
  --ab2-padding: var(--hng-section-pad, clamp(1.5rem, 6vw, 6rem));
  --ab2-gap: var(--hng-row-gap, clamp(1rem, 2.5vw, 2rem));

  width: 100%;
  box-sizing: border-box;
  margin-bottom: 60px;
  /* padding: var(--ab2-padding); */
}

/* ── Inner wrapper ────────────────────────────────────────────── */
.approach-block__inner {
  /* max-width: 1400px;
	margin: 0 auto; */
  display: flex;
  flex-direction: column;
  gap: var(--ab2-gap);
}

/* Outer-box variant */

/* ── Section title (H1 per design spec) ────────────────── */
.approach-block__section-title {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h2-size, clamp(2.25rem, 4.5vw, 3.625rem));
  line-height: 1.1;
  color: var(--ab2-title-color);
}

/* ── Vision block ─────────────────────────────────────────────── */
.approach-block__vision {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.approach-block__vision-title {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h3-size, clamp(1.5rem, 2.5vw, 1.875rem));
  color: var(--ab2-sub-title-color);
}

.approach-block__vision-body {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  color: var(--hng-white, #ffffff);
  line-height: 1.75;
  max-width: 90ch;
}

.approach-block__vision-body p {
  margin: 0 0 0.6em;
}

.approach-block__vision-body p:last-child {
  margin-bottom: 0;
}

/* ── Images row (1 or 2 side-by-side) ────────────────────────── */
.approach-block__images {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: stretch;
}

.approach-block__image {
  flex: 1;
  margin: 0;
  padding: 0;
  border-radius: var(--ab2-img-radius);
  overflow: hidden;
  line-height: 0;
}

.approach-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mission block ────────────────────────────────────────────── */
.approach-block__mission {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.approach-block__mission-title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--ab2-sub-title-color);
}

/* ── Steps grid — always 4 columns ───────────────────────────── */
.approach-block__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* ── Individual step ──────────────────────────────────────────── */
.approach-block__step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Number badge — small orange square pill */
.approach-block__step-num {
  /* display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--ab2-step-num-bg);
	color: var(--ab2-step-num-color);
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 4px; */
  flex-shrink: 0;
  line-height: 1;

  background: #e8661a;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  width: 34px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    8px 0%,
    100% 0%,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0% 100%,
    0% 8px
  );
}

.approach-block__step-body {
  font-size: clamp(0.75rem, 1.3vw, 0.85rem);
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  color: var(--hng-white, #ffffff);
  line-height: 1.7;
}

.approach-block__step-body p {
  margin: 0 0 0.5em;
}

.approach-block__step-body p:last-child {
  margin-bottom: 0;
}

/* ── Tablet (≤ 900px): 2-col steps ───────────────────────────── */
@media (max-width: 900px) {
  .approach-block__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile (≤ 600px): 1-col images, 1-col steps ─────────────── */
@media (max-width: 600px) {
  .approach-block__images {
    flex-direction: column;
  }

  .approach-block__steps {
    grid-template-columns: 1fr;
  }
}

/* ── Scroll-in animations ─────────────────────────────────────── */
[data-ab-animate] {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-ab-animate="fade-up"] {
  transform: translateY(56px);
}

[data-ab-animate="slide-left"] {
  transform: translateX(-72px);
}

[data-ab-animate="slide-right"] {
  transform: translateX(72px);
}

[data-ab-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* On mobile horizontal slides become fade-up to avoid overflow */
@media (max-width: 600px) {
  [data-ab-animate="slide-left"],
  [data-ab-animate="slide-right"] {
    transform: translateY(56px);
  }
}