/**
 * mod_testimonials - testimonial carousel.
 *
 * A scroll-snapping track of testimonial cards (avatar + name + quote), styled
 * to match the reference site's .jl-card: an off-white panel with a circular
 * avatar beside the name, then the quote below. One card per screen on phones,
 * two from small, three from medium up. Swiping and trackpad scrolling are
 * native; the dots and arrows are added by script.
 */

.mod-testimonials__viewport {
    position: relative;
}

.mod-testimonials__track {
    display: grid;
    grid-auto-flow: column;
    /* one card per page on the narrowest screens */
    grid-auto-columns: 100%;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* the dots are the affordance here */
    scrollbar-width: none;
}

.mod-testimonials__track::-webkit-scrollbar {
    display: none;
}

.mod-testimonials__track:focus-visible {
    outline: 2px solid var(--reformed-accent-1, #86c533);
    outline-offset: 4px;
}

.mod-testimonials__item {
    display: flex;
    scroll-snap-align: start;
}

/* mouse drag is script driven; the cursor only offers it when there is room */
.mod-testimonials--scrollable .mod-testimonials__track {
    cursor: grab;
}

.mod-testimonials--dragging .mod-testimonials__track {
    cursor: grabbing;
    user-select: none;
}

/* --------------------------------------------------------------- the card */
/* Mirrors the reference .jl-card: an off-white panel with square corners; a
   header holding a circular avatar beside the name, then the quote in the body.
   The card stretches to the tallest in the row, so every card is equal height. */
.mod-testimonials__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background: var(--reformed-white-2, #f1f1f1);
}

.mod-testimonials__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 20px 40px;
}

.mod-testimonials__avatar {
    flex: 0 0 auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-user-drag: none;
}

.mod-testimonials__name {
    flex: 1;
    margin: 0;
    font-family: var(--reformed-font-title, "Montserrat"), sans-serif;
    font-size: 1.36rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--reformed-grey-2, #666);
}

.mod-testimonials__body {
    margin: 0;
    padding: 0 40px 40px;
    color: var(--reformed-grey-2, #666);
}

.mod-testimonials__body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: inherit;
}

/* ---------------------------------------------------------------- arrows */

.mod-testimonials__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background-color: rgb(0 0 0 / 55%);
    border: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s, opacity .2s;
}

.mod-testimonials__arrow--prev {
    left: 0;
}

.mod-testimonials__arrow--next {
    right: 0;
}

.mod-testimonials__arrow:hover:not(:disabled) {
    background-color: var(--reformed-accent-1, #86c533);
    color: var(--reformed-black-2, #222);
}

.mod-testimonials__arrow:disabled {
    opacity: .3;
    cursor: default;
}

/* nothing to page through, so no arrows */
.mod-testimonials:not(.mod-testimonials--scrollable) .mod-testimonials__arrow {
    display: none;
}

/* ------------------------------------------------------------------ dots */

.mod-testimonials__nav {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.mod-testimonials__dot {
    display: block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    padding: 0;
    background-color: transparent;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.mod-testimonials__dot:hover,
.mod-testimonials__dot[aria-current="true"] {
    background-color: var(--reformed-white-2, #f1f1f1);
    border-color: var(--reformed-white-2, #f1f1f1);
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 639px) {
    /* small screens swipe instead */
    .mod-testimonials__nav {
        display: none;
    }
}

@media (min-width: 640px) {
    .mod-testimonials__track {
        grid-auto-columns: calc((100% - 1.5rem) / 2);
    }
}

@media (min-width: 960px) {
    .mod-testimonials__track {
        grid-auto-columns: calc((100% - 3rem) / 3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mod-testimonials__track {
        scroll-behavior: auto;
    }
}