/* ==========================================================================
   KOBIL — Products/IDentity — Section: Features
   ("Core capabilities of IDentity")
   Weiße Sektionskarte (Radius 12, 690px hoch) mit abgeschrägter Ecke unten
   rechts. Links Textspalte mit Feature-Liste (aktiver erster Eintrag mit
   Beschreibung), rechts Schild-Visual mit Fingerprint und Capability-Badges,
   dahinter ein weicher blauer Glow (aus Figma gerendert, von der Karte
   geclippt).
   ========================================================================== */

.sec-identity-features {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 690px;
  padding: 40px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  /* Abgeschrägte Ecke unten rechts (Diagonale (1355,619) → (1308,681) aus Figma) */
  -webkit-mask-image: linear-gradient(307.7deg, transparent 47px, #000 48.5px);
  mask-image: linear-gradient(307.7deg, transparent 47px, #000 48.5px);
}

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

.sec-identity-features__content {
  position: relative;
  /* Figma zentriert die Textspalte im 700px-Node (y 84 … 616), die Karte ist
     aber nur 690px hoch — die Spalte sitzt also 5px unter der Kartenmitte. */
  top: 5px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
  width: 611px;
  max-width: 100%;
}

.sec-identity-features__eyebrow {
  gap: 10px;
  color: var(--navy-70);
  letter-spacing: 0.48px;
}

.sec-identity-features__eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-identity-features__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sec-identity-features__title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.sec-identity-features__title-accent {
  color: var(--blue);
}

.sec-identity-features__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 574px;
  max-width: 100%;
}

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

/* ---- Feature-Liste ---- */

.sec-identity-features__list {
  display: flex;
  flex-direction: column;
  width: 507px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sec-identity-features__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  /* 16px Padding rundum wie in Figma, unten 15px + 1px Border = 55px
     Zeilenhöhe (Figma zeichnet die Linie als 0-hohes Overlay). */
  padding: 16px 16px 15px;
  border-radius: 2px;
  border-bottom: 1px solid var(--navy-40);
}

.sec-identity-features__item--active {
  padding: 12px 16px;
  background: #f9fafd;
  border-bottom: none;
}

.sec-identity-features__item-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--navy-80);
}

.sec-identity-features__item-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--navy-80);
}

/* ---- Schild-Visual ----
   Der blaue Glow (Figma-Render) hängt im Visual-Container und skaliert in %
   mit — auf dem Desktop entspricht das Karte (376px, -187px), und die
   Kante zum eingebackenen Glow im Schild-Bild bleibt auf jeder Breite
   nahtlos. Opacity 0.85 gleicht den aufhellenden Overlay-Layer aus Figma
   aus. */

.sec-identity-features__visual {
  position: absolute;
  /* Figma: image-Frame bei y=0/right=4 — deckungsgleich mit der Karte. */
  top: 0;
  right: 4px;
  width: 729px;
  height: 690px;
  pointer-events: none;
}

.sec-identity-features__glow {
  position: absolute;
  top: -27.1%;
  left: -34.43%;
  width: 134.98%;
  height: 150.15%;
  max-width: none;
  opacity: 0.85;
  user-select: none;
}

.sec-identity-features__shield {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

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

@media (max-width: 1024px) {
  .sec-identity-features {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-height: 0;
    padding: 48px 40px 24px;
  }

  .sec-identity-features__content {
    top: 0;
    width: 100%;
  }

  .sec-identity-features__intro,
  .sec-identity-features__list {
    width: 100%;
  }

  .sec-identity-features__visual {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
    width: min(100%, 640px);
    height: auto;
  }

  .sec-identity-features__shield {
    height: auto;
  }
}

@media (max-width: 768px) {
  .sec-identity-features {
    padding: 40px 24px 16px;
    -webkit-mask-image: linear-gradient(307.7deg, transparent 32px, #000 33.5px);
    mask-image: linear-gradient(307.7deg, transparent 32px, #000 33.5px);
  }

  .sec-identity-features__title {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 480px) {
  .sec-identity-features {
    padding: 32px 20px 12px;
  }

  .sec-identity-features__title {
    font-size: 28px;
    line-height: 36px;
  }

  .sec-identity-features__item {
    padding: 14px 12px;
  }

  .sec-identity-features__item--active {
    padding: 12px;
  }
}