/* =========================================
   Hero Section (Swiper.js 版本)
   ========================================= */

.hero {
    max-width: 100%;
    margin: 40px auto;
    position: relative;
    padding: 0 40px;
    /* 保留空間給左右按鈕 */
}


/* Swiper 容器設定 */

.hero__swiper {
    width: 100%;
    padding-bottom: 40px;
    /* 預留空間給下方的分頁點 */
}

.hero__content {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0 60px;
    /* 內縮避免與按鈕重疊 */
}

.hero__text-area {
    flex: 1;
    max-width: 300px;
}

.hero__poem {
    font-family: serif;
    font-size: 1.1rem;
    color: var(--color-text-main);
    letter-spacing: 1.5px;
    line-height: 1.8;
}

.hero__image-area {
    flex: 2;
    display: flex;
    justify-content: flex-end;
}


/* 不規則遮罩維持不變 */

.hero__blob-mask {
    width: 600px;
    height: 450px;
    position: relative;
    border-radius: 43% 57% 41% 59% / 46% 39% 61% 54%;
    overflow: hidden;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05);
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__image-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.2;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}


/* --- 覆寫 Swiper 預設按鈕並套用自訂圖片 --- */


/* 1. 強制隱藏 Swiper 預設的藍色字體箭頭 */

.hero__nav-btn::after {
    display: none !important;
}


/* 2. 重設按鈕容器的尺寸 */

.hero__nav-btn {
    width: 32px;
    /* 根據您希望的箭頭大小可自行微調 */
    height: 32px;
    margin-top: -16px;
    /* 確保絕對垂直置中 */
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* 設定動畫過渡 */
}


/* 3. 設定您上傳的箭頭圖片 */

.hero__nav-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* 4. Hover 互動效果 */


/* 因為無法直接用 color 改變圖片顏色，實務上會改用放大與微調透明度來增加點擊回饋感 */

.hero__nav-btn:hover {
    transform: scale(1.15);
    /* 滑鼠游標停懸時稍微放大 15% */
    opacity: 0.8;
    /* 稍微變透明一點點 */
}


/* ----------------------------------------- */


/* 分頁點顏色覆寫 (維持原本的設定即可) */

.hero__pagination .swiper-pagination-bullet {
    background: #D3C3B1;
    opacity: 0.6;
}

.hero__pagination .swiper-pagination-bullet-active {
    background: var(--color-accent);
    opacity: 1;
}

/* =========================================
   響應式：首頁輪播與主視覺
   ========================================= */

@media (max-width: 768px) {
    .hero {
        
        margin: 40px auto 28px;
        padding: 0 10px;
    }

    .hero__swiper {
        width: 100%;
        padding-bottom: 28px;
    }

    .hero__content {
        padding: 0;
        gap: 12px;
    }

    .hero__nav-btn {
        width: 28px;
        height: 28px;
        margin-top: -14px;
    }
    .hero__nav-icon{
        display:none;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 0 6px;
    }

    .hero__content {
        padding: 0 32px;
    }

    .hero__nav-btn {
        width: 24px;
        height: 24px;
        margin-top: -12px;
    }
    .hero__nav-icon{
        display:none;
    }

}