/* ==========================================================================
   KOBIL — Products/AI Trust — Section: Showcase (Figma 16645:22345)
   ("From Integration to Governed Deployment. Three Steps")
   Weiße Sektionskarte mit 3 Verlaufs-Karten (416x510, abgeschrägte Ecke
   unten rechts via SVG-Maske): Code-Editor-Mock, Configure-Panel, Radar.
   Figma: 1360x860, Content 1280px, Karten-Gap 16px.
   ========================================================================== */

/* DM Mono (nur Ziffern, 1.3 KB) für die Zeilennummern des Code-Editor-Mocks —
   die Seite lädt sonst nur Instrument Sans/Inter, der Fallback (SF Mono)
   weicht sichtbar von den Figma-Glyphen ab */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/products/ai-trust/showcase/dm-mono-digits.woff2") format("woff2");
  unicode-range: U+30-39;
}

.sec-ai-trust-showcase {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 80px 40px;
}

/* ---- Header ---- */

.sec-ai-trust-showcase__header {
  max-width: 848px;
  margin-bottom: 48px;
}

.sec-ai-trust-showcase__eyebrow {
  display: flex;
  gap: 10px;
  color: var(--navy-70);
  letter-spacing: 0.48px;
  margin-bottom: 24px;
}

.sec-ai-trust-showcase__eyebrow::before {
  width: 12px;
  height: 12px;
}

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

.sec-ai-trust-showcase__accent {
  display: block;
  color: var(--blue);
}

/* ---- Karten-Raster ---- */

.sec-ai-trust-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Karte: Verlaufs-Fläche, Form (r=8 + Schräge unten rechts) via SVG-Maske;
   der Verlaufs-Rand liegt als ::after ÜBER den Visuals (wie im Figma-Layering) */
.sec-ai-trust-showcase__card {
  position: relative;
  min-height: 510px;
  background: url("/assets/products/ai-trust/showcase/card-fill.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("/assets/products/ai-trust/showcase/card-shape.svg") center / 100% 100% no-repeat;
  mask: url("/assets/products/ai-trust/showcase/card-shape.svg") center / 100% 100% no-repeat;
  /* Maske macht alles außerhalb der Kartenbox ohnehin unsichtbar — clip
     verhindert nur, dass der absolut positionierte Editor-Mock auf schmalen
     Viewports Scrollbreite erzeugt */
  overflow: clip;
}

.sec-ai-trust-showcase__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/products/ai-trust/showcase/card-stroke.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 4;
}

.sec-ai-trust-showcase__card-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 32px 16px;
}

.sec-ai-trust-showcase__card-title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  color: var(--navy);
}

.sec-ai-trust-showcase__card-desc {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--navy-70);
}

/* Visual-Zone: füllt die Karte, Elemente sind an der Unterkante verankert
   (wie in Figma — wächst die Karte auf Mobile, rutschen die Visuals mit) */
.sec-ai-trust-showcase__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- Karte 1: Code-Editor-Mock ---- */

.sec-ai-trust-showcase__editor {
  position: absolute;
  left: 151.65px;
  bottom: -9.86px;
  width: 456.35px;
  height: 269.86px;
  background: var(--white);
  border: 0.859px solid #caeeff;
  border-radius: 20.63px 20.63px 20.63px 0;
}

/* vertikale Trennlinie zwischen Datei-Baum und Code */
.sec-ai-trust-showcase__editor::before {
  content: "";
  position: absolute;
  left: 90.9px;
  top: 0;
  width: 1px;
  height: 235px;
  background: var(--navy-20);
}

.sec-ai-trust-showcase__tree {
  position: absolute;
  left: 17.5px;
  top: 22.6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sec-ai-trust-showcase__tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
}

.sec-ai-trust-showcase__tree-row img {
  display: block;
  width: 16px;
  height: 11.73px;
}

.sec-ai-trust-showcase__tree-row span {
  height: 5px;
  border-radius: 30px;
  background: #d5d9e3;
}

.sec-ai-trust-showcase__tree-row--dim img {
  opacity: 0.55;
}

.sec-ai-trust-showcase__tree-row--dim span {
  opacity: 0.6;
}

.sec-ai-trust-showcase__linenos {
  position: absolute;
  left: 108.3px;
  top: 21.3px;
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  color: #b8c5e2;
}

/* Code-Zeilen (Balken mit runden Kappen) */
.sec-ai-trust-showcase__bar {
  position: absolute;
  left: 126.5px;
  display: flex;
  gap: 6px;
}

.sec-ai-trust-showcase__bar span {
  height: 6px;
  border-radius: 3px;
  background: #e2e7f2;
}

.sec-ai-trust-showcase__bar--dark span {
  background: #cad2e5;
}

.sec-ai-trust-showcase__sdk {
  position: absolute;
  left: 52.95px;
  bottom: 163.06px;
  width: 123.38px;
  height: 123.38px;
  z-index: 1;
}

/* ---- Karte 2: Configure-Panel ---- */

.sec-ai-trust-showcase__panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 41.3px;
  width: 276px;
  max-width: calc(100% - 32px);
  padding: 14.75px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 10.93px rgba(1, 42, 112, 0.1);
}

.sec-ai-trust-showcase__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-ai-trust-showcase__panel-head img {
  display: block;
  width: 24px;
  height: 24px;
}

.sec-ai-trust-showcase__panel-head span {
  font-family: var(--font-ui);
  font-size: 14.75px;
  font-weight: 600;
  line-height: 22.13px;
  color: var(--navy);
}

.sec-ai-trust-showcase__tabs {
  display: flex;
  flex-direction: column;
  gap: 7.38px;
  margin-top: 11.06px;
}

.sec-ai-trust-showcase__tab {
  display: flex;
  align-items: center;
  gap: 14.75px;
  padding: 11.06px;
  background: var(--navy-20);
  border-radius: 11.06px;
}

.sec-ai-trust-showcase__tab span {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--font-ui);
  font-size: 12.91px;
  font-weight: 500;
  line-height: 18.44px;
  color: var(--navy);
}

.sec-ai-trust-showcase__tab img {
  display: block;
  width: 24px;
  height: 24px;
}

/* ---- Karte 3: Radar / Shield ---- */

.sec-ai-trust-showcase__radar {
  position: absolute;
  right: 100.21px;
  bottom: 29px;
  width: 205.79px;
  height: 199.02px;
}

.sec-ai-trust-showcase__radar img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Ein gerendertes Composite (Kreise, Glas-Segment, Glow, Schatten) aus Figma,
   darüber das Schild-Icon nochmal als scharfes SVG (deckungsgleich) */
.sec-ai-trust-showcase__radar-img {
  left: -25.22px;
  top: -28.26px;
  width: 268.64px;
  height: 268.64px;
}

.sec-ai-trust-showcase__radar-shield {
  left: 133.85px;
  top: -8.11px;
  width: 84.13px;
  height: 86.16px;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .sec-ai-trust-showcase {
    padding: 64px 32px 80px;
  }

  .sec-ai-trust-showcase__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .sec-ai-trust-showcase__card {
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  .sec-ai-trust-showcase {
    padding: 56px 24px 64px;
  }

  .sec-ai-trust-showcase__header {
    margin-bottom: 32px;
  }

  .sec-ai-trust-showcase__eyebrow {
    margin-bottom: 20px;
  }

  .sec-ai-trust-showcase__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .sec-ai-trust-showcase {
    padding: 48px 16px 56px;
  }

  /* Platz für die unten verankerten Visuals reservieren, damit auch stark
     umbrechender Text nie mit ihnen kollidiert */
  .sec-ai-trust-showcase__card {
    min-height: 510px;
    padding-bottom: 300px;
  }

  .sec-ai-trust-showcase__card-title {
    font-size: 26px;
    line-height: 34px;
  }

  .sec-ai-trust-showcase__card-text {
    padding: 28px 24px 16px;
  }

  /* Editor + SDK-Icon auf schmalen Karten etwas nach links ziehen */
  .sec-ai-trust-showcase__editor {
    left: 116px;
  }

  .sec-ai-trust-showcase__sdk {
    left: 24px;
  }

  .sec-ai-trust-showcase__radar {
    right: 64px;
  }
}