/* 防止移动设备字体自动调整 */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Hero Slider Styles */
.hero-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slider-dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2);
}

.slider-prev,
.slider-next {
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-prev:hover,
.slider-next:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1);
}

/* Gallery 滑動樣式 */
.gallery-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.gallery-scroll::-webkit-scrollbar {
    height: 8px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.gallery-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 懶加載樣式 */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* 載入動畫 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.gallery-item {
    animation: fadeIn 0.6s ease-out;
}

/* 滑動動畫效果 */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide.slide-in-right {
    animation: slideInFromRight 0.8s ease-out;
}

.slide.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .hero-slider {
        height: 60vh !important;
    }
    
    .slider-prev,
    .slider-next {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 16px;
    }
    
    .slider-prev {
        left: 8px;
    }
    
    .slider-next {
        right: 8px;
    }
    
    /* Hero Slider 手機版文字調整 */
    .hero-slider h1 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-slider .max-w-3xl p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-slider .flex.flex-wrap {
        font-size: 0.875rem !important;
        gap: 0.5rem !important;
    }
    
    .hero-slider .mt-3 {
        margin-top: 0.75rem !important;
        font-size: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .hero-slider .mt-3 span {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
}

/* 手機版 Gallery 優化 */
@media (max-width: 768px) {
    .gallery-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }
    
    .gallery-scroll .gallery-item {
        display: inline-block;
        white-space: normal;
        width: 280px;
        margin-right: 16px;
        vertical-align: top;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    .gallery-scroll::-webkit-scrollbar {
        height: 4px;
    }
    
    /* 預載入優化 */
    .gallery-item img {
        content-visibility: auto;
        contain-intrinsic-size: 300px 200px;
    }
}

/* Critical above-the-fold styles */
.hero-slider {
    contain: layout style paint;
}

.slide {
    will-change: opacity;
}

/* 減少重繪 */
.gallery-item {
    contain: layout style paint;
    transform: translateZ(0);
}

    /* Service Slider 手機版樣式 */
    @media (max-width: 768px) {
    .service-slider {
        padding-left: 0.75rem;
        padding-right: 1rem;
    }
    
    .service-slider-container {
        position: relative;
        padding-right: 1rem;
    }
    
    /* 隱藏滾動條但保持滾動功能 */
    .service-slider::-webkit-scrollbar {
        display: none;
    }
    
    .service-slider {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 滑動提示動畫 */
    @keyframes slideHint {
        0%, 100% {
            opacity: 0.6;
            transform: translateX(0);
        }
        50% {
            opacity: 1;
            transform: translateX(-4px);
        }
    }
    
    .service-slider-container .fa-chevron-right {
        animation: slideHint 2s ease-in-out infinite;
    }
    
    /* 當滑動到最後時隱藏提示 */
    .service-slider-container.scrolled-to-end .fa-chevron-right,
    .services-slider-container.scrolled-to-end .fa-chevron-right,
    .articles-slider-container.scrolled-to-end .fa-chevron-right {
        opacity: 0;
        animation: none;
        transition: opacity 0.3s ease;
    }
    
    /* Services Slider 手機版樣式（與 Service Slider 共用樣式） */
    .services-slider {
        padding-left: 0.75rem;
        padding-right: 1rem;
    }
    
    .services-slider-container {
        position: relative;
        padding-right: 1rem;
    }
    
    /* 隱藏滾動條但保持滾動功能 */
    .services-slider::-webkit-scrollbar {
        display: none;
    }
    
    .services-slider {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Gallery Slider 手機版樣式 */
    .gallery-slider {
        padding-left: 0.75rem;
        padding-right: 1rem;
    }
    
    .gallery-slider-container {
        position: relative;
        padding-right: 1rem;
    }
    
    /* 隱藏滾動條但保持滾動功能 */
    .gallery-slider::-webkit-scrollbar {
        display: none;
    }
    
    .gallery-slider {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 當滑動到最後時隱藏提示 */
    .gallery-slider-container.scrolled-to-end .fa-chevron-right {
        opacity: 0;
        animation: none;
        transition: opacity 0.3s ease;
    }
    
    /* Articles Slider 手機版樣式 */
    .articles-slider {
        padding-left: 0.75rem;
        padding-right: 1rem;
    }
    
    .articles-slider-container {
        position: relative;
        padding-right: 1rem;
    }
    
    /* 隱藏滾動條但保持滾動功能 */
    .articles-slider::-webkit-scrollbar {
        display: none;
    }
    
    .articles-slider {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 當滑動到最後時隱藏提示 */
    .articles-slider-container.scrolled-to-end .fa-chevron-right {
        opacity: 0;
        animation: none;
        transition: opacity 0.3s ease;
    }
}