/*
 * InspireSphere Theme — Ecosystem Partners Page
 *
 * Covers:
 *   1. Innovation Network section   — title + description header
 *   2. Infographic diagram          — 1200×727 px absolute-positioned SVG mosaic
 *   3. Mobile / tablet partner cards — shown when diagram is hidden (< 1320 px)
 *
 * Diagram geometry source: Figma node 89:2519 (1200 × 727 px container).
 * All pixel positions computed from Figma's inset-[top% right% bottom% left%] values.
 *
 * NOTE: ecosystem-hero and ecosystem-image reuse .about-hero__* / .about-image__*
 *       styles — no duplicate rules needed here.
 */


/* ══════════════════════════════════════════════════════════════════
   1. INNOVATION NETWORK SECTION WRAPPER
   ══════════════════════════════════════════════════════════════════ */

.section--innovation-network {
  padding-block: 80px;
  background: #fcfcfc;
  overflow: hidden;
  /* prevent diagram spilling on <1320px viewports */
}

/* ── Centred header text ────────────────────────────────────────── */
.innovation-network__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 40px;
}

.innovation-network__title {
  font-size: 36px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-dark, #262626);
  line-height: 1;
  margin: 0;
}

.innovation-network__desc {
  font-size: var(--font-size-body-md, 16px);
  color: var(--color-dark, #262626);
  line-height: 1.6;
  max-width: 860px;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════
   2. INFOGRAPHIC DIAGRAM  (desktop ≥ 1320 px)
   ══════════════════════════════════════════════════════════════════ */

/* Container — exact Figma dimensions, centred */
.eco-diag {
  position: relative;
  width: 1200px;
  height: 727px;
  background: #fcfcfc;
  overflow: hidden;
  margin: 0 auto;
  flex-shrink: 0;
}

/* All inner pieces share position:absolute */
.eco-diag__piece {
  position: absolute;
  display: block;
}

/* ── SVG pieces (sizes and positions from Figma inset percentages) ─
 *
 * Formula:  px = percentage × container-dimension
 * Container: width = 1200 px, height = 727 px
 *
 * Each rule: top / left / width / height
 * ─────────────────────────────────────── */

/* Connector dots — Mentors cluster (top-left) */
.eco-diag__g0 {
  top: 179px;
  left: 397px;
  width: 46px;
  height: 81px;
}

.eco-diag__g1 {
  top: 246px;
  left: 429px;
  width: 21px;
  height: 21px;
}

.eco-diag__g2 {
  top: 172px;
  left: 389px;
  width: 21px;
  height: 21px;
}

/* Connector dots — Universities cluster (bottom-left) */
.eco-diag__g3 {
  top: 435px;
  left: 127px;
  width: 100px;
  height: 46px;
}

.eco-diag__g4 {
  top: 468px;
  left: 213px;
  width: 21px;
  height: 21px;
}

.eco-diag__g5 {
  top: 428px;
  left: 120px;
  width: 21px;
  height: 21px;
}

/* Connector dots — Investors cluster (top-right) */
.eco-diag__g6 {
  top: 179px;
  left: 759px;
  width: 46px;
  height: 81px;
}

.eco-diag__g7 {
  top: 246px;
  left: 751px;
  width: 21px;
  height: 21px;
}

.eco-diag__g8 {
  top: 172px;
  left: 791px;
  width: 21px;
  height: 21px;
}

/* Connector dots — Startup Community cluster (bottom-right) */
.eco-diag__g9 {
  top: 435px;
  left: 975px;
  width: 99px;
  height: 46px;
}

.eco-diag__g10 {
  top: 468px;
  left: 967px;
  width: 21px;
  height: 21px;
}

.eco-diag__g11 {
  top: 428px;
  left: 1060px;
  width: 21px;
  height: 21px;
}

/* Main arc sector shapes */
.eco-diag__g12 {
  top: 257px;
  left: 331px;
  width: 281px;
  height: 397px;
}

/* left vertical arc  */
.eco-diag__g13 {
  top: 257px;
  left: 599px;
  width: 281px;
  height: 397px;
}

/* right vertical arc */
.eco-diag__g14 {
  top: 363px;
  left: 225px;
  width: 397px;
  height: 281px;
}

/* left horizontal    */
.eco-diag__g15 {
  top: 363px;
  left: 589px;
  width: 397px;
  height: 281px;
}

/* right horizontal   */

/* Central bottom vector connector */
.eco-diag__vec {
  top: 478px;
  left: 446px;
  width: 318px;
  height: 159px;
}

/* Circular icons — Universities (left) and Startup Community (right) */
.eco-diag__g16 {
  top: 425px;
  left: 178px;
  width: 169px;
  height: 169px;
}

.eco-diag__g17 {
  top: 425px;
  left: 861px;
  width: 169px;
  height: 169px;
}

/* Mentors arc: outer → inner → rotated connector → icon */
.eco-diag__v1 {
  top: 225px;
  left: 376px;
  width: 169px;
  height: 169px;
}

.eco-diag__v2 {
  top: 235px;
  left: 395px;
  width: 132px;
  height: 132px;
}

/* v3 — rotated connector arc (-80.78°) centred in a flex wrapper */
.eco-diag__v3-wrap {
  top: 237px;
  left: 397px;
  width: 129px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-diag__v3-rot {
  width: 111px;
  height: 111px;
  transform: rotate(-80.78deg);
  flex-shrink: 0;
}

.eco-diag__v3-rot img {
  display: block;
  width: 100%;
  height: 100%;
}

.eco-diag__g18 {
  top: 271px;
  left: 431px;
  width: 60px;
  height: 60px;
}

/* mentoring icon */

/* Investors arc: outer → inner → rotated connector → icon */
.eco-diag__v4 {
  top: 225px;
  left: 655px;
  width: 169px;
  height: 169px;
}

.eco-diag__v5 {
  top: 235px;
  left: 673px;
  width: 132px;
  height: 132px;
}

/* v6 — rotated connector arc (-45°) centred in a flex wrapper */
.eco-diag__v6-wrap {
  top: 222px;
  left: 661px;
  width: 157px;
  height: 157px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-diag__v6-rot {
  width: 111px;
  height: 111px;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.eco-diag__v6-rot img {
  display: block;
  width: 100%;
  height: 100%;
}

.eco-diag__g19 {
  top: 271px;
  left: 709px;
  width: 60px;
  height: 60px;
}

/* investors icon */

/* Center InspireSphere globe/growth logo — cropped from full logo PNG */
.eco-diag__logo {
  top: 495px;
  left: 504px;
  width: 206px;
  height: 206px;
  overflow: hidden;
}

.eco-diag__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Text labels ──────────────────────────────────────────────────
 * Positioned at exact pixel values from Figma node 89:2591–89:2600
 * ─────────────────────────────────────────────────────────────── */
.eco-diag__label {
  position: absolute;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eco-diag__label--mentors {
  left: 304px;
  top: 25px;
}

.eco-diag__label--investors {
  left: 710px;
  top: 36px;
}

.eco-diag__label--univ {
  left: 33px;
  top: 230px;
}

.eco-diag__label--startup {
  left: 986px;
  top: 319px;
}

.eco-diag__label-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue, #034083);
  line-height: 1.2;
  margin: 0;
}

.eco-diag__label-list {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
  font-size: var(--font-size-body-md, 16px);
  color: var(--color-dark-navy, #061c3d);
  line-height: 1.5;
}

.eco-diag__label-list li {
  margin-bottom: 0;
}

/* Piece images: fill their positioned box */
.eco-diag__piece img {
  display: block;
  width: 100%;
  height: 100%;
}


/* ══════════════════════════════════════════════════════════════════
   3. MOBILE / TABLET PARTNER CARDS  (< 1320 px)
   ══════════════════════════════════════════════════════════════════ */

/* Diagram: visible only on large desktop */
.eco-diag {
  display: none;
  /* hidden by default; enabled in desktop MQ below */
}

/* Mobile diagram: visible only on ≤ 768 px */
.eco-diag--mobile {
  display: none;
  /* shown via media query */
}

/* Partner cards: shown on small/medium screens */
.innovation-network__partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.innovation-network__partner {
  background: #fff;
  border: 1px solid var(--color-light-grey, #f1f1f3);
  border-radius: var(--radius-md, 8px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.innovation-network__partner-title {
  font-size: var(--font-size-body-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue, #034083);
  line-height: 1.3;
  margin: 0;
}

.innovation-network__partner ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: var(--font-size-body-md, 16px);
  color: var(--color-dark-navy, #061c3d);
  line-height: 1.6;
}

.innovation-network__partner li {
  margin-bottom: 4px;
}

/* ── Tablet + Desktop (≥ 769 px): show diagram, hide mobile diagram + cards ─ */
@media (min-width: 769px) {
  .eco-diag {
    display: block;
  }

  .eco-diag--mobile {
    display: none;
  }

  .innovation-network__partners {
    display: none;
  }
}

/* ── Tablet scaling: zoom down the 1200×727 canvas to fit ────────── */
@media (min-width: 769px) and (max-width: 900px) {
  .eco-diag {
    zoom: 0.55;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .eco-diag {
    zoom: 0.68;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .eco-diag {
    zoom: 0.82;
  }
}

@media (min-width: 1201px) and (max-width: 1319px) {
  .eco-diag {
    zoom: 0.95;
  }
}

/* ── Mobile (≤ 768 px): single-column partner cards ─────────────── */
@media (max-width: 768px) {
  .section--innovation-network {
    padding-block: 48px;
  }

  .innovation-network__title {
    font-size: 24px;
    text-align: left;
  }

  .innovation-network__header {
    align-items: flex-start;
    text-align: left;
  }

  .innovation-network__desc {
    text-align: left;
  }

  /* ── Show mobile diagram, hide partner cards on ≤ 768 px ── */
  .eco-diag--mobile {
    display: block;
  }

  .innovation-network__partners {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   4. MOBILE DIAGRAM  (≤ 768 px) — Figma 111:6113
   ══════════════════════════════════════════════════════════════════ */

/*
 * Outer portrait wrapper: 343 × 586 px.
 * Clips the inner landscape canvas after rotation.
 */
.eco-diag--mobile {
  width: 343px;
  height: 586px;
  position: relative;
  overflow: hidden;
}

/*
 * Inner landscape canvas: 586 × 343 px.
 * Rotated 90° CW → visually appears as portrait 343 × 586.
 * Centred inside the 343 × 586 wrapper:
 *   top  = (586 − 343) / 2 = 121.5 px
 *   left = (343 − 586) / 2 = −121.5 px
 */
.eco-diag--mobile__inner {
  position: absolute;
  width: 586px;
  height: 343px;
  top: 121.5px;
  left: -121.5px;
  background: #fcfcfc;
  overflow: hidden;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

/* All SVG pieces: absolutely positioned within the 586 × 343 canvas */
.eco-m__piece {
  position: absolute;
  display: block;
}

.eco-m__piece>img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Connector dot clusters ──────────────────────────────────────── */
.eco-m__g0 {
  top: 124px;
  left: 199px;
  width: 27px;
  height: 42px;
}

.eco-m__g1 {
  top: 157px;
  left: 217px;
  width: 9px;
  height: 9px;
}

.eco-m__g2 {
  top: 124px;
  left: 199px;
  width: 9px;
  height: 9px;
}

.eco-m__g3 {
  top: 238px;
  left: 80px;
  width: 50px;
  height: 27px;
}

.eco-m__g4 {
  top: 256px;
  left: 121px;
  width: 9px;
  height: 9px;
}

.eco-m__g5 {
  top: 238px;
  left: 80px;
  width: 9px;
  height: 9px;
}

.eco-m__g6 {
  top: 124px;
  left: 360px;
  width: 27px;
  height: 42px;
}

.eco-m__g7 {
  top: 157px;
  left: 360px;
  width: 9px;
  height: 9px;
}

.eco-m__g8 {
  top: 124px;
  left: 378px;
  width: 9px;
  height: 9px;
}

.eco-m__g9 {
  top: 238px;
  left: 456px;
  width: 50px;
  height: 27px;
}

.eco-m__g10 {
  top: 256px;
  left: 456px;
  width: 9px;
  height: 9px;
}

.eco-m__g11 {
  top: 238px;
  left: 497px;
  width: 9px;
  height: 9px;
}

/* ── Arc sector shapes ───────────────────────────────────────────── */
.eco-m__g12 {
  top: 162px;
  left: 174px;
  width: 125px;
  height: 176px;
}

.eco-m__g13 {
  top: 162px;
  left: 292px;
  width: 125px;
  height: 176px;
}

.eco-m__g14 {
  top: 209px;
  left: 127px;
  width: 176px;
  height: 125px;
}

.eco-m__g15 {
  top: 209px;
  left: 288px;
  width: 176px;
  height: 125px;
}

/* ── Central bottom connector vector ─────────────────────────────── */
.eco-m__vec {
  top: 260px;
  left: 225px;
  width: 141px;
  height: 71px;
}

/* ── Corner circles ──────────────────────────────────────────────── */
.eco-m__g16 {
  top: 236px;
  left: 106px;
  width: 75px;
  height: 75px;
}

.eco-m__g17 {
  top: 236px;
  left: 409px;
  width: 75px;
  height: 75px;
}

/* ── Mentors arc (left node) ─────────────────────────────────────── */
.eco-m__v1 {
  top: 147px;
  left: 194px;
  width: 75px;
  height: 75px;
}

.eco-m__v2 {
  top: 152px;
  left: 202px;
  width: 58px;
  height: 58px;
}

/* v3-wrap: flex container centres the rotated connector */
.eco-m__v3-wrap {
  top: 153px;
  left: 203px;
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-m__v3-wrap>img {
  width: 49px;
  height: 49px;
  transform: rotate(-80.78deg);
  flex-shrink: 0;
}

/* g18: mentoring icon, centred on the connector midpoint */
.eco-m__g18-wrap {
  width: 24px;
  height: 24px;
  left: calc(50% - 62px);
  top: calc(50% + 9.5px);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.eco-m__g18-wrap>img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Investors arc (right node) ──────────────────────────────────── */
.eco-m__v4 {
  top: 147px;
  left: 317px;
  width: 75px;
  height: 75px;
}

.eco-m__v5 {
  top: 152px;
  left: 326px;
  width: 58px;
  height: 58px;
}

/* v6-wrap: flex container centres the rotated connector */
.eco-m__v6-wrap {
  top: 146px;
  left: 320px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-m__v6-wrap>img {
  width: 49px;
  height: 49px;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* g19: money-bag icon, centred on the connector midpoint */
.eco-m__g19-wrap {
  width: 24px;
  height: 24px;
  left: calc(50% + 62px);
  top: calc(50% + 9.5px);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.eco-m__g19-wrap>img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Center logo ─────────────────────────────────────────────────── */
.eco-m__logo-wrap {
  width: 62px;
  height: 62px;
  left: 50%;
  top: calc(50% + 140.47px);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.eco-m__logo-wrap>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Text labels ─────────────────────────────────────────────────── */
.eco-m__label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-m__label-title {
  font-size: 14px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue, #034083);
  line-height: normal;
  margin: 0;
  white-space: nowrap;
}

.eco-m__label-list {
  list-style: disc;
  padding-left: 21px;
  margin: 0;
  font-size: 14px;
  color: var(--color-dark-navy, #061c3d);
  line-height: normal;
}

/* Universities & Educational Institutions */
.eco-m__label--univ {
  left: 13px;
  top: 50px;
  width: 130px;
  height: 172px;
}

.eco-m__label--univ .eco-m__label-inner {
  transform: rotate(-90deg);
  width: 172px;
}

/* Mentors */
.eco-m__label--mentors {
  left: 217px;
  top: 0;
  width: 130px;
  height: 133px;
}

.eco-m__label--mentors .eco-m__label-inner {
  transform: rotate(-90deg);
  width: 133px;
}

/* Investors */
.eco-m__label--investors {
  left: 396px;
  top: 0;
  width: 88px;
  height: 181px;
}

.eco-m__label--investors .eco-m__label-inner {
  transform: rotate(-90deg);
  width: 181px;
}

/* Startup Community */
.eco-m__label--startup {
  left: 516px;
  top: 80px;
  width: 46px;
  height: 199px;
}

.eco-m__label--startup .eco-m__label-inner {
  transform: rotate(-90deg);
  width: 199px;
}