/* ============================================================
 * V4 Aurora Geometric — Trust-Section Cards
 * ============================================================
 * Style for the 3-card trust-section replacing the old 15-card
 * features-grid. Uses vendor `.feature` / `.feature-inner` /
 * `.feature-icon` classes for layout compatibility, adds V4
 * corner-brackets + accent-line + grid-pattern on top.
 *
 * Brand: logo.svg gradient #2B5F8E → #3D8EB9 → #5BA4C9 + teal #4ECDC4
 * Reference: Figma spec sheet (Corner-Brackets + Accent-Lines + Grid)
 * ============================================================ */

/* === Grid-Pattern Background auf der Trust-Section === */
.trust.section {
    background:
        linear-gradient(rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
        #0a1929;
    padding: 96px 24px;
    position: relative;
}

/* === Trust-Wrap: 3-column grid (responsive) === */
.trust-wrap {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: verhindert dass vendor .feature
       { width: 380px; max-width: 380px } (landing.css:1458-1462) das
       grid auf 380px*3+gaps=1236px aufbläht und damit über den
       1128px-container hinaus overflowt. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .trust-wrap {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

/* === Override vendor .feature width-restriction im trust-section context ===
   vendor-default .feature (landing.css:1458-1462) hat width: 380px +
   max-width: 380px + flex-grow: 1. Im grid-context überschreibt das
   die 1fr-track-allocation und führt zu 380px-Kacheln die über den
   Container hinaus overflowen → kachlen wirken linksbündig.
   Im trust-section: width = grid-track-width, NICHT 380px hardcoded. */
.trust-wrap .feature {
    width: auto;
    max-width: none;
}

/* === Card-Container: sharp corners (KEIN border-radius), padding === */
.v4-card {
    position: relative;
    padding: 40px 28px;
    background: transparent;
    border-radius: 0;
    /* Override vendor reveal-animation interference */
    opacity: 1;
    transform: none;
}

/* === Accent-Line (top teal gradient) === */
.v4-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4ECDC4, transparent);
}

/* === Inner-Card: corner-brackets via pseudo-elements === */
.v4-card-inner {
    position: relative;
    padding: 24px;
}

/* Top-left corner bracket (L-shape) */
.v4-card-inner::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    border-top: 2px solid #4ECDC4;
    border-left: 2px solid #4ECDC4;
}

/* Bottom-right corner bracket (L-shape mirrored) */
.v4-card-inner::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-bottom: 2px solid #4ECDC4;
    border-right: 2px solid #4ECDC4;
}

/* === Section-Title in V4-Teal === */
.trust .section-title {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.trust .section-paragraph {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    font-size: 16px;
}

/* === Feature-Title (Kachel-Überschrift) in V4-Teal === */
.v4-card .feature-title {
    color: #4ECDC4;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.005em;
}

/* === Body-Text in V4-Muted-White === */
.v4-card .text-sm {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* === Icon-Container: V4-Style mit teal glow === */
.v4-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    filter: drop-shadow(0 0 12px rgba(78, 205, 196, 0.45));
}

.v4-card-icon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* === Reveal-Animation Override (vendor .is-revealing) === */
.v4-card.is-revealing {
    opacity: 1 !important;
    transform: none !important;
}

/* === Hover-State: subtle glow intensify === */
.v4-card:hover .v4-card-icon {
    filter: drop-shadow(0 0 18px rgba(78, 205, 196, 0.7));
    transition: filter 200ms ease-out;
}

.v4-card:hover::before {
    background: linear-gradient(90deg, transparent, #4ECDC4, #4ECDC4, transparent);
    transition: background 200ms ease-out;
}