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


/* ★ Web 共用樣式已移至 tcg-common-web.css ★ */
/* ★ 按鈕共用已移至 tcg-common-web.css ★ */
/* ★ 漢堡選單已移至 tcg-common-web.css ★ */
/* ★ Footer 共用樣式已移至 tcg-common-web.css ★ */


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

/* ================================================================
   [Hero] 首屏主視覺 — CSS 背景圖模式，高度 600px
   ================================================================ */
.tcg-wrapper .tcg-ex-hero {
    background: #F5F5F5 url('https://tc-gaming.com/img/web/exhibitions/about3_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: 0px;
}
.tcg-wrapper .tcg-ex-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: 278px;
}
.tcg-wrapper .tcg-ex-hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}
.tcg-wrapper .tcg-ex-hero-title {
    font-size: 51px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 70px;
}
.tcg-wrapper .tcg-ex-hero-btn {
    /* hook：可獨立調整 hero Contact Us 按鈕 */
}


/* ================================================================
   [Section: Exhibitions Grid] 展會卡片列表
   白底，居中標題圖片，3×2 grid 卡片，底部分頁導覽
   ================================================================ */
.tcg-wrapper .tcg-ex-section {
    background: #FFFFFF;
    padding: 109px 0 45px;            /* ← 區塊上下間距，改這裡 */
}
/* 內容容器（獨立 hook，控制左右邊距） */
.tcg-wrapper .tcg-ex-section-inner {
    padding-left: 50px;               /* ← 左邊距，改這裡 */
    padding-right: 50px;              /* ← 右邊距，改這裡 */
}

/* ── 大標題圖片（888×190 原始尺寸，居中） ── */
.tcg-wrapper .tcg-ex-heading {
    text-align: center;
    margin-bottom: 105px;              /* ← 標題到卡片間距，改這裡 */
}
.tcg-wrapper .tcg-ex-heading-img {
    display: block;
    width: 888px;
    height: 190px;
    margin: 0 auto;
}

/* ── 卡片 Grid：flex 排列，每排 2 張（設計圖為 3 排 × 2 張） ── */
.tcg-wrapper .tcg-ex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 75px 32px;                        /* ← 卡片間距，改這裡 */
    margin-bottom: 60px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ── 分頁容器（每頁 6 張卡片） ── */
.tcg-wrapper .tcg-ex-page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 75px 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ── 單張卡片外殼 ── */
.tcg-wrapper .tcg-ex-card {
    width: 556px;                     /* ← 卡片寬度，改這裡 */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    -webkit-transition: box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tcg-wrapper .tcg-ex-card:hover {
    -webkit-box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

/* 卡片圖片區（556×370 原始尺寸） */
.tcg-wrapper .tcg-ex-card-img {
    width: 556px;                     /* ← 圖片區寬度，跟隨卡片寬度 */
    height: 370px;                    /* ← 圖片區高度，改這裡 */
    overflow: hidden;
    margin-bottom: 8px;
    border-radius: 30px;              /* ← 四邊圓角 */
}
.tcg-wrapper .tcg-ex-card-img img {
    display: block;
    width: 556px;
    height: 370px;
    -o-object-fit: cover;
    object-fit: cover;
}
/* 封面圖可點擊連結 */
.tcg-wrapper .tcg-ex-card-img a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 卡片內容區 — flex column 讓 Learn More 自動靠底 */
.tcg-wrapper .tcg-ex-card-body {
    padding: 24px 28px 28px;          /* ← 卡片內容間距，改這裡 */
    padding-bottom: 42px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;          /* 子元素適配內容寬度，不撐滿 */
}

/* ── 日期 + 地點 膠囊標籤列 ── */
.tcg-wrapper .tcg-ex-card-meta {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: transparent;
    border: 1px solid #D9D9D9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 7px;
    margin-left: 26px;
    width: auto;
}
.tcg-wrapper .tcg-ex-card-tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 900;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    padding: 8px 16px;
    background: transparent;
}
.tcg-wrapper .tcg-ex-card-meta-divider {
    width: 1px;
    height: 20px;
    background: #D9D9D9;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.tcg-wrapper .tcg-ex-card-tag-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tcg-wrapper .tcg-ex-card-tag-icon img {
    display: block;
}

/* 展會名稱 */
.tcg-wrapper .tcg-ex-card-title {
    font-size: 37px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 30px;
    line-height: 1.3;
    min-height: 52px;
    padding-left: 28px;
}

/* Learn More 連結 */
.tcg-wrapper .tcg-ex-card-link {
    margin-top: auto;                 /* ← 自動推到卡片底部 */
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 24px;
    color: #E5222B;
    color: var(--tcg-red);
    text-decoration: none;
    -webkit-transition: gap 0.3s ease;
    transition: gap 0.3s ease;
    padding-left: 29px;
    margin-bottom: 0px;
}
.tcg-wrapper .tcg-ex-card-link:hover {
    gap: 12px;
}
.tcg-wrapper .tcg-ex-card-link-arrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
    font-size: 14px;
}


/* ================================================================
   [Pagination] 分頁導覽
   ================================================================ */
.tcg-wrapper .tcg-ex-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 38px;
    padding: 26px 0 0px;
}
.tcg-wrapper .tcg-ex-page-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 23px;
    font-weight: 600;
    color: #6B6B6B;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.25s, color 0.25s;
    transition: background 0.25s, color 0.25s;
    padding: 0 6px;
}
.tcg-wrapper .tcg-ex-page-btn:hover {
    background: #F5F5F5;
    color: #262626;
}
.tcg-wrapper .tcg-ex-page-btn.is-active {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
}
.tcg-wrapper .tcg-ex-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tcg-wrapper .tcg-ex-page-btn--nav {
    border-radius: 20px;
    padding: 0 12px;
    font-size: 20px;
    gap: 13px;
}
.tcg-wrapper .tcg-ex-page-btn--nav .tcg-ex-page-arrow {
    font-size: 72px;
    margin-top: -14px;
    font-weight: 300;
}
.tcg-wrapper .tcg-ex-page-dots {
    font-size: 15px;
    color: #9A9A9A;
    padding: 0 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


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


/* ================================================================
   Mobile Version: Exhibitions 頁面專用樣式
   設計基準：750px 固定寬度
   命名規則：tcg-m-ex- 前綴（ex = exhibitions）
   ================================================================ */

/* ── Hero（Banner 圖片模式） ── */
.tcg-wrapper-mobile .tcg-m-ex-hero {
    position: relative;
}
.tcg-wrapper-mobile .tcg-m-ex-hero-bg img {
    display: block;
    width: 100%;
}
.tcg-wrapper-mobile .tcg-m-ex-hero-title {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 52px;
    font-weight: 900;
    color: #262626;
}
.tcg-wrapper-mobile .tcg-m-ex-hero-btn-wrap {
    position: absolute;
    bottom: 68px;
    left: 0;
    width: 100%;
    text-align: center;
}

/* ── Section：展会卡片列表区块 ── */
.tcg-wrapper-mobile .tcg-m-ex-section {
    background: #FFFFFF;
    padding: 126px 0;
}

/* 大标题图片（全寬） */
.tcg-wrapper-mobile .tcg-m-ex-heading {
    margin-bottom: 91px;
}
.tcg-wrapper-mobile .tcg-m-ex-heading img {
    display: block;
    width: 100%;
}

/* ── 展会卡片网格（单欄堆疊） ── */
.tcg-wrapper-mobile .tcg-m-ex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 36px;
    margin-bottom: 50px;
    padding-left: 22px;
    padding-right: 22px;
}

/* 单张卡片 */
.tcg-wrapper-mobile .tcg-m-ex-card {
    background: #FFFFFF;
    border-radius: 33px;
    overflow: hidden;
    box-shadow: 0 11px 16px 5px rgb(0 0 0 / 8%);
}
.tcg-wrapper-mobile .tcg-m-ex-card-img {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;              /* ← 四邊圓角 */
}
.tcg-wrapper-mobile .tcg-m-ex-card-img img {
    width: 100%;
    height: auto;
    display: block;
}
/* 封面圖可點擊連結 */
.tcg-wrapper-mobile .tcg-m-ex-card-img a {
    display: block;
    width: 100%;
}
.tcg-m-ex-card-img .tcg-img-placeholder {
    min-height: 420px;
    border-radius: 0;
}
.tcg-wrapper-mobile .tcg-m-ex-card-body {
    padding: 36px 36px;
}
.tcg-wrapper-mobile .tcg-m-ex-card-meta {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.tcg-wrapper-mobile .tcg-m-ex-card-tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    color: #6B6B6B;
    font-weight: 600;
    padding: 14px 24px;
}
.tcg-wrapper-mobile .tcg-m-ex-card-tag-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.tcg-wrapper-mobile .tcg-m-ex-card-tag-icon img {
    display: block;
}
.tcg-wrapper-mobile .tcg-m-ex-card-meta-divider {
    width: 1px;
    height: 22px;
    background: #D9D9D9;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.tcg-wrapper-mobile .tcg-m-ex-card-title {
    font-size: 46px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 68px;
    line-height: 1.4;
}
.tcg-wrapper-mobile .tcg-m-ex-card-link {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 33px;
    color: #E5222B;
    text-decoration: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 26px;
}
.tcg-wrapper-mobile .tcg-m-ex-card-link-arrow {
    font-size: 20px;
}
/* Learn More 箭頭圖片 */
.tcg-wrapper-mobile .tcg-m-ex-card-link-arrow-img {
    display: inline-block;
    vertical-align: middle;
}

/* ── 分页 ── */
.tcg-wrapper-mobile .tcg-m-ex-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.tcg-wrapper-mobile .tcg-m-ex-page-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 22px;
    color: #262626;
    cursor: pointer;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.tcg-wrapper-mobile .tcg-m-ex-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tcg-wrapper-mobile .tcg-m-ex-page-btn.is-active {
    background: #E5222B;
    color: #FFFFFF;
    border-color: #E5222B;
}
.tcg-wrapper-mobile .tcg-m-ex-page-btn--nav {
    font-weight: 600;
}
.tcg-wrapper-mobile .tcg-m-ex-page-arrow {
    font-size: 24px;
}
.tcg-wrapper-mobile .tcg-m-ex-page-dots {
    font-size: 22px;
    color: #9A9A9A;
    padding: 0 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}