/* MDE - Reviews page (Bewertungen), templates/MDE/de/reviews.html.twig */
/* The `.reviews` prefix on some rules is needed to beat `.marketing .featurette …` in override.css */

.reviews .stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.reviews .star {
    width: 16px;
    height: 16px;
    fill: #dfe3e8;
}

.reviews .star.is-filled {
    fill: var(--bg--powerMail--color);
}

/* hero + CTA
   White text on the site's blue gradient drops to 2.76:1 at its lighter end. On solid #0096ff it is 3.09:1,
   enough for large text (bold ≥ 18.66px), so running text is 20px bold and small labels use dark blue (4.8:1). */

.reviews .reviews-hero,
.reviews .reviews-cta {
    background: var(--main--blue--light--second);
}

.reviews-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 700;
    color: var(--main--blue--dark);
    margin-bottom: 10px;
}

.reviews .reviews-hero .headline {
    margin-bottom: 20px;
}

.reviews-hero .overall-rating {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.reviews-hero .overall-rating .score {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
}

.reviews-hero .rating-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reviews .reviews-hero .star {
    width: 24px;
    height: 24px;
    fill: rgba(255, 255, 255, .35);
}

/* gold stars barely show on the blue hero */
.reviews .reviews-hero .star.is-filled {
    fill: #fff;
}

.reviews-hero .overall-rating .count {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--main--blue--dark);
}

.reviews-hero .lead {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    /* two even lines at ≥1200px while staying clear of the illustration */
    max-width: 670px;
    text-wrap: pretty;
}

/* below 1200px the illustration collides with the text or gets cut off */
@media (min-width: 1200px) {
    .reviews .reviews-hero {
        background-image: url(../img/carousel/bg_7.png);
        background-repeat: no-repeat;
        background-size: 1400px auto;
        /* percentage positioning offsets by 80% of (element width − image width), so the
           illustration tracks the right-hand edge as the viewport grows, clearing the
           centered text column */
        background-position: 80% calc(100% + 25px);
    }
}

/* platform cards */

.platform-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.platform-card {
    flex: 1 1 220px;
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.platform-card .platform-name {
    font-weight: 700;
    margin-bottom: 8px;
}

.platform-card .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.dot.trustpilot {
    background-color: #00b67a;
}

.dot.google {
    background-color: #4285f4;
}

.dot.reviewfinder {
    background-color: #f2994a;
}

.platform-card .platform-score {
    font-size: 30px;
    font-weight: 800;
    color: var(--main--blue--dark);
    margin-bottom: 8px;
}

/* --text--grey is only 3.33:1 on white at this size */
.platform-card .platform-count {
    font-size: 15px;
    color: #667085;
    margin: 0;
}

.platform-card .platform-link,
.review-card .platform-link{
    color: var(--main--blue--light);
    float: right;
}

/* review cards */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    /* every row as tall as the tallest card, so all cards match across rows too */
    grid-auto-rows: 1fr;
}

.review-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ecedf0;
    border-radius: 8px;
    padding: 22px;
}

.review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--main--blue--dark);
    background-color: var(--bg--grey--light);
}

.platform-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

/* Never clamped: the headline is the reviewer's own wording and is always shown
   in full, however many lines it takes. */
.review-card .review-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
    text-wrap: pretty;
}

/* Cards are equal height (grid-auto-rows above), so the body gets a fixed line
   budget and anything longer is cut with an ellipsis: 5 lines on a card without
   a headline, 4 when a headline takes the first line. Browsers without :has()
   just show 5 lines everywhere — a slightly taller, still uniform grid. */
.review-card .review-text {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.review-card:has(.review-title) .review-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* the translation marker belongs to the text above it, so they sit closer
   together than the 12px a standalone review body keeps below itself */
.review-card .review-text:has(+ .review-translated) {
    margin-bottom: 5px;
}

/* Per-card translation marker (en/fr only): each card names the language its
   review was translated from, so a future non-German source can differ. No top
   margin of its own — it stays directly under the review text, and the author
   row below keeps the auto margin, so any slack falls between the two. */
.review-card .review-translated {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    margin: 0 0 5px;
}

.review-card .review-meta {
    font-size: 13px;
    color: #667085;
    /* pins the author row to the card's bottom edge when the text runs short */
    margin: auto 0 0;
}

/* awards */

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.award-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 28px 26px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.award-card p {
    font-size: 15px;
}

.award-card a {
    margin-top: auto;
    font-weight: 600;
}

.award-card .award-year {
    color: var(--main--blue--dark);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* The German titles all run to two lines. Reserving that height keeps the body
   text — and with it the whole card — aligned across the row even where a
   translation happens to fit on one line. */
.reviews .award-card h3 {
    font-size: 22px;
    line-height: 1.25;
    min-height: 2.5em;
    margin: 0 0 10px;
}

/* CTA */

.reviews .reviews-cta .headline {
    margin-bottom: 8px;
}

.reviews .reviews-cta .reviews-cta-action .btn {
    margin-top: 0;
}

.reviews-cta p {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: pretty;
}

.reviews-cta-action {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .reviews-cta .row {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 992px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .awards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* single column: equal heights would only add whitespace between cards */
    .reviews-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .platform-cards {
        flex-direction: column;
    }

    /* in a column the 220px basis becomes a height */
    .platform-card {
        flex-basis: auto;
    }

    /* the 4-item subnav wraps to two rows here and would cover the eyebrow */
    .reviews-hero .eyebrow {
        margin-top: 20px;
    }

    .reviews-hero .overall-rating .score {
        font-size: 56px;
    }

    .reviews-cta-action {
        justify-content: flex-start;
        margin-top: 20px;
    }
}