/* Testimonials: dark band, three review cards per frame, Lightning "See more" popover for long reviews. */
.ocf-testimonials {
    background: var(--neptune-bg-alt);
    /* Full-width hairlines frame the light band against the sections above and below (same line as the header). */
    border-block: var(--card-border-width) solid color-mix(in srgb, var(--ocf-heading) 22%, transparent);
    padding-block: var(--ocf-section-compact-pad);
}

/* Optional background photo under a strong light wash (alt surface), so it reads as a soft texture; dark mode follows bg-alt. */
.ocf-testimonials--image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ocf-testimonials-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.ocf-testimonials-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-testimonials-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--neptune-bg-alt) 86%, transparent);
}

.ocf-testimonials .heading-2 {
    color: var(--ocf-heading);
    white-space: pre-line;
}

.ocf-testimonials .eyebrow,
.ocf-testimonials-actions .ocf-text-link {
    color: var(--ocf-link);
}

.ocf-testimonials-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ocf-grid-gap);
    margin-bottom: calc(var(--ocf-grid-gap) * 1.25);
}

.ocf-testimonials-actions {
    display: flex;
    align-items: center;
    gap: var(--ocf-grid-gap);
    flex-shrink: 0;
}

.ocf-testimonials-rating {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: calc(var(--ocf-space-unit) * 0.5);
    color: var(--ocf-heading);
}

.ocf-testimonials-rating__value {
    grid-row: span 2;
    font-family: var(--ocf-font-heading);
    font-size: var(--font-h2-size);
    font-weight: var(--ocf-font-h2-weight);
    line-height: 1;
}

.ocf-testimonials-rating__stars {
    color: var(--neptune-star);
    letter-spacing: calc(var(--ocf-space-unit) * 0.125);
}

.ocf-testimonials-rating__label {
    max-width: calc(var(--ocf-space-unit) * 14);
    color: var(--ocf-body);
    font-size: var(--ocf-font-small-size);
    line-height: 1.35;
}

.ocf-testimonial-nav {
    display: flex;
    gap: calc(var(--ocf-grid-gap) * 0.375);
}

.ocf-testimonial-nav[hidden] {
    display: none;
}

.ocf-testimonial-nav button {
    display: inline-grid;
    place-items: center;
    width: var(--ocf-gallery-nav-size);
    height: var(--ocf-gallery-nav-size);
    padding: 0;
    border: var(--card-border-width) solid var(--ocf-border);
    border-radius: var(--button-radius);
    background: var(--ocf-bg);
    color: var(--ocf-link);
    transition: border-color var(--duration), background var(--duration);
}

.ocf-testimonial-nav button:hover:not(:disabled) {
    border-color: var(--ocf-primary);
    background: var(--ocf-bg);
}

.ocf-testimonial-nav button:disabled {
    opacity: 0.4;
}

.ocf-testimonial-nav svg {
    width: calc(var(--ocf-space-unit) * 1.25);
    height: calc(var(--ocf-space-unit) * 1.25);
}

.ocf-testimonial-viewport {
    overflow: hidden;
    overflow: clip; /* no programmatic scroll when a card gets focus */
}

.ocf-testimonial-track {
    --testimonial-per-view: 3;
    display: flex;
    gap: var(--ocf-grid-gap);
    transition: transform var(--duration) var(--ease);
}

/* Soft off-white cards (alternate surface) on the blue band: crisp without pure-white glare; dark in dark mode. */
.ocf-testimonial-card {
    position: relative;
    color: var(--ocf-body);
    display: flex;
    flex: 0 0 calc((100% - var(--ocf-grid-gap) * (var(--testimonial-per-view) - 1)) / var(--testimonial-per-view));
    flex-direction: column;
    gap: var(--ocf-grid-gap);
    min-width: 0;
    padding: calc(var(--ocf-grid-gap) * 1.125);
    border: var(--card-border-width) solid var(--ocf-border);
    border-radius: var(--card-radius);
    background-color: var(--ocf-bg);
    /* Matte pane: faint grain + a soft top highlight. */
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--ocf-heading-alt) 55%, transparent) 0, transparent 1px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--ocf-dark-bg) 35%, transparent);
}

.ocf-testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ocf-space-unit);
}

.ocf-testimonial-stars {
    display: flex;
    gap: calc(var(--ocf-space-unit) * 0.125);
    color: var(--neptune-star);
}

.ocf-testimonial-stars svg {
    width: calc(var(--ocf-space-unit) * 1.125);
    height: calc(var(--ocf-space-unit) * 1.125);
    fill: currentColor;
}

.ocf-testimonial-stars svg.is-empty {
    opacity: 0.25;
}

.ocf-testimonial-quote {
    width: calc(var(--ocf-space-unit) * 2);
    height: calc(var(--ocf-space-unit) * 2);
    color: var(--ocf-link);
    opacity: 0.25;
}

.ocf-testimonial-card blockquote {
    margin: 0;
    color: var(--ocf-heading);
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
}

.ocf-testimonial-footer {
    display: flex;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.75);
    margin-top: auto;
    padding-top: calc(var(--ocf-grid-gap) * 0.75);
    border-top: var(--card-border-width) solid color-mix(in srgb, var(--ocf-heading) 18%, transparent);
}

.ocf-testimonial-avatar {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: calc(var(--ocf-space-unit) * 2.75);
    height: calc(var(--ocf-space-unit) * 2.75);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--ocf-link) 12%, transparent);
    color: var(--ocf-link);
    font-size: var(--ocf-font-small-size);
    font-weight: var(--font-weight-bold);
}

.ocf-testimonial-author {
    display: flex;
    flex-direction: column;
    font-size: var(--ocf-font-small-size);
    line-height: 1.4;
}

.ocf-testimonial-author strong {
    color: var(--ocf-heading);
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-bold);
}

.testimonial-more-wrap {
    display: inline;
}

.testimonial-more-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ocf-link);
    font: inherit;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.testimonial-review-popover {
    display: none;
}

.ocf-testimonial-card.is-review-open .testimonial-review-popover {
    position: absolute;
    inset: calc(var(--ocf-grid-gap) * 0.375);
    z-index: 3;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: calc(var(--ocf-grid-gap) * 0.5);
    padding: calc(var(--ocf-grid-gap) * 0.75);
    border: var(--card-border-width) solid var(--ocf-border);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: var(--image-shadow);
}

.testimonial-review-popover__text {
    min-height: 0;
    overflow: auto;
    padding-right: calc(var(--ocf-space-unit) * 0.25);
    color: var(--ocf-body);
    font-size: var(--ocf-font-small-size);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    white-space: pre-line;
}

.testimonial-review-popover__close {
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ocf-link);
    font-size: var(--ocf-font-small-size);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

@media (max-width: 1023px) {
    .ocf-testimonial-track {
        --testimonial-per-view: 2;
    }
}

@media (max-width: 640px) {
    .ocf-testimonials-header {
        flex-direction: column;
        align-items: start;
    }

    .ocf-testimonials-actions {
        width: 100%;
        justify-content: space-between;
    }

    .ocf-testimonial-track {
        --testimonial-per-view: 1;
    }
}