/* ============================================================
   TESTIMONIALS BLOCK  (hotelface/testimonials)
   ----------------------------------------------------------------
   Card-based testimonials grid with auto horizontal slider on
   narrow viewports. All values driven by design tokens
   (--card-*, --color-*, --space-*, --radius-*, --shadow-*).
   ============================================================ */

.hf-testimonials {
    position: relative;
    padding-block: var(--space-10, 64px);
}

/* Background variants — "default" inherits the page background so the
   block sits transparently inside whatever surrounds it. Muted/dark
   are opt-in via the inspector when a tinted band is desired. */
.hf-testimonials--bg-default { background: transparent; }
.hf-testimonials--bg-muted   { background: var(--color-bg-muted, #f8fafc); }
.hf-testimonials--bg-dark {
    background: var(--color-fg-strong, #0b1220);
    color: var(--color-white, #fff);
}

/* Container — uses theme container width */
.hf-testimonials__container {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding-inline: var(--container-pad, 28px);
}

/* Header — eyebrow / title / description */
.hf-testimonials__head {
    margin-bottom: var(--space-8, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    max-width: 720px;
}
.hf-testimonials__head--left   { align-items: flex-start; text-align: left;   margin-inline: 0; }
.hf-testimonials__head--center { align-items: center;     text-align: center; margin-inline: auto; }
.hf-testimonials__head--right  { align-items: flex-end;   text-align: right;  margin-inline: 0 0 0 auto; }

.hf-testimonials__eyebrow {
    margin: 0;
    font-size: var(--text-xs, .75rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, .08em);
    color: var(--brand-pri, #3264f5);
    font-weight: var(--weight-semibold, 600);
}
.hf-testimonials__title {
    margin: 0;
    font-family: var(--font-serif, 'Rufina', serif);
    font-size: var(--text-3xl, clamp(1.875rem, 1.5rem + 2vw, 2.5rem));
    font-weight: var(--weight-bold, 700);
    line-height: var(--leading-tight, 1.2);
    color: inherit;
}
.hf-testimonials__desc {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-md, 1.125rem);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-fg-subtle, #64748b);
}
.hf-testimonials--bg-dark .hf-testimonials__desc {
    color: color-mix(in srgb, var(--color-white, #fff) 70%, transparent);
}

/* List — responsive grid by default */
ul.hf-testimonials__list,
.hf-testimonials ul.hf-testimonials__list {
    display: grid;
    grid-template-columns: repeat(var(--hf-tm-cols, 3), minmax(0, 1fr));
    gap: var(--space-6, 24px);
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.hf-testimonials--cols-1 { --hf-tm-cols: 1; }
.hf-testimonials--cols-2 { --hf-tm-cols: 2; }
.hf-testimonials--cols-3 { --hf-tm-cols: 3; }
.hf-testimonials--cols-4 { --hf-tm-cols: 4; }

@media (max-width: 991px) {
    .hf-testimonials--cols-3 ul.hf-testimonials__list,
    .hf-testimonials--cols-4 ul.hf-testimonials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

li.hf-testimonials__item,
.hf-testimonials li.hf-testimonials__item {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    display: flex;
}
li.hf-testimonials__item::marker,
.hf-testimonials li.hf-testimonials__item::marker { content: none; }

/* Card — uses --card-* tokens but with deliberately softer shadows
   to keep testimonials feeling editorial and quiet (not commercial). */
.hf-testimonials__card {
    position: relative;
    width: 100%;
    background: var(--card-bg, #fff);
    border: var(--card-border, 1px solid #e2e8f0);
    border-radius: var(--card-radius, 16px);
    padding: var(--card-pad-lg, 32px) var(--card-pad, 24px) var(--card-pad, 24px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, .04));
    transition: var(--card-transition);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    overflow: hidden;
}
.hf-testimonials__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04));
    border-color: color-mix(in srgb, var(--color-border, #e2e8f0) 50%, var(--brand-pri, #3264f5));
}

.hf-testimonials--bg-dark .hf-testimonials__card {
    background: color-mix(in srgb, var(--color-white, #fff) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-white, #fff) 14%, transparent);
    color: var(--color-white, #fff);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hf-testimonials--bg-dark .hf-testimonials__card:hover {
    background: color-mix(in srgb, var(--color-white, #fff) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-white, #fff) 26%, transparent);
}

/* Decorative quote mark — large, brand-tinted, sits behind the quote */
.hf-testimonials__quote-mark {
    position: absolute;
    top: -16px;
    left: var(--space-5, 20px);
    font-family: var(--font-serif, 'Rufina', serif);
    font-size: 96px;
    line-height: 1;
    color: color-mix(in srgb, var(--brand-pri, #3264f5) 18%, transparent);
    pointer-events: none;
    user-select: none;
    font-weight: var(--weight-bold, 700);
}

/* Star rating — gold tones, brand-neutral */
.hf-testimonials__rating {
    display: inline-flex;
    gap: 4px;
    color: var(--color-warning, #f59e0b);
    font-size: var(--text-sm, .875rem);
}
.hf-testimonials__rating .fa-star.far {
    color: color-mix(in srgb, var(--color-warning, #f59e0b) 28%, transparent);
}

/* Quote */
.hf-testimonials__quote {
    margin: 0;
    flex: 1;
    quotes: none;
}
.hf-testimonials__quote p {
    margin: 0;
    font-size: var(--text-md, 1.0625rem);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-fg, #0f172a);
    font-weight: var(--weight-regular, 400);
    /* Gentle clamp at 7 lines so cards stay similar height */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hf-testimonials--bg-dark .hf-testimonials__quote p {
    color: color-mix(in srgb, var(--color-white, #fff) 90%, transparent);
}

/* Author footer */
.hf-testimonials__author {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--color-border-soft, #eef2f6);
    margin-top: auto;
}
.hf-testimonials--bg-dark .hf-testimonials__author {
    border-top-color: color-mix(in srgb, var(--color-white, #fff) 14%, transparent);
}

.hf-testimonials__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle, 50%);
    overflow: hidden;
    background: var(--color-bg-muted, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hf-testimonials__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-circle, 50%);
    border: 0;
    padding: 0;
    margin: 0;
}
.hf-testimonials__avatar--initials {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-pri, #3264f5) 16%, var(--color-bg-muted, #f8fafc)),
        color-mix(in srgb, var(--brand-sec, #7202bb) 16%, var(--color-bg-muted, #f8fafc)));
    color: var(--brand-pri, #3264f5);
    font-family: var(--font-serif, serif);
    font-size: 22px;
    font-weight: var(--weight-bold, 700);
}

.hf-testimonials__author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hf-testimonials__name {
    font-style: normal;
    font-weight: var(--weight-semibold, 600);
    font-size: var(--text-sm, .9rem);
    color: var(--color-fg-strong, #0b1220);
    line-height: var(--leading-tight, 1.2);
}
.hf-testimonials--bg-dark .hf-testimonials__name {
    color: var(--color-white, #fff);
}
.hf-testimonials__role {
    font-size: var(--text-xs, .8rem);
    color: var(--color-fg-subtle, #64748b);
    line-height: var(--leading-tight, 1.2);
}
.hf-testimonials--bg-dark .hf-testimonials__role {
    color: color-mix(in srgb, var(--color-white, #fff) 65%, transparent);
}

/* ============================================================
   SLIDER MODE — full-width horizontal scroll-snap.
   Stage = positioning context for prev/next overlay buttons.
   Viewport = scrolling area, full-bleed to viewport edges.
   ============================================================ */
.hf-testimonials__stage {
    position: relative;
}
.hf-testimonials--layout-slider .hf-testimonials__stage {
    /* Edge-bleed past page container so the slider feels expansive */
    margin-left:  calc(50% - 50vw + (var(--scrollbar-w, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--scrollbar-w, 0px) / 2));
}

.hf-testimonials__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Proximity (not mandatory) so the user can free-drag and pause
       between cards. The slider still snaps when scrolling settles
       near a card edge — just doesn't fight active dragging. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--container-pad, 28px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: var(--space-2, 8px); /* room for hover lift */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.hf-testimonials__viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;     /* let the drag move freely */
    scroll-behavior: auto;       /* no smooth fight while dragging */
}
/* Suppress link/button activation during drag so a card click after a
   drag doesn't open something the user didn't mean to. JS adds
   .is-dragging on pointerdown-with-movement; removes on pointerup. */
.hf-testimonials__viewport.is-dragging a,
.hf-testimonials__viewport.is-dragging button { pointer-events: none; }
.hf-testimonials__viewport::-webkit-scrollbar { display: none; }
.hf-testimonials__viewport:focus-visible {
    outline: 2px solid var(--brand-pri, #3264f5);
    outline-offset: -4px;
}

/* Slider mode: convert list to flex row with snap children */
.hf-testimonials--layout-slider ul.hf-testimonials__list,
.hf-testimonials--layout-slider .hf-testimonials ul.hf-testimonials__list {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-5, 20px);
    margin: 0;
    padding-inline: var(--container-pad, 28px);
    width: max-content;
    overflow: visible;
}
.hf-testimonials--layout-slider li.hf-testimonials__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: clamp(280px, 38vw, 420px);
}

/* Wider cards on big screens — three feels comfortable */
@media (min-width: 1200px) {
    .hf-testimonials--layout-slider li.hf-testimonials__item {
        width: clamp(340px, 28vw, 460px);
    }
}

/* ============================================================
   PREV / NEXT NAV — overlay, vertically centered on the cards.
   Frosted-glass background so they read on any color image
   behind the testimonials section.
   ============================================================ */
.hf-testimonials__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-raised, 10);
    width: 52px;
    height: 52px;
    border-radius: var(--radius-circle, 50%);
    border: 1px solid color-mix(in srgb, var(--color-fg, #0f172a) 8%, transparent);
    background: color-mix(in srgb, var(--color-white, #fff) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-fg-strong, #0b1220);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    /* Kill mobile tap-highlight rectangle (iOS Safari + Android Chrome
       paint a translucent block over the button on tap by default). */
    -webkit-tap-highlight-color: transparent;
    /* Some mobile browsers re-add a system focus outline on tap; this
       reset keeps the button visually clean (the keyboard
       :focus-visible state below restores a proper halo). */
    outline: none;
    transition: background var(--duration-fast, .2s) var(--ease-standard, ease),
                color var(--duration-fast, .2s) var(--ease-standard, ease),
                border-color var(--duration-fast, .2s) var(--ease-standard, ease),
                opacity var(--duration-fast, .2s) var(--ease-standard, ease),
                transform var(--duration-fast, .2s) var(--ease-standard, ease);
}
/* Mouse / touch focus (no keyboard) — no halo */
.hf-testimonials__nav:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: var(--shadow-md);
}
.hf-testimonials__nav--prev { left: var(--space-4, 16px); }
.hf-testimonials__nav--next { right: var(--space-4, 16px); }

@media (min-width: 768px) {
    .hf-testimonials__nav { width: 56px; height: 56px; }
    .hf-testimonials__nav--prev { left: var(--space-6, 24px); }
    .hf-testimonials__nav--next { right: var(--space-6, 24px); }
}

.hf-testimonials__nav:hover {
    background: var(--brand-pri, #3264f5);
    border-color: var(--brand-pri, #3264f5);
    color: var(--brand-pri-text, #fff);
    transform: translateY(-50%) scale(1.06);
}
.hf-testimonials__nav:active { transform: translateY(-50%) scale(.98); }
/* Bumped-specificity focus ring — beats global-a11y.css's
   `button:not(.btn):focus-visible { outline: 2px solid ...; border-radius: 3px }`
   which would otherwise paint a rectangular outline over our circular button. */
button.hf-testimonials__nav:focus-visible,
.hf-testimonials__nav:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-radius: var(--radius-circle, 50%) !important;
    box-shadow: var(--shadow-md), var(--shadow-focus);
}
.hf-testimonials__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Dark-bg variant: nav inverts to white-on-dark */
.hf-testimonials--bg-dark .hf-testimonials__nav {
    background: color-mix(in srgb, var(--color-white, #fff) 14%, transparent);
    color: var(--color-white, #fff);
    border-color: color-mix(in srgb, var(--color-white, #fff) 22%, transparent);
}
.hf-testimonials--bg-dark .hf-testimonials__nav:hover {
    background: var(--color-white, #fff);
    color: var(--color-fg-strong, #0b1220);
    border-color: var(--color-white, #fff);
}

/* On touch / mobile, smaller and slightly translucent — native scroll
   is the primary UX, but keep them visible for users who want them. */
@media (hover: none) and (pointer: coarse) {
    .hf-testimonials__nav { width: 44px; height: 44px; opacity: .9; }
}

/* ============================================================
   PAGINATION DOTS — sit centered under the slider.
   Each dot represents a "page" of cards (visible viewport width).
   ============================================================ */
.hf-testimonials__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-6, 24px);
    min-height: 16px; /* prevent layout shift while JS injects dots */
}
.hf-testimonials__pagination:empty { display: none; }

.hf-testimonials__dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: var(--radius-circle, 50%);
    padding: 0;
    background: color-mix(in srgb, var(--color-fg, #0f172a) 20%, transparent);
    cursor: pointer;
    transition: background var(--duration-fast, .2s) var(--ease-standard, ease),
                width var(--duration-fast, .2s) var(--ease-standard, ease),
                opacity var(--duration-fast, .2s) var(--ease-standard, ease);
}
.hf-testimonials__dot:hover {
    background: color-mix(in srgb, var(--brand-pri, #3264f5) 60%, transparent);
}
.hf-testimonials__dot.is-active {
    width: 28px;
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-pri, #3264f5);
}
.hf-testimonials__dot:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.hf-testimonials--bg-dark .hf-testimonials__dot {
    background: color-mix(in srgb, var(--color-white, #fff) 30%, transparent);
}
.hf-testimonials--bg-dark .hf-testimonials__dot.is-active {
    background: var(--color-white, #fff);
}

/* Auto-slider on narrow viewports — only for GRID layout. The slider
   layout already runs its own scroll container (.hf-testimonials__viewport),
   so applying these rules to it would create a second, conflicting
   scroll surface on the inner <ul>. */
@media (max-width: 767px) {
    .hf-testimonials--layout-grid ul.hf-testimonials__list,
    .hf-testimonials--layout-grid.hf-testimonials--cols-1 ul.hf-testimonials__list,
    .hf-testimonials--layout-grid.hf-testimonials--cols-2 ul.hf-testimonials__list,
    .hf-testimonials--layout-grid.hf-testimonials--cols-3 ul.hf-testimonials__list,
    .hf-testimonials--layout-grid.hf-testimonials--cols-4 ul.hf-testimonials__list {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        gap: var(--space-4, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: calc(var(--container-pad, 16px) * -1);
        padding-inline: var(--container-pad, 16px);
        padding-bottom: var(--space-2, 8px);
    }
    .hf-testimonials--layout-grid ul.hf-testimonials__list::-webkit-scrollbar { display: none; }
    .hf-testimonials--layout-grid li.hf-testimonials__item {
        flex: 0 0 auto;
        width: clamp(260px, 78vw, 340px);
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}

/* Slider mode on mobile — narrower cards so 1-2 cards visible at a time */
@media (max-width: 767px) {
    .hf-testimonials--layout-slider li.hf-testimonials__item {
        width: clamp(260px, 82vw, 360px);
        /* Keep snap soft — proximity not mandatory — so users can pause
           anywhere when free-swiping with their thumb. */
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}

@media (max-width: 575px) {
    .hf-testimonials { padding-block: var(--space-8, 40px); }
    .hf-testimonials__head { margin-bottom: var(--space-6, 24px); }
    .hf-testimonials__card {
        padding: var(--card-pad, 24px) var(--card-pad-sm, 20px) var(--card-pad-sm, 20px);
    }
    .hf-testimonials__quote-mark {
        font-size: 72px;
        top: -8px;
    }
}