/*
 * MWFewoManager — Reviews (Bewertungen)
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 *
 * Komponenten-Styles für:
 *   - accommodation_reviews_showcase  ("Das sagen unsere Gäste")
 *   - Leerzustand der Detail-Bewertungen (accommodation-reviews-summary--empty)
 *
 * Es werden ausschließlich die zentralen Tokens aus root.css verwendet
 * (jeweils mit hartem Fallback), damit Theme-Overrides (theme.css) sofort
 * greifen, ohne einzelne Klassen überschreiben zu müssen.
 */

/* --------------------------------------------------------------------------
   „Das sagen unsere Gäste" (accommodation_reviews_showcase)
   -------------------------------------------------------------------------- */

.reviews-showcase {
    max-width: var(--container, 1200px);
    margin-inline: auto;
}

.reviews-showcase__title {
    text-align: center;
    margin: 0 0 var(--space-3, 0.75rem);
}

.reviews-showcase__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    margin: 0 0 var(--space-6, 1.5rem);
    color: var(--color-text-muted, #6b7280);
    font-size: var(--font-size-sm, 0.9375rem);
}

.reviews-showcase__summary strong {
    color: var(--color-text, #1f2937);
    font-size: var(--font-size-lg, 1.25rem);
}

.reviews-showcase__summary-stars {
    display: inline-flex;
    gap: 2px;
}

.reviews-showcase__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5, 1.25rem);
}

@media (min-width: 640px) {
    .reviews-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .reviews-showcase__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.reviews-showcase__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-5, 1.25rem);
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--border-color, #e3e8ee);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-md, 0 6px 14px rgba(0, 0, 0, .08));
}

.reviews-showcase__rating {
    display: inline-flex;
    gap: 2px;
}

.reviews-showcase__star {
    width: 18px;
    height: 18px;
    fill: var(--border-color, #e3e8ee);
}

.reviews-showcase__star.is-filled {
    fill: var(--color-accent, #f59e0b);
}

.reviews-showcase__summary-stars .reviews-showcase__star {
    width: 16px;
    height: 16px;
}

.reviews-showcase__card-title {
    margin: 0;
    font-size: var(--font-size-md, 1.0625rem);
}

.reviews-showcase__text {
    color: var(--color-text, #1f2937);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reviews-showcase__text p {
    margin: 0 0 var(--space-2, 0.5rem);
}

.reviews-showcase__text p:last-child {
    margin-bottom: 0;
}

.reviews-showcase__meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.9375rem);
    color: var(--color-text-muted, #6b7280);
}

.reviews-showcase__author {
    font-weight: 600;
    color: var(--color-text, #1f2937);
}

/* --------------------------------------------------------------------------
   Detail-Bewertungen: Leerzustand (keine Bewertungen vorhanden)
   -------------------------------------------------------------------------- */

.accommodation-reviews-summary--empty {
    padding: var(--space-5, 1.25rem);
    background: var(--color-surface-alt, #f8fafc);
    border-radius: var(--radius-lg, 16px);
    color: var(--color-text-muted, #6b7280);
}

.accommodation-reviews-summary--empty p {
    margin: 0;
}