/**
 * Multi-mode Beacon Positioning System Styles
 * Component Prefix: .multi-mode-view
 */

/* 1. Tab Bar Container */
.multi-mode-tabs-container {
    width: 100%;
    height: 5rem; /* 80px */
    background: #E5EDFF;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}
.font-banner-subtitle {font-size: 1.5rem!important; line-height: 2.375rem!important; color: #CBD3E8!important;}
.uwb-core-title {
    font-size: 1.5rem !important; /* 24px */
    font-family: s-demibold !important;
    color: #333333 !important;
    line-height: 2rem !important; /* 32px */
    margin: 0 0 0 !important; /* 7px bottom */
}
#content-uwb .uwb-core-title {
    margin-bottom: .875rem!important;
}
#content-ble .uwb-core-title {
    margin-bottom: .375rem !important; /* 7px bottom */
}

.uwb-core-subtitle {
    font-size: 1rem !important; /* 16px */
    font-family: s-regular !important;
    color: #333333 !important;
    line-height: 1.5rem !important; /* 24px */
    margin-top: 0 !important;
    margin-bottom: 0.875rem !important; /* 14px */
}

.uwb-core-desc {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important; /* 24px */
    color: #333333 !important;
    font-family: s-regular !important;
    opacity: 0.6; /* 60% opacity */
}
/* Align tabs to the left of the .section */
.multi-mode-tabs-container .section {
    display: flex;
    justify-content: flex-start;
}

.multi-mode-tabs {
    display: flex;
    height: 100%;
    align-items: stretch;
}

.tab-btn {
    cursor: pointer;
    font-size: 1.5rem; /* 24px */
    color: #333333;
    line-height: 2rem; /* 32px */
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
    font-family: s-regular, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: all 0.3s ease;
    border: none;
    background: none;
    height: 5rem;
}

.tab-btn:not(:last-child) {
    margin-right: 5rem; /* 80px spacing between buttons */
}

.tab-btn.active {
    color: #2664F5;
    font-family: s-demibold, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.125rem; /* 2px */
    background: #2664F5;
}

/* 2. Content Switching */
.multi-mode-content, .multi-mode-banner {
    display: none;
}

.multi-mode-content.active, .multi-mode-banner.active {
    display: block;
}

/* 3. Inherited/Refactored Styles (uwb- prefix) */
.uwb-system-view {
    background-color: #fff;
    color: #333;
}

/* Banner override/adjustment - Consistent with gemini.md 2.1 */
.uwb-banner {
    position: relative;
    width: 100%;
    height: 43.75rem; /* 700px */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.uwb-banner-inner {
    padding-top: 14.375rem;
    height: 100%;
    display: flex;
    width: 100%;
}
.font-banner-main {margin-bottom: .75rem!important;}
.uwb-banner-text {
    z-index: 10;
    position: relative;
}

.uwb-section {
    padding: 3.75rem 0 6rem;
}

.uwb-core-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.uwb-core-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.uwb-core-card {
    height: 18rem;
    background: #FFFFFF;
    box-shadow: 0.1875rem 0.1875rem 1.875rem 0 rgba(0, 57, 83, 0.1); 
    border-radius: 0.875rem;
    padding: 1.4375rem 2.25rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.6s ease;
}

.uwb-core-card:hover {
    transform: translateY(-1.25rem);
}

/* 蓝牙信标 Tab：核心优势卡片高度与独立蓝牙产品页一致（280px） */
#content-ble .uwb-core-card {
    height: 17.5rem;
}

.uwb-core-icon-wrapper {
    height: 3.875rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* margin-bottom: 1.625rem; */
    margin-bottom: 2.8125rem;
}
#content-ble .uwb-core-icon-wrapper {
    margin-bottom: 2.8125rem !important;
}
.uwb-core-icon {
    object-fit: contain;
}

.uwb-arch {
    background-color: #fff;
    padding-bottom: 5rem;
}

.uwb-arch-header {
    text-align: center;
}
.font-card-title {margin-bottom: 2rem!important;}
.uwb-arch-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uwb-arch-diagram {
    width: 100%; /* Changed to 100% for responsive */
    max-width: 93.25rem;
    height: auto;
    object-fit: contain;
}

.uwb-product-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.uwb-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    width: 100%;
}

.uwb-product-card {
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 0.875rem;
    padding: 2.5rem 2.875rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 20rem;
    box-shadow: 0.1875rem 0.1875rem 1.875rem 0 rgba(0, 57, 83, 0.1);
}

.uwb-product-card:hover {
    transform: translateY(-1rem);
}

.uwb-product-img-box {
    position: relative;
    flex: 0 0 15.625rem; /* 250px */
    height: 15.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2rem;
}

.uwb-product-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.uwb-product-info {
    flex: 1;
    z-index: 1;
}

.uwb-product-head {
    margin-bottom: 1.5rem;
}

.uwb-product-cname {
    font-size: 1rem;
    color: #8B909A;
    line-height: 1.375rem;
    font-family: s-regular;
    margin-bottom: 0.25rem;
}

.uwb-product-model {
    font-size: 1.625rem;
    color: #252B3A;
    line-height: 2.125rem;
    font-family: s-semibold;
    margin: 0;
}

.uwb-product-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}
#content-uwb .uwb-product-features {
    gap: 1.25rem 1rem;
}
#content-ble .uwb-product-features {
    gap: 1.25rem 1rem!important;
}
.uwb-large-card-info .uwb-product-features {
    gap:  1.25rem 4.875rem;
}
.uwb-feature-item {
    display: flex;
    align-items: center;
}

.uwb-feature-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.uwb-feature-item span {
    font-size: 1rem;
    color: #435566;
    line-height: 1.25rem;
    font-family: s-regular;
    white-space: nowrap;
}

.uwb-large-card {
    background: #FFFFFF;
    border-radius: 0.875rem;
    height: 25.5rem;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0.1875rem 0.1875rem 1.875rem 0 rgba(0, 57, 83, 0.1);
    transition: all 0.3s ease;
    width: 100%;
}
#content-uwb .uwb-large-card,
#content-ble .uwb-large-card {height: 28.75rem!important;}
.uwb-large-card:hover {
    transform: translateY(-1rem);
}

.uwb-large-card-img {
    flex: 0 0 44rem;
    height: 100%;
}

.uwb-large-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uwb-large-card-info {
    flex: 1;
    padding: 3.75rem 6rem 3.75rem 7.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
#content-uwb .uwb-large-card-info {
    padding: 5rem 4.8125rem 5.5625rem 7.6875rem;
}
#content-ble .uwb-large-card-info {padding: 5rem 4.8125rem 5.5625rem 7.6875rem!important;}
#content-uwb .uwb-large-card-info .font-card-title,
#content-ble .uwb-large-card-info .font-card-title {margin-bottom: 1rem!important;}
#content-uwb .uwb-large-card-info .uwb-large-card-desc,
#content-ble .uwb-large-card-info .uwb-large-card-desc {margin-bottom: 3.375rem!important;}
.uwb-large-card-info .uwb-product-features {gap: 1.3125rem 4.875rem;}
.uwb-large-card-desc {
    font-size: 1rem;
    color: #607293;
    line-height: 1.625rem;
    margin-bottom: 3rem;
    margin-top: 0;
    font-family: s-regular;
}

.uwb-large-card-info .uwb-product-model {
    margin-bottom: 1.5rem;
}

/* Station Features */
.uwb-station-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem !important;
}

.uwb-station-feature-item {
    display: flex;
    flex-direction: column;
}

.uwb-station-feature-title {
    font-size: 1rem;
    color: #333333;
    font-family: s-demibold;
    line-height: 1.375rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.uwb-station-feature-title .uwb-feature-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.uwb-station-feature-desc {
    font-size: 0.9375rem;
    color: #435566;
    line-height: 1.375rem;
    font-family: s-regular;
}

/* Industry Scenarios Grid Fix */
.uwb-industry-scenarios {
    padding: 3.75rem 0 5.875rem;
}

.uwb-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.uwb-industry-item {
    position: relative;
    height: 17.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 2.5rem;
}

.uwb-industry-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s ease;
}

.uwb-industry-content {
    position: relative;
    z-index: 1;
}

.uwb-industry-logo {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}

.uwb-industry-title {
    font-size: 1.5rem;
    color: #FFFFFF;
    font-family: s-demibold;
    margin: 0;
}

/* Why Choose Grid */
.uwb-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.uwb-why-card {
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 2.5rem 3.125rem 2.5rem 2.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.uwb-why-card:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
    transform: translateY(-0.5rem);
}

.uwb-why-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 2.5rem;
}

.uwb-why-title {
    font-size: 1.625rem;
    font-family: s-semibold;
    color: #252B3A;
    margin-bottom: 0.75rem;
}

.uwb-why-desc {
    font-size: 1rem;
    color: #435566;
    line-height: 1.5rem;
}