.text-columns-with-image-section {
    --section-mobile-padding: 20px;
    --card-group-padding: 20px;
    --card-group-gap: 10px;
    background-color: rgb(var(--color-background));
}

.text-columns-with-image-section .page-width {
    overflow: hidden;
}

.text-columns-with-image--full-width {
    width: 100%;
}

.text-columns-with-image__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.text-columns-with-image__heading-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    word-break: normal;
    white-space: nowrap;
    -webkit-box-orient: vertical;
}

.text-columns-with-image__heading-link {
    display: flex;
    column-gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-2xl);
    color: rgb(var(--color-text));
    text-align: var(--card-group-content-align);
}

.text-columns-with-image__heading-link-text {
    display: inline-flex;
}

@media (max-width: 959px) {
    .text-columns-with-image__heading-link-text {
        display: none;
    }
}

.text-columns-with-image__heading-link-icon {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] .text-columns-with-image__heading-link-icon svg {
    transform: rotate(180deg);
}

@media (max-width: 959px) {
    .text-columns-with-image__card-group-scroll {
        position: relative;
        inset-inline-start: calc(var(--card-group-padding) * -1);
        width: calc(100% + var(--card-group-padding) * 2);
        margin-inline-end: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--card-group-padding);
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 960px) {
    .text-columns-with-image__card-group-scroll {
        inset-inline-start: auto;
        width: auto;
        margin: 0 auto;
    }
}

.text-columns-with-image__card-group {
    display: grid;
    grid-auto-columns: calc(100vw - (var(--section-mobile-padding) * 2 + var(--card-group-gap) + 24px));
    grid-auto-flow: column;
    gap: var(--card-group-gap);
}

@media (max-width: 959px) {
    .text-columns-with-image__card-group {
        width: max-content;
        margin: 0 var(--card-group-padding);
    }
}

@media (min-width: 960px) {
    .text-columns-with-image__card-group {
        grid-template-columns: repeat(var(--desktop-columns), 1fr);
        grid-auto-columns: auto;
        grid-auto-flow: row dense;
        gap: 20px;
        padding: 0;
        transform: none;
    }
}

.text-columns-with-image__card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 700px;
    text-align: var(--card-group-content-align);
}

.text-columns-with-image__card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;
}

.text-columns-with-image__card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--card-group-image-aspect-ratio);
    object-fit: cover;
    border-radius: var(--card-group-image-border-radius);
}

.text-columns-with-image__card-image .empty-image-class {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-image-background));
}

.text-columns-with-image__card-title {
    order: 2;
    margin-block-start: 5px;
}

.text-columns-with-image__card-text {
    order: 3;
}

.text-columns-with-image__card-link {
    display: flex;
    align-items: center;
    order: 4;
}

.text-columns-with-image__card-link .button--link {
    column-gap: 4px;
    text-decoration: none !important;
}

.text-columns-with-image__card-link-icon {
    display: inline-flex;
}

.text-columns-with-image__card-link-icon>svg {
    width: 10px;
    height: 10px;
}

.text-columns-with-image__card-link-icon>svg path {
    stroke: rgb(var(--color-text));
}

html[dir="rtl"] .text-columns-with-image__card-link-icon>svg {
    transform: rotate(180deg);
}

/* ============ 移动端样式 ============ */
@media (max-width: 959px) {

    /* 一次滑动一个 - 设置在直接子元素（包装层）上 */
    .text-columns-with-image__card-group>* {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* 移动端隐藏箭头 */
    .text-columns-with-image__arrows {
        display: none !important;
    }

    /* 移动端堆叠模式 */
    .text-columns-with-image__card-group-scroll[data-mobile-mode="stack"] {
        inset-inline-start: 0;
        width: 100%;
        overflow: visible;
    }

    .text-columns-with-image__card-group-scroll[data-mobile-mode="stack"] .text-columns-with-image__card-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin: 0;
    }

    .text-columns-with-image__card-group-scroll[data-mobile-mode="stack"] .text-columns-with-image__card-group>*,
    .text-columns-with-image__card-group-scroll[data-mobile-mode="stack"] .text-columns-with-image__card {
        width: 100%;
        max-width: none;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

/* ============ PC端滑动模式 ============ */
.text-columns-with-image__card-group-scroll {
    position: relative;
}

.text-columns-with-image__arrows {
    display: none;
}

@media (min-width: 960px) {
    .text-columns-with-image__card-group-scroll[data-pc-slider="true"] {
        overflow: hidden;
    }

    .text-columns-with-image__card-group-scroll[data-pc-slider="true"] .text-columns-with-image__card-group {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 20px;
        transition: transform 0.3s ease;
    }

    /* 根据列数设置直接子元素（包装层）宽度 */
    .text-columns-with-image__card-group-scroll[data-desktop-columns="1"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .text-columns-with-image__card-group-scroll[data-desktop-columns="2"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .text-columns-with-image__card-group-scroll[data-desktop-columns="3"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }

    .text-columns-with-image__card-group-scroll[data-desktop-columns="4"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
    }

    .text-columns-with-image__card-group-scroll[data-desktop-columns="5"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 calc((100% - 80px) / 5);
        max-width: calc((100% - 80px) / 5);
    }

    .text-columns-with-image__card-group-scroll[data-desktop-columns="6"][data-pc-slider="true"] .text-columns-with-image__card-group>* {
        flex: 0 0 calc((100% - 100px) / 6);
        max-width: calc((100% - 100px) / 6);
    }

    /* 内部卡片移除 max-width 限制 */
    .text-columns-with-image__card-group-scroll[data-pc-slider="true"] .text-columns-with-image__card {
        max-width: none;
    }

    .text-columns-with-image__card-group-scroll[data-pc-slider="true"] .text-columns-with-image__arrows {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 35%;
        left: 10px;
        right: 10px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .text-columns-with-image__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .text-columns-with-image__arrow:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .text-columns-with-image__arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .text-columns-with-image__arrow svg {
        width: 12px;
        height: 12px;
    }

    .text-columns-with-image__arrow--prev svg {
        transform: rotate(180deg);
    }
}