/* okitoki-v4 — reviews (mock-up v-reviews): one review at a time; v4 slides on scroll-snap
 * (swipe works without JS) and the dots come from assets/js/reviews.js. */

.v-reviews__items {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.v-reviews__items::-webkit-scrollbar { display: none; }
.v-reviews__items:focus-visible { outline: none; box-shadow: var(--v-focus-ring); border-radius: var(--v-radius); }
.v-reviews__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2px;
    scroll-snap-align: center;
}
.v-reviews__message {
    position: relative;
    width: 100%;
    padding: var(--v-space-lg) var(--v-space-lg) var(--v-space-2xl);
    border-radius: var(--v-radius);
    background-color: rgb(var(--v-color-white));
    line-height: var(--v-font-line-height);
    text-align: center;
    text-wrap: pretty;
}
.v-reviews__message p { margin-bottom: var(--v-space); }
.v-reviews__message p:last-child { margin-bottom: 0; }
.v-reviews__author {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px;
}
.v-reviews__avatar {
    width: 100px;
    height: 100px;
    margin-bottom: var(--v-space);
    overflow: hidden;
    border-radius: 50%;
    background: rgb(var(--v-color-white));
}
.v-reviews__avatar-image { width: 100%; height: 100%; object-fit: cover; }
.v-reviews__name { font-weight: var(--v-font-weight-bold); text-align: center; }
.v-reviews__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v-space-xs);
    margin-top: var(--v-space-lg);
}
.v-reviews__dots[hidden] { display: none; }
.v-reviews__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(var(--v-color-text), .35);
    cursor: pointer;
    transition: background-color var(--v-duration) var(--v-timing);
}
/* v4: a 10px dot is too small to hit; the hit area grows, the dot does not. */
.v-reviews__dot { box-shadow: 0 0 0 8px transparent; }
.v-reviews__dot[aria-current="true"],
.v-reviews__dot:hover { background-color: rgb(var(--v-color-primary)); }
.v-reviews__dot:focus-visible { outline: none; box-shadow: var(--v-focus-ring); }