/**
 * CLAUDE: Property-Cards Komponenten-Styles
 * CLAUDE: Moderne Immobilien-Kategorien Cards mit Hover-Reveal
 * 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 Property-Cards
   CLAUDE: Ändern: Werte hier anpassen für globale Änderungen
   ============================================ */
/* CLAUDE: Root-Variablen für Property-Card Animationen */
:root {
    /* CLAUDE: Card-Dimensionen */
    --lhi-property-card-height: 480px;
    --lhi-property-card-radius: 12px;

    /* CLAUDE: Transition-Timing - elegant und flüssig */
    --lhi-property-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* CLAUDE: Schatten-System */
    --lhi-property-shadow-rest: 0 4px 12px rgba(59, 42, 26, 0.08);
    --lhi-property-shadow-hover:
        0 20px 40px rgba(59, 42, 26, 0.15),
        0 8px 16px rgba(59, 42, 26, 0.10);

    /* CLAUDE: Overlay-Gradient von unten nach oben */
    --lhi-property-overlay-rest: linear-gradient(
        to top,
        rgba(59, 42, 26, 0.85) 0%,
        rgba(59, 42, 26, 0.4) 40%,
        rgba(59, 42, 26, 0.1) 70%,
        transparent 100%
    );
    --lhi-property-overlay-hover: linear-gradient(
        to top,
        rgba(59, 42, 26, 0.95) 0%,
        rgba(59, 42, 26, 0.8) 50%,
        rgba(59, 42, 26, 0.5) 80%,
        rgba(59, 42, 26, 0.3) 100%
    );
}

/* ============================================
   CLAUDE: Container - Section Wrapper
   CLAUDE: Umschließt alle 3 Cards
   ============================================ */
/* CLAUDE: Section-Titel Styling */
.lhi-property-cards-section .wp-block-heading {
    /* CLAUDE: Serifenschrift für eleganten Look */
    font-family: var(--wp--preset--font-family--libre-baskerville);
    /* CLAUDE: Größere Buchstabenabstände für Lesbarkeit */
    letter-spacing: 0.05em;
}

/* ============================================
   CLAUDE: Cards Container (Columns)
   CLAUDE: Grid-Layout für die 3 Cards
   ============================================ */
/* CLAUDE: Columns-Container mit angepasstem Gap */
.lhi-property-cards {
    /* CLAUDE: Gap zwischen Cards */
    gap: var(--wp--preset--spacing--lg) !important;
    /* CLAUDE: Kein zusätzliches Margin - verhindert graue Box */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================
   CLAUDE: Einzelne Card
   CLAUDE: Container mit Bild, Overlay und Content
   ============================================ */
/* CLAUDE: Card-Column Wrapper - Alle Margins/Paddings entfernen für saubere Darstellung */
.lhi-property-cards > .wp-block-column {
    /* CLAUDE: Breite für 3-Spalten Layout */
    flex-basis: calc(33.333% - var(--wp--preset--spacing--lg)) !important;
    flex-grow: 1 !important;
    /* CLAUDE: Relativ für Kinder */
    position: relative;
    /* CLAUDE: Feste Höhe = Cover-Höhe - verhindert graue Box unter Cards */
    height: var(--lhi-property-card-height) !important;
    min-height: var(--lhi-property-card-height) !important;
    max-height: var(--lhi-property-card-height) !important;
    /* CLAUDE: Alle Margins/Paddings auf 0 - WordPress setzt hier 40px default */
    padding: 0 !important;
    margin: 0 !important;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-property-card-radius);
    /* CLAUDE: Overflow hidden für saubere Kanten */
    overflow: hidden;
    /* CLAUDE: Basis-Schatten */
    box-shadow: var(--lhi-property-shadow-rest);
    /* CLAUDE: Smooth Transitions für alle Properties */
    transition:
        transform var(--lhi-property-transition),
        box-shadow var(--lhi-property-transition);
    /* CLAUDE: Cursor zeigt Interaktivität */
    cursor: pointer;
}

/* CLAUDE: Hover-State - Card hebt sich an */
.lhi-property-cards > .wp-block-column:hover {
    /* CLAUDE: Card schwebt nach oben */
    transform: translateY(-8px);
    /* CLAUDE: Verstärkter Schatten für Tiefe */
    box-shadow: var(--lhi-property-shadow-hover);
}

/* ============================================
   CLAUDE: Cover-Block (Bild mit Overlay)
   CLAUDE: Hintergrundbild mit Gradient-Overlay
   ============================================ */
/* CLAUDE: Cover füllt gesamte Card */
.lhi-property-cards .wp-block-cover {
    /* CLAUDE: Relative Positionierung für absolute Kinder */
    position: relative !important;
    /* CLAUDE: Volle Breite und Höhe */
    width: 100% !important;
    /* CLAUDE: Höhe = Column-Höhe - Cover füllt gesamte Card aus */
    min-height: var(--lhi-property-card-height) !important;
    height: var(--lhi-property-card-height) !important;
    /* CLAUDE: WICHTIG: Alle Margins auf 0 - WordPress setzt default Margin */
    /* CLAUDE: Ohne dies startet Cover 40px unter Column-Top = graue Box */
    margin: 0 !important;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-property-card-radius);
    /* CLAUDE: Overflow hidden für abgerundete Ecken */
    overflow: hidden;
    /* CLAUDE: Flex für Content-Ausrichtung deaktivieren */
    display: block !important;
}

/* CLAUDE: WordPress Cover-Background verstecken */
/* CLAUDE: WP setzt hier eine graue Standardfarbe - wir nutzen stattdessen ::before für Gradient */
/* CLAUDE: Ohne diese Regel erscheint eine graue Box unter dem Content */
.lhi-property-cards .wp-block-cover__background {
    /* CLAUDE: Komplett transparent machen */
    background: transparent !important;
    /* CLAUDE: Alternativ: komplett verstecken */
    opacity: 0 !important;
}

/* CLAUDE: Cover-Bild Styling */
.lhi-property-cards .wp-block-cover__image-background {
    /* CLAUDE: Bild füllt Container */
    object-fit: cover;
    /* CLAUDE: Smooth Zoom-Transition bei Hover */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CLAUDE: Bild-Zoom bei Hover */
.lhi-property-cards > .wp-block-column:hover .wp-block-cover__image-background {
    /* CLAUDE: Leichter Zoom für Dynamik */
    transform: scale(1.05);
}

/* CLAUDE: Overlay-Gradient */
.lhi-property-cards .wp-block-cover::before {
    /* CLAUDE: Pseudo-Element für Gradient */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* CLAUDE: Standard-Gradient */
    background: var(--lhi-property-overlay-rest) !important;
    /* CLAUDE: Smooth Transition */
    transition: background var(--lhi-property-transition);
    /* CLAUDE: Über Bild, unter Content */
    z-index: 1;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-property-card-radius);
}

/* CLAUDE: Dunkleres Overlay bei Hover */
.lhi-property-cards > .wp-block-column:hover .wp-block-cover::before {
    background: var(--lhi-property-overlay-hover) !important;
}

/* ============================================
   CLAUDE: Content-Bereich
   CLAUDE: Titel, Liste und CTA
   ============================================ */
/* CLAUDE: Inner-Content über dem Overlay */
.lhi-property-cards .wp-block-cover__inner-container {
    /* CLAUDE: Relative Position für Z-Index */
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    /* CLAUDE: Über Overlay platzieren */
    z-index: 2;
    /* CLAUDE: Kein Flex - normaler Flow */
    display: block;
    /* CLAUDE: Volle Breite */
    width: 100% !important;
    max-width: none !important;
    /* CLAUDE: Padding für Content */
    padding: var(--wp--preset--spacing--lg) !important;
    /* CLAUDE: Text linksbündig */
    text-align: left;
    /* CLAUDE: Box-sizing */
    box-sizing: border-box;
}

/* CLAUDE: Card-Titel */
.lhi-property-cards .lhi-property-card__title {
    /* CLAUDE: Weiße Schrift für Kontrast */
    color: var(--wp--preset--color--white) !important;
    /* CLAUDE: Serifenschrift */
    font-family: var(--wp--preset--font-family--libre-baskerville);
    /* CLAUDE: Responsive Größe - passt sich der Containerbreite an */
    font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
    /* CLAUDE: Gewicht */
    font-weight: 600;
    /* CLAUDE: Spacing */
    margin-bottom: var(--wp--preset--spacing--sm) !important;
    margin-top: 0 !important;
    /* CLAUDE: Text-Schatten für Lesbarkeit */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* CLAUDE: Text nicht umbrechen */
    white-space: nowrap !important;
}

/* CLAUDE: Trennlinie unter Titel */
.lhi-property-cards .lhi-property-card__divider {
    /* CLAUDE: Heritage-Gold Farbe */
    background-color: var(--wp--preset--color--heritage-gold) !important;
    /* CLAUDE: Kurze Linie */
    width: 60px !important;
    /* CLAUDE: Höhe */
    height: 3px !important;
    /* CLAUDE: Kein Border */
    border: none !important;
    /* CLAUDE: Opacity */
    opacity: 1 !important;
    /* CLAUDE: Margin */
    margin: 0 0 var(--wp--preset--spacing--md) 0 !important;
}

/* ============================================
   CLAUDE: Kategorien-Liste
   CLAUDE: Unterkategorien mit Reveal-Animation
   ============================================ */
/* CLAUDE: Listen-Container */
.lhi-property-cards .lhi-property-card__list {
    /* CLAUDE: Initial versteckt auf Desktop */
    opacity: 0;
    /* CLAUDE: Nach unten verschoben */
    transform: translateY(20px);
    /* CLAUDE: Smooth Transition */
    transition:
        opacity var(--lhi-property-transition),
        transform var(--lhi-property-transition);
    /* CLAUDE: Max-Höhe für Animation */
    max-height: 0;
    overflow: hidden;
    /* CLAUDE: Keine Bullets - custom Styling */
    list-style: none !important;
    /* CLAUDE: Kein Padding */
    padding: 0 !important;
    margin: 0 !important;
}

/* CLAUDE: Liste bei Hover sichtbar */
.lhi-property-cards > .wp-block-column:hover .lhi-property-card__list {
    /* CLAUDE: Sichtbar */
    opacity: 1;
    /* CLAUDE: In Position */
    transform: translateY(0);
    /* CLAUDE: Volle Höhe */
    max-height: 300px;
    /* CLAUDE: Margin oben */
    margin-bottom: var(--wp--preset--spacing--md) !important;
}

/* CLAUDE: Listen-Items */
.lhi-property-cards .lhi-property-card__list li {
    /* CLAUDE: Weiße Schrift */
    color: var(--wp--preset--color--white) !important;
    /* CLAUDE: Schriftgröße */
    font-size: 0.95rem;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.6;
    /* CLAUDE: Padding für Spacing */
    padding: 0.25rem 0;
    /* CLAUDE: Flex für Icon */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* CLAUDE: Custom Bullet via ::before */
.lhi-property-cards .lhi-property-card__list li::before {
    /* CLAUDE: Kleiner Punkt */
    content: '';
    width: 6px;
    height: 6px;
    /* CLAUDE: Heritage-Gold */
    background: var(--wp--preset--color--heritage-gold);
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Flex-shrink verhindern */
    flex-shrink: 0;
}

/* ============================================
   CLAUDE: CTA Button
   CLAUDE: Call-to-Action am unteren Rand
   ============================================ */
/* CLAUDE: Button-Container */
.lhi-property-cards .lhi-property-card__cta {
    /* CLAUDE: Initial versteckt */
    opacity: 0;
    transform: translateY(10px);
    /* CLAUDE: Transition */
    transition:
        opacity var(--lhi-property-transition),
        transform var(--lhi-property-transition);
    /* CLAUDE: Margin-Top auto für Bottom-Alignment */
    margin-top: auto !important;
}

/* CLAUDE: CTA bei Hover sichtbar */
.lhi-property-cards > .wp-block-column:hover .lhi-property-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* CLAUDE: Button-Styling */
.lhi-property-cards .lhi-property-card__cta .wp-block-button__link {
    /* CLAUDE: Heritage-Gold Hintergrund */
    background: var(--wp--preset--color--heritage-gold) !important;
    /* CLAUDE: Weiße Schrift */
    color: var(--wp--preset--color--white) !important;
    /* CLAUDE: Padding */
    padding: 0.75rem 1.5rem !important;
    /* CLAUDE: Border-Radius */
    border-radius: 4px !important;
    /* CLAUDE: Schrift */
    font-weight: 600;
    font-size: 0.95rem;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none !important;
    /* CLAUDE: Transition */
    transition: background-color 0.3s ease;
}

/* CLAUDE: Button Hover */
.lhi-property-cards .lhi-property-card__cta .wp-block-button__link:hover {
    /* CLAUDE: Dunkleres Chestnut */
    background: var(--wp--preset--color--chestnut) !important;
}

/* ============================================
   CLAUDE: Accessibility - Focus States
   CLAUDE: Sichtbarer Fokus für Keyboard-Navigation
   ============================================ */
/* CLAUDE: Focus auf Card */
.lhi-property-cards > .wp-block-column:focus-within {
    /* CLAUDE: Fokus-Ring */
    outline: 3px solid var(--wp--preset--color--heritage-gold);
    outline-offset: 4px;
}

/* CLAUDE: Focus auf Button */
.lhi-property-cards .lhi-property-card__cta .wp-block-button__link:focus {
    outline: 2px solid var(--wp--preset--color--white);
    outline-offset: 2px;
}

/* ============================================
   CLAUDE: Mobile Styles (Touch-Geräte)
   CLAUDE: Kein Hover - Content permanent sichtbar
   ============================================ */
/* CLAUDE: Touch-Geräte Detection via hover: none */
@media (hover: none) {
    /* CLAUDE: Kein Card-Lift */
    .lhi-property-cards > .wp-block-column:hover {
        transform: none;
    }

    /* CLAUDE: Kein Bild-Zoom */
    .lhi-property-cards > .wp-block-column:hover .wp-block-cover__image-background {
        transform: none;
    }

    /* CLAUDE: Overlay immer dunkel */
    .lhi-property-cards .wp-block-cover::before {
        background: var(--lhi-property-overlay-hover) !important;
    }

    /* CLAUDE: Liste immer sichtbar */
    .lhi-property-cards .lhi-property-card__list {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
        margin-bottom: var(--wp--preset--spacing--md) !important;
    }

    /* CLAUDE: CTA immer sichtbar */
    .lhi-property-cards .lhi-property-card__cta {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CLAUDE: Responsive Breakpoints */
@media (max-width: 781px) {
    /* CLAUDE: Mobile Card-Höhe - fixe Höhe damit Column = Cover */
    /* CLAUDE: Verhindert graue Box auf Mobile */
    .lhi-property-cards > .wp-block-column {
        /* CLAUDE: Gleiche Höhe wie Cover auf Mobile */
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        /* CLAUDE: Volle Breite auf Mobile */
        flex-basis: 100% !important;
        /* CLAUDE: Kein Margin - Gap wird über Container gesteuert */
        margin: 0 !important;
    }

    /* CLAUDE: Cover passt sich an auf Mobile */
    .lhi-property-cards .wp-block-cover {
        height: 400px !important;
        min-height: 400px !important;
        /* CLAUDE: Margin auf 0 - wichtig! */
        margin: 0 !important;
    }

    /* CLAUDE: Gap zwischen Cards auf Mobile */
    .lhi-property-cards {
        gap: var(--wp--preset--spacing--md) !important;
    }

    /* CLAUDE: Kleinerer Titel */
    .lhi-property-cards .lhi-property-card__title {
        font-size: 1.5rem !important;
    }

    /* CLAUDE: Kleinere Liste */
    .lhi-property-cards .lhi-property-card__list li {
        font-size: 0.9rem;
    }

    /* CLAUDE: Content immer sichtbar */
    .lhi-property-cards .lhi-property-card__list {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
        margin-bottom: var(--wp--preset--spacing--sm) !important;
    }

    .lhi-property-cards .lhi-property-card__cta {
        opacity: 1;
        transform: translateY(0);
    }

    /* CLAUDE: Dunkleres Overlay für Lesbarkeit */
    .lhi-property-cards .wp-block-cover::before {
        background: var(--lhi-property-overlay-hover) !important;
    }
}

/* ============================================
   CLAUDE: Reduced Motion - Barrierefreiheit
   CLAUDE: Respektiert User-Präferenz
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* CLAUDE: Alle Transitions deaktivieren */
    .lhi-property-cards > .wp-block-column,
    .lhi-property-cards .wp-block-cover::before,
    .lhi-property-cards .wp-block-cover__image-background,
    .lhi-property-cards .lhi-property-card__list,
    .lhi-property-cards .lhi-property-card__cta {
        transition: none !important;
    }

    /* CLAUDE: Kein Transform */
    .lhi-property-cards > .wp-block-column:hover {
        transform: none;
    }

    /* CLAUDE: Content immer sichtbar */
    .lhi-property-cards .lhi-property-card__list,
    .lhi-property-cards .lhi-property-card__cta {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }
}

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

    /* CLAUDE: Content sichtbar */
    .lhi-property-cards .lhi-property-card__list,
    .lhi-property-cards .lhi-property-card__cta {
        opacity: 1;
        transform: none;
        max-height: none;
    }
}