/* Tabs */
.sb-tabs-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--thm-font);
    margin-bottom: 2rem;
}


.sb-tab-arrow {
    position: absolute;
    top: 5%;
    transform: translateY(-50%);
    z-index: 20;
    line-height: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    font-size: 1.5rem;
    display: none;
    border-radius: 50%;
    background-color: white;
    color: var(--thm-base);
    box-shadow: 0 1px 2px #0000001a, 0 2px 22px #0003;
}

.sb-tab-arrow.left { left: 0; }
.sb-tab-arrow.right { right: 0; }

.sb-tabs-container {
    overflow: hidden;
    margin: 0 2.5rem;
    position: relative;
    z-index: 10;
}

.sb-tabs {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}

.sb-tabs label {

    color: var(--thm-body);
    font-size: 18px;
    font-weight: 500;
    flex: 0 0 auto;
    padding: 1rem 2rem;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.3s;
}

.sb-tabs label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--thm-secondary);;
    transition: width 0.3s;
}

.sb-tabs label.active::after {
    width: 100%;
}

.sb-tab-contents {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    background: #f4f4f4;
}

.sb-tab-content {
    display: none;
}

.sb-tab-content.active {
    display: block;
}

.sb-tab-content img{
    width: 100%;
}
.sb-tab-content p, .sb-tab-content ul{
    padding: 58px;
}
.sb-tab-content b{
    color: var(--thm-secondary);
}
.sb-tab-content a{
    color: var(--thm-base);
}

@media (max-width: 1199px) {
    .sb-tab-content p, .sb-tab-content ul{
        padding: 18px;
    }
}

/* Gallery */
/* 消除 row 负 margin 对轮播偏差的影响 */
[data-scb-gallery].row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sb-gallery-left,
.sb-gallery-right {
    width: 100%;
    box-sizing: border-box;
}

.sb-gallery-left {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.sb-gallery-right {
    padding: 38px !important;
}

.sb-gallery-right h4 {
    color: var(--thm-black);
}

.sb-gallery-left .sb-gallery-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.3s ease;
    cursor: grab;
}

.sb-gallery-left .sb-gallery-slide {
    /*flex: 0 0 100%;*/
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sb-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.3);
    color: #fff;
    outline: none !important;
    border: none !important;
    padding: 0.5rem 1rem;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s, color 0.3s;
}
.sb-gallery-arrow:focus,
.sb-gallery-arrow:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.sb-gallery-arrow.left { left: 10px; }
.sb-gallery-arrow.right { right: 10px; }

.sb-gallery-arrow:hover {
    background: rgba(0,0,0,0.6);
    color: var(--thm-base);
}

/*@media (max-width: 767px) {*/
/*    .sb-gallery-arrow { display: none; }*/
/*}*/

.sb-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.sb-gallery-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.sb-gallery-dots .dot.active {
    background: rgba(0,0,0,0.8);
}

.sb-gallery-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sb-gallery-info { display: none; }
.sb-gallery-info.active { display: block; }

.sb-gallery-counter {
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--thm-primary);
    font-size: 0.8rem;
}

/* --- Gallery Wall --- */
.sb-gallery-wall {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sb-gallery-wall-grid {
    width: 100%;
    position: relative;
    will-change: height;
}

.sb-gallery-wall-grid img {
    position: absolute;
    object-fit: cover;
    cursor: pointer;
    box-sizing: border-box;
    background-clip: padding-box;
    border: 6px solid #fff;                /* 白色“内边”视觉 */
    outline: 1px solid var(--thm-gray);   /* 外部浅灰色线 (用 outline 避免影响尺寸) */
    display: block;
    /* 过渡控制用于“漂移归位”入场动效；默认没有运行动画，动画由 JS 触发 */
    transition: transform 0.45s cubic-bezier(.22,.9,.3,1), opacity 0.45s ease;
    /* 初始隐藏：在布局前设置为透明和平移（JS 会控制具体值） */
    opacity: 0;
    transform: translateY(12px) scale(1.01);
}

/* hover 效果（在入场完成后仍可 hover 放大）*/
.sb-gallery-wall-grid img:hover {
    transform: scale(1.03);
}

/* --- Modal 基础 --- */
.sb-gallery-wall-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.sb-modal-overlay { position:absolute; inset:0; }
.sb-modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    margin: auto;
    display:flex; align-items:center; justify-content:center;
}
.sb-modal-image-wrapper { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.sb-modal-image { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* Modal 按钮风格与 Gallery 一致 */
.sb-modal-prev,.sb-modal-next,.sb-modal-close{
    position:absolute; z-index:10; background: rgba(0,0,0,0.3); color:#fff; border:none; border-radius:50%; cursor:pointer;
    transition: background .3s, color .3s;
}
.sb-modal-prev{ left:15px; top:50%; transform:translateY(-50%); padding:.5rem 1rem; font-size:2rem; }
.sb-modal-next{ right:15px; top:50%; transform:translateY(-50%); padding:.5rem 1rem; font-size:2rem; }
.sb-modal-close{ top:15px; right:15px; padding:.3rem .7rem; font-size:1.5rem; }
.sb-modal-prev:hover,.sb-modal-next:hover,.sb-modal-close:hover{ background: rgba(255,255,255,0.12); color:var(--thm-base); }

/* 在非常窄的容器下，适度降低内边(border)带来的遮挡（可视需要删改） */
@media (max-width: 400px) {
    .sb-gallery-wall-grid img { border-width: 4px; outline-width: 1px; }
}