/* TPC Reviews Banner — section styles
 *
 * Mirrors the design language of the TPC marketing mockup
 * (brand/web-hosting-mockup.html, section #7 "Don't just take our word
 * for it"). Uses the brand color palette where possible:
 *
 *   --tpcrb-green:   #009245   (Trustpilot stars + dot accents)
 *   --tpcrb-lime:    #80B726   (Trusted Shops stars)
 *   --tpcrb-dark:    #353535   (text)
 *   --tpcrb-warmgray:#958B85   (muted author + meta)
 *   --tpcrb-cream:   #fefefc   (card background)
 *   --tpcrb-border:  #f0f0ee   (card border)
 *
 * Cards are rounded-2xl (16px) with a subtle shadow and a transparent
 * top-right corner where the provider logo sits, matching the mockup's
 * 3-column white-card grid look.
 */

.section-reviewsbanner {
    --tpcrb-green:   #009245;
    --tpcrb-lime:    #80B726;
    --tpcrb-dark:    #353535;
    --tpcrb-warmgray:#958B85;
    --tpcrb-border:  #f0f0ee;

    padding-top: 80px;
    padding-bottom: 80px;
    /* Inherit page background; the section is transparent so Lagom's
     * theme settings (light, dark, custom color) all work without
     * fighting the addon. */
    background: transparent;
}

/* Brand-styled section heading. The .section-caption / .section-title /
 * .section-subtitle classes are Lagom's defaults; we layer brand styling
 * on top so the section feels native to Lagom2 but matches the marketing
 * mockup's typography. */
.section-reviewsbanner .section-caption {
    display: block;
    font-size: 0.72rem !important;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tpcrb-green) !important;
    margin-bottom: 8px;
}

.section-reviewsbanner .section-title {
    font-weight: 800 !important;
    color: var(--tpcrb-dark);
    margin-bottom: 12px;
}

.section-reviewsbanner .section-subtitle {
    color: var(--tpcrb-warmgray);
    font-size: 1.05rem;
    max-width: 36rem;
    margin: 0 auto 8px;
}

.section-reviewsbanner .tpcrb-carousel {
    position: relative;
    margin-top: 40px;
    /* Lagom's .container is itself a flex parent, so width:100% on a
     * flex item is ignored when the item's intrinsic content is larger.
     * The recipe that actually clamps a flex item to its parent is:
     *   flex: 1 1 0%   -> allow grow, allow shrink, base size 0
     *   min-width: 0   -> allow shrinking below intrinsic content
     *   max-width: 100%
     * Without min-width:0, flex children refuse to shrink past the
     * widest child, which is exactly what was breaking the carousel.
     */
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    /* Reserve gutters on either side so the absolutely-positioned nav
     * arrows have room to sit fully inside the carousel viewport
     * instead of being clipped by overflow:hidden. */
    padding-left: 56px;
    padding-right: 56px;
}

@media (max-width: 768px) {
    .section-reviewsbanner .tpcrb-carousel {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.section-reviewsbanner .tpcrb-track {
    display: flex;
    /* gap is also subtracted from each slide's flex-basis in the JS so
     * the slides line up perfectly with %-based translateX paging. */
    gap: 24px;
    width: 100%;
    min-width: 0;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

/* Each card. The mockup uses bg-white rounded-2xl p-6 border + shadow-sm. */
.section-reviewsbanner .tpcrb-card {
    /* Default flex-basis matches 3-column layout; the JS recalculates
     * this on resize for tablet/mobile breakpoints. */
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--tpcrb-border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .25s ease, transform .25s ease;
    text-align: left;
}

.section-reviewsbanner .tpcrb-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transform: translateY(-4px);
}

@media (max-width: 991px) {
    .section-reviewsbanner .tpcrb-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 640px) {
    .section-reviewsbanner .tpcrb-card {
        flex-basis: 100%;
    }
}

/* ── Star row ──────────────────────────────────────────────────── */
/* The .tpcrb-stars container is a flex row of 5 star elements. Each
 * provider supplies its own brand-correct icons via SVG <img>, so the
 * row itself is style-neutral. Unicode <span> stars are kept as a
 * fallback for unknown providers. */
.section-reviewsbanner .tpcrb-stars {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    line-height: 1;
}

/* Trustpilot's official mark is a row of green squares with no gap so
 * they read as a single bar. */
.section-reviewsbanner .tpcrb-stars-trustpilot {
    gap: 2px;
}

/* Trusted Shops uses standalone gold stars with a small breathing gap. */
.section-reviewsbanner .tpcrb-stars-trustedshops {
    gap: 3px;
}

/* SVG <img> star common sizing. */
.section-reviewsbanner .tpcrb-star {
    height: 20px !important;
    width: 20px !important;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Unicode <span> fallback for unknown providers (Google etc.) */
.section-reviewsbanner span.tpcrb-star {
    font-size: 18px;
    letter-spacing: 2px;
    width: auto !important;
    height: auto !important;
}
.section-reviewsbanner span.tpcrb-star-on  { color: var(--tpcrb-lime); }
.section-reviewsbanner span.tpcrb-star-off { color: var(--tpcrb-lime); opacity: .22; }

/* ── Title + body ──────────────────────────────────────────────── */
.section-reviewsbanner .tpcrb-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.4;
    color: var(--tpcrb-dark);
    /* Reserve space for the corner badge so long titles don't run under it. */
    padding-right: 36px;
}

/* Lagom's theme applies a green-tinted background + left border to all
 * <blockquote> elements by default. We use a blockquote tag for
 * semantic correctness but want it to render as plain body text inside
 * the card, so reset every box property explicitly. */
.section-reviewsbanner blockquote.tpcrb-body,
.section-reviewsbanner .tpcrb-body {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--tpcrb-dark);
    flex-grow: 1;
    quotes: "\201C""\201D";
}

.section-reviewsbanner .tpcrb-body::before {
    content: open-quote;
    margin-right: 2px;
    opacity: .35;
}

.section-reviewsbanner .tpcrb-body::after {
    content: close-quote;
    margin-left: 2px;
    opacity: .35;
}

/* ── Meta row (author + optional translated badge) ─────────────── */
.section-reviewsbanner .tpcrb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 0;
    border-top: none;
    font-size: .78rem;
    color: var(--tpcrb-warmgray);
}

.section-reviewsbanner .tpcrb-author {
    font-weight: 500;
    color: var(--tpcrb-warmgray);
}

.section-reviewsbanner .tpcrb-translated {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .7rem;
    font-style: italic;
    background: rgba(0,0,0,.04);
    color: var(--tpcrb-warmgray);
    margin-left: auto;
}

/* ── Provider logo (top-right corner of each card) ─────────────── */
.section-reviewsbanner .tpcrb-provider-logo {
    position: absolute;
    top: 18px;
    right: 18px;
    height: 26px !important;
    width: 26px !important;
    max-height: 26px;
    max-width: 26px;
    display: block;
    object-fit: contain;
    opacity: 0.92;
    transition: opacity .2s ease, transform .2s ease;
}

.section-reviewsbanner .tpcrb-provider-logo:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* The Trusted Shops trustmark is a circular badge — render perfectly round. */
.section-reviewsbanner .tpcrb-provider-logo.tpcrb-provider-trustedshops {
    border-radius: 50%;
}

/* Trustpilot's icon is a square — keep it square with a tiny rounded corner. */
.section-reviewsbanner .tpcrb-provider-logo.tpcrb-provider-trustpilot {
    border-radius: 4px;
}

/* ── Carousel navigation ───────────────────────────────────────── */
/* Lagom's button reset paints buttons white-on-white in some themes,
 * which made our chevron invisible. Every visual property here is
 * marked !important so the cascade can never lose. */
.section-reviewsbanner .tpcrb-nav,
.section-reviewsbanner button.tpcrb-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--tpcrb-border) !important;
    background: #ffffff !important;
    color: var(--tpcrb-dark) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    z-index: 5 !important;
}

.section-reviewsbanner .tpcrb-nav:hover,
.section-reviewsbanner button.tpcrb-nav:hover {
    background: var(--tpcrb-green) !important;
    color: #ffffff !important;
    border-color: var(--tpcrb-green) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* Sit fully inside the carousel padding gutters so overflow:hidden
 * never clips them. The 6px offset gives a tiny visual breathing
 * room from the edge. */
.section-reviewsbanner .tpcrb-nav-prev { left: 6px !important; right: auto !important; }
.section-reviewsbanner .tpcrb-nav-next { right: 6px !important; left: auto !important; }

@media (max-width: 768px) {
    .section-reviewsbanner .tpcrb-nav-prev { left: 4px !important; }
    .section-reviewsbanner .tpcrb-nav-next { right: 4px !important; }
}

/* ── Pagination dots ───────────────────────────────────────────── */
.section-reviewsbanner .tpcrb-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.section-reviewsbanner .tpcrb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(0,0,0,.18);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.section-reviewsbanner .tpcrb-dot.is-active {
    background: var(--tpcrb-green);
    transform: scale(1.25);
}