/*
Elementor setup:
1. Add the class `meiko-person-section` to each target section or container.
2. Paste one matching HTML block from meiko-elementor-person-images.html into an HTML widget inside that section.
3. Enqueue this CSS via the child theme (functions.php) or paste into Elementor Custom CSS.
*/

.meiko-person-section {
  position: relative;
  overflow: visible;
}

.meiko-figure {
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.meiko-figure img {
  display: block;
  height: auto;
  max-width: none;
  width: 100%;
}

/* 1. Hero — right side, bottom-aligned */
.meiko-figure-hero {
  bottom: -8px;
  right: clamp(12px, 5vw, 72px);
  width: clamp(240px, 25vw, 420px);
}

/* 2. Concept — left side */
.meiko-figure-concept {
  left: clamp(12px, 2vw, 32px);
  top: clamp(8px, 1vw, 20px);
  width: clamp(180px, 20vw, 300px);
}

/* 3. How We Build — right side */
.meiko-figure-build {
  right: clamp(8px, 2vw, 28px);
  top: clamp(-24px, -1vw, -8px);
  width: clamp(120px, 12vw, 220px);
}

/* 4. Services / Home Features — right side */
.meiko-figure-services {
  right: clamp(8px, 3vw, 40px);
  bottom: -12px;
  width: clamp(120px, 13vw, 200px);
}

/* 5. Journey — right side, bottom-aligned */
.meiko-figure-journey {
  bottom: -18px;
  right: clamp(0px, 1.5vw, 24px);
  width: clamp(140px, 14vw, 220px);
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .meiko-figure-hero {
    right: 12px;
    width: min(34vw, 320px);
  }

  .meiko-figure-concept {
    left: 8px;
    width: min(28vw, 220px);
  }

  .meiko-figure-build {
    right: 0;
    top: -12px;
    width: min(18vw, 150px);
  }

  .meiko-figure-services {
    right: 4px;
    width: min(18vw, 150px);
  }

  .meiko-figure-journey {
    right: -4px;
    width: min(18vw, 150px);
  }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .meiko-figure {
    opacity: 0.88;
  }

  .meiko-figure-hero {
    bottom: -4px;
    right: -8px;
    width: min(54vw, 220px);
  }

  .meiko-figure-concept {
    left: 0;
    top: -8px;
    width: min(44vw, 170px);
  }

  .meiko-figure-build {
    right: -6px;
    top: -6px;
    width: min(24vw, 110px);
  }

  .meiko-figure-services {
    right: -4px;
    bottom: -6px;
    width: min(24vw, 110px);
  }

  .meiko-figure-journey {
    bottom: -8px;
    right: -8px;
    width: min(28vw, 120px);
  }
}