/* CLAUDE: Referenzen-Section Styles */
/* CLAUDE: Grid-Layout für Immobilien-Referenzen auf der Startseite */
/* CLAUDE: Responsive: 3 Spalten (Desktop) → 2 Spalten (Tablet) → 1 Spalte (Mobile) */

/* ============================================
   CLAUDE: Container
   ============================================ */

/* CLAUDE: Haupt-Container für Referenzen-Sektion */
/* CLAUDE: Zum Anpassen: max-width ändern für breiteres/schmaleres Layout */
.lhi-referenzen {
    /* CLAUDE: Volle Breite nutzen */
    width: 100%;
}

/* ============================================
   CLAUDE: Grid Layout
   ============================================ */

/* CLAUDE: CSS Grid für Karten-Layout */
/* CLAUDE: Zum Anpassen: gap für Abstände, grid-template-columns für Spaltenanzahl */
.lhi-referenzen__grid {
    /* CLAUDE: CSS Grid mit auto-fill für responsive Spalten */
    display: grid;
    /* CLAUDE: Mindestens 280px pro Karte, max 1fr */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* CLAUDE: Abstände zwischen Karten - nutzt theme.json spacing */
    gap: var(--wp--preset--spacing--lg, 2rem);
}

/* CLAUDE: Desktop: Explizit 3 Spalten bei genug Platz */
/* CLAUDE: Breakpoint aus theme.json: 1024px */
@media (min-width: 1024px) {
    .lhi-referenzen__grid {
        /* CLAUDE: Feste 3 Spalten auf Desktop */
        grid-template-columns: repeat(3, 1fr);
    }

    /* CLAUDE: Bei weniger als 3 Referenzen zentrieren */
    .lhi-referenzen__grid[data-columns="1"],
    .lhi-referenzen__grid[data-columns="2"] {
        /* CLAUDE: Maximal so breit wie nötig */
        max-width: fit-content;
        margin-inline: auto;
    }

    .lhi-referenzen__grid[data-columns="1"] {
        grid-template-columns: minmax(280px, 400px);
    }

    .lhi-referenzen__grid[data-columns="2"] {
        grid-template-columns: repeat(2, minmax(280px, 400px));
    }
}

/* CLAUDE: Tablet: 2 Spalten */
/* CLAUDE: Breakpoint aus theme.json: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .lhi-referenzen__grid {
        /* CLAUDE: 2 Spalten auf Tablet */
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--md, 1.5rem);
    }
}

/* CLAUDE: Mobile: 1 Spalte */
/* CLAUDE: Unter 768px */
@media (max-width: 767px) {
    .lhi-referenzen__grid {
        /* CLAUDE: Einzelne Spalte auf Mobile */
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--md, 1.5rem);
        /* CLAUDE: Maximale Breite für bessere Lesbarkeit */
        max-width: 400px;
        margin-inline: auto;
    }
}

/* ============================================
   CLAUDE: Karten-Styling
   ============================================ */

/* CLAUDE: Einzelne Referenz-Karte */
/* CLAUDE: Zum Anpassen: border-radius, box-shadow für andere Optik */
.lhi-referenzen__card {
    /* CLAUDE: Weißer Hintergrund - nutzt theme.json Farbe */
    background-color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 8px;
    /* CLAUDE: Sanfter Schatten für Tiefe */
    box-shadow: 0 2px 8px rgba(59, 42, 26, 0.08);
    /* CLAUDE: Overflow hidden für Bild-Rundung */
    overflow: hidden;
    /* CLAUDE: Flexbox für vertikale Ausrichtung */
    display: flex;
    flex-direction: column;
    /* CLAUDE: Transition für Hover-Effekte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* CLAUDE: Hover-Effekt auf Desktop */
@media (hover: hover) {
    .lhi-referenzen__card:hover {
        /* CLAUDE: Leichtes Anheben */
        transform: translateY(-4px);
        /* CLAUDE: Verstärkter Schatten */
        box-shadow: 0 8px 24px rgba(59, 42, 26, 0.12);
    }
}

/* CLAUDE: Focus-Visible für Accessibility */
.lhi-referenzen__card:focus-within {
    /* CLAUDE: Sichtbarer Fokus-Ring */
    outline: 2px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
}

/* ============================================
   CLAUDE: Bild-Container
   ============================================ */

/* CLAUDE: Bild-Container mit Aspect-Ratio */
/* CLAUDE: Zum Anpassen: aspect-ratio für andere Proportionen (z.B. 4/3) */
.lhi-referenzen__image {
    /* CLAUDE: Position für absolute Positionierung des Bildes */
    position: relative;
    /* CLAUDE: 16:9 Seitenverhältnis */
    aspect-ratio: 16 / 10;
    /* CLAUDE: Overflow hidden für object-fit */
    overflow: hidden;
    /* CLAUDE: Hintergrund als Platzhalter während Laden */
    background-color: var(--wp--preset--color--porous-stone, #DCD7CE);
}

/* CLAUDE: Bild-Styling */
.lhi-referenzen__image img {
    /* CLAUDE: Volle Container-Größe */
    width: 100%;
    height: 100%;
    /* CLAUDE: Bild zuschneiden statt verzerren */
    object-fit: cover;
    /* CLAUDE: Transition für Hover-Zoom */
    transition: transform 0.4s ease;
}

/* CLAUDE: Hover-Zoom auf Bild */
@media (hover: hover) {
    .lhi-referenzen__card:hover .lhi-referenzen__image img {
        /* CLAUDE: Leichter Zoom-Effekt */
        transform: scale(1.05);
    }
}

/* ============================================
   CLAUDE: Content-Bereich
   ============================================ */

/* CLAUDE: Text-Content unter dem Bild */
/* CLAUDE: Zum Anpassen: padding für mehr/weniger Innenabstand */
.lhi-referenzen__content {
    /* CLAUDE: Innenabstand */
    padding: var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Flexbox für vertikale Anordnung */
    display: flex;
    flex-direction: column;
    /* CLAUDE: Wächst um restlichen Platz zu füllen */
    flex-grow: 1;
    /* CLAUDE: Abstände zwischen Elementen */
    gap: var(--wp--preset--spacing--xs, 0.5rem);
}

/* CLAUDE: Titel der Referenz */
/* CLAUDE: Zum Anpassen: font-size, font-weight */
.lhi-referenzen__title {
    /* CLAUDE: Schriftgröße - responsive */
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    /* CLAUDE: Fettschrift */
    font-weight: 600;
    /* CLAUDE: Dunkle Textfarbe aus theme.json */
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    /* CLAUDE: Zeilenhöhe für Lesbarkeit */
    line-height: 1.3;
    /* CLAUDE: Margin reset */
    margin: 0;
    /* CLAUDE: Maximal 2 Zeilen mit Ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   CLAUDE: Ort-Anzeige
   ============================================ */

/* CLAUDE: Ort mit Icon */
/* CLAUDE: Zum Anpassen: Farbe, Icon-Größe */
.lhi-referenzen__ort {
    /* CLAUDE: Flexbox für Icon + Text */
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.9rem;
    /* CLAUDE: Graphite Farbe aus theme.json */
    color: var(--wp--preset--color--graphite, #594834);
    /* CLAUDE: Margin reset */
    margin: 0;
}

/* CLAUDE: Location-Icon */
.lhi-referenzen__icon {
    /* CLAUDE: Icon-Größe */
    width: 16px;
    height: 16px;
    /* CLAUDE: Flex-shrink verhindern */
    flex-shrink: 0;
    /* CLAUDE: Heritage Gold Farbe */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
}

/* ============================================
   CLAUDE: CTA Button
   ============================================ */

/* CLAUDE: PDF-Download Button */
/* CLAUDE: Zum Anpassen: background-color, padding, border-radius */
.lhi-referenzen__cta {
    /* CLAUDE: Flexbox für Icon + Text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* CLAUDE: Heritage Gold Hintergrund aus theme.json */
    background-color: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Weiße Schrift */
    color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Padding */
    padding: 0.75rem 1.25rem;
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 4px;
    /* CLAUDE: Schriftgewicht */
    font-weight: 600;
    font-size: 0.9rem;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none;
    /* CLAUDE: Transition für Hover */
    transition: background-color 0.2s ease, transform 0.2s ease;
    /* CLAUDE: Margin-Top für Abstand zum Text */
    margin-top: auto;
    /* CLAUDE: Cursor Pointer */
    cursor: pointer;
}

/* CLAUDE: Hover-Effekt */
.lhi-referenzen__cta:hover {
    /* CLAUDE: Dunkleres Gold bei Hover */
    background-color: var(--wp--preset--color--chestnut, #7C4A21);
    /* CLAUDE: Leichtes Anheben */
    transform: translateY(-1px);
    /* CLAUDE: Weiße Schrift beibehalten */
    color: var(--wp--preset--color--white, #FFFFFF);
}

/* CLAUDE: Focus-State für Accessibility */
.lhi-referenzen__cta:focus {
    /* CLAUDE: Fokus-Ring */
    outline: 2px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
    /* CLAUDE: Weiße Schrift beibehalten */
    color: var(--wp--preset--color--white, #FFFFFF);
}

/* CLAUDE: Active-State */
.lhi-referenzen__cta:active {
    /* CLAUDE: Noch dunkleres Gold */
    background-color: var(--wp--preset--color--dark-umber, #3B2A1A);
    /* CLAUDE: Zurück auf Ursprungsposition */
    transform: translateY(0);
}

/* CLAUDE: CTA Icon */
.lhi-referenzen__cta-icon {
    /* CLAUDE: Icon-Größe */
    width: 18px;
    height: 18px;
    /* CLAUDE: Flex-shrink verhindern */
    flex-shrink: 0;
}

/* ============================================
   CLAUDE: Admin-Hinweis
   ============================================ */

/* CLAUDE: Hinweis wenn keine Referenzen vorhanden */
.lhi-referenzen-notice {
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Padding */
    padding: var(--wp--preset--spacing--lg, 2rem);
    /* CLAUDE: Hintergrund */
    background-color: var(--wp--preset--color--porous-stone, #DCD7CE);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 8px;
    /* CLAUDE: Textfarbe */
    color: var(--wp--preset--color--graphite, #594834);
}

/* ============================================
   CLAUDE: Print Styles
   ============================================ */

/* CLAUDE: Print-Optimierung */
@media print {
    .lhi-referenzen__card {
        /* CLAUDE: Kein Schatten beim Drucken */
        box-shadow: none;
        /* CLAUDE: Rand statt Schatten */
        border: 1px solid #ddd;
        /* CLAUDE: Seitenumbruch vermeiden */
        break-inside: avoid;
    }

    .lhi-referenzen__cta {
        /* CLAUDE: Button nicht drucken */
        display: none;
    }
}