@charset "utf-8";

/* =========================================
   1. 首頁橫幅 (Top Banner)
   ========================================= */
.swiper-top-banner.swiper { aspect-ratio: 16 / 9; }

/* =========================================
   2. 主要服務卡片 (MainService - Cards)
   ========================================= */
.MainService { background-color: var(--white); }
.MainService .swiper { background: none; aspect-ratio: auto; }
.MainService .swiper .main-service-grid { display: flex; height: auto; gap: 0; margin-top: 2rem; }
.MainService .swiper .main-service-grid .main-service-card { 
    margin-bottom: 30px; background-color: var(--white); padding: 2.5rem 1.5rem; border-radius: var(--radius-md); 
    text-align: center; transition: all 0.3s ease; border: 1px solid #f0f0f0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); height: auto; display: flex; flex-direction: column; 
    overflow: hidden; align-items: center; text-decoration: none; color: inherit; 
}
.MainService .swiper .main-service-grid .main-service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: transparent; }
.MainService .swiper .main-service-grid .main-service-card picture { 
    width: 10rem; height: 10rem; background-color: rgba(9, 132, 227, 0.1); color: var(--primary-color); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; 
    margin-bottom: 1.5rem; transition: 0.3s; 
}
.MainService .swiper .main-service-grid .main-service-card img {border-radius:100%; }
.MainService .swiper .main-service-grid .main-service-card:hover picture { background-color: var(--primary-color); color: #fff; transform: rotateY(180deg); }
.MainService .swiper .main-service-grid .main-service-card .main-service-title { font-size: var(--font-h3); font-weight: 700; color: var(--text-color); margin-bottom: 1rem; }
.MainService .swiper .main-service-grid .main-service-card .main-service-desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }
.MainService .swiper .swiper-pagination { top: auto; bottom: 0; }

/* =========================================
   3. 關於我們 (About Us - Parallax)
   ========================================= */
.about { background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: var(--text-light); position: relative; }
.about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1; }
.about .container { position: relative; z-index: 2; }
.about .section-title { color: var(--text-light); }
.about .section-desc { color: var(--text-light-muted); }
.about-wrapper { display: flex; align-items: center; gap: var(--gap-xl); }
.about-image { flex: 1; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.5); }
.about-image img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.about-image:hover img { transform: scale(1.05); }
.about-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; color:white;}
.about-text .section-title { color:white;}
.about-text .section-desc { color:white;}

/* =========================================
   4. 作品集佈局 (Case - Bento Grid)
   ========================================= */
.Case { background-color: var(--bg-color); } 
.works-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 1.5rem; margin-top: 2rem; width: 100%; }
.work-card { position: relative; width: 100%; display: block; background-color: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); height: 100%; }
.work-card:focus-visible { outline: none; }
.work-card:focus-visible::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 3px var(--focus-ring-color); border-radius: var(--radius-lg); z-index: 20; pointer-events: none; }
.work-thumb { width: 100%; height: 100%; position: relative; z-index: 1; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.work-card:hover .work-thumb img { transform: scale(1.1); }
.work-tag { position: absolute; top: 1.25rem; left: 1.25rem; background-color: var(--primary-color); color: #fff; border-radius: var(--radius-tag); padding: 0.25rem 0.75rem; font-size: 0.8125rem; font-weight: 600; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.25); pointer-events: none; letter-spacing: 0.05em; }
.work-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 3rem 2rem 2rem 2rem; z-index: 5; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%); transform: translateY(101%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; justify-content: flex-end; }
.work-card:hover .work-overlay { transform: translateY(0); }
.work-title { font-size: var(--font-h3); font-weight: 700; margin-bottom: 0.5rem; color: #fff; line-height: 1.3; }
.work-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; margin: 0; }
/* Grid 跨度規則 */
.item-main { grid-column: 1 / 3; grid-row: 1 / 2; aspect-ratio: 16 / 9; }
.item-sub1 { grid-column: 1 / 2; grid-row: 2 / 3; aspect-ratio: 1 / 1; }
.item-sub2 { grid-column: 2 / 3; grid-row: 2 / 3; aspect-ratio: 1 / 1; }
.item-tall { grid-column: 3 / 5; grid-row: 1 / 3; height: auto; }

/* =========================================
   5. 中間橫幅 (Mid Page Banner - Parallax)
   ========================================= */
.swiper-mid-banner { aspect-ratio: auto; }
.swiper-mid-banner .mid-page-banner { 
    height: 380px; position: relative !important; overflow: hidden !important; 
    background-size: cover !important; background-position: center !important; background-attachment: fixed !important; 
} 
.mid-banner-text { 
    position: relative; z-index: 10; height: 380px; display: flex; align-items: center; 
    flex-direction: column; justify-content: center; text-align: center; color: var(--white); 
}
.mid-page-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(62, 58, 54, 0.6); }
.mid-banner-text h2 { font-size: 2.5rem; margin-bottom: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.mid-banner-text p { font-size: 1.25rem; opacity: 0.9; }

/* =========================================
   6. 核心服務切換 (Service - Tabs)
   ========================================= */
.Service { background-color: var(--white); }
.service-tabs { display: flex; justify-content: center; gap: 2rem; margin-bottom: 3rem; border-bottom: 1px solid #eee; position: relative; }
.tab-btn { background: none; border: none; font-size: 1.125rem; font-weight: 500; color: var(--text-muted); padding: 1rem 0.5rem; cursor: pointer; position: relative; transition: all 0.3s; white-space: nowrap; }
.tab-btn:hover, .tab-btn.active { color: var(--primary-color); }
.tab-btn.active { font-weight: 700; }
.tab-btn::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background-color: var(--primary-color); transition: width 0.3s ease; }
.tab-btn.active::after { width: 100%; }
.service-content-wrapper { position: relative; min-height: 400px; }
.tab-panel { display: none; opacity: 0; transform: translateY(10px); transition: 0.4s ease; }
.tab-panel.active { display: block; animation: fadeUp 0.5s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.panel-inner { display: flex; align-items: center; gap: 4rem; }
.panel-text { flex: 1; }
.panel-text > * { margin-bottom:10px;}
.panel-image { flex: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1rem 3rem rgba(0,0,0,0.1); }
.panel-image img { width: 100%; display: block; transition: 0.5s ease; }
.panel-image:hover img { transform: scale(1.05); }

/* =========================================
   7. 資訊服務與 FAQ (Info & FAQ)
   ========================================= */
.InfoService { position: relative; background-image: url('https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: var(--text-light); }
.InfoService::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1; }
.InfoService .container { position: relative; z-index: 2; }
.Faq { background-color: var(--bg-color); } 
.faq-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.faq-tab-btn { padding: 0.75rem 2rem; border: 1px solid #ddd; border-radius: 50px; color: var(--text-muted); cursor: pointer; transition: 0.3s; }
.faq-tab-btn.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3); }

.News .section-title { color:white;}

/* =========================================
   8. 聯絡我們佈局 (Contact Layout)
   ========================================= */
.Contact { background-color: var(--white); }
.contact-wrapper { display: flex; gap: 4rem; align-items: flex-start; margin-top: 3rem; }
.contact-info { flex: 1; }
.contact-list { list-style: none; padding: 0; margin-top:2rem;}
.contact-list li { display: flex; align-items: center; margin-bottom: 2rem; }
.contact-list .icon { width: 3rem; height: 3rem; background-color: rgba(9, 132, 227, 0.1); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.25rem; flex-shrink: 0; }
.contact-form-wrapper { flex: 1; background-color: var(--bg-color); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* =========================================
   9. 首頁響應式設計 (Home RWD)
   ========================================= */
@media (max-width: 62rem) { /* 992px */
    .main-service-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .works-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .item-main, .item-tall { grid-column: 1 / -1; aspect-ratio: 16/9; }
    .panel-inner { flex-direction: column-reverse; gap: 2rem; }
    .contact-wrapper { flex-direction: column; }
	.contact-form-wrapper { width:100%;}
}
@media (max-width: 48rem) { /* 768px */
    .swiper-top-banner.swiper { aspect-ratio: 1 / 1; }
    .main-service-grid, .works-bento { grid-template-columns: 1fr; }
	.wrapper .Case .works-bento { display:block;}
	.wrapper .Case .works-bento .work-card { margin-bottom:20px;}
	.wrapper .Case .works-bento .work-card .work-overlay {transform: translateY(0); padding:1rem;}
    .video-pc { display: none; } .video-mb { display: block; }
    .service-tabs { justify-content: flex-start; overflow-x: auto; }
	.mid-banner-text h2 { font-size:1.5rem;}
	.mid-banner-text p { font-size:0.8rem;}
	.swiper-mid-banner .mid-page-banner { height:65vw;}
	.mid-banner-text { height:65vw;}
	
}
@media (max-width: 30rem) { /* 480px */
	.service-tabs { gap:0.5rem;}
	.faq-tabs { flex-wrap:nowrap; gap:0.5rem; overflow-x:auto; justify-content:flex-start; padding-bottom:1rem; margin-bottom:2rem;}
	.faq-tab-btn { white-space:nowrap;}	
	.news-tabs { gap:0.5rem;}
}

/* =========================================
   10. 捲動動畫延遲 (Stagger Delays)
   ========================================= */
.main-service-card.ani-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.main-service-card.ani-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.main-service-card.ani-on-scroll:nth-child(3) { transition-delay: 0.3s; }
.works-bento .work-card.ani-on-scroll.item-main { transition-delay: 0.1s; }
.works-bento .work-card.ani-on-scroll.item-tall { transition-delay: 0.2s; }
.news-card.ani-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.news-card.ani-on-scroll:nth-child(2) { transition-delay: 0.25s; }

/* =========================================
   針對 3.css 的深色模式補強 (Dark Mode for Home Sections)
   ========================================= */

.wrapper.dark .MainService,
.wrapper.dark .Service,
.wrapper.dark .Contact {
    background-color: var(--bg-color) !important;
}

/* 2. 主要服務卡片 (MainService) */
.wrapper.dark .main-service-card {
    background-color: var(--card-bg) !important;
    border-color: #333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
}

.wrapper.dark .main-service-card .main-service-title {
    color: var(--text-color) !important;
}

.wrapper.dark .main-service-card .main-service-desc {
    color: var(--text-muted) !important;
}

.wrapper.dark .main-service-card picture {
    background-color: rgba(9, 132, 227, 0.2) !important; /* 增加透明度背景深度 */
}

/* 4. 作品集佈局 (Case - Bento Grid) */
.wrapper.dark .Case {
    background-color: #0a0a0a !important; /* 稍微比主背景再深一點 */
}

.wrapper.dark .mid-banner-text h2,
.wrapper.dark .mid-banner-text p{ color:white;}

.wrapper.dark .work-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

/* 6. 核心服務切換 (Service - Tabs) */
.wrapper.dark .service-tabs {
    border-bottom-color: #333 !important;
}

.wrapper.dark .panel-image {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.5) !important;
}

/* 7. FAQ 標籤切換 */
.wrapper.dark .Faq {
    background-color: var(--bg-color) !important;
}

.wrapper.dark .faq-tab-btn {
    border-color: #444 !important;
    color: var(--text-muted) !important;
}

.wrapper.dark .faq-tab-btn:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.wrapper.dark .faq-tab-btn.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* 8. 聯絡我們 (Contact) */
.wrapper.dark .contact-info .contact-list .icon {
    background-color: rgba(9, 132, 227, 0.2) !important;
}

.wrapper.dark .contact-form-wrapper {
    background-color: #1e1e1e !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* 針對 Section Title 在深色背景的強制修正 */
.wrapper.dark .section-title {
    color: var(--text-color) !important;
}

/* 輪播分頁點 (Pagination) */
.wrapper.dark .swiper-pagination-bullet {
    background: #555 !important;
}

.wrapper.dark .swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
}

/* =========================================
   11. 首頁字級微調 (Home Content Font Adjust)
   ========================================= */

/* 1. 主要服務卡片 (MainService) */
html.Font-Large .MainService .swiper .main-service-grid .main-service-card .main-service-desc { font-size: 1.1rem; }
html.Font-Small .MainService .swiper .main-service-grid .main-service-card .main-service-desc { font-size: 0.85rem; }

/* 2. 作品集 Bento Grid (Case) */
html.Font-Large .work-desc { font-size: 1.1rem; }
html.Font-Small .work-desc { font-size: 0.85rem; }
html.Font-Large .work-tag { font-size:calc( 0.8125rem * 1.1 ); }
html.Font-Small .work-tag {font-size:calc( 0.8125rem * 0.9 ); }

/* 3. 核心服務切換 (Service Tabs) */
html.Font-Large .tab-btn { font-size: 1.25rem; }
html.Font-Small .tab-btn { font-size: 1rem; }

/* 4. 中間橫幅 (Mid Page Banner) */
html.Font-Large .mid-banner-text h2 { font-size: 3rem; }
html.Font-Large .mid-banner-text p { font-size: 1.45rem; }
html.Font-Small .mid-banner-text h2 { font-size: 2rem; }
html.Font-Small .mid-banner-text p { font-size: 1.1rem; }

/* 5. 最新消息 */
html.Font-Large .news-tab-btn { font-size:calc( 1rem * 1.1 ); }
html.Font-Small .news-tab-btn {font-size:calc( 1rem * 0.9 ); }
html.Font-Large .news-tag { font-size:calc( 0.75rem * 1.1 ); }
html.Font-Small .news-tag {font-size:calc( 0.75rem * 0.9 ); }

/* =========================================
   Mobile Hover Fix (貼在 1.css 最下方)
   功能：在觸控裝置上移除懸停特效
   ========================================= */
@media (hover: none) {
    
    /* 1. 主要服務卡片：移除上浮與陰影加深 */
    .MainService .swiper .main-service-grid .main-service-card:hover { 
        transform: none !important; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important; 
        border-color: #f0f0f0 !important;
    }
    
    /* 深色模式下的卡片還原 */
    .wrapper.dark .MainService .swiper .main-service-grid .main-service-card:hover {
        border-color: #333 !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
    }

    /* 移除圖示翻轉特效 */
    .MainService .swiper .main-service-grid .main-service-card:hover picture { 
        background-color: rgba(9, 132, 227, 0.1) !important; 
        color: var(--primary-color) !important; 
        transform: none !important; 
    }
    .wrapper.dark .MainService .swiper .main-service-grid .main-service-card:hover picture {
        background-color: rgba(9, 132, 227, 0.2) !important;
    }

    /* 2. 關於我們：移除圖片放大 */
    .about-image:hover img { 
        transform: none !important; 
    }
	
    /* 3. 作品集 (Work Card)：
       - 移除圖片放大
       - 強制顯示文字遮罩 (Overlay)，否則手機看不到字 */
    .work-card:hover .work-thumb img { 
        transform: none !important; 
    }
    .work-overlay { 
        transform: translateY(0) !important; /* 讓文字在手機上直接顯示，不需要點擊 */
    }

    /* 4. 核心服務切換：移除圖片放大 */
    .panel-image:hover img { 
        transform: none !important; 
    }
	
	.tab-btn:hover { color: var(--text-muted); }
	.tab-btn.active { color: var(--primary-color); }
	
}