/* ===========================
   CTA Buttons Row
   =========================== */

/* 唯一设置背景色的层级：背景色来自区块设置，所有内部结构层全部透明，
   即使设置缺失也只会整体回退，不会出现局部白块 */
.cta-buttons-row {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(var(--section-bg-rgb, 255, 255, 255));
  /* 与下方相邻区块之间留出固定间距（主题 section_vertical_gap=0 时 fallback 不生效，必须硬编码） */
  margin-bottom: 40px;
}

/* 内容容器：负责居中（限宽）与四周留白，箭头按钮的定位基准 */
.cta-buttons-row__inner {
  position: relative;
  box-sizing: border-box;
  max-width: calc(var(--page-padding) * 2 + var(--page-width));
  margin: 0 auto;
  padding-top: var(--cta-row-padding-top, 16px);
  padding-bottom: var(--cta-row-padding-bottom, 16px);
  padding-left: var(--cta-row-padding-left, var(--page-padding));
  padding-right: var(--cta-row-padding-right, var(--page-padding));
}

/* 横向滚动列表 */
.cta-buttons-row__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cta-row-gap, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.cta-buttons-row__list::-webkit-scrollbar {
  display: none;
}

.cta-buttons-row__item {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
}

/* PC 端按钮能全部放下时：等宽铺满 */
.cta-buttons-row.is-equal .cta-buttons-row__item {
  flex: 1 1 0;
}

.cta-buttons-row__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: var(--cta-btn-height, 34px);
  padding: 0 32px;
  background-color: rgb(var(--btn-bg-rgb, 17, 17, 17));
  color: rgb(var(--btn-color-prefix-rgb, 255, 255, 255));
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.cta-buttons-row__button:hover {
  opacity: 0.85;
}

.cta-buttons-row__text-prefix {
  color: rgb(var(--btn-color-prefix-rgb, 255, 255, 255));
}

.cta-buttons-row__text-suffix {
  color: rgb(var(--btn-color-suffix-rgb, 237, 218, 206));
}

/* PC 左右切换箭头 */
.cta-buttons-row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-btn-height, 34px);
  height: var(--cta-btn-height, 34px);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  background-color: rgb(var(--section-bg-rgb, 255, 255, 255));
  color: #111111;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cta-buttons-row__arrow--prev {
  left: -6px;
}

.cta-buttons-row__arrow--next {
  right: -6px;
}

.cta-buttons-row__arrow--next svg {
  transform: rotate(180deg);
}

/* 按钮全部放得下时：隐藏 PC 箭头和移动端渐变遮罩 */
.cta-buttons-row.is-full .cta-buttons-row__arrow,
.cta-buttons-row.is-full .cta-buttons-row__inner::before,
.cta-buttons-row.is-full .cta-buttons-row__inner::after {
  display: none;
}

.cta-buttons-row:hover .cta-buttons-row__arrow:not([disabled]) {
  opacity: 1;
  visibility: visible;
}

.cta-buttons-row__arrow[disabled] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 移动端 */
@media (max-width: 959px) {
  /* 移除一直存在的左右固定间距，改为滚动列表内部的左右留白 */
  .cta-buttons-row__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .cta-buttons-row__list {
    padding-left: var(--cta-row-padding-left-mobile, var(--page-padding));
    padding-right: var(--cta-row-padding-right-mobile, var(--page-padding));
  }

  .cta-buttons-row__arrow {
    display: none;
  }

  /* 左侧渐变遮罩：提示左边还有更多按钮 */
  .cta-buttons-row__inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--cta-row-gap, 12px) * 2);
    background: linear-gradient(
      to left,
      rgba(var(--section-bg-rgb, 255, 255, 255), 0),
      rgb(var(--section-bg-rgb, 255, 255, 255))
    );
    z-index: 2;
    pointer-events: none;
  }

  /* 右侧渐变遮罩：提示右边还有更多按钮 */
  .cta-buttons-row__inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--cta-row-gap, 12px) * 2);
    background: linear-gradient(
      to right,
      rgba(var(--section-bg-rgb, 255, 255, 255), 0),
      rgb(var(--section-bg-rgb, 255, 255, 255))
    );
    z-index: 2;
    pointer-events: none;
  }

  .cta-buttons-row__button {
    padding: 0 24px;
    white-space: normal;
  }
}