/* SPF Guest Reviews — frontend cards.
   Card order: guest header → rating → review text → host response.
   Every color and font is a CSS custom property; the values below are the
   site defaults (Playfair Display / Inter / #C9A96E accent). Admin-configured
   overrides are printed inline on .spfr-grid from Guest Reviews → Widgets. */

.spfr-grid {
    --spfr-accent: #C9A96E;
    --spfr-stars-off: #ddd6cc;
    --spfr-card-bg: #f8f6f3;
    --spfr-card-border: #e8e4df;
    --spfr-name: #1a1a1a;
    --spfr-text: #2d2d2d;
    --spfr-muted: #8a8a8a;
    --spfr-font-heading: 'Playfair Display', Georgia, serif;
    --spfr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Desktop review-text cap. Also the knob that sets the uniform card height:
       the tallest card can never exceed header + stars + this + padding. */
    --spfr-text-max: 200px;

    display: grid;
    gap: 24px;
    margin: 8px 0;
    /* Mobile (single column) cards hug their content; the desktop rule below
       normalizes every card in the widget to one height. */
    align-items: start;
}
.spfr-cols-1 { grid-template-columns: 1fr; }
.spfr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.spfr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.spfr-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .spfr-cols-3, .spfr-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .spfr-grid { grid-template-columns: 1fr; }
}

.spfr-card {
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto, which pins each 1fr track to the
       card's min-content width and overflows the grid past its container
       (right-shifted, so the widget reads as off-centre). Let tracks shrink. */
    min-width: 0;
    background: var(--spfr-card-bg);
    border: 1px solid var(--spfr-card-border);
    border-radius: 12px;
    padding: 24px 28px;
    font-family: var(--spfr-font-body);
    color: var(--spfr-text);
}

/* 1 — Guest header */
.spfr-guest {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    /* In a narrow card the nowrap property tag wraps to its own line (still
       right-aligned via its margin-left:auto) rather than widening the card. */
    flex-wrap: wrap;
    row-gap: 6px;
}
.spfr-guest-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
/* Initials circle — stands in for the photo when a review has none, and for
   every card when reviewer photos are switched off in Guest Reviews → Widgets.
   Sized for one or two letters inside the same 44px round as a real avatar. */
.spfr-guest-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--spfr-accent);
    color: #fff;
    font-family: var(--spfr-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-indent: 0.5px;      /* offset the trailing letter-space so it reads centred */
    text-transform: uppercase;
    user-select: none;
}
.spfr-guest-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.spfr-guest-name {
    font-family: var(--spfr-font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--spfr-name);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spfr-guest-sub {
    font-size: 12px;
    color: var(--spfr-muted);
    margin-top: 2px;
}
.spfr-property-tag {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--spfr-accent);
    text-decoration: none;
}
.spfr-property-tag:hover { opacity: 0.75; }

/* 2 — Rating */
.spfr-stars {
    font-size: 22px;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 14px;
}
.spfr-stars-on  { color: var(--spfr-accent); }
.spfr-stars-off { color: var(--spfr-stars-off); }

/* 3 — Review text.
   Desktop: full text always visible, scrolling inside the card when tall.
   Mobile (≤640px): preview + "Read more" link expands to the full text. */
.spfr-text { flex: 1 1 auto; overflow-wrap: break-word; }
.spfr-text p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 8px;
    color: var(--spfr-text);
}

@media (min-width: 641px) {
    .spfr-text-preview { display: none; }
    .spfr-text-full { display: block; }
    /* One card height for the whole widget: 1fr rows make every grid row as
       tall as the tallest row, and stretch makes each card fill its row. The
       text cap below bounds that height, so a widget of short reviews still
       gets short (but equal) cards, and anything taller scrolls. */
    .spfr-grid {
        grid-auto-rows: 1fr;
        align-items: stretch;
    }
    /* Cap ALL review text (not just read-more-length ones) so tall cards
       scroll instead of dictating the row height. */
    .spfr-text {
        max-height: var(--spfr-text-max, 200px);
        overflow-y: auto;
        /* Reserve the scrollbar gutter on every card so text wraps the same
           whether or not that card scrolls. */
        scrollbar-gutter: stable;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--spfr-card-border) transparent;
    }
    .spfr-text::-webkit-scrollbar { width: 6px; }
    .spfr-text::-webkit-scrollbar-thumb { background: var(--spfr-card-border); border-radius: 3px; }
    .spfr-text::-webkit-scrollbar-track { background: transparent; }
}
@media (max-width: 640px) {
    .spfr-text-full { display: none; }
    .spfr-card.spfr-expanded .spfr-text-full { display: block; }
    .spfr-card.spfr-expanded .spfr-text-preview { display: none; }
}

.spfr-readmore {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--spfr-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.spfr-readmore:hover { opacity: 0.75; }

/* 4 — Host response */
.spfr-response {
    margin: 6px 0 0;
    font-size: 13px;
}
.spfr-response summary {
    cursor: pointer;
    color: var(--spfr-muted);
    font-weight: 500;
}
.spfr-response summary:hover { color: var(--spfr-accent); }
.spfr-response p {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: #fff;
    border-left: 3px solid var(--spfr-accent);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--spfr-text);
}