<template>
  <div class="home-container">

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部Banner图片 -->
      <!-- <div class="banner-section">
        <img
          src="https://cdn.ipadbiz.cn/stdj/images/home/banner@2x.png"
          alt="三坛大戒法会Banner"
          class="banner-image"
        />
      </div> -->

      <!-- 视频播放器区域 -->
      <div class="video-section">
        <VideoPlayer
          :video-url="videoUrl"
          video-id="home-video"
          :autoplay="false"
          :options="videoOptions"
        />
      </div>

      <!-- 法会流程容器 -->
      <div class="ceremony-wrapper">
      <!-- 法会流程 -->
      <div class="ceremony-process">
        <!-- 标题 -->
        <div class="ceremony-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E6%B3%95%E6%9C%83%E6%B5%81%E7%A8%8B@2x.png" alt="法会流程" />
        </div>

        <!-- 横向滑动提示：放在标题与流程步骤之间，清晰可读 -->
        <div v-show="showSwipeHint" class="swipe-hint">
          <span class="swipe-icon">⇆</span>
          <span class="swipe-text">左右滑动查看更多</span>
        </div>

        <!-- 流程步骤 -->
        <div class="process-container">
          <!-- 麻绳背景 -->
          <div class="rope-background"></div>

            <!-- 流程步骤：每屏最多显示7个，超出可横向滑动 -->
            <div class="process-steps-wrapper" ref="processStepsRef">
              <!-- 单页步骤容器：宽度占满一屏，Scroll Snap对齐 -->
              <div
                class="process-steps"
                :class="{ 'distribute-evenly': shouldDistributeEvenly }"
                v-for="(page, pindex) in stepPages"
                :key="pindex"
              >
                <div
                  v-for="(step, sindex) in page"
                  :key="pindex + '-' + sindex"
                  class="process-step"
                  :class="{ active: step.active, placeholder: step.is_placeholder }"
                  @click="selectStep(pindex * steps_per_page + sindex)"
                >
                  <!-- 顶部白色圆形占位（选中状态） -->
                  <div class="top-circle"></div>

                  <!-- 步骤内容 -->
                  <div class="step-content">
                    <span class="step-text">{{ step.name }}</span>
                  </div>

                  <!-- 点击或默认选中后显示在步骤下方的箭头（使用 v-show 减少渲染延迟） -->
                  <div v-show="arrow_visible && step.active && !step.is_placeholder" class="bottom-arrow">
                    <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%82%B9@2x.png" alt="选中" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 法会流程内容 -->
        <div v-if="currentStep" class="ceremony-intro">
          <div class="intro-container">
            <!-- 背景图片 -->
            <div class="intro-background" :style="intro_background_style"></div>

            <!-- 步骤标题 -->
            <div class="step-title" ref="stepTitleRef">
              <span class="step-title-text">{{ currentStep.name }}</span>
            </div>

            <!-- 装饰线 -->
            <div class="decorative-line" :style="decorativeLineStyle"></div>

            <!-- 查看更多按钮 -->
            <div class="more-button" @click="viewMoreCeremony(currentStep)">
              <span class="more-text">查看更多</span>
            </div>
          </div>
        </div>
      </div>


      <!-- 三坛大戒 -->
      <div class="three-masters-section">
        <!-- 标题图片 -->
        <div class="common-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%89%E5%9D%9B%E5%A4%A7%E6%88%92@2x.png" alt="三坛大戒" class="title-image">
        </div>

        <!-- 三个栏目 -->
        <div class="vertical-masters-list">
          <!-- 三坛大戒栏目 -->
          <div class="vertical-item" v-for="(item, index) in threeMastersList" :key="index">
            <div class="vertical-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/400x/strip/quality/70'})` }">
              <div class="vertical-overlay"></div>
              <div class="vertical-text">
                <h3 class="vertical-title">{{ item.name }}</h3>
                <div class="vertical-more-btn" @click="viewMoreThreeAltars(item)">
                  <span class="more-text">查看更多</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="three-masters-section">
        <!-- 标题图片 -->
        <div class="common-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E6%A0%87%E9%A2%98%E5%9B%BE%E7%89%87_20260528182054_34_148.png" alt="传戒诸缘" class="title-image">
        </div>

        <!-- 多个栏目 -->
        <div class="three-columns">
          <div class="column-item" v-for="(item, index) in mastersList" :key="index">
            <div class="column-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/100x/strip/quality/70'})` }">
              <div class="column-overlay"></div>
              <div class="column-text">
                <h3 class="column-title">{{ item.name }}</h3>
                <div class="more-button" @click="viewMoreByCategory(item)">
                  <span class="more-text">查看更多</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="background: #E5DAC2; padding-bottom: 1rem;">
        <div class="photo-section" @click="handlePhotoClick">
          <div class="photo-content">
              <div class="photo-title">照片查询下载</div>
              <div class="more-button"><span class="more-text">进入</span></div>
          </div>
        </div>
      </div>

      <!-- 相关介绍 -->
      <div class="news-section">
        <!-- 标题 -->
        <div class="common-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D@2x.png" alt="相关介绍" class="title-image">
        </div>

        <!-- 轮播容器 -->
        <div
          class="news-carousel-container"
          ref="newsCarouselContainer"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
        >
          <div class="news-carousel" ref="newsCarousel">
            <div class="news-item" v-for="(item, index) in displayNewsItems" :key="index" @click="handleNewsClick(item)">
              <div class="news-image">
                <img :src="item.image + '?imageMogr2/thumbnail/200x/strip/quality/70'" :alt="item.title">
              </div>
              <div class="news-content">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-date">{{ item.date }}</div>
              </div>
            </div>
          </div>

          <!-- 导航按钮 -->
          <div class="carousel-nav">
            <img
              class="nav-btn prev-btn"
              src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8A@2x.png"
              alt="上一张"
              @click="prevSlide"
            >
            <img
              class="nav-btn next-btn"
              src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8B@2x.png"
              alt="下一张"
              @click="nextSlide"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onActivated, onUnmounted, watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useTitle } from '@vueuse/core';
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

// 导入接口
import { homePageAPI } from '@/api/index.js'

const router = useRouter()

// 页面标题
useTitle('西园戒幢律寺三坛大戒法会');

// TODO: 视频配置
const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/%E7%BA%AA%E5%BD%95%E7%89%87.mp4')

const videoOptions = ref({
  fluid: true,
  responsive: true,
  aspectRatio: '16:9',
  controls: true,
  preload: 'metadata',
  poster: 'https://cdn.ipadbiz.cn/stdj/video/%E7%BA%AA%E5%BD%95%E7%89%87-%E5%B0%81%E9%9D%A2.jpg',
  playbackRates: [0.5, 1, 1.25, 1.5, 2],
})

// 法会流程步骤数据
const processSteps = ref([])
// 流程步骤容器引用
const processStepsRef = ref(null)
/**
 * 是否显示箭头
 * 说明：默认不显示，用户点击步骤后显示在该步骤下方
 * @type {import('vue').Ref<boolean>}
 */
const arrow_visible = ref(false)

/**
 * 处理窗口尺寸变化：仅更新装饰线位置
 * @returns {void}
 */
const handleResize = () => {
    calculateLinePosition()
}

// 每页显示的步骤数量（移动端要求最多7个）
const steps_per_page = 7

/**
 * 计算分页后的步骤数组
 * 说明：将流程步骤按每页7个分组，配合横向滚动实现分页显示
 * @returns {Array<Array>} 分页后的步骤列表
 */
const stepPages = computed(() => {
  const pages = []
  const list = processSteps.value || []
  for (let i = 0; i < list.length; i += steps_per_page) {
    const page = list.slice(i, i + steps_per_page)
    const pad = steps_per_page - page.length
    if (pad > 0) {
      for (let k = 0; k < pad; k++) {
        // 占位项：用于固定每页7个槽位，保持间距一致
        page.push({ id: `placeholder-${i}-${k}`, name: '', cover: '', active: false, is_placeholder: true })
      }
    }
    pages.push(page)
  }
  return pages
})

/**
 * 是否应该平均分布步骤
 * 说明：当只有一屏且步骤数少于7个时，让步骤平均分布到整个屏幕宽度
 * @returns {boolean} 是否平均分布
 */
const shouldDistributeEvenly = computed(() => {
  const totalSteps = processSteps.value.length
  const totalPages = stepPages.value.length
  return totalPages === 1 && totalSteps < steps_per_page
})

// 获取当前选中的步骤
const currentStep = computed(() => {
  return processSteps.value.find(step => step.active) || processSteps.value[0]
})

/**
 * 计算流程背景图样式
 * 说明：为避免URL中包含空格、中文或特殊符号导致背景图不显示，进行安全编码并加上引号
 * @returns {Object} 内联样式对象
 */
const intro_background_style = computed(() => {
    const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover + '?imageMogr2/thumbnail/400x/strip/quality/70' : ''
    if (!url) return {}
    const safe_url = encodeURI(url)
    return { backgroundImage: 'url("' + safe_url + '")' }
})

// 步骤标题的ref引用
const stepTitleRef = ref(null)

// 装饰线的动态样式
const decorativeLineStyle = ref({
  top: '4.5rem',
  bottom: '4rem'
})

// 计算装饰线位置的函数
const calculateLinePosition = async () => {
  await nextTick()
  if (stepTitleRef.value) {
    const titleElement = stepTitleRef.value
    const containerElement = titleElement.closest('.intro-container')
    const moreButton = containerElement?.querySelector('.more-button')

    if (containerElement && moreButton) {
      // 获取标题和按钮的位置信息
      const titleRect = titleElement.getBoundingClientRect()
      const buttonRect = moreButton.getBoundingClientRect()
      const containerRect = containerElement.getBoundingClientRect()

      // 计算相对于容器的位置
      const titleBottom = titleRect.bottom - containerRect.top
      const buttonTop = buttonRect.top - containerRect.top

      // 装饰线从标题底部开始，留0.5rem间距
      const spacing = 8 // 0.5rem = 8px (基准字体16px)
      const lineTop = titleBottom + spacing

      // 装饰线到按钮上方，留0.5rem间距
      const lineBottom = containerRect.height - (buttonTop - spacing)

      decorativeLineStyle.value = {
        top: `${lineTop}px`,
        bottom: `${lineBottom}px`
      }
    }
  }
}

/**
 * 确保页面滚动位置在顶部（进入或激活时立即回顶）
 * 说明：使用立即滚动（非平滑）以避免过渡被用户察觉。
 */
const ensurePageScrollTop = () => {
  if (typeof window !== 'undefined') {
    // 立即滚动到顶部
    window.scrollTo({ top: 0, behavior: 'auto' })
  }
  // 兜底处理，兼容部分浏览器
  if (document && document.documentElement) {
    document.documentElement.scrollTop = 0
  }
  if (document && document.body) {
    document.body.scrollTop = 0
  }
}

/**
 * 点击切换步骤状态并显示箭头
 * @param {number} index 选中步骤索引
 */
const selectStep = (index) => {
  processSteps.value.forEach((step, i) => {
    step.active = i === index
  })
  // 根据选中索引滚动到对应页
  const pageIndex = Math.floor(index / steps_per_page)
  scrollToPage(pageIndex)
  // 切换步骤后重新计算装饰线位置
  calculateLinePosition()
  // 用户点击后显示箭头
  arrow_visible.value = true
}

/**
 * 滚动到指定分页
 * 说明：容器按一屏宽度分页，横向滚动到目标页
 * @param {number} pageIndex 目标页索引
 */
const scrollToPage = (pageIndex) => {
  const container = processStepsRef.value
  if (!container) return
  const rect = container.getBoundingClientRect()
  const pageWidth = rect.width
  container.scrollTo({ left: pageIndex * pageWidth, behavior: 'smooth' })
}

// 三坛大戒数据列表
const threeMastersList = ref([])
// 临坛十师数据列表
const mastersList = ref([])

// 组件挂载后计算装饰线位置
onMounted(async () => {
  // 进入页面时立即回到顶部
  ensurePageScrollTop()
  // 初次进入展示滑动提示，不再自动隐藏
  // 用户滑动或滚动后隐藏提示
  nextTick(() => {
    const el = processStepsRef.value
    if (el) {
      el.addEventListener('touchmove', dismissSwipeHint, { passive: true })
      el.addEventListener('scroll', dismissSwipeHint, { passive: true })
    }
  })
  // 监听窗口尺寸变化，仅用于更新装饰线位置
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', handleResize)
  }
  await calculateLinePosition();
  // 调用接口获取首页数据
  const { code, list } = await homePageAPI();
  if (code) {
    // 法会流程
    processSteps.value = list?.STDJFHLC?.map(item => ({
      id: item.id,
      parent_sn: item.parent_sn,
      name: item.category_name,
      cover: item.cover || '',
      active: false,
      category_link: item.category_link || '',
      articles: item.articles || [],
    })) || [];
    processSteps.value[0].active = true;
    // 首次默认选中，立即显示箭头，避免首次点击前不显示
    arrow_visible.value = true;
    // 三坛大戒
    threeMastersList.value = list?.STDJXQ?.map(item => ({
      id: item.id,
      category_sn: item.category_sn,
      parent_sn: item.parent_sn,
      name: item.category_name,
      cover: item.cover || '',
      category_link: item.category_link || '',
      articles: item.articles || [],
    })) || [];
    // 临坛十师
    mastersList.value = list?.STDJSSQZ?.map(item => ({
      id: item.id,
      category_sn: item.category_sn,
      parent_sn: item.parent_sn,
      name: item.category_name,
      cover: item.cover || '',
      category_link: item.category_link || '',
      articles: item.articles || [],
    })) || [];
    // 相关新闻
    newsItems.value = list?.STDJXGXW?.map(item => ({
      id: item.id,
      parent_sn: item.parent_sn,
      title: item.post_title,
      date: item.post_date,
      image: item.photo || '',
      post_link: item.post_link || '',
    })) || [];

    // 初始化轮播位置
    nextTick(() => {
      updateCarouselPosition(false)
      // 列表内容渲染后再兜底回顶一次，避免外部干扰
      ensurePageScrollTop()
    })
  }
})

// 组件被 keep-alive 激活时，立即回到顶部
onActivated(() => {
  ensurePageScrollTop()
})

// 组件卸载时清理resize监听
onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', handleResize)
  }
  const el = processStepsRef.value
  if (el) {
    el.removeEventListener('touchmove', dismissSwipeHint)
    el.removeEventListener('scroll', dismissSwipeHint)
  }
})

// 监听当前步骤变化，重新计算装饰线位置
watch(currentStep, () => {
  calculateLinePosition()
}, { deep: true })

// 法会流程 - 跳转新闻详情页
const viewMoreCeremony = (item) => {
  if (!item.articles?.length) {
    showToast('暂无相关内容')
    return
  }
  router.push({ name: 'NewsDetail', params: { id: item.articles[0]['id'] } })
}

// 三坛大戒 - 参考法会流程，跳转新闻详情页
const viewMoreThreeAltars = (item) => {
  if (!item.articles?.length) {
    showToast('暂无相关内容')
    return
  }
  router.push({ name: 'NewsDetail', params: { id: item.articles[0]['id'] } })
}

// 临坛十师/戒子/义工 - 统一处理，使用 category_sn 判断类型
const viewMoreByCategory = (item) => {
  // 根据 category_sn 判断类型（避免中文名称变化）
  const categorySN = item?.category_sn

  switch (categorySN) {
    case 'STSSQZ':  // 临坛十师
      router.push(`/masters?pid=${item.id}`)
      break
    case 'STYLS':  // 引礼师
      router.push(`/yinlishi?cid=${item.id}`)
      break
    case 'STJZ':    // 戒子
      router.push(`${item.category_link}`)
      break
    case 'STYG':    // 义工
      router.push(`${item.category_link}`)
      break
    default:
      // 默认行为：临坛十师
      router.push(`/masters?pid=${item.id}`)
  }
}

// 新闻轮播相关逻辑
const newsCarousel = ref(null)
const currentSlide = ref(1) // 从1开始，因为0是克隆的最后一项
const isTransitioning = ref(false)
// 轮播容器引用（用于触摸滑动）
const newsCarouselContainer = ref(null)
// 触摸滑动相关状态
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchDeltaX = ref(0)
const touchDeltaY = ref(0)
const isSwiping = ref(false)
const swipeThreshold = 30 // 滑动触发阈值，单位px

// 新闻数据
const newsItems = ref([])
const displayNewsItems = computed(() => {
  if (newsItems.value.length === 0) {
    return []
  }
  // 克隆第一项和最后一项以实现无缝滚动
  return [newsItems.value[newsItems.value.length - 1], ...newsItems.value, newsItems.value[0]]
})

// 上一张
const prevSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentSlide.value--
  updateCarouselPosition()

  if (currentSlide.value === 0) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = newsItems.value.length
      updateCarouselPosition(false) // 无动画地跳转
    }, 300) // 等待过渡动画完成
  } else {
    setTimeout(() => {
      isTransitioning.value = false
    }, 300)
  }
}

// 下一张
const nextSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentSlide.value++
  updateCarouselPosition()

  if (currentSlide.value === displayNewsItems.value.length - 1) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = 1
      updateCarouselPosition(false) // 无动画地跳转
    }, 300) // 等待过渡动画完成
  } else {
    setTimeout(() => {
      isTransitioning.value = false
    }, 300)
  }
}

// 更新轮播位置
const updateCarouselPosition = (animated = true) => {
  const carouselEl = newsCarousel.value
  if (!carouselEl) return

  const firstItem = carouselEl.querySelector('.news-item')
  if (!firstItem) return

  const itemWidth = firstItem.getBoundingClientRect().width
  let gapStr = getComputedStyle(carouselEl).gap
  if (!gapStr || gapStr === 'normal') {
    gapStr = '8px'
  }
  const gapPx = parseFloat(gapStr) || 8

  const distance = currentSlide.value * (itemWidth + gapPx)
  carouselEl.style.transition = animated ? 'transform 0.3s ease' : 'none'
  carouselEl.style.transform = `translateX(-${distance}px)`
}

/**
 * 触摸开始事件：记录初始触摸点
 * @param {TouchEvent} e 触摸事件对象
 */
const onTouchStart = (e) => {
  const t = e.touches && e.touches[0]
  if (!t) return
  touchStartX.value = t.clientX
  touchStartY.value = t.clientY
  touchDeltaX.value = 0
  touchDeltaY.value = 0
  isSwiping.value = false
}

/**
 * 触摸移动事件：计算水平与垂直位移，判断是否为水平滑动
 * @param {TouchEvent} e 触摸事件对象
 */
const onTouchMove = (e) => {
  const t = e.touches && e.touches[0]
  if (!t) return
  touchDeltaX.value = t.clientX - touchStartX.value
  touchDeltaY.value = t.clientY - touchStartY.value
  // 以水平位移为主且超过轻微阈值时，认定为滑动
  if (Math.abs(touchDeltaX.value) > Math.abs(touchDeltaY.value) && Math.abs(touchDeltaX.value) > 10) {
    isSwiping.value = true
    // 阻止默认滚动，避免与页面垂直滚动冲突
    e.preventDefault()
  } else {
    isSwiping.value = false
  }
}

/**
 * 触摸结束事件：根据滑动距离与方向触发上一张/下一张
 */
const onTouchEnd = () => {
  if (!isSwiping.value) return
  if (isTransitioning.value) return

  if (Math.abs(touchDeltaX.value) >= swipeThreshold) {
    if (touchDeltaX.value < 0) {
      // 左滑，下一张
      nextSlide()
    } else {
      // 右滑，上一张
      prevSlide()
    }
  }

  // 重置状态
  touchStartX.value = 0
  touchStartY.value = 0
  touchDeltaX.value = 0
  touchDeltaY.value = 0
  isSwiping.value = false
}

// 处理新闻点击事件
const handleNewsClick = (item) => {
  // 这里可以添加跳转到新闻详情页面的逻辑
  if (item.post_link) {
    location.href = item.post_link
  } else {
    router.push({ name: 'NewsDetail', params: { id: item.id } })
  }
}

// 原全局跟随箭头逻辑已移除：箭头改为嵌入步骤内，仅在点击后显示

// 是否显示横向滑动提示
const showSwipeHint = ref(true)

/**
 * 隐藏横向滑动提示
 * 说明：在用户首次滑动或滚动时隐藏，不再自动隐藏
 * @returns {void}
 */
const dismissSwipeHint = () => {
  showSwipeHint.value = false
}

/**
 * 处理照片入口点击
 * 说明：未登录跳转登录页；已登录进入戒子信息页面。
 * @returns {void}
 */

const handlePhotoClick = () => {
  router.push('/studentInfo')
}
</script>

<style scoped>
.home-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* 主要内容区域 */
.main-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Banner区域 */
.banner-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 视频播放器区域 */
.video-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

.video-section :deep(.video-player-container) {
  width: 100%;
  background: transparent;
}

.video-section :deep(.video-player) {
  width: 100%;
  height: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ceremony-process {
    padding: 2rem 1rem 0.25rem;
  }

  .ceremony-intro {
    padding: 0.5rem; /* 进一步从0.75rem减少到0.5rem */
  }

  .ceremony-title {
    font-size: 1.5rem;
  }

  .ceremony-subtitle {
    font-size: 0.875rem;
  }

  .ceremony-description {
    font-size: 0.875rem;
  }

  .process-steps {
    gap: 1rem;
  }

  .step-item {
    height: 15rem;
  }

  .step-title-text {
    font-size: 2rem; /* 从1.5rem调整为2rem */
  }

  .more-button {
    height: 2.5rem;
  }

  .more-text {
    font-size: 0.75rem;
  }
}

/* 临坛十师模块样式 */
.three-masters-section {
  padding: 2rem 1rem;
  background: #E5DAC2;
}

/* 照片查询下载模块样式 */
.photo-section {
  margin: 0 1rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E7%85%A7%E7%89%87%E4%B8%8B%E8%BD%BD@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.photo-content {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.photo-title {
  color: #FFFFFF;
  font-size: 1rem; /* 约18px，符合移动端标题视觉 */
  font-weight: 600;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35);
}

.photo-section .more-button {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  left: auto;
  bottom: auto;
  height: 2rem; /* 复用查看更多按钮风格并调整高度 */
  transform: translateY(-50%);
}

.photo-section .more-text {
  font-size: 0.75rem;
}

/* 通用标题样式 */
.common-title {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 3;
}

.common-title img {
  max-width: 15rem; /* 比原来的12rem更大 */
  height: auto;
}

/* 标题图片样式 - 保持向下兼容 */
.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.title-image {
  max-width: 15rem; /* 调整为更大的尺寸 */
  height: auto;
}

/* 三个栏目容器 */
.three-columns {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem;
  justify-content: space-between;
  align-items: stretch;
}

/* 强制桌面端水平布局 */
@media (min-width: 481px) {
  .three-columns {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* 单个栏目样式 */
.column-item {
  flex: 1;
  min-height: 20rem;
  height: 20rem;
}

.column-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border-radius: 1.17rem;
  border: 0.08rem solid #C1A16A;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.column-content:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* 蒙版效果 */
.column-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(152, 81, 34, 0.3) 50%, rgba(152, 81, 34, 0.8) 100%);
  z-index: 1;
}

/* 栏目文字内容 */
.column-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.column-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
  width: 100%;
  text-align: center;
}

/* 栏目内的查看更多按钮 */
.column-text .more-button {
  position: static;
  margin: 0 auto;
  height: 2.5rem;
  width: 6rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
}

.column-text .more-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.column-text .more-text {
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

/* 临坛十师模块响应式设计 */

/* 大屏幕 (>1200px) */
@media (min-width: 1200px) {
  .column-title {
    font-size: 1.5rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 3rem;
    width: 7rem;
  }
}

/* 中等屏幕 (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .column-title {
    font-size: 1.5rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 2.5rem;
    width: 100%;
  }
}

/* 小屏幕 (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .column-title {
    font-size: 1.25rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 2.25rem;
    width: 100%;
  }

  .column-text {
    padding: 1.25rem;
  }
}

/* 超小屏幕 (321px - 480px) */
@media (min-width: 321px) and (max-width: 480px) {
  .column-title {
    font-size: 1rem;
  }

  .column-text .more-text {
    font-size: 0.75rem;
  }

  .column-text .more-button {
    height: 2rem;
    width: 100%;
  }

  .column-text {
    padding: 1rem 0.5rem;
  }
}

/* 临坛十师模块响应式设计 - 只在很小的屏幕上使用垂直布局 */
@media (max-width: 320px) {
  .three-masters-section {
    padding: 2rem 1rem;
  }

  .three-columns {
    flex-direction: column !important;
    gap: 1rem;
  }

  .column-item {
    min-height: 15rem;
    height: 15rem;
  }

  .title-image {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .column-title {
    font-size: 0.875rem;
  }

  .column-text .more-text {
    font-size: 0.5rem;
  }

  .column-text .more-button {
    height: 1.75rem;
    width: 100%;
  }

  .column-text {
    padding: 0.75rem;
  }
}

/* 法会流程容器 */
.ceremony-wrapper {
  position: relative;
  width: 100vw;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  background-color: #F2EBDB;
  padding-bottom: 1.5rem;
}

/* 法会流程模块 */
.ceremony-process {
  width: 100%;
  padding: 2rem 1rem;
  position: relative;
  z-index: 2;
}

/* 标题部分 */
.ceremony-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.ceremony-title img {
  max-width: 12rem;
  height: auto;
}

/* 流程容器 */
.process-container {
  position: relative;
  width: 100%;
}

/* 麻绳背景 */
.rope-background {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 0.3rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E9%BA%BB%E7%BB%B3@2x.png');
  background-size: cover;
  background-position: top;
  background-repeat: repeat-x;
  transform: translateY(-10%);
  z-index: 0;
}

/* 流程步骤容器 */
.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0 0.5rem;
  gap: 0.5rem;
}

/* 平均分布模式：当只有一屏且步骤数少于7个时 */
.process-steps.distribute-evenly {
  justify-content: space-evenly;
}

/* 平均分布时隐藏占位符，不占据空间 */
.process-steps.distribute-evenly .process-step.placeholder {
  display: none;
}

/* 流程步骤分页容器：横向滚动，每屏一页 */
.process-steps-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* 底部留白，确保容器高度包含箭头展示空间 */
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

/* 隐藏移动端滚动条以优化视觉 */
.process-steps-wrapper::-webkit-scrollbar {
  display: none;
}

/* 单页占满一屏，滚动对齐 */
.process-steps-wrapper .process-steps {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
/* 横向滑动提示样式：标题和流程之间的高对比胶囊提示 */
.swipe-hint {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    pointer-events: none;
    margin: 0 auto 0.5rem;
    padding: 0;
    color: #985122;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    font-weight: 700;
    opacity: 1;
}

.swipe-icon {
    font-size: 0.875rem;
    line-height: 1;
    animation: hint-slide 2.2s ease-in-out infinite;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
    color: #985122;
}

.swipe-text {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02rem;
    color: #985122;
}

/* 小屏幕适配 */
@media (max-width: 30rem) {
    .swipe-hint {
        margin-bottom: 0.4rem;
    }
    .swipe-icon,
    .swipe-text {
        font-size: 0.8rem;
    }
}

/* 横向滑动动画：左右缓动，暗示可滑动 */
@keyframes hint-slide {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-0.25rem); }
    50%  { transform: translateX(0); }
    75%  { transform: translateX(0.25rem); }
    100% { transform: translateX(0); }
}

/* 单个流程步骤 */
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 固定占位，避免因数量不足导致单页拉伸 */
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.process-step:hover {
  transform: scale(1.05);
}

/* 步骤内容 */
.step-content {
  width: 4rem;
  height: 10rem;
  background: linear-gradient(180deg, #DAC39E 0%, #BE9C63 100%);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* 选中状态的步骤内容 */
.process-step.active .step-content {
  background: linear-gradient(180deg, #C8916C 0%, #975021 100%);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* 步骤文字 */
.step-text {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  margin-top: 0.85rem;
  /* 文字间隔 */
  letter-spacing: 0.05rem;
}

/* 顶部白色圆形占位 */
.top-circle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.45rem;
  height: 0.45rem;
  background: white;
  border-radius: 50%;
  z-index: 3;
}

/* 底部箭头 */
.bottom-arrow {
  position: absolute;
  bottom: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.bottom-arrow img {
  width: 1rem;
  height: 1rem;
  /* 底部箭头左右位移动画 */
  animation: arrowHSlide 1.8s ease-in-out infinite;
  will-change: transform;
}

/* 可移动箭头样式：启用left过渡，实现平滑跟随 */
.moving-arrow {
  transition: left 0.3s ease;
  pointer-events: none;
}

/* 占位项：隐藏内容但占据空间，保持间距统一 */
.process-step.placeholder .step-content {
  visibility: hidden;
  pointer-events: none;
}

.process-step.placeholder .top-circle {
  visibility: hidden;
}

/* 响应式调整 */
@media (max-width: 48rem) {
  .ceremony-process {
    padding: 2.5rem 0.5rem;
  }

.ceremony-title img {
    max-width: 12.5rem; /* 从10rem调整为12.5rem */
  }

  .title-image {
    max-width: 12.5rem; /* 从10rem调整为12.5rem */
  }

  .common-title img {
    max-width: 12.5rem;
  }
  .step-content {
    width: 3rem;
    height: 8rem;
  }

  .step-text {
    font-size: 0.9rem;
  }

  .process-steps {
    padding: 0 0.25rem;
    gap: 0.25rem;
  }
}

@media (max-width: 30rem) {
  .ceremony-process {
    padding: 2rem 1rem 0.5rem;
  }

.ceremony-title img {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .title-image {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .common-title img {
    max-width: 10rem;
  }
  .step-content {
    width: 2.5rem;
    height: 6.5rem;
  }

  .step-text {
    font-size: 0.8rem;
  }

  .top-circle {
    width: 0.5rem;
    height: 0.5rem;
  }

  .bottom-arrow img {
    width: 1rem;
    height: 0.75rem;
  }

  .process-steps {
    gap: 0.125rem;
  }
}

/* 介绍容器样式 */
.ceremony-intro {
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-container {
  position: relative;
  width: 100%;
  margin: 0.5rem; /* 从1rem减少到0.5rem */
  border-radius: 1.17rem;
  border: 0.08rem solid #C1A16A;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 28.75 / 16.18;
}

.intro-container:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* 背景图片 */
.intro-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: 1;
}

.intro-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(152, 81, 34, 1) 0%, rgba(152, 81, 34, 0.5) 30%, rgba(65, 44, 12, 0.15) 70%, transparent 100%);
  z-index: 2;
}

/* 步骤标题 */
.step-title {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
}

.step-title-text {
  color: white;
  font-size: 2.5rem; /* 从2rem调整为2.5rem，更大 */
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
  letter-spacing: 0.1rem;
  line-height: 1.2;
}

/* 装饰线 */
.decorative-line {
  position: absolute;
  left: 2.2rem;
  width: 0.125rem;
  border-left: 0.125rem dotted #FFF;
  z-index: 3;
}

/* 查看更多按钮 */
.more-button {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  height: 3rem;
  aspect-ratio: 3 / 1;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
}

.more-text {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

/* 步骤描述（隐藏，可用于后续扩展） */
.step-description {
  display: none;
}

/* 响应式设计 */
@media (max-width: 48rem) {
  .intro-container {
    margin: 0.375rem; /* 从默认0.5rem进一步减少 */
    padding: 0.625rem; /* 从0.875rem减少 */
  }

  .step-title-text {
    font-size: 2.25rem; /* 从1.75rem调整为2.25rem */
  }

  .more-button {
    bottom: 0.75rem;
    left: 1rem;
    height: 2.5rem;
  }

  .more-text {
    font-size: 0.75rem;
  }
}

/* 中等小屏幕 (24rem - 30rem, 384px - 480px) */
@media (max-width: 30rem) and (min-width: 24rem) {
  .intro-container {
    margin: 0.25rem; /* 进一步减少margin */
    padding: 0.5rem; /* 从0.75rem减少 */
  }

  .step-title {
    top: 1rem;
    left: 1rem;
  }

  .step-title-text {
    font-size: 1.25rem; /* 调整为更合适的大小 */
  }

  .decorative-line {
    left: 1.8rem;
  }

  .more-button {
    bottom: 0.75rem;
    left: 1rem;
    height: 2rem;
  }

  .more-text {
    font-size: 0.7rem;
  }
}

/* 小屏幕 (20rem - 24rem, 320px - 384px) */
@media (max-width: 24rem) and (min-width: 20rem) {
  .intro-container {
    margin: 0.125rem; /* 最小化margin */
    padding: 0.375rem; /* 从0.625rem减少 */
  }

  .step-title {
    top: 0.875rem;
    left: 0.875rem;
  }

  .step-title-text {
    font-size: 1.125rem; /* 进一步减小 */
  }

  .decorative-line {
    left: 1.6rem;
  }

  .more-button {
    bottom: 0.875rem;
    left: 0.875rem;
    height: 1.375rem;
  }

  .more-text {
    font-size: 0.65rem;
  }
}

/* 超小屏幕 (小于20rem, 小于320px) */
@media (max-width: 20rem) {
  .intro-container {
    margin: 0.125rem; /* 保持最小margin */
    padding: 0.25rem; /* 从0.5rem减少 */
  }

  .step-title {
    top: 0.75rem;
    left: 0.75rem;
  }

  .step-title-text {
    font-size: 1rem; /* 最小尺寸 */
  }

  .decorative-line {
    left: 1.4rem;
  }

  .more-button {
    bottom: 0.75rem;
    left: 0.75rem;
    height: 1.25rem;
  }

  .more-text {
    font-size: 0.6rem;
  }
}

/* 相关新闻样式 */
.news-section {
  padding: 3rem 1.5rem;
  position: relative;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F2EBDB;
}

/* 左下角装饰图片 */
.news-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 可根据实际图片大小调整 */
  height: 200px; /* 可根据实际图片大小调整 */
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none; /* 确保不影响交互 */
}

.news-carousel-container {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  z-index: 2; /* 确保轮播容器在背景图片之上 */
  /* 仅允许垂直滚动，优化左右滑动体验 */
  touch-action: pan-y;
}

.news-carousel {
  display: flex;
  transition: transform 0.3s ease;
  gap: 0.5rem; /* 减小间距 */
}

.news-item {
  flex: 0 0 75%; /* 调整宽度为75% */
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-image {
  width: 100%;
  height: 12rem;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 1rem;
  background: white;
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.news-date {
  font-size: 0.875rem;
  color: #999;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 3; /* 确保导航按钮在最上层 */
}

.nav-btn {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  object-fit: contain;
}

.nav-btn:hover:not(.disabled) {
  transform: scale(1.1);
}

.nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 48rem) {
  .news-section {
    padding: 3rem 1rem;
  }

  .news-item {
    flex: 0 0 78%; /* 调整中等屏幕宽度 */
  }

  .news-image {
    height: 10rem;
  }

  .news-title {
    font-size: 0.9rem;
  }

  .nav-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 30rem) {
  .news-section {
    padding: 3rem 0.75rem;
  }

  .news-item {
    flex: 0 0 82%; /* 调整小屏幕宽度 */
  }

  .news-image {
    height: 8rem;
  }

  .news-content {
    padding: 0.75rem;
  }

  .news-title {
    font-size: 0.85rem;
  }

  .news-date {
    font-size: 0.75rem;
  }
}

/* 新增垂直列表样式 - 三坛大戒 */
.vertical-masters-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vertical-item {
  width: 100%;
  height: 9rem; /* 约144px，高度适中 */
}

.vertical-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  border: 0.08rem solid #C1A16A; /* 保持与原有风格一致的边框颜色 */
}

.vertical-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%; /* 覆盖下半部分 */
  background: linear-gradient(to top, rgba(152, 81, 34, 0.95) 0%, rgba(152, 81, 34, 0.5) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.vertical-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1.25rem;
  height: 3.5rem; /* 固定高度区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.vertical-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05rem;
}

.vertical-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.5rem;
  background-color: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vertical-more-btn:active {
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(0.98);
}

.vertical-more-btn .more-text {
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
}
</style>