/* ============================================================
   Homepage range cards (inc/range-cards.php)
   The media mechanism only: still under video, crossfade on play, the series
   chip, the spec strip. Card and grid layout (columns, gaps, the accordion
   widths) live in the Bricks elements so the team can change them in the
   builder.
   ============================================================ */

.titanium-range-media {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 5 / 4;
    background: #0a0a0a;
    text-decoration: none;
}

@media (max-width: 767px) {
    .titanium-range-media {
        aspect-ratio: 3 / 4;
    }
}

.titanium-range-media__frame {
    position: absolute;
    inset: 0;
    display: block;
}

.titanium-range-media__still,
.titanium-range-media__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.titanium-range-media__still {
    transition: opacity 0.6s ease;
}

.titanium-range-media__video {
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.titanium-range-media.is-playing .titanium-range-media__video {
    opacity: 1;
}

.titanium-range-media:focus-visible {
    outline: 2px solid #c8a96e;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .titanium-range-media__still,
    .titanium-range-media__video {
        transition: none;
    }
}

/* Series chip, bottom left of the still. */
.titanium-range-chip {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: inline-block;
    padding: 7px 12px 6px;
    border: 1px solid rgba(200, 169, 110, 0.55);
    border-radius: 2px;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #c8a96e;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .titanium-range-chip {
        left: 14px;
        bottom: 14px;
        font-size: 10px;
        padding: 6px 10px 5px;
    }
}

/* Spec strip: dots between the parts, never a break inside a part. */
.titanium-range-specs {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.titanium-range-specs span {
    white-space: nowrap;
}

.titanium-range-specs span + span::before {
    content: '\00B7';
    margin: 0 9px;
    color: #c8a96e;
}

/* Phone carousel controls: dots between prev and next arrows, under the row. */
.titanium-range-nav {
    display: none;
}

@media (max-width: 767px) {
    .titanium-range-nav {
        display: flex;
        align-items: center;
        /* Arrows to the column edges, dots centred between them, so the row
           spans the card width rather than sitting as a small centred cluster. */
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin-top: 28px;
    }
    .titanium-range-nav__dots {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.titanium-range-nav__dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.titanium-range-nav__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(250, 251, 252, 0.3);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.titanium-range-nav__dot.is-active {
    background: #c8a96e;
    transform: scale(1.3);
}

.titanium-range-nav__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;
}

.titanium-range-nav__arrow:hover {
    border-color: #c8a96e;
    color: #c8a96e;
}

.titanium-range-nav__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.titanium-range-nav__arrow svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    .titanium-range-nav__arrow {
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
    }
}

.titanium-range-nav__dot:focus-visible,
.titanium-range-nav__arrow:focus-visible {
    outline: 2px solid #c8a96e;
    outline-offset: 3px;
}