/*
 * .gp-testi — members testimonial section.
 *
 * bg #0c0c0c, 90px py, 40px sides. 2-col grid (1.1fr 1fr), 60px gap,
 * vertically centered.
 *   LEFT: 4:3 before/after image with vertical 2px black divider +
 *         centered "4 MONTHS" chip at bottom
 *   RIGHT: gold rule + "MEMBER · TESTIMONIAL" eyebrow + quote
 *          (Manrope 26px, the accent phrase in gold weight 600) +
 *          member card (avatar + name + meta) + 5 hairline dots +
 *          "VIEW ALL TESTIMONIALS →" link
 */

.gp-testi {
    background: var(--gp-surface);
    color: var(--gp-text);
    padding: var(--gp-section-py) var(--gp-page-gutter);
}

.gp-testi__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ── before/after image ──────────────────────────────────────────── */
.gp-testi__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.gp-testi__divider {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    pointer-events: none;
}
.gp-testi__chip {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: var(--gp-gold);
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta-sm);
    letter-spacing: var(--gp-ls-meta-wider);
    text-transform: uppercase;
    padding: 4px 10px;
}

/* ── right column ────────────────────────────────────────────────── */
.gp-testi__quote {
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-quote);
    line-height: var(--gp-lh-quote);
    font-weight: 300;
    color: var(--gp-text);
    margin: 18px 0 0;
}
.gp-testi__quote .gp-testi__accent {
    font-style: normal;
    font-weight: 600;
    color: var(--gp-gold);
}

/* Member card */
.gp-testi__member {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}
.gp-testi__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* avatar is the only round element by design */
    background-color: #222;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.gp-testi__name {
    font-family: var(--gp-font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
.gp-testi__meta {
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta-sm);
    letter-spacing: 0.20em;
    color: var(--gp-text-dim);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Pagination dots + "VIEW ALL" link */
.gp-testi__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 36px;
}
.gp-testi__dot {
    width: 28px;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--gp-dur-base) var(--gp-ease-standard);
}
.gp-testi__dot.is-active { background: var(--gp-gold); }
.gp-testi__dot:hover     { background: rgba(255, 186, 0, 0.6); }
.gp-testi__view-all {
    margin-left: auto;
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta-sm);
    letter-spacing: 0.20em;
    color: var(--gp-text-dim);
    text-transform: uppercase;
    text-decoration: none;
}
.gp-testi__view-all:hover { color: var(--gp-gold); }

@media (max-width: 900px) {
    .gp-testi__grid { grid-template-columns: 1fr; gap: 40px; }
    .gp-testi__quote { font-size: 22px; }
}