/* ================================================================
   TVZ Testimonial Grid — Dedicated Stylesheet
   Loaded ONLY on pages that contain this widget.
================================================================ */

/* ── Grid wrapper ──────────────────────────────────────────── */
.tvzp-tgrid {
    width: 100%;
}

/* ── Grid layout: CSS Grid ─────────────────────────────────── */
.tvzp-tgrid--grid .tvzp-tgrid__track {
    display: grid;
    gap: 28px 28px;
    grid-template-columns: repeat(var(--tvzp-cols, 3), 1fr);
}

.tvzp-tgrid--grid[data-columns="1"] .tvzp-tgrid__track { --tvzp-cols: 1; }
.tvzp-tgrid--grid[data-columns="2"] .tvzp-tgrid__track { --tvzp-cols: 2; }
.tvzp-tgrid--grid[data-columns="3"] .tvzp-tgrid__track { --tvzp-cols: 3; }
.tvzp-tgrid--grid[data-columns="4"] .tvzp-tgrid__track { --tvzp-cols: 4; }

/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1024px) {
    .tvzp-tgrid--grid[data-columns="4"] .tvzp-tgrid__track,
    .tvzp-tgrid--grid[data-columns="3"] .tvzp-tgrid__track {
        --tvzp-cols: 2;
    }
}

@media (max-width: 767px) {
    .tvzp-tgrid--grid .tvzp-tgrid__track {
        --tvzp-cols: 1;
    }
    .tvzp-tgrid--carousel .owl-prev,
    .tvzp-tgrid--carousel .owl-next {
        display: none !important;
    }
}

/* ── Card ─────────────────────────────────────────────────── */
.tvzp-tgrid-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease;
    height: 100%;
}

.tvzp-tgrid-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* ── Quote icon (large ❝ top-left) ───────────────────────── */
.tvzp-tgrid-card__quote {
    font-size: 42px;
    line-height: 1;
    color: #e8a0a2;
    margin-bottom: -4px;
    display: block;
}

/* ── Review / quote text ──────────────────────────────────── */
.tvzp-tgrid-card__review {
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: #3d3d3d;
}

.tvzp-tgrid-card__review p {
    margin: 0;
}

/* ── Footer row ───────────────────────────────────────────── */
.tvzp-tgrid-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* Avatar circle with initial letter */
.tvzp-tgrid-card__avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a3065;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tvzp-tgrid-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Author name + location */
.tvzp-tgrid-card__author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.tvzp-tgrid-card__author-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #151923;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.tvzp-tgrid-card__author-meta {
    display: block;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Right-side block: stars (and optional platform) */
.tvzp-tgrid-card__footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

/* Stars */
.tvzp-tgrid-card__stars {
    display: flex;
    gap: 1px;
    font-size: 15px;
    line-height: 1;
    color: #ddd;
}

.tvzp-tgrid-card__star {
    display: inline-block;
}

.tvzp-tgrid-card__star.is-active {
    color: #f5a623;
}

/* Platform badge */
.tvzp-tgrid-card__platform {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #aaa;
}

.tvzp-tgrid-card__platform svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* ── Carousel: Owl nav ─────────────────────────────────────── */
.tvzp-tgrid--carousel .owl-item .tvzp-tgrid-card {
    height: 100%;
}

.tvzp-tgrid--carousel .owl-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.tvzp-tgrid--carousel .owl-prev,
.tvzp-tgrid--carousel .owl-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    color: #151923;
    line-height: 1;
}

.tvzp-tgrid--carousel .owl-prev:hover,
.tvzp-tgrid--carousel .owl-next:hover {
    background: #ef2528;
    color: #fff;
    border-color: #ef2528;
}

/* ── Carousel: Owl dots ────────────────────────────────────── */
.tvzp-tgrid--carousel .owl-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}