/* ==============================================================
   檔案名稱：other-services-style.css
   功能說明：TC Gaming — 其他服務（Other Services）頁面樣式表
   設計基準：1920px 固定寬度，透過 JS transform: scale() 等比縮放
   命名規則：
     - 共用元件：tcg- 前綴（與首頁一致）
     - 頁面專屬：tcg-os- 前綴（os = other-services）
   瀏覽器支援：Chrome / Edge / Safari / Firefox，IE11 盡量相容
   ============================================================== */


/* ★ Web 共用樣式已移至 tcg-common-web.css ★ */


/* ★ 漢堡選單已移至 tcg-common-web.css ★ */

/* [Page-Specific] Other Services 頁面樣式（Web 版）
   所有 web 規則均帶 .tcg-wrapper 前綴，確保不影響手機版
   ============================================================== */

/* ================================================================
   [Hero] 首屏主視覺 — 背景圖模式，高度 600px
   ================================================================ */
.tcg-wrapper .tcg-os-hero {
    background: #F5F5F5 url('img/web/other-services/services_img_00_banner.png') no-repeat right center;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
    margin-top: 111px;
}
.tcg-wrapper .tcg-os-hero-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 600px;
    padding-top: 100px;
    padding-left: 226px;
}
.tcg-wrapper .tcg-os-hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}
.tcg-wrapper .tcg-os-hero-title {
    font-size: 51px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 98px;
}
.tcg-wrapper .tcg-os-hero-btn {
    /* hook：可獨立調整 hero Contact Us 按鈕 */
}


/* ================================================================
   [Outsourcing Services] 外包/咨询服务
   白底，居中大標題，卡片排列（第一排 3 張 + 第二排 2 張置中）
   ================================================================ */
.tcg-wrapper .tcg-os-services {
    background: #FFFFFF;
    padding: 148px 0 87px;
}
/* 內容容器（獨立 hook） */
.tcg-wrapper .tcg-os-services-inner { }

.tcg-wrapper .tcg-os-services-title {
    font-size: 53px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    text-align: center;
    margin-bottom: 0px;
}

/* 卡片排列容器
   ── 調整卡片間距：改 gap 值即可 ── */
.tcg-wrapper .tcg-os-services-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px;                /* ← 卡片間距，改這裡 */
    margin-bottom: 40px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: center;
}
/* 第一排（獨立 hook） */
.tcg-wrapper .tcg-os-services-row-1 {top: 0px;margin-top: -10px;}
/* 第二排：靠左對齊（與第一排左邊緣對齊） */
.tcg-wrapper .tcg-os-services-row-2 {
    margin-bottom: 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-left: 114px;
    padding-left: 114px;
    margin-top: -62px;
}

/* 卡片外層
   ── 調整卡片寬度：改 width 值即可 ──
   icon + card-body 都會自動跟著這個寬度走 */
.tcg-wrapper .tcg-os-card {
    width: 457px;             /* ← 卡片寬度，改這裡 */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    padding-top: 33px;        /* 留出 icon 凸出空間 */
}
/* 各卡片獨立 hook */
.tcg-wrapper .tcg-os-card-1 { }
.tcg-wrapper .tcg-os-card-2 { }
.tcg-wrapper .tcg-os-card-3 { }
.tcg-wrapper .tcg-os-card-4 { }
.tcg-wrapper .tcg-os-card-5 { }

/* icon 容器：凸出於灰色 card-body 上方，靠左對齊 */
.tcg-wrapper .tcg-os-card-icon {
    position: relative;
    z-index: 2;
    width: 285px;
    height: 284px;
    margin-left: -20px;
    margin-bottom: -142px;    /* 凸出一半高度 */
    padding-top: 43px;
}
/* icon 圖片：原始尺寸 285×284 */
.tcg-wrapper .tcg-os-card-icon-img {
    display: block;
    width: 285px;
    height: 284px;
}

/* 灰色卡片本體 — 寬度 100% 跟隨 .tcg-os-card */
.tcg-wrapper .tcg-os-card-body {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    border-radius: 27px;
    padding: 121px 47px 40px; /* 上方留空給 icon 凸出部分 */
    min-height: 360px;
    -webkit-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    width: 100%;              /* 自動跟隨父層寬度 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 598px;
}
.tcg-wrapper .tcg-os-card:hover .tcg-os-card-body {
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* 卡片標題 */
.tcg-wrapper .tcg-os-card-title {
    font-size: 26px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 50px;
    line-height: 1.4;
}

/* 卡片描述文字 */
.tcg-wrapper .tcg-os-card-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.7;
    margin: 0;
}

/* ==============================================================
   [Other Services 其他服務] tcg-m-os- 前綴
   頁面結構：Hero → Services（大標題 + 5 張服務卡片）→ Footer
   ============================================================== */

/* ── Hero：其他服务 主視覺 ── */
.tcg-m-os-hero {
    position: relative;
}
.tcg-m-os-hero-bg {
    width: 100%;
}
.tcg-m-os-hero-bg img {
    display: block;
    width: 100%;
}
/* Hero 標題 — absolute 定位在 banner 上方 */
.tcg-wrapper-mobile .tcg-m-os-hero-title {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 54px;
    font-weight: 900;
    color: #262626;
}
.tcg-m-os-hero-btn-wrap {
    position: absolute;
    bottom: 68px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ── Services：外包/咨询服务 ── */
.tcg-m-os-services {
    background: #FFFFFF;
    padding: 121px 0 18px;
}
.tcg-wrapper-mobile .tcg-m-os-services-title {
    font-size: 55px;
    font-weight: 900;
    color: #262626;
    text-align: center;
    margin-bottom: 54px;
}

/* 服務卡片外殼（留出 icon 上方空間） */
.tcg-m-os-card-wrap {
    position: relative;
    padding-top: 130px;
    margin-bottom: 0px;
    padding-left: 21px;
    padding-right: 21px;
}
.tcg-m-os-card-wrap:last-child {
    margin-bottom: 25px;
}
/* icon 圖標（浮在卡片頂部邊緣上方） */
.tcg-m-os-card-icon {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.tcg-m-os-card-icon img {
    display: block;
    margin-top: -9px;
}
/* 灰色圓角卡片本體（統一高度） */
.tcg-m-os-card {
    background: #eaecef;
    border-radius: 24px;
    padding: 70px 40px 50px;
    min-height: 600px;
}
/* 卡片標題 */
.tcg-wrapper-mobile .tcg-m-os-card-title {
    font-size: 32px;
    font-weight: 900;
    color: #262626;
    line-height: 1.4;
    margin-bottom: 31px;
    margin-top: 57px;
}
/* 卡片描述文字 */
.tcg-wrapper-mobile .tcg-m-os-card-desc {
    font-size: 22px;
    color: #6B6B6B;
    line-height: 1.8;
}

/* ★ Mobile 共用樣式已移至 tcg-common-mobile.css ★ */