/* ========================================
   响应式断点
   —— 大于 1024px：完全沿用 style.css 的 rem 体系
      （5 张层叠，16.3rem 舞台，本文件所有规则均不生效）
   —— 小于等于 1024px：显示 3 张
      中间大图基本占满（84vw），左右各一张只露出一小截
   ======================================== */

/* ---------- 平板 / 手机 ≤1024px ---------- */
@media (max-width: 1024px) {

    /* 1) 隐藏最外侧 2 张 → 只显示 3 张（prev-1 / active / next-1） */
    .intl-slide.is-prev-2,
    .intl-slide.is-next-2 {
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
    }

    /* 2) 舞台撑开，容纳「图片 + 下方标题」 */
    .intl-stage {
        width: 96vw;
        max-width: 96vw;
        height: 68vw;          /* 图片 47vw + 标题约 10vw + 余量 */
        perspective: 8rem;
    }

    /* 3) 中间大图基本占满：84vw，两侧各留约 6vw 给邻卡露边 */
    .intl-slide {
        width: 84vw;
        margin-left: -42vw;    /* -84/2，水平居中 */
        height: 47vw;          /* 约 16:9 */
        margin-top: -23.5vw;   /* -47/2，垂直居中 */
        border-radius: 0.06rem;
    }

    /* 4) 左右各一张：向两侧后移 + 缩小 + 轻微倾斜
          因 z-index 低于激活卡（style.css 中 prev/next-1 为 6，active 为 10），
          大部分被中间大图遮住，只在两侧露出边缘一小截 */
    .intl-slide.is-prev-1 {
        transform: translate3d(-64vw, 0, -1.5rem) rotateY(10deg) scale(0.8);
        opacity: 0.55;
    }
    .intl-slide.is-next-1 {
        transform: translate3d(64vw, 0, -1.5rem) rotateY(-10deg) scale(0.8);
        opacity: 0.55;
    }

    /* 5) 标题与控件：改用 px，避免 rem 在窄屏下过小 */
    .intl-info { padding: 10px 6px 0; }
    .intl-title { font-size: 16px; }

    .intl-arrow {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .intl-arrow.prev { left: 4px; }
    .intl-arrow.next { right: 4px; }

    .intl-dots { margin-top: 8px; }
}

/* ---------- 减少动画（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}