/* CLAUDE: Trust-Badges Komponente */
/* CLAUDE: Zeigt Vertrauenselemente prominent above the fold */
/* CLAUDE: Anpassen: Farben in base.css Variablen ändern */

/* ========================================
   CLAUDE: TRUST-BADGES CONTAINER
   ======================================== */

/* CLAUDE: Flex-Container für horizontale Anordnung */
/* CLAUDE: Zentriert auf Desktop, gestapelt auf Mobile */
/* CLAUDE: NEU: Subtiler Gradient statt solider weißer Hintergrund */
.lhi-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(180deg,
        rgba(246, 244, 239, 0.95) 0%,
        rgba(246, 244, 239, 1) 100%
    );
    border-bottom: 1px solid rgba(59, 42, 26, 0.08);
}

/* ========================================
   CLAUDE: GUTENBERG HERO TRUST-BADGES (v3.0)
   CLAUDE: Einheitliche Größen für alle Badges
   CLAUDE: MAXIMALE SPEZIFITÄT um WP-Styles zu überschreiben
   ======================================== */

/* CLAUDE: Container im Hero - MAXIMALE SPEZIFITÄT */
/* CLAUDE: Mehrfache Klassenverkettung für höchste Priorität */
/* CLAUDE: Überschreibt WordPress .is-layout-flex und .wp-block-group-is-layout-flex */
.wp-block-group.lhi-trust-badges.is-layout-flex.wp-block-group-is-layout-flex,
.wp-block-group.lhi-trust-badges.is-content-justification-left.is-layout-flex,
.wp-block-group.lhi-trust-badges.wp-block-group-is-layout-flex,
.wp-block-group.lhi-trust-badges.is-layout-flex,
.wp-block-group.lhi-trust-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1rem !important;
    background: transparent;
    border: none;
    padding: 0;
}

/* CLAUDE: Einzelnes Badge - GLEICHE Breite mit maximaler Spezifität */
/* CLAUDE: flex: 1 1 0 = alle Badges wachsen gleichmäßig */
.wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex.wp-block-group-is-layout-flex,
.wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.wp-block-group-is-layout-flex,
.wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex,
.wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge.is-layout-flex,
.wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge {
    flex: 1 1 0 !important;
    min-width: 140px !important;
    max-width: 170px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    box-sizing: border-box !important;
    gap: 0.5rem !important;
}

/* CLAUDE: SVG-Icons im Badge - einheitliche Größe */
.wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* CLAUDE: Paragraph - kein Umbruch, zentriert */
.wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge p {
    margin: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* CLAUDE: Variante ohne Hintergrund (für dunkle Sections) */
.lhi-trust-badges--transparent {
    background-color: transparent;
    box-shadow: none;
    padding: var(--lhi-space-sm, 1rem) 0;
}

/* CLAUDE: Variante mit Border statt Shadow */
.lhi-trust-badges--bordered {
    box-shadow: none;
    border: 1px solid var(--lhi-color-border, #DCD7CE);
}

/* ========================================
   CLAUDE: EINZELNES TRUST-BADGE
   ======================================== */

/* CLAUDE: Badge-Item mit Icon und Text */
/* CLAUDE: NEU: Subtilere Darstellung ohne separate Hintergründe */
.lhi-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--lhi-font-sans, 'Source Sans Pro', sans-serif);
    font-size: 0.9rem;
    color: var(--lhi-color-text, #3B2A1A);
    white-space: nowrap;
    transition: transform 0.2s ease;
}

/* CLAUDE: Subtle Hover-Effekt */
.lhi-trust-badge:hover {
    transform: translateY(-1px);
}

/* CLAUDE: Icon/Emoji vor dem Text */
.lhi-trust-badge__icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* CLAUDE: SVG-Icons (falls verwendet) */
.lhi-trust-badge__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* CLAUDE: Badge-Text */
.lhi-trust-badge__text {
    font-weight: 600;
}

/* CLAUDE: Subtext (z.B. "147 Bewertungen") */
.lhi-trust-badge__subtext {
    font-weight: 400;
    color: var(--lhi-color-secondary, #7C4A21);
    font-size: var(--lhi-font-size-xs, 0.875rem);
}

/* ========================================
   CLAUDE: GOOGLE-RATING BADGE (Spezial)
   ======================================== */

/* CLAUDE: Prominentes Google-Rating mit Sternen */
.lhi-trust-badge--google {
    background-color: var(--lhi-color-bg, #F6F4EF);
    padding: var(--lhi-space-xs, 0.5rem) var(--lhi-space-sm, 1rem);
    border-radius: var(--lhi-radius-sm, 4px);
}

/* CLAUDE: Sterne-Container */
.lhi-trust-badge__stars {
    display: flex;
    gap: 2px;
    color: #FBBC04; /* Google Gelb */
}

/* CLAUDE: Einzelner Stern */
.lhi-trust-badge__star {
    font-size: 1rem;
}

/* ========================================
   CLAUDE: TRENNLINIE ZWISCHEN BADGES
   ======================================== */

/* CLAUDE: Vertikale Trennlinie - ENTFERNT für cleaner Look */
/* CLAUDE: Gap zwischen Elementen reicht für visuelle Trennung */
.lhi-trust-badges__divider {
    display: none;
}

/* ========================================
   CLAUDE: RESPONSIVE ANPASSUNGEN (v3.0)
   CLAUDE: MAXIMALE SPEZIFITÄT für alle Breakpoints
   ======================================== */

/* CLAUDE: Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .wp-block-group.lhi-trust-badges.is-layout-flex.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-layout-flex,
    .wp-block-group.lhi-trust-badges {
        gap: 0.75rem !important;
    }

    .wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex,
    .wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge {
        flex: 1 1 0 !important;
        min-width: 125px !important;
        max-width: 160px !important;
    }
}

/* CLAUDE: Tablet Portrait (max 768px) - KRITISCH */
@media (max-width: 768px) {
    /* CLAUDE: Legacy Trust-Badges Grid */
    .lhi-trust-badges:not(.wp-block-group) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lhi-space-sm, 1rem);
        text-align: center;
    }

    .lhi-trust-badge:not(.wp-block-group) {
        justify-content: center;
        flex-direction: column;
        gap: var(--lhi-space-xs, 0.5rem);
    }

    /* CLAUDE: Gutenberg Hero Trust-Badges - MAXIMALE SPEZIFITÄT */
    /* CLAUDE: flex-wrap: nowrap MUSS hier greifen! */
    .wp-block-group.lhi-trust-badges.is-layout-flex.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-content-justification-left.is-layout-flex,
    .wp-block-group.lhi-trust-badges.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-layout-flex,
    .wp-block-group.lhi-trust-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex,
    .wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge.is-layout-flex,
    .wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge {
        flex: 1 1 0 !important;
        min-width: 100px !important;
        max-width: 140px !important;
        padding: 0.5rem 0.625rem !important;
    }

    /* CLAUDE: Kleinere Schrift auf Tablet */
    .wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge p {
        font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
    }

    /* CLAUDE: Kleinere Icons auf Tablet */
    .wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* CLAUDE: Mobile (max 576px) */
@media (max-width: 576px) {
    .wp-block-group.lhi-trust-badges.is-layout-flex.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-layout-flex,
    .wp-block-group.lhi-trust-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0.35rem !important;
    }

    .wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex,
    .wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge {
        flex: 1 1 0 !important;
        min-width: 85px !important;
        max-width: 120px !important;
        padding: 0.4rem 0.5rem !important;
    }

    .wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge p {
        font-size: clamp(0.6rem, 2.2vw, 0.7rem) !important;
    }

    .wp-block-group.lhi-trust-badges .wp-block-group.lhi-trust-badge svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* CLAUDE: Extra kleine Screens (max 400px) - Stapeln erlaubt */
@media (max-width: 400px) {
    .wp-block-group.lhi-trust-badges.is-layout-flex.wp-block-group-is-layout-flex,
    .wp-block-group.lhi-trust-badges.is-layout-flex,
    .wp-block-group.lhi-trust-badges {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .wp-block-group.lhi-trust-badges.is-layout-flex > .wp-block-group.lhi-trust-badge.is-layout-flex,
    .wp-block-group.lhi-trust-badges > .wp-block-group.lhi-trust-badge {
        flex: 0 0 auto !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 0.4rem 0.6rem !important;
    }
}

/* CLAUDE: Mobile (klein) - Legacy Badges */
@media (max-width: 480px) {
    .lhi-trust-badges:not(.wp-block-group) {
        grid-template-columns: 1fr;
    }

    .lhi-trust-badge:not(.wp-block-group) {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
}

/* ========================================
   CLAUDE: ANIMATIONEN
   ======================================== */

/* CLAUDE: Subtle Einblend-Animation */
@keyframes lhi-trust-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lhi-trust-badges[data-animate] .lhi-trust-badge {
    animation: lhi-trust-fade-in 0.4s ease forwards;
}

/* CLAUDE: Gestaffelte Animation */
.lhi-trust-badges[data-animate] .lhi-trust-badge:nth-child(1) { animation-delay: 0.1s; }
.lhi-trust-badges[data-animate] .lhi-trust-badge:nth-child(2) { animation-delay: 0.2s; }
.lhi-trust-badges[data-animate] .lhi-trust-badge:nth-child(3) { animation-delay: 0.3s; }
.lhi-trust-badges[data-animate] .lhi-trust-badge:nth-child(4) { animation-delay: 0.4s; }

/* CLAUDE: Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .lhi-trust-badges[data-animate] .lhi-trust-badge {
        animation: none;
        opacity: 1;
    }
}