<template>
  <div class="product-detail">

    <!-- 使用导航栏组件 -->
    <NavBar
      :active-nav="activeNav"
      :search-keyword.sync="searchKeyword"
      @nav-change="handleNavChange"
    />

    <!-- Added breadcrumb navigation with back button -->
    <div class="breadcrumb">
      <div class="breadcrumb-nav">
        <span class="breadcrumb-link" >产品中心</span>
        <span class="breadcrumb-separator">></span>
        <span class="breadcrumb-current">产品详情</span>
      </div>
      <div>
        <i class="arrow-left-icon">←</i>
        <button class="btn-edit" @click="goBack">返回</button>
      </div>
    </div>

    <div class="main-content">
      <div class="section product-intro">
        <div class="intro-content">
          <div class="intro-image">
            <img :src="apiBase + intro" alt="产品介绍" />
          </div>
          <div class="intro-text">
            <div class="intro-header">
              <h2>产品介绍</h2>
              <button class="btn-primary">访问演示</button>
            </div>
            <p>
              基于移动互联网(微信、APP)，整合所有数据资源(在线订餐、充值、点评)，由内到外的为学校师生提供便民服务，深度定制餐厅、校
              本文档精准、适用于智慧食堂数据资源，通过设备、消费设备、自助充值、智慧收银、零售管理、多样化计
              方式)，致力提升学校整体服务和管理的能力，打造名副其实与时俱进的互联网餐厅。
            </p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <h3>宣传手册</h3>
          <a href="#" class="view-more">查看更多</a>
        </div>
        <div class="carousel-container">
          <button class="carousel-btn prev" @click="prevBrochure">
            <i class="arrow-left"></i>
          </button>
          <div
            class="carousel-content"
            ref="brochureCarousel"
            @mouseenter="pauseBrochureScroll"
            @mouseleave="resumeBrochureScroll"
          >
            <div class="carousel-track" :style="brochureTrackStyle">
              <div
                v-for="(item, index) in displayBrochures"
                :key="`brochure-${index}`"
                class="carousel-item brochure-item"
              >
                <div class="item-image">
                  <img :src=" apiBase + item.image" :alt="item.title" />
                </div>
                <p class="item-title">{{ item.title }}</p>
              </div>
            </div>
          </div>
          <button class="carousel-btn next" @click="nextBrochure">
            <i class="arrow-right"></i>
          </button>
        </div>
      </div>

      <!-- Promotional Videos -->
      <div class="section">
        <div class="section-header">
          <h3>宣传视频</h3>
          <a href="#" class="view-more">查看更多</a>
        </div>
        <!-- Updated carousel with infinite loop scrolling -->
        <div class="carousel-container">
          <button class="carousel-btn prev" @click="prevVideo">
            <i class="arrow-left"></i>
          </button>
          <div
            class="carousel-content"
            ref="videoCarousel"
            @mouseenter="pauseVideoScroll"
            @mouseleave="resumeVideoScroll"
          >
            <div class="carousel-track" :style="videoTrackStyle">
              <div
                v-for="(item, index) in displayVideos"
                :key="`video-${index}`"
                class="carousel-item video-item"
                @click="playVideo(item)"
              >
<!--                <div class="item-image video-thumbnail">
                  <img :src="apiBase + item.thumbnail" :alt="item.title" />
                  <div class="play-overlay">
                    <div class="play-button">
                      <i class="play-icon">▶</i>
                    </div>
                  </div>
                </div>-->
                <div class="item-image video-thumbnail">
                  <video
                    :src="apiBase + item.thumbnail"
                    :alt="item.title"
                    preload="metadata"
                    muted
                    @error="handleVideoError"
                    @loadedmetadata="handleVideoLoaded" style="height: 180px;width: 240px;"
                  >
                    <img :src="'/placeholder.svg?height=180&width=240'" :alt="item.title" />
                  </video>
                  <div class="play-overlay">
                    <div class="play-button">
                      <i class="play-icon">▶</i>
                    </div>
                  </div>
                </div>
                <p class="item-title">{{ item.title }}</p>
              </div>
            </div>
          </div>
          <button class="carousel-btn next" @click="nextVideo">
            <i class="arrow-right"></i>
          </button>
        </div>
      </div>

      <!-- Product Cases -->
      <div class="section">
        <div class="section-header">
          <h3>产品案例</h3>
          <a href="#" class="view-more" @click.prevent="viewCase">查看更多</a>
        </div>
        <div class="carousel-container cases-carousel">
          <button class="carousel-btn prev" @click="prevCase" :disabled="caseIndex === 0">
            <i class="arrow-left"></i>
          </button>
          <div class="carousel-content" ref="caseCarousel">
            <div class="carousel-track" :style="caseTrackStyle">
              <div
                v-for="(item, index) in cases"
                :key="index"
                class="case-item"
              >
                <div class="case-image">
                  <img :src="apiBase + item.image" :alt="item.company" />
                </div>
                <div class="case-content">
                  <h4>{{ item.company }}</h4>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
          <button class="carousel-btn next" @click="nextCase" :disabled="caseIndex >= maxCaseIndex">
            <i class="arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入导航栏组件
import NavBar from '@/views/psp/navBar.vue'

export default {
  name: 'ProductDetail',
  components: {
    NavBar
  },
  data() {
    return {
      activeNav: 'products',
      searchKeyword: '',
      brochureIndex: 0,
      videoIndex: 0,
      caseIndex: 0,
      itemsPerView: 4,
      autoPlayInterval: null,
      brochureOffset: 0,
      videoOffset: 0,
      brochureAutoInterval: null,
      videoAutoInterval: null,
      brochurePaused: false,
      videoPaused: false,
      scrollSpeed: 0.5, // pixels per frame
      apiBase: process.env.VUE_APP_BASE_API,
      intro :"/profile/avatar/2025/09/03/ldst.png",
      navItems: [
        { key: 'products',label: '产品中心', icon: '/img/psp/productCenter/products.png' },
        { key: 'components', label: '公共组件', icon: '/img/psp/productCenter/components.png' },
        { key: 'materials', label: '宣传物料', icon: '/img/psp/productCenter/materials.png'},
        { key: 'docs', label: '文档中心', icon: '/img/psp/productCenter/docs.png'}
      ],
      brochures: [
        { title: '智慧食堂产品手册1', image: '/profile/avatar/2025/09/03/ldst.png' },
        { title: '智慧食堂产品手册2', image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg' },
        { title: '智慧食堂产品手册3', image: '/profile/avatar/2025/09/03/ldst.png' },
        { title: '智慧食堂产品手册4', image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg' },
        { title: '智慧食堂产品手册5', image: '/profile/avatar/2025/09/03/ldst.png' },
        { title: '智慧食堂产品手册6', image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg' }
      ],
      videos: [
        { title: '智慧食堂产品视频1', thumbnail: '/profile/avatar/2025/09/03/vi1.mp4' },
        { title: '智慧食堂产品视频2', thumbnail: '/profile/avatar/2025/09/03/vi2.mp4' },
        { title: '智慧食堂产品视频3', thumbnail: '/profile/avatar/2025/09/03/vi1.mp4' },
        { title: '智慧食堂产品视频4', thumbnail: '/profile/avatar/2025/09/03/vi2.mp4' },
        { title: '智慧食堂产品视频5', thumbnail: '/profile/avatar/2025/09/03/vi1.mp4' },
        { title: '智慧食堂产品视频6', thumbnail: '/profile/avatar/2025/09/03/vi2.mp4' }
      ],
      cases: [
        {
          company: '安徽送变电工程有限公司',
          description: '基于移动互联网(微信、APP)，整合所有数据资源(在线订餐、充值、点评)，由内到外的为学校师生提供便民服务，深度定制餐厅、校本文档精准、适用于智慧食堂数据资源，通过设备、消费设备、自助充值、智慧收银、零售管理、多样化计方式)，致力提升学校整体服务和管理的能力，打造名副其实与时俱进的互联网餐厅。',
          image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400'
        },
        {
          company: '北京科技大学智慧食堂',
          description: '通过智慧食堂系统的实施，学校食堂管理效率提升了40%，学生满意度达到95%以上，实现了真正的数字化转型，为师生提供更便捷的用餐体验。',
          image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg?height=280&width=400'
        },
        {
          company: '上海交通大学',
          description: '采用先进的人工智能技术，实现了食堂的智能化管理，包括智能点餐、营养分析、库存管理等功能，大大提升了运营效率。',
          image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400'
        }
      ],
      animationFrame: null
    }
  },
  created() {
    this.productId = this.$route.params.id
    console.log('产品ID:', this.productId)
  },
  computed: {
    maxBrochureIndex() {
      return Math.max(0, this.brochures.length - this.itemsPerView)
    },
    maxVideoIndex() {
      return Math.max(0, this.videos.length - this.itemsPerView)
    },
    maxCaseIndex() {
      return Math.max(0, this.cases.length - 1)
    },
    displayBrochures() {
      return [...this.brochures, ...this.brochures, ...this.brochures]
    },
    displayVideos() {
      return [...this.videos, ...this.videos, ...this.videos]
    },
    brochureTrackStyle() {
      const itemWidth = 280 // approximate width including gap
      return {
        transform: `translateX(-${this.brochureOffset}px)`,
        transition: 'none'
      }
    },
    videoTrackStyle() {
      const itemWidth = 280 // approximate width including gap
      return {
        transform: `translateX(-${this.videoOffset}px)`,
        transition: 'none'
      }
    },
    caseTrackStyle() {
      return {
        transform: `translateX(-${this.caseIndex * 100}%)`
      }
    }
  },
  mounted() {
    this.startAutoPlay()
    this.startSmoothScroll()
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    this.stopAutoPlay()
    this.stopSmoothScroll()
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleNavChange(navKey) {
      this.activeNav = navKey
      // 可以根据导航项做页面跳转或其他操作
    },
    goBack() {
      this.$router.go(-1)
    },

    prevBrochure() {
      const containerWidth = this.$refs.brochureCarousel.offsetWidth
      this.brochureOffset -= containerWidth
      if (this.brochureOffset < 0) {
        this.brochureOffset = this.brochures.length * 280
      }
    },
    nextBrochure() {
      const containerWidth = this.$refs.brochureCarousel.offsetWidth
      this.brochureOffset += containerWidth
      const maxOffset = this.brochures.length * 280
      if (this.brochureOffset >= maxOffset * 2) {
        this.brochureOffset = maxOffset
      }
    },
    prevVideo() {
      const containerWidth = this.$refs.videoCarousel.offsetWidth
      this.videoOffset -= containerWidth
      if (this.videoOffset < 0) {
        this.videoOffset = this.videos.length * 280
      }
    },
    nextVideo() {
      const containerWidth = this.$refs.videoCarousel.offsetWidth
      this.videoOffset += containerWidth
      const maxOffset = this.videos.length * 280
      if (this.videoOffset >= maxOffset * 2) {
        this.videoOffset = maxOffset
      }
    },
    prevCase() {
      if (this.caseIndex > 0) {
        this.caseIndex--
      }
    },
    nextCase() {
      if (this.caseIndex < this.maxCaseIndex) {
        this.caseIndex++
      }
    },
    startAutoPlay() {
      this.autoPlayInterval = setInterval(() => {
        // Auto-advance cases every 5 seconds
        if (this.caseIndex < this.maxCaseIndex) {
          this.caseIndex++
        } else {
          this.caseIndex = 0
        }
      }, 5000)
    },
    stopAutoPlay() {
      if (this.autoPlayInterval) {
        clearInterval(this.autoPlayInterval)
        this.autoPlayInterval = null
      }
    },
    startSmoothScroll() {
      const animate = () => {
        if (!this.brochurePaused) {
          this.brochureOffset += 0.5
          const itemWidth = 280
          const maxOffset = this.brochures.length * itemWidth

          if (this.brochureOffset >= maxOffset * 2) {
            this.brochureOffset = maxOffset
          }
        }

        if (!this.videoPaused) {
          this.videoOffset += 0.5
          const itemWidth = 280
          const maxOffset = this.videos.length * itemWidth

          if (this.videoOffset >= maxOffset * 2) {
            this.videoOffset = maxOffset
          }
        }

        this.animationFrame = requestAnimationFrame(animate)
      }

      const itemWidth = 280
      this.brochureOffset = this.brochures.length * itemWidth
      this.videoOffset = this.videos.length * itemWidth

      this.animationFrame = requestAnimationFrame(animate)
    },
    stopSmoothScroll() {
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame)
        this.animationFrame = null
      }
    },
    pauseBrochureScroll() {
      this.brochurePaused = true
    },
    resumeBrochureScroll() {
      this.brochurePaused = false
    },
    pauseVideoScroll() {
      this.videoPaused = true
    },
    resumeVideoScroll() {
      this.videoPaused = false
    },
    startInfiniteScroll() {
    },
    stopInfiniteScroll() {
    },
    playVideo(video) {
      console.log('Playing video:', video.title)
      // 实现视频播放逻辑
    },
    handleVideoError(event) {
      console.log('[v0] Video loading error:', event.target.src)
      // 视频加载失败时，可以设置默认缩略图
      event.target.style.display = 'none'
      const img = document.createElement('img')
      img.src = '/placeholder.svg?height=180&width=240'
      img.alt = 'Video thumbnail'
      img.style.width = '100%'
      img.style.height = '100%'
      img.style.objectFit = 'cover'
      event.target.parentNode.appendChild(img)
    },

    handleVideoLoaded(event) {
      console.log('[v0] Video metadata loaded:', event.target.src)
      // 视频元数据加载完成，第一帧应该可以显示了
    },

    viewCase() {
      // 跳转到产品详情页，传递当前产品ID
      // this.$router.push(`/product-detail/${this.productId}`);
      this.$router.push({
        name: 'ProductCase',
        params: { id: `${this.productId}`}
      })
    }

  }
}
</script>

<style scoped>
.product-detail {
  height: 100%;
}

/* 顶部导航栏 */
.header {
  background-image: url("/img/psp/productCenter/topbg.png");
  color: white;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
  margin: 0 auto;
  padding: 12px 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.platform-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.header-nav {
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-item:hover,
.nav-item.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-icon {
  width: 20px;
  height: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 12px;
}

.search-input {
  background: none;
  border: none;
  color: white;
  outline: none;
  width: 200px;
  font-size: 14px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.search-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Enhanced breadcrumb styling with back button */
.breadcrumb {
  padding: 16px 24px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8eaec;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-button {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.arrow-left-icon {
  font-size: 20px;
  font-weight: bold;
  color: #4A90E2;
}

.breadcrumb-link {
  text-decoration: none;
  font-size: 14px;
}

.breadcrumb-separator {
  margin: 0 4px;
  color: #9ca3af;
  font-size: 14px;
}

.breadcrumb-current {
  color: #374151;
  font-size: 14px;
  font-weight: 500;
}

.btn-edit {
  color: #4A90E2;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}

/* Main Content */
.main-content {
  padding: 24px;
  background: #f8f9fa;
}

.section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.view-more {
  color: #4A90E2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.view-more:hover {
  text-decoration: underline;
}

/* Product Introduction */
.product-intro {
  border: none;
  box-shadow: 0 4px 20px rgba(74, 144, 226, 0.08);
}

.intro-content {
  display: flex;
  gap: 48px;
  align-items: center;
  min-height: 320px;
}

.intro-image {
  flex: 0 0 400px;
}

.intro-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(74, 144, 226, 0.12);
}

.intro-text {
  flex: 1;
}

.intro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.intro-text h2 {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.intro-text p {
  color: #4b5563;
  line-height: 1.8;
  margin: 0;
  font-size: 15px;
}

/* Enhanced button styling */
.btn-primary {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
}

/* Enhanced carousel styling for infinite loop */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.carousel-btn {
  background: white;
  border: 2px solid #e5e7eb;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.carousel-btn:hover {
  background: #4A90E2;
  border-color: #4A90E2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.carousel-btn:hover .arrow-left,
.carousel-btn:hover .arrow-right {
  border-color: white;
}

/* Added arrow icons */
.arrow-left,
.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  transition: border-color 0.3s ease;
}

.arrow-left {
  border-width: 6px 8px 6px 0;
  border-color: transparent #6b7280 transparent transparent;
}

.arrow-right {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #6b7280;
}

.carousel-content {
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
}

.carousel-track {
  display: flex;
  gap: 20px;
  /* Remove transition as we're using smooth animation */
}

/* Enhanced carousel items */
.carousel-item {
  flex: 0 0 260px; /* Fixed width instead of percentage */
  text-align: center;
}

.brochure-item .item-image,
.video-item .item-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.brochure-item:hover .item-image,
.video-item:hover .item-image {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.item-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.item-title {
  font-size: 14px;
  color: #374151;
  margin: 16px 0 0 0;
  font-weight: 500;
}

/* Enhanced video styling */
.video-thumbnail {
  position: relative;
  cursor: pointer;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-item:hover .play-overlay {
  opacity: 1;
}

.play-button {
  background: rgba(74, 144, 226, 0.9);
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: #357ABD;
  transform: scale(1.1);
}

.play-icon {
  margin-left: 3px;
}

/* Enhanced case items */
.cases-carousel .carousel-track {
  gap: 0;
}

.case-item {
  display: flex;
  gap: 32px;
  align-items: center;
  width: 100%;
  flex: 0 0 100%;
  padding: 32px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.case-image {
  flex: 0 0 400px;
}

.case-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.case-content {
  flex: 1;
  padding-left: 16px;
}

.case-content h4 {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.case-content p {
  color: #4b5563;
  line-height: 1.8;
  margin: 0;
  font-size: 15px;
}

/* Enhanced responsive design */
@media (max-width: 1024px) {
  .carousel-item {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 768px) {
  .breadcrumb {
    padding: 12px 16px;
  }

  .breadcrumb-nav {
    gap: 8px;
  }

  .main-content {
    padding: 16px;
  }

  .intro-content {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .intro-image {
    flex: none;
    width: 100%;
  }

  .intro-header {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .carousel-item {
    flex: 0 0 calc(50% - 10px);
  }

  .case-item {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }

  .case-image {
    flex: none;
    width: 100%;
  }

  .case-content {
    padding-left: 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .carousel-container {
    gap: 12px;
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
  }

  .carousel-item {
    flex: 0 0 calc(100% - 0px);
  }
}
</style>
