/* ============================================================
   Reviews Wall – Elementor Widget Styles
   ============================================================ */

/* ── Container ── */
.grw-reviews-wall {
    width: 100%;
    position: relative;
}

/* ── Header ── */
.grw-header {
    text-align: center;
    margin-bottom: 28px;
}

.grw-header__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.grw-header__score {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.grw-header__subtitle {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.grw-header__verified-icon {
    flex-shrink: 0;
    line-height: 0;
}

/* ── Star system ── */
.grw-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.grw-star {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 0;
}

.grw-star__bg {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(100%) brightness(1.8);
    opacity: 0.35;
}

.grw-star__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    line-height: 0;
}

.grw-star__fill img {
    display: block;
    width: 18px;
    height: 18px;
    /* The SVG should have a yellow/gold fill already.
       If not, apply a filter to colourise: */
    filter: none;
}

/* ── Header stars are slightly larger ── */
.grw-header .grw-star {
    width: 22px;
    height: 22px;
}

.grw-header .grw-star__bg,
.grw-header .grw-star__fill img {
    width: 22px;
    height: 22px;
}

/* ── Column-based Masonry ── */
.grw-grid-wrapper {
    position: relative;
    overflow: hidden;
}

.grw-grid {
    display: grid;
    /* auto-fit will create as many columns as fit (min-width), but the total is still limited by the number of items rendered by PHP */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grw-column-min-width, 0px)), 1fr));
    align-items: flex-start;
}

.grw-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Card ── */
.grw-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease;
    /* Row gap between cards is set via Elementor row_gap → gap on .grw-column */
}

/* ── Card header ── */
.grw-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.grw-card__author-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.grw-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.grw-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #555;
    font-weight: 600;
    font-size: 1rem;
}

.grw-card__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.grw-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a1a;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grw-card__date {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.3;
}

.grw-card__google-logo {
    flex-shrink: 0;
    opacity: 0.8;
}

.grw-card__stars {
    margin-bottom: 8px;
}

.grw-card__text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
}

/* ── Veil overlay (CTA lives inside, pointer-events re-enabled on children) ── */
.grw-veil {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Fallback gradient — overridden by Elementor Group_Control_Background */
    background: linear-gradient(180deg, rgba(245, 241, 234, 0) 0%, #F5F1EA 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

/* Re-enable clicks on the CTA link inside the veil */
.grw-veil .grw-cta {
    pointer-events: auto;
}

/* ── CTA link (inside veil) ── */
.grw-cta {
    text-align: center;
}

.grw-cta a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
    transition: opacity 0.2s ease;
    display: inline-block;
}

.grw-cta a:hover {
    opacity: 0.7;
}

/* ── No reviews message ── */
.grw-no-reviews {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 40px 20px;
}

/* ── Responsive defaults ── Override defaults if needed, but the widget now uses dynamic variables */
@media (max-width: 767px) {
    .grw-header__score {
        font-size: 1.1rem;
    }
}