/* ============================================================
   WML Testimonial Spotlight
   Infinite testimonial carousel with image hover reveal
   ============================================================ */

.wml-tspot-container {
    --wml-tspot-fade: #0c0c0e;
    --wml-tspot-overlay: rgba(12, 12, 14, 0.55);
    width: 100%;
    max-width: 100%;
    /* min-width:0 stops the track's max-content width from forcing the
       element (and any grid/flex parent) wider than its cell. */
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    /* Small vertical padding so the card shadow / hover zoom isn't clipped by
       overflow:hidden. Override via the element's own padding in Bricks. */
    padding: 10px 0;
}

/* Ambient side-fades */
.wml-tspot-container::before,
.wml-tspot-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.wml-tspot-container::before {
    left: 0;
    background: linear-gradient(to right, var(--wml-tspot-fade), transparent);
}

.wml-tspot-container::after {
    right: 0;
    background: linear-gradient(to left, var(--wml-tspot-fade), transparent);
}

/* --- Track --- */
.wml-tspot-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

/* --- Testimonial Card --- */
.wml-tspot-card {
    position: relative;
    background-color: #16161a;
    border: 1px solid #282830;
    border-radius: 16px;
    padding: 40px;
    width: 440px;
    min-height: 320px;
    flex-shrink: 0;
    color: #f5f5f7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: border-color 0.4s ease;
}

/* --- Dynamic Background Image Reveal --- */
.wml-tspot-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Overlay layer over the image — an even tint across the whole card so the
   image stays subdued and the text remains legible everywhere. */
.wml-tspot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wml-tspot-overlay);
    z-index: 2;
    opacity: 0;
    /* No fade — the tint appears instantly so the image never flashes
       un-overlaid before the overlay catches up. */
    transition: none;
}

/* Card content sits on top of the image layers. Content flows from the top
   (so the review text lines up across cards regardless of length); the author
   name is pushed to the bottom. */
.wml-tspot-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    /* Fill the card's height however that height is derived, so the author
       name (margin-top:auto) can sit at the bottom. */
    flex: 1 1 auto;
    height: 100%;
    justify-content: flex-start;
    gap: 20px;
}

/* --- Hover States --- */
.wml-tspot-card:hover {
    border-color: #444450;
}

.wml-tspot-card:hover .wml-tspot-card-bg {
    opacity: 1;
    transform: scale(1);
}

.wml-tspot-card:hover .wml-tspot-overlay {
    opacity: 1;
}

/* --- Card Content Sub-elements --- */
.wml-tspot-rating-badge {
    display: inline-flex;
    align-items: center;
}

/* The badge box now wraps both the rating value and the stars. */
.wml-tspot-rating-number {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background-color: #24242b;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #a1a1aa;
    transition: opacity 0.5s ease;
}

.wml-tspot-rating-value {
    line-height: 1;
}

.wml-tspot-stars {
    color: #007aff;
    font-size: 16px;
    letter-spacing: 2px;
    /* letter-spacing also adds 2px after the last star — pull it back so the
       box has equal space on the left and right. */
    margin-right: -2px;
    white-space: nowrap;
    line-height: 1;
}

.wml-tspot-review-text {
    font-size: 15px;
    line-height: 1.65;
    color: #d4d4d8;
    font-weight: 400;
    margin: 0;
    transition: opacity 0.5s ease;
}

/* On hover the photo is revealed — fade out only the review text so the
   rating number, stars and author name remain visible over the image. */
.wml-tspot-card:hover .wml-tspot-review-text {
    opacity: 0;
}

.wml-tspot-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin: 0;
    /* Pin the author name to the bottom of the card. */
    margin-top: auto;
}

/* --- Static mode (carousel disabled) --- */
.wml-tspot-container.wml-tspot-static {
    overflow: visible;
}

.wml-tspot-container.wml-tspot-static::before,
.wml-tspot-container.wml-tspot-static::after {
    display: none;
}

.wml-tspot-container.wml-tspot-static .wml-tspot-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
    will-change: auto;
}