/* =========================================================
   Site Toolkit — Reviews section
   Pixel-perfect за Figma-експортом (1600 / 730 / 350)
   Використовує Elementor Global Colors через var(--e-global-...)
   з fallback на локальні змінні (для випадків без Elementor).
   ========================================================= */

.loco-reviews{
    --lr-blue-500 : var(--ltk-blue-500, #1F65E9);
    --lr-blue-600 : var(--ltk-blue-600, #1E56C3);
    --lr-text     : var(--ltk-neutral-600, #415170);
    --lr-accent   : var(--ltk-neutral-900, #1E1E1E);
    --lr-bg-card  : var(--ltk-neutral-100, #EAF3FF);
    --lr-white    : #FFFFFF;
    --lr-slate    : #6687BE;
    --lr-btn-dark : #303030;
    --lr-grad     : var(--ltk-grad-primary, linear-gradient(90deg, #034DCF 0%, #3074F9 100%));

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;

    font-family: 'Gilroy', 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--lr-text) !important;
}

/* --- Title --- */
.loco-reviews .loco-reviews__title{
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    color: var(--lr-blue-500) !important;
    font-family: 'Gilroy','Inter',system-ui,sans-serif !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

/* --- Actions row (Google + Leave) --- */
.loco-reviews__actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.loco-reviews .loco-btn-outline,
.loco-reviews .loco-btn-primary{
    box-sizing: border-box;
    height: 56px;
    padding: 12px 24px;
    border-radius: 16px;
    font: 700 16px/1 'Gilroy','Inter',sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.loco-reviews .loco-btn-outline{
    background: transparent;
    color: var(--lr-btn-dark) !important;
    border: 1px solid var(--lr-blue-500);
    gap: 16px;
}
.loco-reviews .loco-btn-outline svg{ color: var(--lr-blue-500); }
.loco-reviews .loco-btn-outline:hover{ box-shadow: 0 4px 14px rgba(31,101,233,.15); }

.loco-reviews .loco-btn-primary{
    background: var(--lr-grad);
    color: #fff !important;
    border: 0;
}
.loco-reviews .loco-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(3,77,207,.25); }
.loco-reviews .loco-btn-primary:active{ transform: translateY(0); }

/* --- Grid wrapper (з fade + more) --- */
.loco-reviews__grid-wrap{
    position: relative;
    width: 100%;
}
.loco-reviews__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
    /* masonry — краще fallback на grid-auto-flow dense */
    grid-auto-rows: max-content;
}

/* --- Card --- */
.loco-review{
    box-sizing: border-box;
    padding: 24px 32px;
    background: var(--lr-bg-card);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.loco-review__head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.loco-review__badge{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--lr-white);
    border-radius: 8px;
    color: var(--lr-slate) !important;
    font: 400 16px/1 'Gilroy','Inter',sans-serif;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
    min-height: 26px;
}
.loco-review__badge--empty{ visibility: hidden; }

.loco-review__location{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lr-blue-600) !important;
    font: 400 16px/1 'Gilroy','Inter',sans-serif;
    flex-shrink: 0;
}
.loco-review__location svg{ flex: 0 0 20px; }

.loco-review__body{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loco-review__stars{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lr-accent) !important;
    line-height: 0 !important;
}
.loco-review__star{ display: block; }
.loco-review__star.is-off{ color: #C7D5EA; }

.loco-review .loco-review__text{
    margin: 0 !important;
    color: var(--lr-text) !important;
    font-family: 'Gilroy','Inter',sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.loco-review__footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font: 400 12px/1.4 'Gilroy','Inter',sans-serif;
}
.loco-review__author{ color: var(--lr-accent); }
.loco-review__date{ color: var(--lr-text); }

/* --- Fade overlay + More button --- */
.loco-reviews__grid-wrap.has-more .loco-reviews__grid{
    /* коли є ще прихованi — фейдимо низ */
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    padding-bottom: 40px;
}
/* На виpадок якщо в темі є градієнтний фон — робимо додатковий білий фейд поверх */
.loco-reviews__fade{
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 240px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 60%);
    pointer-events: none;
    z-index: 1;
}
.loco-reviews__grid-wrap:not(.has-more) .loco-reviews__fade{ display: none; }

.loco-reviews__more{
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: -28px;   /* кнопка виглядає поверх фейду */
}
.loco-reviews__grid-wrap:not(.has-more) .loco-reviews__more{ display: none; }

.loco-reviews__pool{ display: none; }

/* =========================================================
   Tablet 748+
   ========================================================= */
@media (max-width: 1200px){
    .loco-reviews{ max-width: 100%; gap: 32px; }
    .loco-reviews .loco-reviews__title{ font-size: 48px !important; }
    .loco-reviews__grid{ gap: 24px; }
    .loco-review{ padding: 20px 24px; border-radius: 20px; gap: 20px; }
}

@media (max-width: 1024px){
    .loco-reviews__grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .loco-review{ padding: 16px; }
    .loco-reviews .loco-reviews__title{ font-size: 44px !important; }
}

/* =========================================================
   Mobile 767-
   ========================================================= */
@media (max-width: 767px){
    .loco-reviews{ gap: 24px; padding: 0 12px; }
    .loco-reviews .loco-reviews__title{ font-size: 38px !important; }

    .loco-reviews__actions{
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }
    .loco-reviews__actions .loco-btn-outline,
    .loco-reviews__actions .loco-btn-primary{
        width: 100%;
    }

    .loco-reviews__grid{
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .loco-review{ padding: 16px; border-radius: 20px; gap: 20px; }
    .loco-review__head{ gap: 12px; }
    .loco-review .loco-review__text{ font-size: 15px !important; }

    .loco-reviews__fade{ height: 180px; }
}

@media (max-width: 400px){
    .loco-reviews .loco-reviews__title{ font-size: 34px !important; }
    .loco-review__badge{ font-size: 14px; }
    .loco-review__location{ font-size: 14px; }
}