/* ==========================================================================
   KOBIL — Products/mPower — Sektion: Approach ("aproach", Figma 16652:22347,
   1360x728). Weiße Karte auf navy-20-Grund, weicher blauer Glow (#5BA2FF,
   20 %, Layer-Blur 198.5 — als gerendertes WebP exakt 1360x728 gebacken,
   Live-Blur wäre in Chromium fehleranfällig).
   Links: Eyebrow "APPROACH", H2 "The Platform (blau) Between Your Workforce
   and Your Systems" + Fließtext. Rechts: Device-Komposition (Laptop-Dashboard,
   zwei schwebende UI-Karten-Ausschnitte, iPhone) — komplett in cqw-Einheiten
   (Container: 736.882px = 100cqw, 1px = 0.13571cqw), skaliert daher
   proportional pixelgenau.
   ========================================================================== */

.sec-mpower-approach {
  position: relative;
  isolation: isolate;
  height: 728px;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 0 40px;
}

/* ---- Hintergrund-Glow (dekorativ, füllt die ganze Karte) ---------------- */

.sec-mpower-approach__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ---- Textspalte links ---------------------------------------------------- */

.sec-mpower-approach__text {
  position: relative;
  top: 1px; /* Figma: Zentrum +1px */
  flex: 0 0 auto;
  width: 455px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Eyebrow: Figma-Variante mit 12px-Punkt, 10px Gap, ls 4% (0.48px), navy-70 */
.sec-mpower-approach .eyebrow {
  gap: 10px;
  letter-spacing: 0.48px;
  color: var(--navy-70);
}

.sec-mpower-approach .eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-mpower-approach__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.sec-mpower-approach__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.sec-mpower-approach__title-accent {
  color: var(--blue);
}

.sec-mpower-approach__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-70);
}

/* ---- Device-Komposition rechts (Figma "Image", 736.882x444.5) ------------ */

.sec-mpower-approach__figure {
  position: relative;
  flex: 0 1 736.882px;
  min-width: 0;
  width: 736.882px;
  aspect-ratio: 736.882 / 444.5;
  container-type: inline-size;
}

.sec-mpower-approach__figure img {
  max-width: none;
}

/* Laptop ("Desktop-gray", 669x428 @ 68/0) */
.sec-mpower-approach__laptop {
  position: absolute;
  left: 9.2281cqw;
  top: 0;
  width: 90.7897cqw;
  height: 58.0837cqw;
  background: #f7f7f7;
  border: 0.1306cqw solid #eaedf2;
  border-radius: 2.35cqw;
  filter: drop-shadow(0.4071cqw 1.4928cqw 1.2892cqw rgba(1, 42, 112, 0.12));
}

/* Screen-Ausschnitt (645x398 @ 12/16) */
.sec-mpower-approach__laptop-screen {
  position: absolute;
  left: 1.4979cqw; /* 12px minus 0.962px Rahmen (Padding-Box-Ursprung) */
  top: 2.0407cqw;
  width: 87.533cqw;
  height: 54.0124cqw;
  border-radius: 0.1934cqw;
  overflow: hidden;
  background: var(--white);
}

/* Dashboard-Bild 684.15x527.35 (Screen zeigt linken/oberen Ausschnitt) */
.sec-mpower-approach__laptop-ui {
  position: absolute;
  left: 0.0525cqw;
  top: -0.0216cqw;
  width: 92.8459cqw;
  height: 71.5665cqw;
}

/* Lautsprecher + Kamera-Punkte im Bezel */
.sec-mpower-approach__speaker {
  position: absolute;
  left: calc(50% + 3.0617cqw);
  top: 0.7098cqw;
  transform: translateX(-50%);
  width: 7.802cqw;
  height: 0.5803cqw;
  border-radius: 0.5158cqw;
  background: #dee1e7;
}

.sec-mpower-approach__cam {
  position: absolute;
  top: 0.7098cqw;
  transform: translateX(-50%);
  width: 0.5803cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dee1e7;
}

.sec-mpower-approach__cam--a {
  left: calc(50% + 7.8332cqw);
}

.sec-mpower-approach__cam--b {
  left: calc(50% - 2.4197cqw);
}

/* Schwebende UI-Karten (257.817x202.02 @ y 290.523, Ausschnitte desselben
   Dashboards) */
.sec-mpower-approach__card {
  position: absolute;
  top: 39.4266cqw;
  width: 34.9885cqw;
  height: 27.416cqw;
  border: 0.0783cqw solid #e7eaf0;
  border-radius: 0.7833cqw;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0.3917cqw 0.9139cqw 2.7416cqw 0 rgba(1, 42, 112, 0.05);
}

.sec-mpower-approach__card-ui {
  position: absolute;
  top: -37.4077cqw;
  width: 92.8459cqw;
  height: 71.5665cqw;
}

/* "Upcoming Events" links */
.sec-mpower-approach__card--events {
  left: 22.9236cqw;
}

.sec-mpower-approach__card--events .sec-mpower-approach__card-ui {
  left: -12.032cqw;
}

/* "Pending Tasks" rechts */
.sec-mpower-approach__card--tasks {
  left: 59.0867cqw;
}

.sec-mpower-approach__card--tasks .sec-mpower-approach__card-ui {
  left: -48.1937cqw;
}

/* iPhone 14 Pro / light (155x311.867 @ -11/147) */
.sec-mpower-approach__phone {
  position: absolute;
  left: -1.4928cqw;
  top: 19.9493cqw;
  width: 21.035cqw;
  height: 42.3234cqw;
  filter: drop-shadow(0.2714cqw 0.6336cqw 1.3305cqw rgba(1, 42, 112, 0.12));
}

.sec-mpower-approach__phone-screen {
  position: absolute;
  left: 1.2659cqw;
  top: 1.0777cqw;
  width: 18.5679cqw;
  height: 40.2531cqw;
  border-radius: 2.4568cqw;
  overflow: hidden;
  background: var(--white);
}

.sec-mpower-approach__phone-ui {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.sec-mpower-approach__phone-body {
  position: absolute;
  left: 0.132cqw;
  top: 0.132cqw;
  width: 20.8352cqw;
  height: 42.1428cqw;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Unter ~1392px passt die 455+737-Kombination nicht mehr in die Karte:
   Figur schrumpfen lassen (cqw skaliert alles proportional mit). */
@media (max-width: 1200px) {
  .sec-mpower-approach {
    height: auto;
    padding: 64px 40px 88px;
  }
}

/* Stapeln: Text oben, Devices darunter */
@media (max-width: 1024px) {
  .sec-mpower-approach {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 64px 40px;
  }

  .sec-mpower-approach__text {
    top: 0;
    width: 100%;
    max-width: 560px;
  }

  .sec-mpower-approach__figure {
    flex: 0 0 auto;
    width: min(100%, 736.882px);
    align-self: center;
    /* Platz für die unten überstehenden Karten (+ Schatten) */
    margin-bottom: 9.5%;
  }

  /* Glow-Zentrum über der Figur halten */
  .sec-mpower-approach__bg {
    object-position: 65% 50%;
  }
}

@media (max-width: 768px) {
  .sec-mpower-approach {
    padding: 56px 32px;
    gap: 40px;
  }

  .sec-mpower-approach__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .sec-mpower-approach {
    padding: 48px 20px;
  }
}