/* Video thumbnail rails — home (.main-videocard) + programs list & details (.program-section) */

/* Library (/library): content in ambient shell */
.bfx-library-page .program-section {
    margin-top: 0;
}

/* Breathing room so hover lift / shadow isn’t clipped by rails */
.main-videocard .featured-carousel .slick-item {
    padding: 6px 16px 14px;
}

/* Instructors row: same horizontal rhythm as other home rails */
.bfx-instructors-section .featured-carousel .slick-item {
    padding: 6px 16px 10px;
}

/*
 * Home index rails: less dead space under `.videocard-content-text` (below title copy).
 * Default slick-item had 14px bottom pad + generous text margin + paragraph margins.
 */
.bfx-home-page .main-videocard .featured-carousel .slick-item {
    padding: 6px 16px 6px;
}

.bfx-home-page .bfx-instructors-section .featured-carousel .slick-item {
    padding: 6px 16px 6px;
}

.bfx-home-page .main-videocard .team-item .videocard-content-text {
    margin-top: 0.35rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bfx-home-page .main-videocard .team-item .videocard-content-text p:last-child {
    margin-bottom: 0 !important;
}

/* Column grid helper adds 10px under every col — strip it under carousel cols only */
.bfx-home-page .program-section .row > .col-md-12:has(.featured-carousel) {
    padding-bottom: 0;
}

/* Home Programs rail: single-line title under thumb (no workout count on index) */
.bfx-home-page .videocard-section-2 .team-item .videocard-content-text {
    margin-top: 0.25rem;
}

/* Programs grid: room for hover lift */
.program-section .row > [class*="col-"] {
    padding-bottom: 10px;
}

/* Program hero thumbnail depth (program detail header image) */
.program-section .program-head .program-img {
    border-radius: var(--bfx-radius-card);
    box-shadow: var(--bfx-shadow-up-next);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    margin-left: auto;
}

.main-videocard .team-item .videocard-content,
.program-section .team-item .videocard-content {
    border-radius: var(--bfx-radius-card);
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--bfx-shadow-up-next);
}

/* Home instructors row: portrait thumbnails (125:156) */
.bfx-instructors-section .videocard-content {
    aspect-ratio: 125 / 156;
    width: 100%;
}

.bfx-instructors-section .bfx-instructor-thumb {
    aspect-ratio: 125 / 156;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}

/* Instructors list page (/instructors): portrait cards, same ratio as home rail */
.bfx-instructors-list-page .team-item .videocard-content {
    aspect-ratio: 125 / 156;
    width: 100%;
    border-radius: var(--bfx-radius-card, 12px);
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--bfx-shadow-up-next, 0 8px 24px rgba(0, 0, 0, 0.35));
}

.bfx-instructors-list-page .videocard-content .bfx-instructor-list-thumb {
    aspect-ratio: 125 / 156;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    max-height: none;
}

/* Instructors list (/instructors): name centered on bottom of thumb (above hover overlay) */
.bfx-instructors-list-page .bfx-instructor-list-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    pointer-events: none;
    padding: 0.7rem 0.5rem 0.65rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        transparent 100%
    );
    transition: padding 0.25s ease, background 0.25s ease;
}

.bfx-instructors-list-page .team-item .team-overlay {
    z-index: 5;
}

@media (hover: hover) and (pointer: fine) {
    .bfx-instructors-list-page .team-item {
        transition: transform 0.22s ease;
    }

    .bfx-instructors-list-page .team-item .videocard-content {
        transition: box-shadow 0.28s ease, border-color 0.28s ease;
    }

    .bfx-instructors-list-page .team-item .bfx-instructor-list-thumb {
        transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .bfx-instructors-list-page .team-item:hover {
        transform: translateY(-4px);
    }

    .bfx-instructors-list-page .team-item:hover .videocard-content {
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.42),
            0 20px 48px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.22);
    }

    .bfx-instructors-list-page .team-item:hover .bfx-instructor-list-thumb {
        transform: scale(1.045);
    }

    .bfx-instructors-list-page .team-item:hover .bfx-instructor-list-name {
        padding-bottom: 0.85rem;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.62) 55%,
            transparent 100%
        );
    }
}

/* Instructor name on image: bottom-centered, above hover overlay (pointer-events none → link still works) */
.bfx-instructors-section .bfx-instructor-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    pointer-events: none;
    padding: 0.65rem 0.45rem 0.55rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.42) 52%,
        transparent 100%
    );
}

/* Dim + zoom only when primary input can hover (desktop / trackpad) */
@media (hover: hover) and (pointer: fine) {
    .main-videocard .team-item,
    .program-section .team-item {
        transition: transform 0.22s ease;
    }

    .main-videocard .team-item .videocard-content,
    .program-section .team-item .videocard-content {
        transition: box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .main-videocard .team-item .sub-main-img,
    .program-section .team-item .sub-main-img {
        transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .main-videocard .team-item .videocard-content::before,
    .program-section .team-item .videocard-content::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.45) 100%
        );
        opacity: 0;
        transition: opacity 0.28s ease;
        z-index: 1;
        pointer-events: none;
        border-radius: inherit;
    }

    .main-videocard .team-item:hover .videocard-content::before,
    .program-section .team-item:hover .videocard-content::before {
        opacity: 1;
    }

    .main-videocard .team-item:hover .videocard-content,
    .program-section .team-item:hover .videocard-content {
        box-shadow: var(--bfx-shadow-up-next-hover);
        border-color: rgba(255, 255, 255, 0.16);
    }

    .main-videocard .team-item:hover,
    .program-section .team-item:hover {
        transform: translateY(-5px);
    }

    .main-videocard .team-item:hover .sub-main-img,
    .program-section .team-item:hover .sub-main-img {
        transform: scale(1.05);
    }

    .main-videocard .team-item .team-overlay,
    .program-section .team-item .team-overlay {
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .main-videocard .team-item .play-button,
    .program-section .team-item .play-button {
        transition: transform 0.25s ease;
    }

    .main-videocard .team-item:hover .team-overlay .play-button,
    .program-section .team-item:hover .team-overlay .play-button {
        transform: scale(1.08);
    }
}

/* Overlays & badges above dim (::before z-index 1) */
.main-videocard .team-item .team-overlay,
.program-section .team-item .team-overlay {
    z-index: 3;
}

.main-videocard .team-item .day-tag-display,
.main-videocard .team-item .time-display,
.main-videocard .team-item .workout-checkmark,
.main-videocard .team-item .bb-details,
.main-videocard .team-item .bfx-home-carousel-program-badge,
.program-section .team-item .day-tag-display,
.program-section .team-item .time-display,
.program-section .team-item .workout-checkmark,
.program-section .team-item .bb-details,
.program-section .team-item .bfx-home-carousel-program-badge {
    z-index: 4;
}

/* Home category rails only: program vs video (top-right; day tags stay top-left) */
.bfx-home-page .team-item .bfx-home-carousel-program-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto;
    background: rgb(47 42 42 / 70%);
    font-size: 12px;
    text-align: center;
    color: #fff;
    padding: 3px 7px;
    border-radius: 10px;
    line-height: 1.2;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-videocard .team-item,
    .main-videocard .team-item .videocard-content,
    .main-videocard .team-item .sub-main-img,
    .main-videocard .team-item .team-overlay,
    .main-videocard .team-item .videocard-content::before,
    .program-section .team-item,
    .program-section .team-item .videocard-content,
    .program-section .team-item .sub-main-img,
    .program-section .team-item .team-overlay,
    .program-section .team-item .videocard-content::before {
        transition: none !important;
    }

    .main-videocard .team-item:hover,
    .program-section .team-item:hover {
        transform: none;
    }

    .main-videocard .team-item:hover .sub-main-img,
    .program-section .team-item:hover .sub-main-img {
        transform: none;
    }

    .main-videocard .team-item:hover .videocard-content::before,
    .program-section .team-item:hover .videocard-content::before {
        opacity: 0;
    }
}

/* —— Levels: full-bleed image; title + description on the right half (no dark gradient on image) —— */
.bfx-home-page .bfx-levels-section .bfx-home-section-panel {
    padding-top: 0.65rem;
}

.bfx-home-page .bfx-levels-section .bfx-home-section-panel .row > .col-12.d-flex.mt-4 {
    margin-top: 0.35rem !important;
}

.bfx-levels-section .heading-section {
    font-size: 1.125rem;
    letter-spacing: 0.04em;
}

.bfx-levels-section .bfx-level-card-link {
    width: 100%;
}

/* Capped height: full-width stacked cols were ~16:10 of viewport width → huge tiles */
.bfx-levels-section .bfx-level-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 2 / 1;
    max-height: clamp(132px, 22vw, 168px);
    border-radius: 20px;
    overflow: hidden;
    /* Depth on the image tiles only */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .bfx-level-card-link:hover .bfx-level-card {
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 12px 32px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.09);
        transform: translateY(-2px);
    }
}

/* One image behind everything — not cropped at a text column */
.bfx-levels-section .bfx-level-card__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

/* Right half: title + short description (no overlay gradient on the image) */
.bfx-levels-section .bfx-level-card__text {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.65rem 0.6rem;
    text-align: left;
    background: transparent;
}

.bfx-level-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bfx-level-card__desc {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
    .bfx-level-card__title {
        font-size: 1.1rem;
    }

    .bfx-level-card__desc {
        font-size: 0.8125rem;
        -webkit-line-clamp: 5;
    }

    .bfx-levels-section .bfx-level-card__text {
        left: 50%;
        padding: 0.75rem 0.95rem 0.75rem 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .bfx-levels-section .bfx-level-card__text {
        top: 0;
        left: 50%;
        right: 0;
        bottom: 0;
        justify-content: center;
        padding: 0.55rem 0.5rem 0.55rem 0.45rem;
        background: transparent;
    }

    .bfx-level-card__title {
        font-size: 1rem;
    }

    .bfx-level-card__desc {
        -webkit-line-clamp: 3;
        font-size: 0.68rem;
    }
}

/*
 * Home index: hero art at the top (not full viewport). Pull the block up into the same vertical
 * band as .content-page’s padding-top so __bg/__glass sit *under* the fixed header (z-index below
 * .main-nav). Inner content gets padding-top so the banner still clears the header.
 */
.bfx-home-page.program-page-ambient {
    /*
     * Height *below* the header covered by ambient + gradient.
     * Banner uses ~37% of width for image height — on wide screens that can exceed 50vh.
     * max(..., 36vw) keeps the strip tall enough so fade shows *below* the slider; not on the slide image itself.
     */
    --bfx-home-hero-h: max(min(52vh, 620px), min(36vw, 720px));
    /* Extra tail so the gradient resolves clearly under the slider before the next section */
    --bfx-home-ambient-fade-tail: clamp(72px, 11vh, 160px);
    /* Past full viewport width so ambient color shows beside the framed hero (gutters / edges) */
    --bfx-home-ambient-side-bleed: min(4.5vw, 40px);
    /* Extra strip below the hero estimate so the art continues under the carousel + pagination */
    --bfx-home-ambient-below-slider: clamp(28px, 5vw, 56px);
    /* Fallbacks before JS samples the active slider image (main.js) */
    --bfx-home-fade-mid1: rgba(48, 40, 56, 0.52);
    --bfx-home-fade-mid2: rgba(12, 10, 16, 0.94);
    --bfx-home-glass-mid: rgba(28, 24, 34, 0.42);
    /* Space-separated RGB for rgb(var(--bfx-home-wash) / opacity) — updated by main.js color wash */
    --bfx-home-wash: 72 64 88;
    --bfx-home-wash-mid: 52 46 63;
    --bfx-home-wash-deep: 30 27 37;
    position: relative;
    z-index: 0;
    isolation: isolate;
    /* Sit in the padded “header lane” so ambient can paint behind the glass nav */
    margin-top: calc(-1 * var(--siteheader-height, 96px));
    min-height: unset;
    padding-bottom: 2.5rem;
    background-color: #0a0a0c;
    /* Wider stack uses negative margin; avoid horizontal page scroll */
    overflow-x: clip;
}

.bfx-home-page .program-page-ambient__content {
    background: transparent;
    padding-top: var(--siteheader-height, 96px);
    position: relative;
    z-index: 2;
}

/*
 * Ambient strip behind the page: --program-ambient-bg tracks the *active* hero slide
 * (main.js bfxHomeAmbientBgSync). The ::after layer is a fixed neutral fade into #0a0a0c
 * (no per-slide canvas). For a single static backdrop only, remove that JS and set the
 * URL once in index.blade.php on .bfx-home-page.
 */
/*
 * Full-bleed: escape section padding with margin breakout (not translateX — avoids half-width bugs).
 * Two .bfx-home-ambient-layer divs crossfade in main.js (background-image can’t transition).
 */
.bfx-home-page .program-page-ambient__bg.bfx-home-ambient-stack {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw + 2 * var(--bfx-home-ambient-side-bleed, 0px));
    max-width: none;
    margin-left: calc(50% - 50vw - var(--bfx-home-ambient-side-bleed, 0px));
    z-index: 0;
    height: calc(
        var(--siteheader-height, 96px) + var(--bfx-home-hero-h) +
            var(--bfx-home-ambient-fade-tail, 96px) + var(--bfx-home-ambient-below-slider, 0px)
    );
    background-color: #0a0a0c;
    background-image: none;
    overflow: hidden;
}

.bfx-home-ambient-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transition: opacity 0.75s ease-out;
    /* Slight horizontal stretch so slide color reads on the far left/right of the strip */
    transform: scaleX(1.1);
    transform-origin: center top;
}

.bfx-home-ambient-layer.is-active {
    z-index: 1;
    opacity: 1;
}

.bfx-home-ambient-layer:not(.is-active) {
    z-index: 0;
    opacity: 0;
}

/* Scrim over both layers; soft blend into page bg + subtle hue from active slide */
.bfx-home-page .bfx-home-ambient-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgb(var(--bfx-home-wash) / 0.14) 12%,
        rgba(0, 0, 0, 0) 18%,
        rgb(var(--bfx-home-wash-mid) / 0.1) 36%,
        rgba(10, 10, 14, 0.48) 68%,
        rgba(10, 10, 14, 0.78) 88%,
        #0a0a0c 100%
    );
}

/* Below __content (z-index 2) so the banner paints on top; above the stack (0) for tint + blur */
.bfx-home-page .program-page-ambient__glass {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw + 2 * var(--bfx-home-ambient-side-bleed, 0px));
    max-width: none;
    margin-left: calc(50% - 50vw - var(--bfx-home-ambient-side-bleed, 0px));
    z-index: 1;
    height: calc(
        var(--siteheader-height, 96px) + var(--bfx-home-hero-h) +
            var(--bfx-home-ambient-fade-tail, 96px) + var(--bfx-home-ambient-below-slider, 0px)
    );
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(8, 8, 12, 0.03) 0%,
        rgba(12, 14, 22, 0.14) 50%,
        rgba(10, 10, 14, 0.28) 100%
    );
    -webkit-backdrop-filter: blur(10px) saturate(1.12);
    backdrop-filter: blur(10px) saturate(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .bfx-home-ambient-layer {
        transition: none;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .bfx-home-page.program-page-ambient {
        --bfx-home-hero-h: max(min(46vh, 420px), 320px);
        --bfx-home-ambient-fade-tail: clamp(56px, 9vh, 120px);
        --bfx-home-ambient-side-bleed: min(3vw, 24px);
        --bfx-home-ambient-below-slider: clamp(20px, 5vw, 40px);
    }
}

/* —— Home hero banner: not a bare Swiper — framed glass rail + vignette + nav/pagination chrome —— */
.bfx-home-hero {
    position: relative;
    z-index: 3;
}

.bfx-home-banner-frame {
    position: relative;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 42%,
        rgba(255, 255, 255, 0.1) 100%
    );
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bfx-home-hero .swiper.swiper-banner {
    border-radius: 19px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Cinematic read on stills: top cool + bottom weight */
.bfx-home-hero .swiper-banner .image-container {
    position: relative;
}

.bfx-home-hero .swiper-banner .image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0) 32%,
        rgba(0, 0, 0, 0) 58%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.bfx-home-hero .swiper-banner .swiper-banner-btn-prev,
.bfx-home-hero .swiper-banner .swiper-banner-btn-next {
    width: 48px;
    height: 48px;
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 16, 0.52) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #fff !important;
    font-size: 28px !important;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bfx-home-hero .swiper-banner .swiper-banner-btn-prev:hover,
.bfx-home-hero .swiper-banner .swiper-banner-btn-next:hover {
    background: rgba(28, 28, 34, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.bfx-home-hero .swiper-banner .swiper-banner-btn-prev::after,
.bfx-home-hero .swiper-banner .swiper-banner-btn-next::after {
    content: none !important;
}

.bfx-home-hero .swiper-banner .swiper-banner-btn-prev {
    left: 14px !important;
}

.bfx-home-hero .swiper-banner .swiper-banner-btn-next {
    right: 14px !important;
}

.bfx-home-hero .swiper-banner-pagination.swiper-pagination-horizontal {
    bottom: 18px !important;
    left: 0;
    right: 0;
}

.bfx-home-hero .swiper-banner .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 4px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
    transition: width 0.25s ease, background 0.2s ease;
}

.bfx-home-hero .swiper-banner .swiper-pagination-bullet-active {
    width: 26px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

@media (max-width: 575.98px) {
    .bfx-home-banner-frame {
        border-radius: 16px;
    }

    .bfx-home-hero .swiper.swiper-banner {
        border-radius: 15px;
    }

    .bfx-home-hero .swiper-banner .swiper-banner-btn-prev,
    .bfx-home-hero .swiper-banner .swiper-banner-btn-next {
        width: 40px;
        height: 40px;
        font-size: 22px !important;
    }

    .bfx-home-hero .swiper-banner .swiper-banner-btn-prev {
        left: 8px !important;
    }

    .bfx-home-hero .swiper-banner .swiper-banner-btn-next {
        right: 8px !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .bfx-home-hero .swiper-banner .swiper-banner-btn-prev,
    .bfx-home-hero .swiper-banner .swiper-banner-btn-next {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(32, 32, 38, 0.92) !important;
    }
}

.bfx-home-section-panel {
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: var(--bfx-radius-frame, 16px);
    background: rgba(18, 18, 22, 0.42);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin-bottom: 1.5rem;
}

.bfx-home-append-target .bfx-home-section-panel {
    margin-bottom: 1.5rem;
}

.bfx-home-page .bfx-home-append-target .bfx-home-section-panel:has(.featured-carousel) {
    margin-bottom: 1rem;
}

/*
 * Carousel rails: same distance from glass top → heading for every rail.
 * Panel padding + first row margin (Body FX / Instructors had no mt-4; others had mt-4).
 */
.bfx-home-page .bfx-home-section-panel:has(.featured-carousel) {
    padding-top: 0.65rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.bfx-home-page .bfx-home-section-panel:has(.featured-carousel) > .row:first-child > [class*="col-"] {
    margin-top: 0.35rem !important;
}

/* Video carousel panels: tighten gap under section title (was Bootstrap mb-3 + slick padding) */
.bfx-home-page .bfx-home-section-panel .heading-section.heading-section-link.mb-3 {
    margin-bottom: 0.35rem !important;
}

/*
 * Home rail titles as glass chips — matches View all pill language; stays readable on the panel.
 */
.bfx-home-page .bfx-home-section-panel a.heading-section.heading-section-link,
.bfx-home-page .bfx-home-section-panel h2.heading-section {
    display: inline-block;
    max-width: 100%;
    padding: 0.4rem 1rem;
    border-radius: var(--bfx-radius-card, 12px);
    background: rgba(18, 18, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    vertical-align: middle;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.bfx-home-page .bfx-home-section-panel a.heading-section.heading-section-link:hover {
    background: rgba(28, 28, 34, 0.88);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.bfx-home-page .bfx-home-section-panel .row > .col-md-12.d-flex:has(+ .col-md-12 .featured-carousel) {
    margin-bottom: 0 !important;
}

.bfx-home-page .bfx-home-section-panel .featured-carousel .slick-list {
    padding-top: 2px;
    padding-bottom: 0;
}

/*
 * Home rails (Slick): park arrows outside the card strip — not the top Swiper banner.
 * Outer wrapper must not clip; arrows use translate so they clear the track edge.
 */
.bfx-home-page .bfx-home-section-panel .featured-carousel {
    overflow: visible;
}

.bfx-home-page .bfx-home-section-panel .featured-carousel .slick-prev {
    left: 0;
    right: auto;
    transform: translate(calc(-100% - 24px), -50%);
}

.bfx-home-page .bfx-home-section-panel .featured-carousel .slick-next {
    right: 0;
    left: auto;
    transform: translate(calc(100% + 24px), -50%);
}

@media (max-width: 799.98px) {
    .bfx-home-page .bfx-home-section-panel .featured-carousel .slick-prev {
        transform: translate(calc(-100% - 16px), -50%);
    }

    .bfx-home-page .bfx-home-section-panel .featured-carousel .slick-next {
        transform: translate(calc(100% + 16px), -50%);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .bfx-home-section-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(26, 26, 30, 0.94);
    }

    .featured-carousel .slick-prev,
    .featured-carousel .slick-next {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(38, 38, 42, 0.94);
    }

    .bfx-home-page .program-page-ambient__glass {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(
            180deg,
            rgb(var(--bfx-home-wash) / 0.42) 0%,
            rgb(var(--bfx-home-wash-deep) / 0.9) 100%
        );
    }

    .bfx-home-page .bfx-home-section-panel a.heading-section.heading-section-link,
    .bfx-home-page .bfx-home-section-panel h2.heading-section {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(34, 34, 40, 0.95);
        border-color: rgba(255, 255, 255, 0.22);
    }

    .bfx-home-page .bfx-home-section-panel a.heading-section.heading-section-link:hover {
        background: rgba(44, 44, 52, 0.98);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/*
 * Goals dials: one row at all widths; size scales with viewport (overrides global .circular-progress breakpoints).
 */
.bfx-home-page .bfx-home-goals-dials {
    --bfx-goals-dial-size: clamp(48px, 14vw, 160px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.25rem, 2.5vw, 1.75rem);
    width: 100%;
    max-width: 100%;
}

.bfx-home-page .bfx-home-goals-dials > div {
    flex: 0 1 auto;
    min-width: 0;
}

.bfx-home-page .bfx-home-goals-dials .circular-progress {
    width: var(--bfx-goals-dial-size);
    height: var(--bfx-goals-dial-size);
    margin-left: auto;
    margin-right: auto;
}

.bfx-home-page .bfx-home-goals-dials .inner-circle {
    width: calc(var(--bfx-goals-dial-size) * 0.85);
    height: calc(var(--bfx-goals-dial-size) * 0.85);
}

.bfx-home-page .bfx-home-goals-dials .percentage {
    font-size: clamp(0.65rem, calc(var(--bfx-goals-dial-size) * 0.2), 2rem);
}

.bfx-home-page .bfx-home-goals-dials .percentage-gain {
    margin-bottom: 0.15rem;
    padding-bottom: 0.15rem;
}

.bfx-home-page .bfx-home-goals-dials h4.fs-6 {
    font-size: clamp(0.65rem, 2.8vw, 1rem) !important;
    margin-top: clamp(0.35rem, 2vw, 0.75rem) !important;
}

/*
 * Home rails: stats (“Goals”) stay modest; carousels (continue watching, selected program,
 * instructors, programs, levels, subcategories, infinite scroll) use almost full content width.
 */
.bfx-home-page .container.program-section.container-dynamic-space.bfx-home-rail-stats {
    width: min(90%, 1180px);
    max-width: 100%;
}

.bfx-home-page .container.program-section.container-dynamic-space.bfx-home-rail-wide {
    width: 100%;
    max-width: 1920px;
}

@media (max-width: 799.98px) {
    .bfx-home-page .container.program-section.container-dynamic-space.bfx-home-rail-stats,
    .bfx-home-page .container.program-section.container-dynamic-space.bfx-home-rail-wide {
        width: 100%;
        max-width: 100%;
    }
}