/**
 * CLAUDE: USP-Cards Komponenten-Styles
 * CLAUDE: Modernisierte USP-Dreiklang Cards (STARK, FOKUSSIERT, ZIELSTREBIG)
 * CLAUDE: Hybrid-Option: Hover-Effekte + Klickbare Links + SVG-Icons
 * CLAUDE: Wird über assets.php im Frontend geladen
 */

/* ============================================
   CLAUDE: 1. Container-Styles
   CLAUDE: Wrapper für die gesamte USP-Sektion
   ============================================ */
/* CLAUDE: Hauptcontainer - setzt Kontext für alle Kind-Elemente */
.lhi-usp-cards {
    /* CLAUDE: Position-Kontext für absolute Elemente */
    position: relative;
}

/* ============================================
   CLAUDE: 2. Columns-Container für gleiche Höhen
   CLAUDE: Flexbox mit stretch für einheitliche Card-Höhen
   ============================================ */
/* CLAUDE: Columns-Container - gleiche Höhen für alle Cards */
/* CLAUDE: Spezifische Selektoren um WordPress is-layout-flex zu überschreiben */
.lhi-usp-cards .wp-block-columns,
.lhi-usp-cards .wp-block-columns.is-layout-flex,
.wp-block-columns:has(h3[style*="uppercase"]),
.wp-block-columns.is-layout-flex:has(h3[style*="uppercase"]),
.wp-block-columns:has(h3:is([style*="uppercase"], [style*="STARK"], [style*="FOKUSSIERT"], [style*="ZIELSTREBIG"])) {
    /* CLAUDE: Flex-Stretch sorgt für gleiche Höhen - KRITISCH */
    align-items: stretch !important;
}

/* ============================================
   CLAUDE: 3. Card-Basis-Styles
   CLAUDE: Grundlegende Styles für jede einzelne Card
   CLAUDE: Zwei Selektoren: .lhi-usp-cards (neues Pattern) und
   CLAUDE: Fallback für bestehendes Pattern (erkennt H3 mit "STARK"/"FOKUSSIERT"/"ZIELSTREBIG")
   ============================================ */
/* CLAUDE: Fallback-Selektor für bestehendes USP-Pattern ohne Klasse */
/* CLAUDE: :has() Selektor findet Columns mit uppercase H3 Überschriften */
/* CLAUDE: Entferne diesen Selektor wenn alle Seiten auf neues Pattern migriert sind */
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column.has-white-background-color,
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column,
/* CLAUDE: Einzelne Card-Column - neues Pattern */
.lhi-usp-cards .wp-block-column {
    /* CLAUDE: Flex-Eigenschaften für gleiche Höhe */
    display: flex;
    flex-direction: column;
    /* CLAUDE: KRITISCH: Streckt Column auf volle Container-Höhe */
    align-self: stretch !important;
    /* CLAUDE: Position relativ für Pseudo-Elemente (Akzentlinie) */
    position: relative;
    /* CLAUDE: Basis-Schatten für subtile Tiefe - nutzt Variable aus makler-cards.css */
    box-shadow: var(--lhi-card-shadow-rest, 0 2px 8px rgba(59, 42, 26, 0.04));
    /* CLAUDE: Smooth Transition für Hover-Effekte */
    transition:
        transform var(--lhi-card-transition-duration, 0.35s) var(--lhi-card-transition-lift, cubic-bezier(0.33, 1, 0.68, 1)),
        box-shadow var(--lhi-card-transition-duration, 0.35s) var(--lhi-card-transition-shadow, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
        border-color 0.3s ease;
    /* CLAUDE: Overflow hidden für saubere Kanten bei Transform */
    overflow: hidden;
    /* CLAUDE: Pointer-Cursor signalisiert Interaktivität */
    cursor: pointer;
}

/* ============================================
   CLAUDE: 3. Hover-Effekte
   CLAUDE: Card schwebt nach oben, Schatten verstärkt sich
   ============================================ */
/* CLAUDE: Hover-State - Card hebt sich an */
/* CLAUDE: Fallback für bestehendes Pattern */
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column.has-white-background-color:hover,
.lhi-usp-cards .wp-block-column:hover {
    /* CLAUDE: Verschiebung nach oben (-8px) für Schwebeffekt */
    transform: translateY(var(--lhi-card-lift-distance, -8px));
    /* CLAUDE: Verstärkter Schatten für Tiefenwirkung */
    box-shadow: var(--lhi-card-shadow-hover, 0 20px 40px rgba(59, 42, 26, 0.10), 0 8px 16px rgba(59, 42, 26, 0.06));
}

/* CLAUDE: Active-State - leicht zurückfallen für taktiles Feedback */
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column.has-white-background-color:active,
.lhi-usp-cards .wp-block-column:active {
    /* CLAUDE: Halb so viel Lift wie Hover */
    transform: translateY(-4px);
}

/* ============================================
   CLAUDE: 4. Linker Akzent-Streifen
   CLAUDE: Erscheint bei Hover als vertikale Gold-Linie
   ============================================ */
/* CLAUDE: Pseudo-Element für Akzentlinie */
/* CLAUDE: Fallback für bestehendes Pattern */
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column.has-white-background-color::before,
.lhi-usp-cards .wp-block-column::before {
    /* CLAUDE: Leeres Element für Dekoration */
    content: '';
    /* CLAUDE: Absolute Positionierung am linken Rand */
    position: absolute;
    left: 0;
    /* CLAUDE: 15% Abstand oben/unten für elegante Proportion */
    top: 15%;
    bottom: 15%;
    /* CLAUDE: 4px breiter Streifen */
    width: 4px;
    /* CLAUDE: Heritage-Gold Farbe */
    background: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Initial versteckt durch Scale auf 0 */
    transform: scaleY(0);
    /* CLAUDE: Animation startet von Mitte */
    transform-origin: center;
    /* CLAUDE: Smooth Ein-/Ausblenden */
    transition: transform 0.3s var(--lhi-card-transition-lift, cubic-bezier(0.33, 1, 0.68, 1));
    /* CLAUDE: Abgerundete rechte Ecken */
    border-radius: 0 2px 2px 0;
    /* CLAUDE: Über Card-Inhalt */
    z-index: 1;
}

/* CLAUDE: Akzentlinie bei Hover einblenden */
/* CLAUDE: Fallback für bestehendes Pattern */
.wp-block-columns:has(h3[style*="uppercase"]) .wp-block-column.has-white-background-color:hover::before,
.lhi-usp-cards .wp-block-column:hover::before {
    /* CLAUDE: Auf volle Höhe skalieren */
    transform: scaleY(1);
}

/* ============================================
   CLAUDE: 5. SVG Icon-Styles
   CLAUDE: Styling für die USP-Icons
   ============================================ */
/* CLAUDE: Icon-Container */
.lhi-usp-icon {
    /* CLAUDE: Flex für Zentrierung */
    display: flex;
    justify-content: center;
    align-items: center;
    /* CLAUDE: Fixe Größe */
    width: 64px;
    height: 64px;
    /* CLAUDE: Zentriert mit Abstand nach unten */
    margin: 0 auto var(--wp--preset--spacing--sm, 1rem);
}

/* CLAUDE: SVG innerhalb des Containers */
.lhi-usp-icon svg {
    /* CLAUDE: SVG füllt Container */
    width: 100%;
    height: 100%;
    /* CLAUDE: Heritage-Gold Farbe */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Stroke-Farbe erbt von color */
    stroke: currentColor;
    /* CLAUDE: Smooth Transition für Hover-Effekte */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* CLAUDE: Icon-Animation bei Card-Hover */
.lhi-usp-cards .wp-block-column:hover .lhi-usp-icon svg {
    /* CLAUDE: Leichte Skalierung für subtilen Effekt */
    transform: scale(1.1);
}

/* ============================================
   CLAUDE: 6. Trennlinien-Styles
   CLAUDE: Dezente Gold-Linie unter Überschrift
   ============================================ */
/* CLAUDE: Separator/Divider unter H3 */
.lhi-usp-cards .wp-block-separator.lhi-usp-divider,
.lhi-usp-cards .lhi-usp-divider {
    /* CLAUDE: Fixe kurze Breite */
    width: 50px !important;
    /* CLAUDE: 2px Höhe */
    height: 2px !important;
    /* CLAUDE: Kein Border, nur Background */
    border: none !important;
    /* CLAUDE: Heritage-Gold Farbe */
    background: var(--wp--preset--color--heritage-gold, #8a6b3f) !important;
    /* CLAUDE: Volle Deckkraft */
    opacity: 1 !important;
    /* CLAUDE: Zentriert */
    margin-left: auto !important;
    margin-right: auto !important;
    /* CLAUDE: Abstand oben/unten */
    margin-top: var(--wp--preset--spacing--sm, 1rem) !important;
    margin-bottom: var(--wp--preset--spacing--sm, 1rem) !important;
}

/* ============================================
   CLAUDE: 7. Link-Wrapper-Styles
   CLAUDE: Komplette Card als klickbarer Link
   ============================================ */
/* CLAUDE: Link-Wrapper für gesamte Card */
.lhi-usp-card-link {
    /* CLAUDE: Block-Element für volle Klickfläche */
    display: block;
    /* CLAUDE: Keine Text-Dekoration */
    text-decoration: none !important;
    /* CLAUDE: Erbt Textfarben */
    color: inherit !important;
    /* CLAUDE: Volle Höhe */
    height: 100%;
}

/* CLAUDE: Verhindert Farbänderung bei Hover/Visited */
.lhi-usp-card-link:hover,
.lhi-usp-card-link:visited,
.lhi-usp-card-link:active {
    /* CLAUDE: Keine Farbänderung */
    color: inherit !important;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none !important;
}

/* CLAUDE: Innerer Content-Wrapper */
.lhi-usp-card-link .wp-block-group {
    /* CLAUDE: Erbt Höhe */
    height: 100%;
}

/* ============================================
   CLAUDE: 8. Typografie-Anpassungen
   CLAUDE: Überschriften und Text-Styles
   ============================================ */
/* CLAUDE: H3 Überschrift in Card */
.lhi-usp-cards .wp-block-heading {
    /* CLAUDE: Kein Margin-Top (Icon ist darüber) */
    margin-top: 0;
}

/* CLAUDE: Untertitel (kursiv) */
.lhi-usp-cards .lhi-usp-subtitle {
    /* CLAUDE: Kursiv für Unterscheidung */
    font-style: italic;
    /* CLAUDE: Dark-Umber Farbe */
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
}

/* CLAUDE: Beschreibungstext */
.lhi-usp-cards .lhi-usp-description {
    /* CLAUDE: Graphite für weniger Dominanz */
    color: var(--wp--preset--color--graphite, #594834);
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.9rem;
}

/* ============================================
   CLAUDE: Content-Verteilung in Cards
   CLAUDE: Beschreibung wächst, Link bleibt unten
   ============================================ */
/* CLAUDE: Beschreibungstext nimmt verfügbaren Platz */
.lhi-usp-cards .lhi-usp-description {
    /* CLAUDE: Flex-grow für Höhenausgleich */
    flex-grow: 1;
}

/* CLAUDE: Link-Container am unteren Rand */
.lhi-usp-cards .wp-block-column > p:last-child:has(.lhi-usp-card-link-text) {
    /* CLAUDE: Auto-Margin drückt Link nach unten */
    margin-top: auto;
}

/* ============================================
   CLAUDE: Link-Text Styles
   CLAUDE: "Mehr erfahren →" Links am Ende jeder Card
   ============================================ */
/* CLAUDE: Link-Text Basis-Styles */
.lhi-usp-card-link-text {
    /* CLAUDE: Heritage-Gold Farbe */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f) !important;
    /* CLAUDE: Keine Unterstreichung standardmäßig */
    text-decoration: none !important;
    /* CLAUDE: Medium Gewicht */
    font-weight: 500;
    /* CLAUDE: Smooth Transition */
    transition: color 0.2s ease, letter-spacing 0.2s ease;
    /* CLAUDE: Inline-Block für Hover-Effekte */
    display: inline-block;
}

/* CLAUDE: Link-Text Hover */
.lhi-usp-card-link-text:hover {
    /* CLAUDE: Dunklere Farbe */
    color: var(--wp--preset--color--chestnut, #7C4A21) !important;
    /* CLAUDE: Unterstreichung bei Hover */
    text-decoration: underline !important;
    /* CLAUDE: Leichtes Auseinanderziehen */
    letter-spacing: 0.02em;
}

/* CLAUDE: Link-Text bei Card-Hover */
.lhi-usp-cards .wp-block-column:hover .lhi-usp-card-link-text {
    /* CLAUDE: Auch bei Card-Hover aktivieren */
    color: var(--wp--preset--color--chestnut, #7C4A21) !important;
}

/* CLAUDE: Focus-State für Link */
.lhi-usp-card-link-text:focus {
    /* CLAUDE: Outline für Keyboard-Navigation */
    outline: 2px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 2px;
}

/* ============================================
   CLAUDE: 9. Accessibility - Focus States
   CLAUDE: Sichtbarer Fokus für Keyboard-Navigation
   ============================================ */
/* CLAUDE: Focus auf Link-Wrapper */
.lhi-usp-card-link:focus {
    /* CLAUDE: Kein Default-Outline */
    outline: none;
}

/* CLAUDE: Focus-Visible auf Card */
.lhi-usp-cards .wp-block-column:focus-within {
    /* CLAUDE: Deutlicher Fokus-Ring in Markenfarbe */
    outline: 3px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Abstand vom Element */
    outline-offset: 4px;
    /* CLAUDE: Hover-Effekte auch bei Focus */
    transform: translateY(var(--lhi-card-lift-distance, -8px));
    box-shadow: var(--lhi-card-shadow-hover, 0 20px 40px rgba(59, 42, 26, 0.10));
}

/* CLAUDE: Akzentlinie auch bei Focus */
.lhi-usp-cards .wp-block-column:focus-within::before {
    transform: scaleY(1);
}

/* ============================================
   CLAUDE: 10. Reduced Motion
   CLAUDE: Respektiert User-Präferenz für weniger Animation
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* CLAUDE: Alle Transitions deaktivieren */
    .lhi-usp-cards .wp-block-column,
    .lhi-usp-cards .wp-block-column::before,
    .lhi-usp-icon svg {
        transition: none;
    }

    /* CLAUDE: Kein Transform bei Hover */
    .lhi-usp-cards .wp-block-column:hover,
    .lhi-usp-cards .wp-block-column:focus-within {
        transform: none;
    }

    /* CLAUDE: Akzentlinie sofort sichtbar bei Hover */
    .lhi-usp-cards .wp-block-column:hover::before,
    .lhi-usp-cards .wp-block-column:focus-within::before {
        transform: scaleY(1);
    }

    /* CLAUDE: Icon ohne Animation */
    .lhi-usp-cards .wp-block-column:hover .lhi-usp-icon svg {
        transform: none;
    }
}

/* ============================================
   CLAUDE: 11. Responsive - Mobile
   CLAUDE: Anpassungen für Touch-Geräte
   ============================================ */
@media (max-width: 781px) {
    /* CLAUDE: Kein Hover-Lift auf Touch-Geräten */
    .lhi-usp-cards .wp-block-column:hover {
        transform: none;
    }

    /* CLAUDE: Akzentlinie immer dezent sichtbar auf Mobile */
    .lhi-usp-cards .wp-block-column::before {
        transform: scaleY(1);
        opacity: 0.5;
    }

    /* CLAUDE: Kürzere Trennlinie auf Mobile */
    .lhi-usp-cards .wp-block-separator.lhi-usp-divider,
    .lhi-usp-cards .lhi-usp-divider {
        width: 40px !important;
    }

    /* CLAUDE: Icons etwas kleiner auf Mobile */
    .lhi-usp-icon {
        width: 56px;
        height: 56px;
    }

    /* CLAUDE: Cards stacken vertikal - Gap anpassen */
    .lhi-usp-cards .wp-block-columns {
        gap: var(--wp--preset--spacing--md, 1.5rem);
    }
}

/* ============================================
   CLAUDE: 12. Print Styles
   CLAUDE: Optimierung für Druckausgabe
   ============================================ */
@media print {
    /* CLAUDE: Keine Schatten im Druck */
    .lhi-usp-cards .wp-block-column {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* CLAUDE: Keine Akzentlinie im Druck */
    .lhi-usp-cards .wp-block-column::before {
        display: none;
    }

    /* CLAUDE: Links als Text mit URL */
    .lhi-usp-card-link::after {
        content: " (" attr(href) ")";
        font-size: 0.8rem;
        color: #666;
    }

    /* CLAUDE: Icons in Schwarz für besseren Druck */
    .lhi-usp-icon svg {
        color: #333;
    }
}