/* ============================================================
   Model reels (inc/reels.php, assets/js/reels.js)
   Vida Glow pattern: a full-width row of portrait tiles, the centre one
   taller and playing, a card under each naming the model and the layout.
   Without JS the row is a plain swipe row of covers and cards; reels.js adds
   .is-ready and positions every tile from the centre.
   Tile sizes live in the custom properties so the JS reads the same numbers.
   ============================================================ */

/* Explicit display on every container: the Bricks shortcode wrapper leaves
   descendants inline-block on this install (build rule 76). */
.tc-reels,
.tc-reels__stage,
.tc-reel,
.tc-reel__media {
    display: block;
}

.tc-reels {
    --reel-w: 300px;
    --reel-h: 468px;
    --reel-hc: 534px;
    --reel-gap: 16px;
    --reel-card: 76px;
    --reel-card-gap: 12px;
    --reel-links: 36px;
    --reel-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    width: 100%;
}

@media (max-width: 767px) {
    .tc-reels {
        --reel-card: 94px;
        --reel-w: 250px;
        --reel-h: 392px;
        --reel-hc: 444px;
        --reel-gap: 12px;
    }
}

.tc-reels__stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tc-reels__track {
    display: flex;
    align-items: center;
    gap: var(--reel-gap);
    margin: 0;
    padding: 0 calc(50% - var(--reel-w) / 2);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.tc-reels__track::-webkit-scrollbar {
    display: none;
}

.tc-reel {
    flex: 0 0 var(--reel-w);
    width: var(--reel-w);
    margin: 0;
    padding: 0;
    scroll-snap-align: center;
}

/* Touch screens (reels.js adds .is-native): the browser's own scroll-snap,
   like the Our Range row on phones, so the swipe, momentum and axis lock are
   native and the page never bounces. The reel snaps to the centre with its
   neighbours peeking, and reels.js scales each tile by its distance from the
   centre as the row moves. */
.tc-reels.is-native .tc-reels__track {
    position: relative;
    align-items: flex-start;
    padding: 0 calc(50% - var(--reel-w) / 2);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.tc-reels.is-native .tc-reel {
    scroll-snap-align: center;
    transform-origin: 50% 50%;
    will-change: transform;
}

.tc-reels.is-native .tc-reel__media {
    height: var(--reel-hc);
}

/* Positioned by reels.js. */
.tc-reels.is-ready .tc-reels__stage {
    height: calc(var(--reel-hc) + var(--reel-card-gap) + var(--reel-card) + var(--reel-links));
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.tc-reels.is-dragging .tc-reels__stage {
    cursor: grabbing;
}

.tc-reels.is-ready .tc-reels__track {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: visible;
}

.tc-reels.is-ready .tc-reel {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(var(--reel-w) / -2);
    transition: transform var(--reel-glide, 0.5s) var(--reel-ease);
    will-change: transform;
}

.tc-reel__media {
    position: relative;
    height: var(--reel-h);
    overflow: hidden;
    background: #141517;
    cursor: pointer;
}

.tc-reels.is-ready .tc-reel__media {
    transition: height var(--reel-glide, 0.5s) var(--reel-ease);
}

.tc-reels.is-dragging .tc-reel,
.tc-reels.is-dragging .tc-reel__media,
.tc-reels .tc-reel.no-anim,
.tc-reels .tc-reel.no-anim .tc-reel__media {
    transition: none;
}

.tc-reel__cover,
.tc-reel__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* The frame a stopped reel is showing, held (reels.js) once its download is
   cancelled. It sits between the cover and the video. */
.tc-reel__snap {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}

.tc-reel.has-snap .tc-reel__snap {
    opacity: 1;
}

/* The video fades in over the cover once its first frame is painted (the
   same frame, so the fade is invisible), and goes instantly when its source
   is dropped, since the held frame under it already shows the same picture. */
.tc-reel__video {
    opacity: 0;
    pointer-events: none;
}

.tc-reel.is-playing .tc-reel__video {
    transition: opacity 0.15s ease;
}

.tc-reel.is-playing .tc-reel__video,
.tc-reel__video[data-keep] {
    opacity: 1;
}

/* Sound, bottom right of the centre tile only. */
.tc-reel__sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(250, 251, 252, 0.25);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fafbfc;
    cursor: pointer;
}

.tc-reel.is-centre .tc-reel__sound {
    display: inline-flex;
}

.tc-reel__sound svg {
    width: 20px;
    height: 20px;
}

.tc-reel__icon-on,
.tc-reels.is-sound .tc-reel__icon-off {
    display: none;
}

.tc-reels.is-sound .tc-reel__icon-on {
    display: block;
}

/* Card under the tile: model cut-out, model name, layout. Fixed slots so
   every card reads at the same heights whatever the layout's length. The
   top (.tc-reel__main) links to the model; the footer below it opens on the
   reel being watched only. */
.tc-reel__card {
    display: block;
    margin-top: var(--reel-card-gap);
    border: 1px solid rgba(250, 251, 252, 0.08);
    background: #1b1c1f;
    transition: border-color 0.2s ease;
}

.tc-reel__card:hover {
    border-color: rgba(250, 251, 252, 0.35);
}

.tc-reel__main {
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(var(--reel-card) - 2px);
    padding: 0 12px 0 10px;
    color: #fafbfc;
    text-decoration: none;
    -webkit-user-drag: none;
}

.tc-reel__thumb {
    flex: 0 0 72px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-reel__thumb img {
    display: block;
    width: 72px;
    height: 48px;
    object-fit: contain;
}

.tc-reel__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-reel__model {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

/* Every card reserves as many lines as the longest layout in the row needs
   (reels.js sets --reel-lines), so the model names sit level along the row.
   Plain block (no line clamp) so text-wrap: pretty applies and a long layout
   never leaves one word on its own line. */
.tc-reel__layout {
    display: block;
    transition: color 0.2s ease;
    min-height: calc(var(--reel-lines, 2) * 1.35em);
    font-size: 13px;
    line-height: 1.35;
    color: rgba(250, 251, 252, 0.6);
    text-wrap: pretty;
}

.tc-reel__main:hover .tc-reel__layout {
    color: rgba(250, 251, 252, 0.85);
}

/* See Model and See Floor Plan, on the reel being watched only. The footer
   eases open as a reel takes the centre; hidden ones are out of the tab
   order through visibility. The hairline is a shadow so it takes no height. */
.tc-reel__links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--reel-links);
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
}

.tc-reel.is-centre .tc-reel__links {
    max-height: var(--reel-links);
    opacity: 1;
    visibility: visible;
    box-shadow: inset 0 1px 0 rgba(250, 251, 252, 0.08);
    transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0s;
}

.tc-reel__see {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: rgba(250, 251, 252, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
    -webkit-user-drag: none;
}

.tc-reel__see svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #c8a96e;
    transition: transform 0.2s ease;
}

.tc-reel__see:hover {
    color: #c8a96e;
}

.tc-reel__see:hover svg {
    transform: translateX(2px);
}

/* Arrows and dots under the row, the same look as the range carousel. */
.tc-reels__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
    padding: 0 20px;
}

.tc-reels__dots {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.tc-reels__dots[hidden] {
    display: none;
}

/* A 24px target (WCAG 2.2) around a 7px dot. */
.tc-reels__dot {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tc-reels__dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: rgba(250, 251, 252, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.tc-reels__dot.is-active::before {
    background: #c8a96e;
    transform: scale(1.3);
}

.tc-reels__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(250, 251, 252, 0.25);
    border-radius: 50%;
    background: transparent;
    color: #fafbfc;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.tc-reels__arrow:hover {
    border-color: #c8a96e;
    color: #c8a96e;
}

.tc-reels__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.tc-reels__arrow svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    .tc-reel__main {
        gap: 10px;
        padding: 0 12px 0 8px;
    }
    .tc-reel__links {
        padding: 0 12px 0 10px;
    }
    .tc-reel__thumb {
        flex-basis: 58px;
        height: 46px;
    }
    .tc-reel__thumb img {
        width: 58px;
        height: 39px;
    }
    .tc-reels__nav {
        justify-content: space-between;
        gap: 0;
        margin-top: 24px;
    }
    .tc-reels__arrow {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
    }
}

.tc-reels__nav:not(.has-js) {
    display: none;
}

.tc-reel__main:focus-visible,
.tc-reel__see:focus-visible,
.tc-reel__sound:focus-visible,
.tc-reels__dot:focus-visible,
.tc-reels__arrow:focus-visible,
.tc-reels__stage:focus-visible {
    outline: 2px solid #c8a96e;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tc-reels.is-ready .tc-reel,
    .tc-reels.is-ready .tc-reel__media,
    .tc-reel.is-playing .tc-reel__video {
        transition: none;
    }
}

/* USA page row (source="usa"): the card names the model and links nowhere,
   so there is no footer to reserve and no hover state. */
.tc-reels--unlinked {
    --reel-links: 0px;
}

.tc-reels--unlinked .tc-reel__card:hover {
    border-color: rgba(250, 251, 252, 0.08);
}

@media (max-width: 767px) {
    .tc-reels--unlinked {
        --reel-card: 76px;
    }
}