/* ============================================================
   Review Carousel Plugin v1.1.0 — review-carousel.css
   Responsive: Desktop >900px (2 cards) | Tablet 601–900px (2 cards) | Mobile ≤600px (1 card)
   ============================================================ */

/* ---------- Box-sizing reset scoped to plugin ---------- */
.rc-section *,
.rc-section *::before,
.rc-section *::after {
    box-sizing: border-box;
}

/* ---------- CSS custom properties + section wrapper ---------- */
.rc-section {
    /* Colors */
    --rc-bg:             #F9FAFB;
    --rc-card-bg:        #ffffff;
    --rc-heading-color:  #0d0d0d;
    --rc-text-color:     #1a1a1a;
    --rc-meta-color:     #6A1115;   /* dark red — role & company */
    --rc-quote-icon:     #0d0d0d;
    --rc-dot-inactive:   #c5c5c5;
    --rc-dot-active:     #8b1a2e;
    --rc-arrow-prev-bg:  #8b1a2e;   /* dark red */
    --rc-arrow-next-bg:  #0d0d0d;   /* black */
    --rc-arrow-color:    #ffffff;

    /* Layout */
    --rc-card-radius:    8px;
    --rc-card-shadow:    0 1px 8px rgba(0,0,0,0.07);
    --rc-gap:            20px;
    --rc-transition:     transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);

    background-color: var(--rc-bg);
/*     padding: 60px 24px; */
    font-family: "Poppins", sans-serif;
}

/* ---------- Inner flex layout ---------- */
.rc-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================
   LEFT PANEL
   ============================ */
.rc-left {
    flex: 0 0 320px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.rc-heading {
    font-family: "Poppins", sans-serif;
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--rc-heading-color);
    margin: 0;
    padding: 0;
}

/* Desktop/tablet arrow group */
.rc-desktop-arrows {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================
   ARROWS (shared styles)
   ============================ */
.rc-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    padding: 0;
}
.rc-arrow-prev { background-color: var(--rc-arrow-prev-bg); color: var(--rc-arrow-next-bg); }
.rc-arrow-next { background-color: var(--rc-arrow-next-bg); color: var(--rc-arrow-next-bg); }
/* .rc-arrow:hover  { transform: scale(1.08); opacity: 0.9; } */
.rc-arrow:active { transform: scale(0.95); }
.rc-arrow:focus-visible { outline: 3px solid var(--rc-dot-active); outline-offset: 2px; }
.rc-arrow:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ============================
   RIGHT PANEL
   ============================ */
.rc-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================
   TRACK / SLIDES
   ============================ */
.rc-track-wrapper {
    overflow: hidden;
    width: 100%;
}

.rc-track {
    display: flex;
    gap: var(--rc-gap);
    transition: var(--rc-transition);
    will-change: transform;
    /* Prevent interaction during transitions */
    -webkit-user-select: none;
    user-select: none;
}

.rc-slide {
    /* Width set dynamically by JS; fallback for SSR/no-JS */
    flex: 0 0 calc(50% - var(--rc-gap) / 2);
    min-width: 0;
}

/* ============================
   CARD
   ============================ */
.rc-card {
    background: var(--rc-card-bg);
    border-radius: var(--rc-card-radius);
    box-shadow: var(--rc-card-shadow);
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    transition: box-shadow 0.2s ease;
}
.rc-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }

/* Opening quotation mark SVG */
.rc-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.rc-quote-icon svg { display: block; }

/* Quote body */
.rc-quote-text {
    color: var(--rc-text-color);
    font-size: 0.93rem;
    line-height: 1.7;
    flex: 1;
}
.rc-quote-text p { margin: 0; font-family: "Poppins", sans-serif; }

/* Author block */
.rc-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
/*     padding-top: 16px; */
    /* Top border separates author from quote */
/*     border-top: 1px solid rgba(0,0,0,0.06); */
}

.rc-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rc-heading-color);
    font-style: normal;
    display: block;
}

.rc-meta {
    font-size: 0.82rem;
    line-height: 1.55;
}

.rc-role,
.rc-company {
    color: var(--rc-meta-color);
    font-style: normal;
}

/* ============================
   BOTTOM ROW (dots + mobile arrows)
   ============================ */
.rc-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;     /* dots centred by default */
    gap: 16px;
    position: relative;
}

/* Mobile arrows — hidden on desktop, shown on mobile */
.rc-mobile-arrows {
    display: none;              /* shown via media query */
    gap: 10px;
    flex-shrink: 0;
}
.rc-mobile-arrows .rc-arrow {
    width: 40px;
    height: 40px;
}

/* Dots */
.rc-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--rc-dot-inactive);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.22s ease, transform 0.22s ease;
}
.rc-dot-active,
.rc-dot:hover {
    background-color: var(--rc-dot-active);
    transform: scale(1.2);
}
.rc-dot:focus-visible { outline: 2px solid var(--rc-dot-active); outline-offset: 2px; }

/* No-reviews admin notice */
.rc-no-reviews {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    padding: 40px;
    font-style: italic;
}

/* ============================================================
   TABLET  601 – 900 px: still 2 cards, compact left panel
   ============================================================ */
@media (max-width: 900px) {
    .rc-section {
        padding: 28px 20px;
        --rc-gap: 14px;
    }

    .rc-inner {
        gap: 20px;
        align-items: flex-start;
    }

    .rc-left {
        flex: 0 0 190px;
        min-width: 170px;
        gap: 20px;
    }

    .rc-heading {
        font-size: clamp(22px, 3.8vw, 32px);
        line-height: 1.15;
    }

    .rc-arrow {
        width: 38px;
        height: 38px;
    }

    .rc-card {
        padding: 24px 18px 20px;
    }

    .rc-quote-text {
        font-size: 0.78rem;
    }

    .rc-name {
        font-size: 0.88rem;
    }

    .rc-meta {
        font-size: 0.72rem;
    }

    .rc-slide {
        flex: 0 0 calc(50% - var(--rc-gap) / 2);
    }
}

/* ============================================================
   MOBILE  ≤ 600 px: 1 card, stacked layout, arrows below dots
   ============================================================ */
@media (max-width: 600px) {
    .rc-section {
/*         padding: 36px 16px; */
        --rc-gap: 0px;
    }

    .rc-inner {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    /* Left: heading fills width, desktop arrows hidden */
    .rc-left {
        flex: unset;
        width: 100%;
        min-width: unset;
        gap: 0;
    }

    .rc-heading {
        font-size: clamp(22px, 6vw, 30px);
        line-height: 1.15;
        width: 100%;
    }

    /* Hide desktop-only arrows */
    .rc-desktop-arrows {
        display: none;
    }

    /* Right panel: full width */
    .rc-right {
        width: 100%;
        gap: 16px;
    }

    /* Card full width */
    .rc-slide {
        flex: 0 0 100%;
    }

    .rc-card {
        padding: 24px 20px 20px;
    }

    /* Bottom row: arrows LEFT, dots centred */
    .rc-bottom-row {
        justify-content: space-between;
    }

    .rc-mobile-arrows {
        display: flex;    /* show on mobile */
    }

    /* Move dots to right side of the row — flex order */
    .rc-dots {
        flex: 1;
        justify-content: right;
    }
}

/* ============================================================
   Very small  ≤ 380 px
   ============================================================ */
@media (max-width: 380px) {
    .rc-section {
        padding: 18px 12px;
    }

    .rc-heading {
        font-size: 1.35rem;
    }

    .rc-quote-text {
        font-size: 0.78rem;
    }
}

/* ============================================================
   Reduced-motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rc-track { transition: none; }
    .rc-arrow, .rc-dot { transition: none; }
}