/* ==========================================================================
   KOBIL — Company: Careers (Figma 16578:18669 "WE ARE KOBIL", 1280x873)
   Eyebrow + H3 + Text links oben, Team-Foto-Mosaik (3 Reihen à 90px-Kacheln,
   links per Maske ausgeblendet, rechts per Verlaufs-Panel), Contact-Button
   mit Eckkerbe unten mittig. Blur-Vektoren aus Figma als bg-wash.webp gebacken,
   weiße Rauten-Blobs ("team line") als SVG exakt positioniert.
   ========================================================================== */

.sec-company-careers {
  position: relative;
  overflow: clip;
  background: #fff url("/assets/company/careers/bg-wash.webp") no-repeat center top / cover;
}

/* Figma-Frame ist 1280 breit — zentriert in der 1360er-Sektionsfläche.
   Höhenbudget: 80 + 152 (Head) + 98 + 350 (Mosaik) + 65 + 48 (CTA) + 80 = 873 */
.sec-company-careers__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* ---- Deko: weiße Rauten-Blobs (Figma 16578:18703/18704, über dem Mosaik) ---- */

.sec-company-careers__blob {
  position: absolute;
  max-width: none;
  pointer-events: none;
  z-index: 3;
}

/* 16578:18704 — Bogen oben rechts (Spitze bei ~1039/192) */
.sec-company-careers__blob--tr {
  left: 197px;
  top: -1045.3px;
  width: 1834px;
  height: 1242px;
  transform: rotate(6.91deg);
}

/* 16578:18703 — Bogen unten links (Spitze bei ~125/496) */
.sec-company-careers__blob--bl {
  left: -864.9px;
  top: 491.2px;
  width: 1833.7px;
  height: 1230.8px;
  transform: rotate(6.84deg);
}

/* ---- Kopfzeile ---- */

.sec-company-careers__head {
  position: relative;
  z-index: 4;
  max-width: 738px;
}

/* Figma Tagline/desktop: 12px Dot, Gap 10, Tracking 0.48 — als Flex,
   damit keine fremde Zeilen-Strut die Eyebrow-Zeile anhebt */
.sec-company-careers__eyebrow {
  display: flex;
  gap: 10px;
  color: var(--navy-70);
  letter-spacing: 0.48px;
  line-height: 18px;
}

.sec-company-careers__eyebrow::before {
  width: 12px;
  height: 12px;
}

/* Header/Desktop/H3: 32/42 Bold */
.sec-company-careers__title {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  color: var(--navy);
}

.sec-company-careers__title-accent {
  color: var(--blue);
}

/* Body L: 18/26 */
.sec-company-careers__text {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--navy-70);
}

/* ---- Team-Mosaik (Figma "images": Kacheln 90px, Gap 70, Reihen-Gap 40) ---- */

/* Die Reihen sind absolut positioniert: so tragen die fixen Kachelbreiten
   nicht zur Min-Content-Breite des flushen Surface-Stapels bei (Mobile!).
   Die Border-Box umfasst Reihe-2-Überstand und Schatten, da CSS-Masken auf
   die Border-Box clippen (mask-clip). 100px-Puffer wird über negative
   Margins neutralisiert: Kacheln beginnen bei y=330 (Reihen bei 100/230/360). */
.sec-company-careers__mosaic {
  position: relative;
  z-index: 1;
  /* = 1360px bei voller Breite (1200px Contentbox + 160), bleibt aber fluid,
     damit die Sektion zwischen 1025 und 1439px keine Scrollbreite erzeugt */
  width: calc(100% + 160px);
  height: 550px;
  margin: -2px 0 -100px -40px;
  /* Linker Fade aus Figma-Maske (1360x740 bei x=0 der Border-Box):
     transparent bis 74.5px, 30% bei 213px, deckend ab 308.6px */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 74.5px, rgba(0, 0, 0, 0.3) 213px, #000 308.6px);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 74.5px, rgba(0, 0, 0, 0.3) 213px, #000 308.6px);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.sec-company-careers__row {
  position: absolute;
  left: 155px;
  display: flex;
  gap: 70px;
}

.sec-company-careers__row:nth-child(1) {
  top: 100px;
}

/* Reihe 2 (8 Kacheln, 1210px) ragt links wie im Figma 80px über */
.sec-company-careers__row:nth-child(2) {
  top: 230px;
  left: 75px;
}

.sec-company-careers__row:nth-child(3) {
  top: 360px;
}

.sec-company-careers__tile {
  position: relative;
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 11px 9px 35px 0 rgba(17, 69, 203, 0.18);
}

/* Figma-Crops: absolut positionierte Bilder in Prozent der Kachel */
.sec-company-careers__tile img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* 1px-Rahmen liegt wie im Figma über dem Bild */
.sec-company-careers__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #61adf8;
  border-radius: 8px;
  pointer-events: none;
}

.sec-company-careers__tile--plain::after {
  content: none;
}

.sec-company-careers__tile--p62 img { left: -25%; top: 0; width: 181.56%; height: 121.04%; }
.sec-company-careers__tile--p19 img { left: 0; top: -4.36%; width: 100%; height: 172.83%; }
.sec-company-careers__tile--p08 img { left: -89.54%; top: -0.05%; width: 243.48%; height: 136.94%; }
.sec-company-careers__tile--p57 img { left: -36.5%; top: -23.53%; width: 136.67%; height: 205.5%; }
.sec-company-careers__tile--p26 img { left: -117.21%; top: -10.63%; width: 216.87%; height: 144.58%; }
.sec-company-careers__tile--p16 img { left: -12.87%; top: 0; width: 177.81%; height: 100%; }
.sec-company-careers__tile--p03 img { left: -82.11%; top: -0.34%; width: 222.99%; height: 125.41%; }
.sec-company-careers__tile--p17 img { left: -34.17%; top: -12.22%; width: 168.33%; height: 112.22%; }
.sec-company-careers__tile--p49 img { left: -74.01%; top: 0; width: 177.81%; height: 100%; }
.sec-company-careers__tile--p28 img { left: -14.65%; top: -29.48%; width: 129.29%; height: 159.21%; }
.sec-company-careers__tile--p52 img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-company-careers__tile--p27 img { left: -48.6%; top: -0.45%; width: 156.67%; height: 104.44%; }

/* ---- Rechtes Verlaufs-Panel (Figma 16578:18702, 450px, über dem Mosaik) ---- */

.sec-company-careers__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -40px;
  width: 490px;
  z-index: 2;
  pointer-events: none;
  /* Stops in px auf die 450px-Figma-Breite gepinnt (Panel selbst ist 40px breiter) */
  background: linear-gradient(89.6deg, rgba(239, 243, 255, 0) 3px, rgb(239, 244, 255) 370px);
}

/* ---- CTA-Button mit Eckkerbe (Maske wie Footer-Buttons) ---- */

.sec-company-careers__cta {
  position: relative;
  z-index: 4;
  margin-top: 65px;
  display: flex;
  justify-content: center;
}

.sec-company-careers__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 8px 32px 8px 24px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--white);
  white-space: nowrap;
}

.sec-company-careers__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue);
  transition: background-color var(--dur) var(--ease);
  -webkit-mask:
    url("/assets/company/careers/btn-left.svg") left top / calc(100% - 35.8px) 100% no-repeat,
    url("/assets/company/careers/btn-right.svg") right top / 79.5px 100% no-repeat;
  mask:
    url("/assets/company/careers/btn-left.svg") left top / calc(100% - 35.8px) 100% no-repeat,
    url("/assets/company/careers/btn-right.svg") right top / 79.5px 100% no-repeat;
}

.sec-company-careers__btn:hover::before {
  background: #1e4fd6;
}

.sec-company-careers__btn:active {
  transform: translateY(1px);
}

/* ---- Tablet (≤1024): Mosaik zentriert, Ränder beidseitig ausblenden ---- */

@media (max-width: 1024px) {
  .sec-company-careers__inner {
    padding: 64px 32px;
  }

  .sec-company-careers__mosaic {
    width: calc(100% + 64px);
    margin: -36px -32px -100px;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, 0));
  }

  /* Reihen mittig — Reihe 2 behält ihren Versatz durch die eigene Breite */
  .sec-company-careers__row {
    left: 50%;
    transform: translateX(-50%);
  }

  .sec-company-careers__row:nth-child(2) {
    left: 50%;
  }

  .sec-company-careers__fade {
    display: none;
  }

  .sec-company-careers__cta {
    margin-top: 56px;
  }
}

/* ---- Mobile (Figma M-Company 16578:18888: Kacheln 56px, Gap 32,
   Text ab y=60, Button 40px hoch, 60px Grundlinien-Padding) ---- */

@media (max-width: 768px) {
  .sec-company-careers__inner {
    padding: 60px 16px;
  }

  .sec-company-careers__blob {
    display: none;
  }

  /* Tagline/mobile: 8px Dot, Gap 8 */
  .sec-company-careers__eyebrow {
    gap: 8px;
  }

  .sec-company-careers__eyebrow::before {
    width: 8px;
    height: 8px;
  }

  .sec-company-careers__title {
    margin-top: 24px;
    font-size: 24px;
    line-height: 32px;
  }

  .sec-company-careers__text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .sec-company-careers__mosaic {
    width: calc(100% + 32px);
    height: 372px;
    margin: -38px -16px -70px;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0));
  }

  /* Kacheln 56px, Gap 32, Reihenabstand 88 (Figma M: y 7.5/95.5/183.5) */
  .sec-company-careers__row {
    gap: 32px;
  }

  .sec-company-careers__row:nth-child(1) {
    top: 70px;
  }

  .sec-company-careers__row:nth-child(2) {
    top: 158px;
  }

  .sec-company-careers__row:nth-child(3) {
    top: 246px;
  }

  .sec-company-careers__tile {
    width: 56px;
    height: 56px;
    box-shadow: 7px 6px 22px 0 rgba(17, 69, 203, 0.18);
  }

  .sec-company-careers__cta {
    margin-top: 40px;
  }

  /* Button Variant mobile: 136x40 */
  .sec-company-careers__btn {
    height: 40px;
    padding: 8px 26px 8px 20px;
    font-size: 14px;
    line-height: 18px;
  }

  .sec-company-careers__btn::before {
    -webkit-mask:
      url("/assets/company/careers/btn-left.svg") left top / calc(100% - 29.8px) 100% no-repeat,
      url("/assets/company/careers/btn-right.svg") right top / 66.25px 100% no-repeat;
    mask:
      url("/assets/company/careers/btn-left.svg") left top / calc(100% - 29.8px) 100% no-repeat,
      url("/assets/company/careers/btn-right.svg") right top / 66.25px 100% no-repeat;
  }
}