/*
 * Futurismo Reviews — additive slider extras.
 *
 * FIDELITY: this file NEVER restyles the Swiper core or the original card rules
 * from slider-reviews.css (.frev-slide-container / .swiper-slide box-model,
 * .frev-rating, .frev-slide-description/-author/-date). It only styles the NEW
 * `frev-` elements introduced by the redesign: card head (avatar/badge/meta),
 * read-more, popup, and the left zone. Typography reuses the slider's current
 * tokens (Source Sans 3 / theme heading / --e-global-color-primary) — the
 * reference-image fonts are intentionally NOT copied.
 */

/* ── Review card surface (added 2026-08-27) ────────────────────────────────
 * The white card (background, radius, shadow, padding) was previously produced
 * by CSS that lived OUTSIDE this repository — it appears in NO commit of any of
 * the three stylesheets (verified across the full history). It was almost
 * certainly a hand edit made directly on the server inside the plugin folder,
 * which is why replacing the plugin folder removed it and the cards went flat.
 *
 * Owning the card here makes it survive future plugin updates instead of
 * depending on an out-of-band edit that no one can see or version.
 *
 * FIDELITY: this stays additive and does NOT touch slider-reviews.css (client
 * original, kept byte-identical). That file owns the BOX-MODEL of
 * .frev-slide-container (display:flex; flex-wrap:wrap; flex:0 0 100%;
 * width:100%); this rule only paints a surface on top of it.
 *   - box-sizing: padding must not widen the 100%-width slide.
 *   - height/align-content: equal-height cards, content pinned to the top.
 *   - radius 12px matches the popup card below, the plugin's only other card.
 *   - the shadow is deliberately soft; .swiper clips at its edges, so a heavy
 *     modal-style shadow would show a hard cut on the first/last slide.
 */
.frev-slider-reviews .frev-slide-container {
    box-sizing: border-box;
    align-content: flex-start;
    height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Stop the card shadow being sliced into a hard vertical edge. `.swiper` clips
 * at its own box (overflow:hidden, from the Swiper library), so a shadow on the
 * first/last visible card gets cut off flat. Padding moves the clip boundary
 * outwards while the equal negative margin keeps the CONTENT box — and therefore
 * every slide width Swiper computes — exactly where it was. Net effect: the
 * geometry is unchanged and the shadow simply has room to render.
 * The 20px horizontal value is deliberately less than the 40px the "<" arrow is
 * pulled out by, so the two never overlap. */
.frev-reviews-block .swiper.frev-slider-reviews {
    padding: 14px 20px;
    margin: -14px -20px;
}

/* Reference design: the review text breaks at ~2 lines with an ellipsis, then
 * "Read more" on its own line. The server already truncates by CHARACTER
 * (truncate_chars, default 180) — which kept the DOM small and avoided a flash
 * of untruncated text — but at the new narrower card width 180 characters is
 * roughly six lines, not two. Clamping by LINE here pins the visual result to
 * the reference regardless of the character setting stored on the widget, and
 * regardless of how wide or narrow the card ends up.
 * The full text still lives in the hidden .frev-text-full node for the popup. */
.frev-slide-description .frev-text-visible {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card head: avatar + author/date on the left, source badge top-right ── */
.frev-slide-container .frev-card-head {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.35rem;
}

.frev-card-head .frev-author-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.frev-card-head .frev-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
}

.frev-card-head .frev-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.frev-card-head .frev-avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    background: var(--e-global-color-primary, #0a6ec4);
    text-transform: uppercase;
}

.frev-card-head .frev-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

/* The author/date reuse the original .frev-slide-author / .frev-slide-date
   rules (styled in slider-reviews.css). Inside the meta column we only relax the
   full-width flex sizing those rules give them, so they stack tightly. */
.frev-card-head .frev-author-meta .frev-slide-author,
.frev-card-head .frev-author-meta .frev-slide-date {
    flex: 0 0 auto;
    width: auto;
}

.frev-card-head .frev-source-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.frev-card-head .frev-source-badge img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* ── Read more ── */
/* "Read more" sits on its OWN LINE under the text (reference design), not inline
 * at the end of the paragraph — hence block, not inline-block. margin-right:auto
 * keeps the underline hugging the text instead of spanning the whole card. */
.frev-slide-description .frev-read-more {
    display: block;
    width: fit-content;
    margin-right: auto;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--e-global-color-primary, #0a6ec4);

}

.frev-slide-description .frev-read-more:hover {
    text-decoration: none;
}

/* ── Popup (moved to <body> by JS; overlays the whole viewport) ── */
html.frev-popup-open {
    overflow: hidden;
}

.frev-popup[hidden] {
    display: none;
}

.frev-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.frev-popup .frev-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.frev-popup .frev-popup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    padding: 24px;
}

.frev-popup .frev-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: #6c757d;
}

.frev-popup .frev-popup-close:hover {
    color: #212529;
}

.frev-popup .frev-popup-body .frev-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.5rem;
	margin-top:2rem;
}

.frev-popup .frev-popup-text {
    margin-top: 0.75rem;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    line-height: 32px;
    color: #212529;
    white-space: pre-line;
}

/* Outer padding requested by the client (2026-08-27), literal. Also gives the
 * right-hand navigation arrow somewhere to sit once it is pulled outside the
 * slider column. */
.frev-reviews-block {
    padding: 0 2%;
}

/* ── Left zone (wraps around the slider column) ── */
.frev-reviews-block.frev-has-left-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Widened from 32px so the "<" arrow, pulled 40px out of the slider column
     * by slider-reviews.css, lands in the gutter between the two columns
     * instead of overlapping the left zone. */
    gap: 8rem;
}

/* 40 / 60 split (client decision 2026-08-27), replacing a fixed 260px column.
 * The 56px gap is shared evenly between the two bases so 40% + 60% + gap still
 * fits on one row and never wraps. */
.frev-reviews-block.frev-has-left-zone .frev-left-zone {
    flex: 0 0 calc(30% - 28px);
    max-width: calc(30% - 28px);
    /* All three rows (title, rating line, logo row) are centred in the column —
     * on desktop too, per the reference, not only on mobile. */
    text-align: center;
}

.frev-reviews-block.frev-has-left-zone .frev-slider-col {
    flex: 0 0 calc(65% - 28px);
    max-width: calc(65% - 28px);
    min-width: 0;
}

/* The navigation arrows are absolutely positioned by slider-reviews.css
 * (left/right 0 with a -40px pull) but that file gives them no positioned
 * ancestor, so they resolved against a far outer container and ended up at the
 * extremes of the whole block — the "<" landing before the left column instead
 * of beside the cards. Making the slider column the containing block puts them
 * exactly where the reference shows: "<" in the gutter between the left column
 * and the first card, ">" immediately after the last card. Scoped here rather
 * than edited into slider-reviews.css, which stays a client original. */
.frev-reviews-block .frev-slider-col {
    position: relative;
}

.frev-left-zone .frev-left-title {
    margin: 0 0 0.25rem;
	color: var(--e-global-color-primary);
	font-size:32px;
}

/* Summary row (reference design 2026-08-27): average rating, stars and review
 * count all on ONE horizontal line, directly under the title. Previously these
 * were stacked in a column. nowrap keeps them on a single line as the reference
 * requires; the 260px column has roughly 50px of slack at the default sizes. */
.frev-left-zone .frev-left-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Centred in the column on desktop as well as mobile (reference design). */
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
	margin-top:1.5rem;
    margin-bottom: 1rem;
}

.frev-left-zone .frev-left-rating {
    font-family: 'Marcellus', sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--e-global-color-primary);
}

.frev-left-zone .frev-left-count {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: #979797;
	margin-left:1.5rem;
}

/* Source logos side by side (reference design): a horizontal row, not a column.
 * Data-driven and wrapping, so it supports N sources — nothing is hardcoded, a
 * logo appears only for a source the API actually returns. */
.frev-left-zone .frev-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    /* Centred in the column on desktop as well as mobile (reference design). */
    justify-content: center;
    gap: 18px;
}

.frev-left-zone .frev-source-item {
    display: flex;
    align-items: center;
}

.frev-left-zone .frev-source-logo {
    max-width: 140px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.frev-left-zone .frev-source-badge-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.frev-left-zone .frev-source-name {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #212529;
}

/* The left-zone stars reuse .frev-rating / .frev-rating-star from the core.
 * line-height:1 keeps the star box from inflating the summary row's height.
 * (.frev-source-rating was dropped with the per-source rows — the reference
 * shows logos only, so no rule for it is needed any more.) */
.frev-left-zone .frev-rating {
    font-size: 24px;
    line-height: 1;
}

@media screen and (max-width: 767.98px) {
	
	
	.frev-left-title{
		font-size:28px !important;
	}
	
	.frev-left-summary{
		margin-top:0.8rem !important;
		margin-bottom:0.5rem !important;
	}
	
	
    /* Tighter card padding on phones, where 24px eats too much of the width. */
    .frev-slider-reviews .frev-slide-container {
        padding: 18px;
    }
    .frev-reviews-block.frev-has-left-zone {
        gap: 20px;
    }
    /* The 40/60 split collapses to a single stacked column on phones. Both
     * bases must be overridden, or the calc() values above would keep the two
     * columns side by side at unusable widths. */
    .frev-reviews-block.frev-has-left-zone .frev-left-zone,
    .frev-reviews-block.frev-has-left-zone .frev-slider-col {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .frev-left-zone .frev-source-item {
        align-items: center;
    }
}