/* ═══════════════════════════════════════════════════════════════
   Incubation — Why Join section  |  Figma node 274:2197
   Layout: centred heading + desc ABOVE a left-image / right-cards body.
   Uses design tokens from variables.css.
   Icon colours are unique to this section → defined as local tokens.
   ═══════════════════════════════════════════════════════════════ */

/* Local tokens — scoped so no raw hex leaks into declarations */
.section--incubation-why-us {
  --incubation-icon-bg: #E9F0FC;
  --incubation-icon-border: #CFE0FD;
  --incubation-icon-radius: 8px;
  --incubation-icon-size: 34px;
}

/* ── Outer wrapper: flex-col; header sits above body ── */
.incubation-why-us__wrap {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ── Centred section heading + description ── */
.incubation-why-us__header {
  text-align: center;
}

.incubation-why-us__heading {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: var(--font-size-h2);
  color: var(--color-black);
  line-height: normal;
  margin: 0 0 var(--spacing-md) 0;
}

.incubation-why-us__desc {
  font-size: var(--font-size-body-md);
  color: var(--color-black);
  line-height: normal;
  margin: 0;
}

/* ── Body: image (fixed 558 px) + cards (fluid) side-by-side ── */
.incubation-why-us__body {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

/* Left image: fixed width, crops to the height set by the right cards */
.incubation-why-us__media {
  flex: 0 0 558px;
  position: relative;
  overflow: hidden;
}

.incubation-why-us__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Right cards: 2-column grid (2 rows × 2 cols) */
.incubation-why-us__cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  align-content: start;
}

/* ── Single card ── */
.incubation-why-us__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Icon container: light-blue tinted box with border */
.incubation-why-us__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: fit-content;
  padding: var(--spacing-md);
  background: var(--incubation-icon-bg);
  border: 1px solid var(--incubation-icon-border);
  border-radius: var(--incubation-icon-radius);
}

.incubation-why-us__icon img {
  display: block;
  width: var(--incubation-icon-size);
  height: var(--incubation-icon-size);
}

/* Card text block */
.incubation-why-us__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.incubation-why-us__card-title {
  font-weight: 700;
  font-size: var(--font-size-h4);
  color: var(--color-black);
  line-height: normal;
  margin: 0;
}

.incubation-why-us__card-desc {
  font-size: var(--font-size-body-md);
  color: var(--color-grey);
  line-height: normal;
  margin: 0;
}

/* ── Tablet landscape (1025–1319 px): shrink image proportionally ── */
@media (min-width: 1025px) and (max-width: 1319px) {
  .incubation-why-us__body {
    gap: 32px;
  }

  .incubation-why-us__media {
    flex: 0 0 400px;
  }
}

/* ── Tablet portrait (769–1024 px): equal-width columns ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .incubation-why-us__body {
    flex-direction: column;
    gap: 24px;
  }

  .incubation-why-us__media {
    /* flex: 0 0 45%; */
  }
}

/* ── Mobile (≤ 768 px): stack; image needs explicit height (abs-positioned) ── */
@media (max-width: 768px) {
  .incubation-why-us__wrap {
    gap: 32px;
  }

  .incubation-why-us__body {
    flex-direction: column;
    gap: 24px;
  }

  .incubation-why-us__media {
    flex: none;
    height: 260px;
  }

  .incubation-why-us__card {
    align-items: center;
  }

  .incubation-why-us__card-text {
    align-items: center;
  }

  .incubation-why-us__card-desc {
    text-align: center;
  }

  .incubation-why-us__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .incubation-why-us__heading {
    font-size: var(--font-size-h2-mobile);
  }
}