/* ============================================
   CLAUDE: Google Reviews / Testimonial Cards
   CLAUDE: Erstellt am 2025-01-15
   CLAUDE: Sorgt für gleiche Höhe aller Review-Cards
   ============================================ */

/* CLAUDE: Testimonial-Sektion Container */
/* CLAUDE: Dark Umber Hintergrund mit alignwide Columns */
/* CLAUDE: Selektor zielt auf die spezifische Struktur der Google-Reviews */
.wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide {
    /* CLAUDE: KRITISCH: align-items: stretch sorgt dafür, dass alle Columns */
    /* CLAUDE: die gleiche Höhe haben wie die höchste Column */
    align-items: stretch !important;
}

/* CLAUDE: Einzelne Review-Card (weiße Box) */
/* CLAUDE: Spezifischer Selektor für Testimonial-Cards im Dark Umber Container */
.wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color {
    /* CLAUDE: Flex-Container für vertikale Verteilung des Inhalts */
    display: flex !important;
    flex-direction: column !important;
    /* CLAUDE: Zentriert den Text horizontal */
    align-items: center !important;
    /* CLAUDE: Verteilt den Inhalt gleichmäßig mit space-between */
    /* CLAUDE: Der Name rutscht nach unten, der Testimonial-Text nach oben */
    justify-content: space-between !important;
    /* CLAUDE: Volle Höhe des Flex-Containers ausfüllen */
    height: 100% !important;
    /* CLAUDE: Mindesthöhe für konsistentes Erscheinungsbild */
    min-height: 280px;
    /* CLAUDE: Box-Sizing für korrekte Padding-Berechnung */
    box-sizing: border-box;
}

/* CLAUDE: Testimonial-Text (Zitat) */
/* CLAUDE: Der Text soll oben beginnen und den verfügbaren Platz nutzen */
.wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color > p:first-of-type {
    /* CLAUDE: Flex-grow 1 lässt den Text-Bereich wachsen */
    flex-grow: 1;
    /* CLAUDE: Vertikale Zentrierung des Texts im verfügbaren Raum */
    display: flex;
    align-items: center;
    /* CLAUDE: Kein unterer Margin, da justify-content: space-between den Abstand regelt */
    margin-bottom: 0;
}

/* CLAUDE: Autor-Name (letzter Paragraph in der Card) */
/* CLAUDE: Soll immer ganz unten in der Card stehen */
.wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color > p:last-of-type {
    /* CLAUDE: Flex-shrink 0 verhindert Schrumpfen */
    flex-shrink: 0;
    /* CLAUDE: Auto-Margin oben drückt den Namen nach unten */
    margin-top: auto !important;
    /* CLAUDE: Kein unterer Margin nötig */
    margin-bottom: 0;
}

/* ============================================
   CLAUDE: Responsive Anpassungen
   ============================================ */

/* CLAUDE: Tablet - Mindesthöhe reduzieren */
@media (max-width: 1024px) {
    .wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color {
        /* CLAUDE: Etwas geringere Mindesthöhe auf Tablet */
        min-height: 260px;
    }
}

/* CLAUDE: Mobile - Cards stapeln vertikal */
@media (max-width: 781px) {
    .wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color {
        /* CLAUDE: Noch geringere Mindesthöhe auf Mobile */
        min-height: 220px;
        /* CLAUDE: Etwas weniger Padding für Mobile */
        padding: var(--wp--preset--spacing--md) !important;
    }
}

/* CLAUDE: Kleine Screens */
@media (max-width: 480px) {
    .wp-block-group.has-dark-umber-background-color .wp-block-columns.alignwide > .wp-block-column.has-white-background-color {
        /* CLAUDE: Auto-Höhe auf sehr kleinen Screens */
        /* CLAUDE: Cards stapeln sich hier sowieso vertikal */
        min-height: auto;
    }
}