/* =============================================================================
   MyCV.ie - client reviews
   -----------------------------------------------------------------------------
   Shared by index.html and pricing.html so there is one place to edit when a
   new review comes in. Both pages carry the same markup block; copy a
   .review-card, change the name, date and text, and it appears on both.

   Reviews are typed in by hand rather than pulled from an API. Reasons, so
   nobody re-litigates this later:

   - The public places API returns a maximum of five reviews and chooses them
     itself, so it cannot show more than we already have and cannot be ordered.
   - Its terms do not allow the results to be stored, which rules out fetching
     them on a schedule and rendering them into the page.
   - A live fetch on page load puts the strongest trust element on the page
     behind a third-party service being up, and an outage would empty this
     section at the exact moment somebody is deciding whether to pay.

   Do NOT add Review or aggregateRating structured data for these. Reviews about
   a business, shown on that business's own site, are treated as self-serving
   and are not eligible for star ratings in search results. Marking them up gets
   you nothing and risks a manual action.

   The review count is deliberately not displayed. Show the words, not the
   total, until the total is worth showing.
   ============================================================================= */

.reviews {
    background: var(--bg-white, #ffffff);
    border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.1));
    border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.1));
    padding: 3.5rem 2rem;
}

.reviews-inner { max-width: 1000px; margin: 0 auto; }

.reviews-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-purple, #8b5cf6);
    margin-bottom: 0.5rem;
    text-align: center;
}

.reviews h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    color: var(--primary-dark, #0f172a);
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.review-card {
    background: var(--bg-light, #f8fafc);
    border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.1));
    border-left: 3px solid var(--accent-purple, #8b5cf6);
    padding: 1.75rem;
}

.review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 0.85rem;
}

.review-stars svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: #fbbc04; /* Google's own star colour, so it reads as a Google review */
}

.review-text {
    color: var(--primary-medium, #1e293b);
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* Author credit. Kept directly under the review it belongs to. */
.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-medium, #1e293b);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
}

.review-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-dark, #0f172a);
    line-height: 1.3;
}

.review-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

/* Link back to the listing, so anyone can check the reviews are real. */
.reviews-source {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.86rem;
    color: var(--text-muted, #64748b);
}

.reviews-source a {
    color: var(--accent-purple, #8b5cf6);
    font-weight: 600;
}

@media (max-width: 560px) {
    .reviews { padding: 2.75rem 1.25rem; }
    .review-card { padding: 1.4rem; }
}