/* ========================================
   Explore INFFNI Carousel Styles - Auto Height
   ======================================== */

/* 1. 容器與 Swiper 基礎設置 */
.explore-inffni-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.explore-inffni-carousel-wrapper .swiper {
    width: 100%;
    height: 100%;
    overflow: visible;
    padding: 0 !important;
}

.explore-inffni-carousel-wrapper .swiper-wrapper {
    display: flex;
    /* align-items: stretch; -> 改為 flex-start 防止強制拉伸高度 */
    align-items: flex-start;
}

.explore-inffni-carousel-wrapper .swiper-slide {
    height: auto; /* 讓 Swiper Slide 自適應內容高度 */
    display: flex;
    justify-content: center; /* 確保內容居中 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   幻燈片項目 (核心樣式 - 自適應高度版)
   ======================================== */

.explore-inffni-slide-item {
    position: relative;
    width: 100%;
    /* height: 500px;  <-- 刪除固定高度 */
    height: auto;   /* <-- 改為自動高度 */
    overflow: hidden;
    display: block; /* <-- 改為 block，不再需要 flex center 來居中絕對定位的圖片 */
    border-radius: 15px;
    
    /* 默認狀態 (非激活) */
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    backface-visibility: hidden; /* 防止縮放時模糊 */
}

/* ========================================
   圖片與遮罩 (圖片撐開高度)
   ======================================== */

.explore-inffni-slide-image {
    /* position: absolute; <-- 刪除絕對定位 */
    position: relative; /* <-- 改為相對定位，讓它撐開父容器 */
    width: 100%;
    height: auto;       /* <-- 高度自動 */
    overflow: hidden;
    border-radius: inherit;
    background-color: #000;
    display: block;     /* 消除圖片底部的間隙 */
}

.explore-inffni-slide-image img {
    width: 100%;
    /* height: 100%;   <-- 刪除強制高度 */
    height: auto;      /* <-- 使用圖片原始高度 */
    display: block;    /* 消除 inline 元素間隙 */
    object-fit: cover; 
    transition: transform 0.5s ease;
    will-change: transform;
}

.explore-inffni-slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none; /* 讓點擊穿透到圖片 */
}

/* ========================================
   內容與文字樣式 (絕對定位覆蓋 + Flex佈局)
   ======================================== */

.explore-inffni-slide-content {
    position: absolute; /* 絕對定位覆蓋在圖片上 */
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column; /* 【關鍵】垂直排列：讓 justify-content 控制垂直，align-items 控制水平 */
    
    /* 
       這裡的 padding, justify-content, align-items 
       現在會由 Elementor 的控件動態生成樣式覆蓋 
    */
    padding: 40px; 
    box-sizing: border-box;
}

/* ========================================
   激活狀態邏輯
   ======================================== */

/* 保持原有邏輯不變 */
.explore-inffni-mode-center_two .swiper-slide.explore-inffni-center-active .explore-inffni-slide-item,
.explore-inffni-mode-center_two .swiper-slide-duplicate.explore-inffni-center-active .explore-inffni-slide-item,
.explore-inffni-carousel-wrapper:not(.explore-inffni-mode-center_two) .swiper-slide-active .explore-inffni-slide-item,
.explore-inffni-mode-center_two .swiper-slide-active .explore-inffni-slide-item { 
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 桌面版修復 */
@media (min-width: 1024px) {
    .explore-inffni-mode-center_two .swiper-slide-active:not(.explore-inffni-center-active) .explore-inffni-slide-item {
        opacity: 0.4 !important;
        transform: scale(1) !important;
        box-shadow: none;
        z-index: 1;
    }
}

/* ========================================
   其他樣式 (文字、按鈕等)
   ======================================== */
/* 文字容器 */
.explore-inffni-slide-text {
    max-width: 600px;
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 顯示文字 */
.swiper-slide.explore-inffni-center-active .explore-inffni-slide-text.animated,
.swiper-slide-active .explore-inffni-slide-text.animated,
.elementor-editor-active .explore-inffni-slide-text {
    opacity: 1;
    transform: translateY(0);
}

/* 字體樣式 */
.explore-inffni-slide-title {
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 1.2;
    color: #ffffff;
}

.explore-inffni-slide-description {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    color: #ffffff;
}

/* 按鈕樣式 */
.explore-inffni-slide-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 2px solid transparent;
}
.explore-inffni-slide-button:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 懸停圖片放大 */
.swiper-slide.explore-inffni-center-active .explore-inffni-slide-item:hover .explore-inffni-slide-image img,
.swiper-slide-active .explore-inffni-slide-item:hover .explore-inffni-slide-image img {
    transform: scale(1.05);
}

/* 導航按鈕 */
.explore-inffni-carousel-wrapper .swiper-button-prev,
.explore-inffni-carousel-wrapper .swiper-button-next {
    width: 50px; height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.explore-inffni-carousel-wrapper .swiper-button-prev:after,
.explore-inffni-carousel-wrapper .swiper-button-next:after {
    font-size: 20px; color: #ffffff; font-weight: bold;
}
.explore-inffni-carousel-wrapper .swiper-pagination { bottom: 10px; }
.explore-inffni-carousel-wrapper .swiper-pagination-bullet { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); }
.explore-inffni-carousel-wrapper .swiper-pagination-bullet-active { background-color: #ffffff; width: 30px; border-radius: 6px; }

/* ========================================
   響應式設計 (移除固定高度)
   ======================================== */

@media (max-width: 1024px) {
    /* .explore-inffni-slide-item { height: 400px; } <-- 刪除 */
    .explore-inffni-slide-content { padding: 30px; }
    .explore-inffni-slide-title { font-size: 28px; }
    .explore-inffni-slide-description { font-size: 14px; }
}

@media (max-width: 768px) {
    /* .explore-inffni-slide-item { height: 350px; } <-- 刪除 */
    .explore-inffni-slide-content { padding: 20px; }
    .explore-inffni-slide-title { font-size: 24px; margin-bottom: 10px; }
    .explore-inffni-slide-description { font-size: 13px; margin-bottom: 15px; }
    .explore-inffni-slide-button { padding: 10px 20px; font-size: 14px; }
}

@media (max-width: 480px) {
    /* .explore-inffni-slide-item { height: 300px; } <-- 刪除 */
    .explore-inffni-slide-content { padding: 15px; }
    .explore-inffni-slide-title { font-size: 20px; }
    .explore-inffni-carousel-wrapper .swiper-button-prev,
    .explore-inffni-carousel-wrapper .swiper-button-next { display: flex; }
}

/* ========================================
   動畫 Keyframes (保持不變)
   ======================================== */

.explore-inffni-slide-text[data-animation="fadeIn"].animated { animation: exploreInffniFadeIn 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="fadeInUp"].animated { animation: exploreInffniFadeInUp 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="fadeInDown"].animated { animation: exploreInffniFadeInDown 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="fadeInLeft"].animated { animation: exploreInffniFadeInLeft 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="fadeInRight"].animated { animation: exploreInffniFadeInRight 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="slideInUp"].animated { animation: exploreInffniSlideInUp 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="slideInDown"].animated { animation: exploreInffniSlideInDown 0.8s ease forwards; }
.explore-inffni-slide-text[data-animation="zoomIn"].animated { animation: exploreInffniZoomIn 0.8s ease forwards; }

@keyframes exploreInffniFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes exploreInffniFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes exploreInffniFadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes exploreInffniFadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes exploreInffniFadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes exploreInffniSlideInUp { from { transform: translateY(50px); } to { transform: translateY(0); } }
@keyframes exploreInffniSlideInDown { from { transform: translateY(-50px); } to { transform: translateY(0); } }
@keyframes exploreInffniZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* Elementor 編輯器強制顯示 */
.elementor-editor-active .explore-inffni-slide-item {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 1. 确保容器在加载时溢出隐藏 */
.explore-inffni-carousel-wrapper {
    overflow: hidden; 
    width: 100%;
}

/* 2. 针对尚未初始化的 Swiper 设定默认宽度 */
.explore-inffni-carousel-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    display: block;
    /* 默认手机端：显示 1 个 (根据你的 slides_per_view_mobile 设置) */
    width: 100%; 
    margin-right: 20px; /* 预估间距 */
    flex-shrink: 0;
}

/* 平板端预设：显示 2 个 */
@media (min-width: 768px) {
    .explore-inffni-carousel-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
        width: calc(50% - 30px); 
    }
}

/* 桌面端预设：显示 3 个 (或者你的 center_two 模式的大约宽度) */
@media (min-width: 1024px) {
    .explore-inffni-carousel-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
        /* 设为 33% 或者 30% 可以模拟 slidesPerView 3 的效果 */
        width: calc(33.33% - 30px); 
    }
}

/* 防止加载时图片撑破高度 */
.explore-inffni-carousel-wrapper .swiper:not(.swiper-initialized) .explore-inffni-slide-image {
    width: 100%;
    height: auto;
}