:root {
    --fold-mask-color: rgba(var(--bs-content-color-rgb),0.95);
    --fold-mask-height: 3.2em;
}
.jzxz-content-box {
    --min-col-width: 250px;
    --gap-size: 2.21%;
    column-gap: var(--gap-size);
    row-gap: clamp(16px, 6.7vw, 64px);
    box-sizing: border-box;
}
.jzxz-card {
    background-color: var(--bs-content-color);
    background-size: 100% 100%;
    border-radius: 12px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.card-1 {
    background-image: url('/imgs/WorshipReservation/card-1.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain !important;
}
.card-2{
        background-image:url('/imgs/WorshipReservation/card-2.png');
    }
.card-3{
        background-image:url('/imgs/WorshipReservation/card-3.png');
    }

    .jzxz-label {
        color: var(--bs-culturehome-xszs-color);
    }
.jzxz-input {
    display: block;
    width: 100%;
    padding: 8px 25px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(7px);
    border-radius: 8px;
    border: none;
    margin: 0;
    border: var(--bs-border-width) solid var(--bg-login-input-border-color) !important;
}
.jzxz-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaaaaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: 8px 25px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(7px);
    border-radius: 8px;
    border: none;
    margin: 0;
    border: var(--bs-border-width) solid var(--bg-login-input-border-color) !important;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.char-count {
    color: var(--bs-select-title-color);
}

@media (min-width: 900px) {
    .jzxz-content-box {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* 中等屏幕显示2列 */
@media (max-width: 899px) and (min-width: 600px) {

    .jzxz-content-box {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 小屏幕堆叠为1列 */
@media (max-width: 599px) {

    .jzxz-content-box {
        grid-template-columns: 1fr;
    }
}


/* 折叠样式（始终可折叠） */
#contentDiv.clamped {
    --clamp-lines: 8; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines);
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.6em * var(--clamp-lines)); 
    transition: max-height .22s ease;
}
    #contentDiv.clamped::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--fold-mask-height);
        pointer-events: none;
        z-index: 2;
        background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(var(--bs-content-color-rgb),0.6) 40%, rgba(var(--bs-content-color-rgb),1) 100% );
        transition: opacity .22s ease;
        opacity: 1;
    }
#contentDiv.expanded::after {
    opacity: 0;
    pointer-events: none;
}

/* 展开时移除限制 */
#contentDiv.expanded {
    -webkit-line-clamp: unset;
    display: block;
    max-height: none;
}

/* 按钮基础样式（可按项目风格微调） */
#foldToggle {
    display: inline-block;
    cursor: pointer;
}