/**
 * CLAUDE: Makler-Cards Komponenten-Styles
 * CLAUDE: Option A (Hover-Effekte) + Option B (Erweiterte Struktur)
 * CLAUDE: Wird über assets.php im Frontend geladen
 * CLAUDE: Zum Anpassen: CSS Custom Properties in :root ändern
 */

/* ============================================
   CLAUDE: CSS Custom Properties
   CLAUDE: Zentrale Konfiguration für alle Card-Styles
   CLAUDE: Ändern: Werte hier anpassen für globale Änderungen
   ============================================ */
/* CLAUDE: Root-Variablen für Card-Animationen und Schatten */
:root {
    /* CLAUDE: Transition-Timing für natürliche Bewegung - elastisch, nicht linear */
    --lhi-card-transition-lift: cubic-bezier(0.33, 1, 0.68, 1);
    /* CLAUDE: Schatten-Transition - weich auslaufend */
    --lhi-card-transition-shadow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* CLAUDE: Standard-Dauer für alle Card-Animationen */
    --lhi-card-transition-duration: 0.35s;

    /* CLAUDE: 3-Stufen Schatten-System für Tiefenwirkung */
    /* CLAUDE: Ruhe-Zustand - subtiler Schatten */
    --lhi-card-shadow-rest: 0 2px 8px rgba(59, 42, 26, 0.04);
    /* CLAUDE: Hover-Zustand - deutlicher Schatten, Card schwebt */
    --lhi-card-shadow-hover:
        0 20px 40px rgba(59, 42, 26, 0.10),
        0 8px 16px rgba(59, 42, 26, 0.06);
    /* CLAUDE: Active-Zustand - maximaler Schatten */
    --lhi-card-shadow-active:
        0 24px 48px rgba(59, 42, 26, 0.14),
        0 12px 24px rgba(59, 42, 26, 0.08);

    /* CLAUDE: Hover-Verschiebung nach oben */
    --lhi-card-lift-distance: -8px;
}

/* ============================================
   CLAUDE: OPTION A - Basis Card Styles
   CLAUDE: Hover-Effekte, Schatten, Transitions
   CLAUDE: Zwei Selektoren: .lhi-makler-cards (neue Struktur) und
   CLAUDE: Fallback für bestehende Cards ohne spezielle Klasse
   ============================================ */

/* CLAUDE: Fallback-Selektor für bestehende Makler-Cards ohne Klasse */
/* CLAUDE: Zielt auf Cards die einen Telefon-Link enthalten */
/* CLAUDE: Entferne diesen Selektor wenn alle Seiten aktualisiert wurden */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column,
/* CLAUDE: Card-Container - Position für Pseudo-Elemente */
.lhi-makler-cards .wp-block-column {
    /* CLAUDE: Relativ für absolute Kinder (Akzentlinie) */
    position: relative;
    /* CLAUDE: Basis-Schatten für subtile Tiefe */
    box-shadow: var(--lhi-card-shadow-rest);
    /* CLAUDE: Alle animierten Properties mit Transitions */
    transition:
        transform var(--lhi-card-transition-duration) var(--lhi-card-transition-lift),
        box-shadow var(--lhi-card-transition-duration) var(--lhi-card-transition-shadow),
        border-color 0.3s ease;
    /* CLAUDE: Pointer-Cursor signalisiert Interaktivität */
    cursor: pointer;
    /* CLAUDE: Overflow hidden für saubere Kanten bei Transforms */
    overflow: hidden;
}

/* CLAUDE: Hover-Zustand - Card schwebt nach oben */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:hover,
.lhi-makler-cards .wp-block-column:hover {
    /* CLAUDE: Card hebt sich an (-8px nach oben) */
    transform: translateY(var(--lhi-card-lift-distance));
    /* CLAUDE: Verstärkter Schatten für Schwebeffekt */
    box-shadow: var(--lhi-card-shadow-hover);
    /* CLAUDE: Border-Akzent in Markenfarbe Heritage-Gold */
    /* CLAUDE: !important nötig um Inline-Styles aus Gutenberg zu überschreiben */
    border-color: var(--wp--preset--color--heritage-gold) !important;
}

/* CLAUDE: Active/Pressed - leicht zurückfallen für Feedback */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:active,
.lhi-makler-cards .wp-block-column:active {
    /* CLAUDE: Halb so viel Lift wie bei Hover */
    transform: translateY(-4px);
    /* CLAUDE: Noch stärkerer Schatten */
    box-shadow: var(--lhi-card-shadow-active);
}

/* ============================================
   CLAUDE: Linker Akzent-Streifen
   CLAUDE: Erscheint bei Hover als vertikale Goldlinie
   ============================================ */
/* CLAUDE: Pseudo-Element für Akzentlinie links */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column::before,
.lhi-makler-cards .wp-block-column::before {
    /* CLAUDE: Leeres Element für reine 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 als Akzentfarbe */
    background: var(--wp--preset--color--heritage-gold);
    /* 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);
    /* CLAUDE: Abgerundete rechte Ecken */
    border-radius: 0 2px 2px 0;
    /* CLAUDE: Über Card-Inhalt legen */
    z-index: 1;
}

/* CLAUDE: Akzentlinie bei Hover einblenden */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:hover::before,
.lhi-makler-cards .wp-block-column:hover::before {
    /* CLAUDE: Auf volle Höhe skalieren */
    transform: scaleY(1);
}

/* ============================================
   CLAUDE: Telefon-Link als CTA-Button (Option A)
   CLAUDE: Wandelt tel:-Links in auffällige Buttons
   ============================================ */
/* CLAUDE: Basis-Styling für Telefon-Links */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"],
.lhi-makler-cards .wp-block-column a[href^="tel:"] {
    /* CLAUDE: Inline-Block für Padding-Support */
    display: inline-block;
    /* CLAUDE: Heritage-Gold Hintergrund */
    background: var(--wp--preset--color--heritage-gold);
    /* CLAUDE: Weiße Schrift für Kontrast (5.8:1 Ratio) */
    color: var(--wp--preset--color--white) !important;
    /* CLAUDE: Großzügiges Padding für Touch-Target (min 44px Höhe) */
    padding: 0.875rem 1.75rem;
    /* CLAUDE: Leicht abgerundete Ecken passend zum Design */
    border-radius: 4px;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none !important;
    /* CLAUDE: Fettere Schrift für Lesbarkeit */
    font-weight: 600;
    /* CLAUDE: Basis-Schriftgröße */
    font-size: 1rem;
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Subtiler Schatten für Button-Tiefe */
    box-shadow: 0 2px 4px rgba(59, 42, 26, 0.15);
    /* CLAUDE: Smooth Transitions für alle States */
    transition:
        background-color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

/* CLAUDE: Button-Hover - dunkler und leicht angehoben */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"]:hover,
.lhi-makler-cards .wp-block-column a[href^="tel:"]:hover {
    /* CLAUDE: Dunkleres Chestnut für Hover */
    background: var(--wp--preset--color--chestnut);
    /* CLAUDE: Leichtes Anheben des Buttons */
    transform: translateY(-2px);
    /* CLAUDE: Verstärkter Schatten */
    box-shadow: 0 4px 8px rgba(59, 42, 26, 0.2);
}

/* CLAUDE: Button-Active - eingedrückt */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"]:active,
.lhi-makler-cards .wp-block-column a[href^="tel:"]:active {
    /* CLAUDE: Zurück auf Ausgangshöhe */
    transform: translateY(0);
    /* CLAUDE: Flacherer Schatten */
    box-shadow: 0 1px 2px rgba(59, 42, 26, 0.15);
}

/* ============================================
   CLAUDE: Accessibility - Focus States
   CLAUDE: Sichtbarer Fokus für Keyboard-Navigation
   ============================================ */
/* CLAUDE: Focus auf gesamter Card (z.B. Tab-Navigation) */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:focus-within,
.lhi-makler-cards .wp-block-column:focus-within {
    /* CLAUDE: Deutlicher Fokus-Ring in Markenfarbe */
    outline: 3px solid var(--wp--preset--color--heritage-gold);
    /* CLAUDE: Abstand vom Element */
    outline-offset: 4px;
}

/* CLAUDE: Focus auf Button */
.wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"]:focus,
.lhi-makler-cards .wp-block-column a[href^="tel:"]:focus {
    /* CLAUDE: Dunkler Fokus-Ring für Kontrast */
    outline: 2px solid var(--wp--preset--color--dark-umber);
    outline-offset: 2px;
    /* CLAUDE: Zusätzlicher Glow-Effekt */
    box-shadow: 0 0 0 4px rgba(138, 107, 63, 0.3);
}

/* ============================================
   CLAUDE: OPTION B - Region Badge
   CLAUDE: Kleine Markierung oben in der Card
   ============================================ */
/* CLAUDE: Badge-Container zentriert */
.lhi-card-region-badge {
    /* CLAUDE: Margin unten für Abstand zur Überschrift */
    margin-bottom: 0.5rem;
}

/* CLAUDE: Badge-Paragraph-Styling */
.lhi-card-region-badge p {
    /* CLAUDE: Flex für Icon + Text Alignment */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* CLAUDE: Subtiler Hintergrund */
    background: rgba(138, 107, 63, 0.08);
    /* CLAUDE: Kompaktes Padding */
    padding: 0.375rem 0.75rem;
    /* CLAUDE: Pill-Form */
    border-radius: 100px;
    /* CLAUDE: Kein Margin vom Paragraph */
    margin: 0;
}

/* ============================================
   CLAUDE: OPTION B - Trennlinie (Separator)
   CLAUDE: Kurze goldene Linie unter Überschrift
   ============================================ */
/* CLAUDE: Separator-Styling */
.lhi-makler-cards .wp-block-separator.lhi-card-divider {
    /* CLAUDE: Fixe kurze Breite */
    width: 60px !important;
    /* CLAUDE: 2px Höhe */
    height: 2px !important;
    /* CLAUDE: Kein Border, nur Background */
    border: none !important;
    /* CLAUDE: Volle Deckkraft */
    opacity: 1 !important;
    /* CLAUDE: Zentriert */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   CLAUDE: OPTION B - CTA Actions Container
   CLAUDE: Wrapper für Telefon + E-Mail Buttons
   ============================================ */
/* CLAUDE: Actions-Gruppe volle Breite */
.lhi-card-actions {
    width: 100%;
}

/* CLAUDE: Primärer CTA - Telefon-Button (erweitert) */
.lhi-cta-primary a {
    /* CLAUDE: Flex für Icon + Text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* CLAUDE: Maximale Breite für Balance */
    width: 100%;
    max-width: 280px;
    /* CLAUDE: Heritage-Gold Hintergrund */
    background: var(--wp--preset--color--heritage-gold);
    /* CLAUDE: Weiße Schrift */
    color: var(--wp--preset--color--white) !important;
    /* CLAUDE: Großzügiges Padding */
    padding: 0.875rem 1.5rem;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 4px;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none !important;
    /* CLAUDE: Fett für Emphasis */
    font-weight: 600;
    font-size: 1rem;
    /* CLAUDE: Schatten für Tiefe */
    box-shadow: 0 2px 4px rgba(59, 42, 26, 0.15);
    /* CLAUDE: Smooth Transitions */
    transition:
        background-color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

/* CLAUDE: Primärer CTA Hover */
.lhi-cta-primary a:hover {
    /* CLAUDE: Dunkleres Chestnut */
    background: var(--wp--preset--color--chestnut);
    /* CLAUDE: Leicht anheben */
    transform: translateY(-2px);
    /* CLAUDE: Stärkerer Schatten */
    box-shadow: 0 4px 12px rgba(59, 42, 26, 0.2);
}

/* CLAUDE: Primärer CTA Active */
.lhi-cta-primary a:active {
    transform: translateY(0);
}

/* CLAUDE: Sekundärer CTA - E-Mail Link */
.lhi-cta-secondary a {
    /* CLAUDE: Flex für Icon + Text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* CLAUDE: Heritage-Gold Textfarbe */
    color: var(--wp--preset--color--heritage-gold) !important;
    /* CLAUDE: Keine Standard-Unterstreichung */
    text-decoration: none !important;
    /* CLAUDE: Medium Gewicht */
    font-weight: 500;
    /* CLAUDE: Padding für Touch-Target */
    padding: 0.5rem;
    /* CLAUDE: Abgerundet für Hover-Hintergrund */
    border-radius: 4px;
    /* CLAUDE: Smooth Transitions */
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/* CLAUDE: Sekundärer CTA Hover */
.lhi-cta-secondary a:hover {
    /* CLAUDE: Dunklere Farbe */
    color: var(--wp--preset--color--chestnut) !important;
    /* CLAUDE: Subtiler Hintergrund */
    background: rgba(138, 107, 63, 0.08);
    /* CLAUDE: Unterstreichung bei Hover */
    text-decoration: underline !important;
}

/* CLAUDE: Focus-States für beide CTAs */
.lhi-cta-primary a:focus,
.lhi-cta-secondary a:focus {
    /* CLAUDE: Dunkler Fokus-Ring */
    outline: 2px solid var(--wp--preset--color--dark-umber);
    outline-offset: 2px;
}

/* ============================================
   CLAUDE: Reduced Motion - Barrierefreiheit
   CLAUDE: Respektiert User-Präferenz für weniger Animation
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* CLAUDE: Alle Transitions deaktivieren */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column,
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column::before,
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"],
    .lhi-makler-cards .wp-block-column,
    .lhi-makler-cards .wp-block-column::before,
    .lhi-makler-cards .wp-block-column a[href^="tel:"],
    .lhi-cta-primary a,
    .lhi-cta-secondary a {
        transition: none;
    }

    /* CLAUDE: Kein Transform bei Hover */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:hover,
    .lhi-makler-cards .wp-block-column:hover {
        transform: none;
    }

    /* CLAUDE: Akzentlinie sofort sichtbar */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:hover::before,
    .lhi-makler-cards .wp-block-column:hover::before {
        transform: scaleY(1);
    }

    /* CLAUDE: Buttons ohne Transform */
    .lhi-cta-primary a:hover,
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"]:hover,
    .lhi-makler-cards .wp-block-column a[href^="tel:"]:hover {
        transform: none;
    }
}

/* ============================================
   CLAUDE: Responsive - Mobile Optimierungen
   CLAUDE: Anpassungen für Touch-Geräte
   ============================================ */
@media (max-width: 781px) {
    /* CLAUDE: Kein Hover-Lift auf Touch-Geräten */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column:hover,
    .lhi-makler-cards .wp-block-column:hover {
        transform: none;
    }

    /* CLAUDE: Buttons volle Breite auf Mobile */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"],
    .lhi-makler-cards .wp-block-column a[href^="tel:"],
    .lhi-cta-primary a {
        /* CLAUDE: Größeres Padding für Touch */
        padding: 1rem 1.5rem;
        /* CLAUDE: Volle Breite */
        display: block;
        width: 100%;
        max-width: 100%;
        /* CLAUDE: Verhindert Zeilenumbruch bei Telefonnummern */
        /* CLAUDE: nowrap hält "0151 – 40 40 42 83" auf einer Zeile */
        white-space: nowrap;
        /* CLAUDE: Reduzierte Schriftgröße für schmale Bildschirme */
        font-size: 0.95rem;
    }

    /* CLAUDE: Akzentlinie immer sichtbar auf Mobile (dezent) */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column::before,
    .lhi-makler-cards .wp-block-column::before {
        transform: scaleY(1);
        opacity: 0.5;
    }

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

    /* CLAUDE: E-Mail Link volle Breite */
    .lhi-cta-secondary a {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   CLAUDE: Extra-kleine Bildschirme (< 360px)
   CLAUDE: Für sehr schmale Geräte wie iPhone SE
   ============================================ */
@media (max-width: 360px) {
    /* CLAUDE: Noch kleinere Schrift und weniger Padding */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column a[href^="tel:"],
    .lhi-makler-cards .wp-block-column a[href^="tel:"],
    .lhi-cta-primary a {
        /* CLAUDE: Reduziertes Padding um Platz zu sparen */
        padding: 0.875rem 1rem;
        /* CLAUDE: Kleinere Schrift für sehr schmale Bildschirme */
        font-size: 0.875rem;
    }

    /* CLAUDE: E-Mail Link etwas kleiner */
    .lhi-cta-secondary a {
        font-size: 0.8rem;
    }
}

/* ============================================
   CLAUDE: Print Styles
   CLAUDE: Optimierung für Druckausgabe
   ============================================ */
@media print {
    /* CLAUDE: Keine Schatten im Druck */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column,
    .lhi-makler-cards .wp-block-column {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* CLAUDE: Keine Akzentlinie im Druck */
    .wp-block-columns:has(a[href^="tel:+49151"]) .wp-block-column::before,
    .lhi-makler-cards .wp-block-column::before {
        display: none;
    }

    /* CLAUDE: Links als Text darstellen */
    .wp-block-columns:has(a[href^="tel:+49151"]) a[href^="tel:"]::after,
    .lhi-makler-cards a[href^="tel:"]::after {
        content: " (" attr(href) ")";
    }
}