/*
Theme Name: Y's Men HK Theme
Author: Your Name
Description: Custom theme for Y's Men International Hong Kong District
Version: 1.0.8
*/

/* 基本重置 */
/* * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 300!important;} */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; font-weight: 300!important;}
body { color: #333; line-height: 1.6; background-color: #fff; }
a { text-decoration: none; color: inherit; }

/* 隱藏 reCAPTCHA 徽章 */
.grecaptcha-badge { visibility: hidden !important; }

/* 顏色定義 */
:root {
    --primary-blue: #32508A; 
    --dark-blue: #233A6B;   
    --accent-red: #D73C38;  
    --light-bg: #F8F9FA;
}

/* 統一 1200px 寬度容器 */
.container { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 20px; }

/* 頂部 Header */
.top-header-bg { background: white; position: relative; z-index: 100; }
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; }
.mobile-menu-btn, .search-icon, .mobile-search-dropdown { display: none; }

.logo { font-size: 24px; font-weight: bold; color: var(--primary-blue); display: flex; align-items: center; }
.logo img { height: 90px; margin-right: 10px; }

.top-actions { display: flex; align-items: center; gap: 15px; }
.desktop-search { position: relative; }
.desktop-search input { padding: 8px 30px 8px 15px; border: 1px solid #ccc; border-radius: 20px; outline: none; font-size: 14px; width: 220px; }
.lang-switch { font-weight: bold; font-size: 14px; color: #555; cursor: pointer; white-space: nowrap; }

/* 導覽列 */
.main-nav { background-color: var(--primary-blue); color: white; }
.main-nav ul { display: flex; justify-content: center; list-style: none; gap: 40px; padding: 15px 0; margin: 0; }
.main-nav ul li a { font-size: 15px; transition: opacity 0.3s; }
.main-nav ul li a:hover { opacity: 0.8; }

/* Hero 橫幅 */
.hero-banner { position: relative; width: 100%; height: 450px; background: #e0e0e0 url('https://via.placeholder.com/1920x600/eeeeee/888888?text=Main+Event+Banner') center/cover no-repeat; }
.slider-arrow { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: white; font-size: 30px; cursor: pointer; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* Motto 區塊 */
.motto-section { text-align: center; padding: 60px 20px; }
.motto-subtitle { color: var(--primary-blue); font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.motto-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #222; }
.motto-text { color: #666; font-size: 14px; max-width: 800px; margin: 0 auto; }

/* 左右分割區塊 */
.split-section { display: flex; width: 100%; margin-bottom: 40px; }
.split-image { flex: 1; background: url('https://via.placeholder.com/960x500/cccccc/666666?text=Hands+Together') center/cover no-repeat; min-height: 400px; }
.split-content { flex: 1; background-color: var(--primary-blue); color: white; padding: 80px 8%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.split-content h2 { font-size: 28px; margin-bottom: 20px; }
.split-content p { font-size: 15px; margin-bottom: 30px; opacity: 0.9; }

.btn-red { background-color: var(--accent-red); color: white; padding: 10px 25px; border-radius: 25px; font-weight: bold; font-size: 14px; transition: background 0.3s; display: inline-block; border: none; }
.btn-red:hover { background-color: #ba322e; }

/* Club News 區塊 */
.news-section { margin: 80px auto; }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.news-header h2 { font-size: 32px; color: var(--primary-blue); margin: 0; }
.learn-more-link { font-size: 14px; color: var(--primary-blue); font-weight: bold; }
.news-list { border-top: 1px solid #ddd; }
.news-item { display: flex; padding: 20px; border-bottom: 1px solid #ddd; font-size: 14px; }
.news-item:nth-child(even) { background-color: var(--light-bg); }
.news-date { width: 150px; color: #666; }
.news-club { width: 200px; color: #444; }
.news-title { flex: 1; color: #222; }

/* 全球資訊區塊 */
.global-section { position: relative; background-color: var(--primary-blue); color: white; text-align: center; margin-top: 50px; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; }
.global-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background-color: white; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.global-content { padding: 100px 0 80px; }
.global-section h2 { font-size: 24px; margin-bottom: 20px; }
.global-section p { max-width: 700px; margin: 0 auto 30px; font-size: 14px; opacity: 0.9; }

/* Footer */
.footer-banner { width: 100%; height: 400px; background: url('https://via.placeholder.com/1920x400/dddddd/666666?text=Red+Hearts+Image') center/cover no-repeat; }
.site-footer-bg { background-color: var(--dark-blue); color: white; }
.site-footer { display: flex; justify-content: space-between; padding: 10px 10px; font-size: 12px; }
.footer-links a { margin: 0 0px; opacity: 0.8; transition: opacity 0.3s; }
.footer-links a:first-child { margin-left: 0; }
.footer-links a:hover { opacity: 1; }


/* 手機版響應式設計 */
@media (max-width: 768px) {
    .top-header { position: relative; padding: 15px 20px; flex-direction: row; }
    .desktop-search { display: none; }
    .mobile-menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 25px; height: 25px; cursor: pointer; z-index: 101; }
    .mobile-menu-btn span { display: block; width: 100%; height: 3px; background-color: var(--primary-blue); border-radius: 2px; transition: 0.3s; }
    
    .logo { position: absolute; left: 50%; transform: translateX(-50%); flex-direction: column; text-align: center; font-size: 20px; }
    .logo img { height: 45px; margin: 0; }
    .logo-text { display: none; }
    
    .top-actions { gap: 12px; }
    .search-icon { display: flex; align-items: center; cursor: pointer; color: var(--primary-blue); }
    
    .mobile-search-dropdown { display: none; width: 100%; padding: 10px 20px; background-color: var(--light-bg); border-top: 1px solid #ddd; }
    .mobile-search-dropdown.active { display: block; animation: slideDown 0.3s ease; }
    .mobile-search-dropdown input { width: 100%; padding: 10px 15px; border: 1px solid #ccc; border-radius: 20px; outline: none; font-size: 14px; }
    
    .main-nav { display: none; width: 100%; background-color: var(--dark-blue); }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; padding: 0; }
    .main-nav ul li a { display: block; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    
    .hero-banner { height: 250px; }
    .split-section { flex-direction: column; }
    .split-image { min-height: 250px; }
    .split-content { padding: 50px 20px; align-items: center; text-align: center; }
    .news-item { flex-direction: column; gap: 5px; }
    .news-date, .news-club { width: 100%; font-weight: bold; }
    .site-footer { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
    .footer-links a { display: inline-block; margin-bottom: 5px; }
}

/* =========================================
   Footer 選單樣式 (取代原本的文字排版)
   ========================================= */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-menu li {
    display: inline-flex;
    align-items: center;
}

/* 在每個選單項目後面加上 | 分隔線，最後一個項目除外 */
.footer-menu li:not(:last-child)::after {
    content: "|";
    margin: 0 10px;
    opacity: 0.6;
    color: white;
}

.footer-menu li a {
    opacity: 0.8;
    transition: opacity 0.3s;
    text-decoration: none;
}

.footer-menu li a:hover {
    opacity: 1;
}

/* 手機版 Footer 選單微調 */
@media (max-width: 768px) {
    .footer-menu {
        justify-content: center;
        gap: 10px;
    }
    
    /* 如果手機版空間不夠，可以隱藏直線，讓它們自然換行 */
    .footer-menu li:not(:last-child)::after {
        content: none;
    }
}

/* =========================================
   導覽列 - 下拉選單 (Dropdown Submenu) 樣式
   ========================================= */
.main-nav ul li {
    position: relative; /* 讓下拉選單可以對齊父項目 */
}

/* 預設隱藏下拉選單 */
.main-nav ul li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 280px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 999; /* 確保能覆蓋在 Banner 上面 */
    
    /* 動畫過渡設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    
    /* 覆蓋主選單的橫向排版，改為直向 */
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

/* 滑鼠懸停時顯示下拉選單 */
.main-nav ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 下拉選單內的連結樣式 */
.main-nav ul li .sub-menu li {
    width: 100%;
}

.main-nav ul li .sub-menu li a {
    display: block;
    padding: 16px 20px;
    color: #333;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s;
}

/* 隱藏最後一項的底線 */
.main-nav ul li .sub-menu li:last-child a {
    border-bottom: none;
}

/* 滑鼠懸停 或 身處該頁面時：變為紅色文字 */
.main-nav ul li .sub-menu li a:hover,
.main-nav ul li .sub-menu li.current-menu-item > a {
    color: var(--accent-red);
    font-weight: bold;
    background-color: #fafafa;
}

/* 手機版下拉選單調整 */
@media (max-width: 768px) {
    .main-nav ul li .sub-menu {
        position: static; /* 取消絕對定位，讓選單自然往下推 */
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none; /* 預設隱藏 */
        background-color: rgba(255, 255, 255, 0.05); /* 稍微深色的藍底 */
    }
    
    .main-nav ul li:hover .sub-menu {
        display: flex;
    }

    .main-nav ul li .sub-menu li a {
        padding-left: 40px; /* 手機版子選單向右縮排 */
        color: #fff; /* 手機版文字改回白色 */
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .main-nav ul li .sub-menu li a:hover,
    .main-nav ul li .sub-menu li.current-menu-item > a {
        color: var(--accent-red);
        background-color: transparent;
    }
}

/* =========================================
   Governor's Words 頁面專用樣式
   ========================================= */

.page-layout { padding-top: 20px; padding-bottom: 60px; }

/* 麵包屑導覽 */
.breadcrumb-bar {
    font-size: 14px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
}

.content-wrapper { display: flex; gap: 50px; }

/* 左側邊欄 */
.sidebar { width: 260px; flex-shrink: 0; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li a {
    display: block;
    padding: 15px 0;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}
.sidebar-menu li a:hover,
.sidebar-menu li.current-menu-item > a {
    color: var(--accent-red);
}

/* 右側主內容區 */
.main-content { flex: 1; }

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.content-header h2 { font-size: 18px; color: #333; font-weight: normal; margin:0;}
.content-header h2 strong { font-weight: bold; color: #000; }

/* 年份/分類 下拉選單設計 (修復箭咀顯示) */
.year-dropdown {
    padding: 8px 35px 8px 15px; /* 右邊留空位畀箭咀 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    min-width: 150px;
    
    /* 隱藏預設箭咀 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* 加入自訂 SVG 箭咀 (已補上 xmlns 確保所有瀏覽器兼容) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center; /* 箭咀靠右置中 */
    background-size: 12px;
}

/* 針對 IE/Edge 隱藏原生箭咀的額外修正 */
.year-dropdown::-ms-expand {
    display: none;
}

/* 內容區塊切換邏輯 (重點) */
.record-item {
    display: none; /* 預設全部隱藏 */
    animation: fadeIn 0.4s ease;
}

.record-item.active {
    display: block; /* 只顯示帶有 active 的區塊 */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 內容排版 */
.governor-photo {
    max-width: 300px;
    height: auto;
    display: block;
    margin-bottom: 30px;
}

.governor-text h3 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #222;
}

.wysiwyg-content {
    font-size: 14px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 30px;
}

.wysiwyg-content p { margin-bottom: 15px; }

.governor-name {
    font-size: 14px;
    color: #222;
    margin-top: 30px;
}

/* 回到頂部按鈕 (紅底白箭頭) */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: var(--accent-red);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.back-to-top:hover { background-color: #b52c29; }

/* 響應式 */
@media (max-width: 768px) {
    .content-wrapper { flex-direction: column; gap: 30px; }
    .sidebar { width: 100%; }
    .content-header { flex-direction: column; align-items: flex-start; }
    .governor-photo { width: 100%; max-width: 100%; }
}

/* =========================================
   List of District Governors 頁面專用樣式
   ========================================= */
.governor-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.governor-list-table tr {
    border-bottom: 1px solid #eee;
}

.governor-list-table td {
    padding: 20px 10px;
    font-size: 15px;
    color: #333;
    vertical-align: middle;
}

/* 年份欄位 */
.governor-list-table td:nth-child(1) {
    width: 30%;
    font-weight: 500;
}

/* 英文名字欄位 */
.governor-list-table td:nth-child(2) {
    width: 40%;
}

/* 中文名字欄位 (假設你 ACF 有加或從英文名字拆分) */
.governor-list-table td:nth-child(3) {
    width: 30%;
}

/* 手機版表格調整 */
@media (max-width: 768px) {
    .governor-list-table td {
        display: block;
        width: 100% !important;
        padding: 10px;
    }
    .governor-list-table tr {
        display: block;
        padding: 15px 0;
    }
    .governor-list-table td:nth-child(1) {
        font-weight: bold;
        padding-bottom: 5px;
    }
}

/* =========================================
   內頁共用佈局 (Banner, Sidebar, Content)
   ========================================= */
/* V型 Banner */
.about-banner {
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
    margin-bottom: 20px;
}
.about-banner h1 { font-size: 36px; margin-top: -30px; letter-spacing: 1px; }

/* 麵包屑與全寬橫線 */
.breadcrumb-bar {
    font-size: 14px;
    color: #333;
    padding: 10px 0 15px 0;
    border-bottom: 1px solid #999; /* 貫穿容器的灰色底線 */
    margin-bottom: 30px;
}

/* 左右排版 */
.page-layout { 
    display: flex; 
    gap: 50px; 
    margin-bottom: 60px; 
    align-items: flex-start;
}

/* 左側邊欄 */
.sidebar { width: 260px; flex-shrink: 0; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li a {
    display: block;
    padding: 15px 0;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}
.sidebar-menu li a:hover,
.sidebar-menu li.current-menu-item > a {
    color: var(--accent-red); /* 點中的頁面會變成紅色 */
}

/* 右側主內容區 */
.main-content { flex: 1; width: 100%; overflow: hidden; }

/* 手機版排版 */
@media (max-width: 768px) {
    .page-layout { flex-direction: column; gap: 30px; }
    .sidebar { width: 100%; }
}

/* =========================================
   Council Members 網格排版
   ========================================= */
.council-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.member-card {
    text-align: center;
    color: #333;
}

.member-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
}

.m-role {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
    line-height: 1.2;
}

.m-name-en, .m-name-zh {
    font-size: 14px;
    margin-bottom: 2px;
}

.m-club {
    font-size: 13px;
    color: #666;
}

/* 手機與平板適應 */
@media (max-width: 992px) {
    .council-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 576px) {
    .council-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .member-card img { height: 180px; }
    .m-role { font-size: 13px; }
}

/* =========================================
   分會單頁 (Single Club) 樣式
   ========================================= */
.club-single-layout {
    padding: 60px 0;
}

.club-container {
    max-width: 900px; /* 限制寬度讓排版更集中 */
    margin: 0 auto;
    text-align: center;
}

.club-top-logo {
    margin-bottom: 40px;
}

.club-top-logo img {
    max-width: 100%;
    height: auto;
}

.club-title {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    text-align: left;
    margin-bottom: 20px;
}

.club-desc {
    font-size: 15px;
    color: #444;
    text-align: left;
    line-height: 1.8;
    margin-bottom: 60px;
}

/* 理事會 5 宮格 */
.club-board-section {
    margin-bottom: 60px;
}

.board-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
}

.club-board-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.board-member img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 0px;
}

.b-role {
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

.b-name {
    font-size: 13px;
    color: #444;
}

/* 活動圖文區塊 */
.club-activity-main { margin-bottom: 40px; }
.club-activity-main img { width: 100%; height: auto; margin-bottom: 20px; }

.act-text {
    font-size: 14px;
    color: #444;
    text-align: left;
    line-height: 1.8;
}

.act-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.act-gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 底部導航 (Previous / Next) */
.club-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 60px;
    font-weight: bold;
    font-size: 14px;
}
.club-navigation a { color: #333; transition: color 0.3s; }
.club-navigation a:hover { color: var(--accent-red); }

/* =========================================
   分會專屬 News 區塊
   ========================================= */
.club-news-section {
    background-color: #32508A; /* 深藍底色 */
    padding: 60px 0;
    color: white;
}

.club-news-list {
    display: flex;
    flex-direction: column;
}

.c-news-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
}

.c-news-item:last-child { border-bottom: none; }

.c-news-date { width: 150px; opacity: 0.8; }
.c-news-cat { width: 200px; font-weight: bold; }
.c-news-title { flex: 1; opacity: 0.9; }

/* 響應式調整 */
@media (max-width: 992px) {
    .club-board-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .club-board-grid { grid-template-columns: repeat(2, 1fr); }
    .act-gallery-grid { grid-template-columns: 1fr; }
    .c-news-item { flex-direction: column; gap: 8px; }
}

/* =========================================
   News 單頁 (Single News) 樣式
   ========================================= */
.news-single-layout {
    padding: 60px 0;
}

.news-container {
    max-width: 900px;
    margin: 0 auto;
}

.news-top-poster img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.news-meta-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.news-date {
    font-size: 14px;
    color: #666;
}

.news-club-tag {
    background-color: var(--accent-red);
    color: white;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.news-main-title {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.news-wysiwyg {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 兩欄圖片 */
.news-two-cols-img {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.news-two-cols-img img {
    flex: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 網格相集 */
.news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.news-gallery-grid img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* PDF 與 Video */
.news-pdf-section {
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom: 40px;
    border: 1px solid #ddd;
}

.news-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    margin-bottom: 40px;
}

.news-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.news-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 60px;
    font-weight: bold;
    font-size: 14px;
}

.news-navigation a { color: #333; transition: color 0.3s; }
.news-navigation a:hover { color: var(--accent-red); }

@media (max-width: 768px) {
    .news-two-cols-img { flex-direction: column; }
    .news-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .news-main-title { font-size: 24px; }
}

/* =========================================
   Clubs Listing 頁面排版
   ========================================= */
.clubs-list-container {
    display: flex;
    flex-direction: column;
}

.club-list-item {
    display: flex;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid #ddd; /* 灰色分隔線 */
}

/* 移除最後一個項目的底線 */
.club-list-item:last-child {
    border-bottom: none;
}

.club-list-logo {
    width: 280px;
    flex-shrink: 0;
    background-color: #f8f8f8; /* 淺灰色背景墊底 */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.club-list-logo img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.club-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.club-list-info h3 {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
}

.club-summary {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* 手機版排版調整 */
@media (max-width: 768px) {
    .club-list-item {
        flex-direction: column;
        gap: 20px;
        padding: 30px 0;
    }
    .club-list-logo {
        width: 100%;
    }
}

/* =========================================
   International Links 頁面排版
   ========================================= */
.friendly-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #ddd; /* 頂部第一條線 */
}

.friendly-links-list li {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #eee; /* 每行之間的淺灰線 */
    font-size: 15px;
    color: #333;
    align-items: center;
}

/* 左側：組織名稱 */
.org-name {
    width: 40%;
    font-weight: normal;
    padding-right: 20px;
}

/* 右側：網址 */
.org-link {
    width: 60%;
}

.org-link a {
    color: var(--primary-blue);
    text-decoration: underline;
    transition: opacity 0.3s;
}

.org-link a:hover {
    opacity: 0.7;
}

/* 手機版排版 */
@media (max-width: 768px) {
    .friendly-links-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 15px 0;
    }
    .org-name, .org-link {
        width: 100%;
        padding-right: 0;
    }
}

/* =========================================
   Social Services Projects 頁面排版
   ========================================= */
.social-projects-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-projects-list li {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #333;
}

.social-projects-list li a {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: color 0.3s;
}

.social-projects-list li a:hover {
    color: var(--accent-red);
}


/* =========================================
   Publication 頁面排版
   ========================================= */
/* 內容區塊切換 */
.pub-record-item { display: none; }
.pub-record-item.active { display: block; animation: fadeIn 0.4s ease; }

/* =========================================
   Publication 左側：手風琴選單 (完整修正版)
   ========================================= */
.pub-sidebar-accordion { list-style: none; padding: 0; margin: 0; }
.pub-cat-item { margin-bottom: 5px; }

/* 分類標題 (包含 Flexbox 讓 Icon 靠右對齊) */
.pub-cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    color: #000;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    transition: color 0.3s;
}
.pub-cat-title:hover { color: var(--accent-red); }

/* 預設狀態 Icon：粗黑向下箭咀 (Closed) */
.pub-cat-title .toggle-icon {
    color: transparent !important; /* 隱藏原本的 ▼ 文字 */
    width: 14px;
    height: 14px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,7 21,7 12,18' fill='%23000000'/%3E%3C/svg%3E");
}

/* 展開狀態 Icon：粗黑減號 (Open) */
.pub-cat-item.active .pub-cat-title .toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10' width='18' height='4' fill='%23000000'/%3E%3C/svg%3E");
}

/* =========================================
   年份清單 (修復年份消失問題)
   ========================================= */
/* 預設收起狀態 */
.pub-year-list {
    list-style: none;
    padding: 10px 0 10px 0px;
    margin: 0;
    display: none; /* 隱藏年份 */
}

/* 當分類加上 .active 時，顯示年份清單 */
.pub-cat-item.active .pub-year-list { 
    display: block; /* 展開年份 */
}

/* 年份連結樣式 */
.pub-year-list li a {
    display: block;
    color: #666;
    font-size: 14px;
    padding: 8px 0;
    text-decoration: none;
    transition: 0.3s;
}

/* 年份 Hover 或 選中狀態 (紅色) */
.pub-year-list li.active a,
.pub-year-list li a:hover {
    color: var(--accent-red);
}

/* 展開狀態 */
/* =========================================
   手風琴選單 Icon (完美還原設計圖)
   ========================================= */
.pub-cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 確保文字同 Icon 垂直置中 */
}

/* 預設狀態：粗黑色向下箭咀 (Closed) */
.pub-cat-title .toggle-icon {
    /* 隱藏原本寫喺 HTML 入面嘅文字符號 */
    color: transparent !important; 
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 使用 SVG 繪製向下粗箭咀 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,7 21,7 12,18' fill='%23000000'/%3E%3C/svg%3E");
    transition: none; /* 移除之前的旋轉動畫，直接切換圖案 */
}

/* 展開狀態：粗黑色減號/橫線 (Open) */
.pub-cat-item.active .pub-cat-title .toggle-icon {
    /* 使用 SVG 繪製粗橫線 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10' width='18' height='4' fill='%23000000'/%3E%3C/svg%3E");
    transform: none; /* 確保唔會被舊代碼旋轉 */
}

/* (可選) 當滑鼠停留或展開時，Icon 跟隨文字變成紅色 */
.pub-cat-title:hover .toggle-icon,
.pub-cat-item.active .pub-cat-title:hover .toggle-icon {
    /* 如果你想佢 hover 變紅，只需將 fill 改為你的品牌紅色 (例如 %23D73C38) */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,7 21,7 12,18' fill='%23D73C38'/%3E%3C/svg%3E"); */
}

.pub-year-list li a {
    display: block;
    color: #666;
    font-size: 14px;
    padding: 8px 0;
    text-decoration: none;
    transition: 0.3s;
}

.pub-year-list li.active a,
.pub-year-list li a:hover {
    color: var(--accent-red);
}

/* 右側：文件清單 */
.pub-doc-list { border-top: 1px solid #ccc; }

.pub-doc-item {
    display: flex;
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.pub-doc-item img {
    width: 200px;
    height: 280px;
    object-fit: contain;
    border: 1px solid #eee;
    padding: 5px;
}

.pub-doc-info h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000;
}

.pub-doc-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 手機版 */
@media (max-width: 768px) {
    .pub-doc-item { flex-direction: column; }
    .pub-doc-item img { width: 100%; height: auto; }
}


/* =========================================
   Contact Us 頁面排版與表單樣式
   ========================================= */
.contact-page-layout {
    max-width: 900px;
    margin: 0 auto 80px;
}

.contact-info-section {
    margin-bottom: 60px;
    font-size: 15px;
    color: #333;
    line-height: 2.2;
}

/* Contact Form 7 佈局 */
.custom-contact-form {
    width: 100%;
}

.form-row.two-cols {
    display: flex;
    gap: 50px;
    margin-bottom: 30px;
}

.form-row.two-cols .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 40px;
}

/* 標籤文字 (深藍色) */
.form-group label {
    display: block;
    font-weight: bold;
    color: #1a315b; /* 對應設計圖的深藍色 */
    font-size: 14px;
    margin-bottom: 5px;
    width: 100%;
}

/* 輸入框 (只有底線) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e0e0e0; /* 淺灰底線 */
    background-color: transparent;
    padding: 10px 0;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.3s;
}

/* 點擊輸入時底線變色 */
.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--primary-blue);
}

/* CF7 錯誤提示微調 */
span.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: 5px;
}
div.wpcf7-response-output {
    border-radius: 4px;
    margin-top: 20px;
}

/* 提交按鈕 (紅色藥丸型) */
.form-submit {
    margin-top: 20px;
}

.form-submit input[type="submit"] {
    background-color: var(--accent-red);
    color: white;
    border: none;
    padding: 12px 50px;
    border-radius: 30px; /* 圓角 */
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-submit input[type="submit"]:hover {
    background-color: #b52c29;
}

/* 手機版響應式 */
@media (max-width: 768px) {
    .form-row.two-cols {
        flex-direction: column;
        gap: 0;
    }
}

/* =========================================
   Publication 左右齊平修正 (齊字、齊底線)
   ========================================= */

/* 1. 統一定義左側標題與右側標題的高度、Padding 與底線 */
.pub-cat-title,
.pub-record-item .content-header {
    display: flex;
    align-items: center; /* 讓文字與 Dropdown 垂直置中 */
    height: 50px; /* 設定統一高度，確保左右完全水平對齊 */
    padding: 0 0 15px 0 !important; /* 移除頂部 Padding，只保留底部留白 */
    border-bottom: 1px solid #ddd !important; /* 統一將灰線畫在底部 */
    box-sizing: border-box;
}

/* 2. 移除右側 h2 預設的 Margin (這就是造成右邊被推低的元兇) */
.pub-record-item .content-header h2 {
    margin: 0 !important;
    line-height: 1;
}

/* 3. 移除舊有的文件列表頂部線 (因為灰線已經移到上方標題底部) */
.pub-doc-list {
    border-top: none !important;
}

/* 4. 微調左側分類展開後的間距，避免分類之間太擠迫 */
.pub-cat-item {
    margin-top: 15px; 
}
.pub-cat-item:first-child {
    margin-top: 0;
}

/* =========================================
   Social Services Projects 左右齊腳與按鈕設定
   ========================================= */

/* 1. 統一左側 Sidebar 與右側 Header 的高度與底線 */
.social-sidebar-menu li a,
.social-content-header {
    display: flex;
    align-items: center; /* 垂直置中 */
    height: 50px; /* 鎖死高度保證齊腳 */
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #ddd !important; /* 補回灰色底線 */
    box-sizing: border-box;
}

/* 移除右側標題自帶的 Margin，防止被推低 */
.social-content-header {
    justify-content: space-between;
    margin-bottom: 0 !important; 
}
.social-content-header h2 {
    margin: 0 !important;
    line-height: 1;
}

/* 2. 服務項目清單 Layout (兩欄設計) */
.social-projects-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-projects-list li {
    display: flex;
    justify-content: space-between; /* 文字靠左，按鈕靠右 */
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.social-projects-list li .project-name {
    font-size: 15px;
    color: #333;
    flex: 1; /* 佔用左側剩餘空間 */
    padding-right: 20px;
}

/* 3. Detail 紅色按鈕設計 */
.btn-detail {
    background-color: var(--accent-red);
    color: white !important;
    padding: 8px 25px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
    white-space: nowrap; /* 確保按鈕文字不會換行 */
}

.btn-detail:hover {
    background-color: #b52c29;
}
/* =========================================
   About Us 六宮格卡片排版 (完美還原左下角文字設計)
   ========================================= */

/* 1. 網格排版 (一行三個) */
.about-cards-grid { 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* 卡片之間的距離 */
    margin-top: 50px;
    margin-bottom: 60px;
}

/* 2. 卡片主體設定 */
.about-card {
    position: relative;
    display: flex;
    justify-content: flex-start; /* 【重點】將內容推向左邊 */
    align-items: flex-end;       /* 【重點】將內容推向下邊 */
    height: 150px;               /* 調整為較扁長的比例 */
    padding: 25px;               /* 設定內距，等文字唔好貼住條邊 */
    background-size: cover;
    background-position: center;
    text-decoration: none;
    overflow: hidden;
    border-radius: 16px;         /* 【重點】加大圓角，還原截圖效果 */
    box-sizing: border-box;
}

/* 3. 預設狀態：黑色半透明遮罩 */
.about-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* 預設 70% 黑 */
    transition: background-color 0.4s ease; /* Fade in/out 平滑過渡動畫 */
    z-index: 1;
}

/* 4. Mouse Over (Hover) 效果：減少黑色 Fade out */
.about-card:hover::before {
    background-color: rgba(0, 0, 0, 0.2); /* Hover 時變成 20% 黑，透出底圖 */
}

/* 5. 卡片文字設定 */
/* 5. 強制卡片內所有文字與連結變成白色 */
.about-card,
.about-card h3,
.about-card h2,
.about-card a,
.about-card span {
    position: relative;
    z-index: 2; 
    color: #ffffff !important; /* 強制覆蓋所有預設顏色，必定變白 */
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    text-decoration: none !important; /* 確保冇核突底線 */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8); /* 陰影令白字喺淺色背景都清楚 */
    transition: transform 0.4s ease;
}

/* Hover 時文字微微向上浮起 */
.about-card:hover h3,
.about-card:hover span {
    transform: translateY(-4px);
}
/* 6. 手機版與平板版響應式設計 */
@media (max-width: 992px) {
    .about-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 平板一行 2 個 */
    }
}

@media (max-width: 768px) {
    .about-cards-grid {
        grid-template-columns: 1fr; /* 手機一行 1 個 */
        gap: 20px;
    }
    .about-card {
        height: 160px; /* 手機版高度稍微縮小 */
        padding: 20px;
    }
}

/* =========================================
   底部地圖 CTA 區塊 (包含背景圖與 V 形頂部)
   ========================================= */
.global-cta-section {
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 120px 20px 100px; /* 增加頂部 Padding 留空位畀 V 形切口 */
    text-align: center;
    color: #ffffff;
    
    /* 製作頂部微微向下凹入去的 V 形效果 */
    clip-path: polygon(0 0, 50% 25px, 100% 0, 100% 100%, 0 100%);
    margin-top: -25px; /* 向上移，填補 clip-path 切走嘅空隙 */
}

.global-cta-content {
    max-width: 800px; /* 限制內文寬度，令排版更緊湊集中 */
    margin: 0 auto;
}

.global-cta-content h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
}

.global-cta-content p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
}

/* 紅色圓角藥丸按鈕 */
.global-cta-content .pill-btn {
    display: inline-block;
    background-color: var(--accent-red);
    color: #ffffff !important;
    padding: 12px 40px;
    border-radius: 30px; /* 圓角設定 */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.global-cta-content .pill-btn:hover {
    background-color: #b52c29;
    transform: translateY(-2px);
}

/* 手機版微調 */
@media (max-width: 768px) {
    .global-cta-section {
        padding: 80px 20px 60px;
        clip-path: polygon(0 0, 50% 15px, 100% 0, 100% 100%, 0 100%);
        margin-top: -15px;
    }
}

/* =========================================
   新聞管理 (News) 圖片與相簿排版修正
   ========================================= */

/* 1. 強制所有新聞內容內的圖片不能超過容器寬度 */
.news-content img,
.news-gallery img,
.single-news-layout img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover; /* 確保圖片比例正常，不會被拉到變形 */
}

/* 2. 如果這是一個橫向排列的相簿 (Gallery Grid) 修正 */
.news-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自動適應螢幕，每張相最少 250px 闊 */
    gap: 20px; /* 圖片之間的空隙 */
    width: 100%;
}

/* 3. 如果這是一個輪播圖 (Slider)，隱藏溢出的部分 */
.news-slider,
.swiper-container,
.slick-slider {
    overflow: hidden; 
    width: 100%;
}

/* =========================================
   單一新聞內頁 (Single News) 圖片與排版修正
   ========================================= */

/* 1. 強制內頁所有圖片不能超過容器寬度 (解決撐爆畫面的核心) */
.news-container img {
    max-width: 100% !important;
    height: auto;
    display: block;
}

/* 2. 頂部大圖 (Poster) 滿版顯示 */
.news-top-poster {
    margin-bottom: 30px;
}
.news-top-poster img {
    width: 100%;
    max-height: 500px; /* 限制最高高度，避免直度相片過長 */
    object-fit: cover; /* 確保圖片不變形 */
    border-radius: 8px;
}

/* 3. 雙欄圖片 (Image Left & Right) 排版 */
.news-two-cols-img {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}
.news-two-cols-img img {
    width: calc(50% - 10px); /* 一人一半 */
    object-fit: cover;
    border-radius: 8px;
}

/* 4. 多圖相簿 (Gallery) 網格排版 */
.news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自動適應，每張相最少 250px 闊 */
    gap: 20px;
    margin: 40px 0;
}
.news-gallery-grid img {
    width: 100%;
    height: 180px; /* 統一相簿圖片高度，視覺上更整齊 */
    object-fit: cover;
    border-radius: 8px;
}

/* 5. 確保 Video iframe 和 PDF iframe 不會撐爆畫面 */
.news-video-container iframe,
.news-pdf-section iframe {
    max-width: 100%;
}

/* 6. 手機版響應式微調 (Responsive) */
@media (max-width: 768px) {
    /* 手機版雙欄圖片改為上下排列 */
    .news-two-cols-img {
        flex-direction: column;
    }
    .news-two-cols-img img {
        width: 100%;
    }
    /* 手機版相簿稍微降低高度 */
    .news-gallery-grid img {
        height: 200px;
    }
}

/* =========================================
   新聞列表排版 (News List Table)
   ========================================= */
.news-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.news-list-table tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.news-list-table tr:hover {
    background-color: #fafafa; /* Hover 時微反白 */
}

.news-list-table td {
    padding: 20px 10px;
    vertical-align: middle;
    font-size: 15px;
    color: #333;
}

/* 欄位寬度控制 */
.news-date-col { width: 15%; white-space: nowrap; }
.news-club-col { width: 25%; }
.news-title-col { width: 60%; font-weight: bold; }

.news-title-col a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.news-title-col a:hover {
    color: var(--accent-red);
}

/* 手機版變成垂直排列 */
@media (max-width: 768px) {
    .news-list-table tr { display: flex; flex-direction: column; padding: 15px 0; }
    .news-list-table td { width: 100%; padding: 5px 0; border: none; }
    .news-date-col { font-size: 13px; color: #888; }
    .news-title-col { font-size: 16px; margin-top: 5px; }
}

/* =========================================
   首頁 Latest Club News 區塊樣式
   ========================================= */
/* =========================================
   首頁 Latest Club News 區塊樣式 (深藍地球背景版)
   ========================================= */
.home-news-section {
    padding: 100px 0; /* 加大上下 Padding 令背景更宏偉 */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    
    /* 💡 如果你想好似之前咁有頂部 V 形凹入去，可以解除下面呢兩行嘅註解： */
    /* clip-path: polygon(0 0, 50% 25px, 100% 0, 100% 100%, 0 100%); */
    /* margin-top: -25px; */
}

/* 網格排版與卡片設計 (其餘保持不變) */
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 文字內容區塊 */
.home-news-content {
    padding: 25px;
}

.home-news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 12px;
}

.home-news-meta .news-date {
    color: #888;
}

.home-news-meta .news-club-tag {
    background-color: #32508A;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.home-news-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 15px;
    height: 54px; /* 鎖死高度 (大約兩行字)，等所有卡片睇落一樣高 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多顯示兩行，多出嚟變點點點 */
    -webkit-box-orient: vertical;
}

.home-news-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.home-news-title a:hover {
    color: var(--accent-red, #d32f2f);
}

.home-news-read-more {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #32508A;
    text-decoration: none;
    transition: color 0.3s;
}

.home-news-read-more span {
    display: inline-block;
    transition: transform 0.3s;
}

.home-news-read-more:hover {
    color: var(--accent-red, #d32f2f);
}

.home-news-read-more:hover span {
    transform: translateX(5px); /* 箭咀向右移 */
}

/* 手機版與平板版響應式 */
@media (max-width: 992px) {
    .home-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .home-news-grid { grid-template-columns: 1fr; gap: 20px; }
    .home-news-card:hover { transform: none; } /* 手機取消浮起效果 */
}

/* =========================================
   首頁 Club News 列表排版 (斑馬紋設計)
   ========================================= */
.home-club-news-list-section {
    padding: 60px 0 80px; /* 底部留多啲空間，俾下面藍色 V 形區塊切入 */
    background-color: #ffffff;
}

/* Learn More 按鈕 Hover 效果 */
.learn-more-link {
    transition: color 0.3s ease;
}
.learn-more-link:hover {
    color: var(--accent-red, #d32f2f) !important;
}

/* 清單表格設定 */
.home-news-list-table {
    width: 100%;
    border-collapse: collapse;
}

/* 斑馬紋：單數行淺灰色，雙數行白色 */
.home-news-list-table tr:nth-child(odd) {
    background-color: #f5f5f5; /* 淺灰色底 */
}
.home-news-list-table tr:nth-child(even) {
    background-color: #ffffff; /* 白色底 */
}

/* 儲存格留白與文字設定 */
.home-news-list-table td {
    padding: 18px 20px;
    font-size: 15px;
    color: #333;
    vertical-align: middle;
}

/* 三個欄位的寬度分配 */
.home-news-list-table .col-date {
    width: 15%;
    font-weight: 500;
}
.home-news-list-table .col-club {
    width: 25%;
}
.home-news-list-table .col-title {
    width: 60%;
}

/* 新聞標題連結 */
.home-news-list-table .col-title a {
    color: #333;
    text-decoration: none;
    font-weight: bold; /* 加粗標題 */
    transition: color 0.3s;
}
.home-news-list-table .col-title a:hover {
    color: var(--accent-red, #d32f2f); /* Hover 變紅色 */
}

/* 手機版響應式設計：變為上下疊排 */
@media (max-width: 768px) {
    .home-news-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .home-news-list-table tr {
        display: flex;
        flex-direction: column;
        padding: 15px 0;
    }
    .home-news-list-table td {
        width: 100% !important;
        padding: 4px 15px;
    }
    .home-news-list-table .col-date {
        font-size: 13px;
        color: #888;
    }
    .home-news-list-table .col-title {
        font-size: 16px;
        margin-top: 5px;
    }
}

/* =========================================
   首頁深藍地球 CTA 區塊 (無縫 V 形拼接)
   ========================================= */
.home-earth-section {
    padding: 100px 20px 80px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
    
    /* 🌟 製作 V 形切口，並向上移遮住新聞區塊嘅底部 🌟 */
    clip-path: polygon(0 0, 50% 35px, 100% 0, 100% 100%, 0 100%);
    margin-top: -35px; 
    position: relative;
    z-index: 2;
}

/* 確保新聞區塊底部有足夠空間被 V 形切口覆蓋 */
.home-club-news-list-section {
    padding: 60px 0 80px; /* 底部留白 80px */
    background-color: #ffffff;
    position: relative;
    z-index: 1;
}

/* =========================================
   Motto Section (金句區塊) 排版
   ========================================= */

.motto-container {
    max-width: 800px;
    margin: 0 auto;
}

.motto-container h2 {
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.3;
}

.motto-container p {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* =========================================
   Split Section (左右分割區塊) 排版
   ========================================= */

.split-container {
    display: flex;
    align-items: center; /* 圖片同文字垂直置中對齊 */
    gap: 60px; /* 左右兩邊嘅距離 */
}

/* 一人一半 */
.split-image-col, 
.split-text-col {
    flex: 1; 
    width: 50%;
}

.split-image-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 圖片加少少陰影提升立體感 */
}

.split-text-col h2 {
    font-size: 32px;
    color: #32508A;
    font-weight: bold;
    margin-bottom: 25px;
}

.split-content-wysiwyg {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 30px;
}

/* 分割區塊按鈕 */
.split-btn {
    display: inline-block;
    background-color: var(--accent-red, #d32f2f);
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.split-btn:hover {
    background-color: #b52c29;
    transform: translateY(-2px);
}

/* =========================================
   手機版與平板版響應式 (Responsive)
   ========================================= */
@media (max-width: 992px) {
    .split-container {
        gap: 40px;
    }
    .motto-container h2 { font-size: 28px; }
}

@media (max-width: 768px) {
    /* 手機版：左右分割變為上下疊排 */
    .split-container {
        flex-direction: column;
    }
    .split-image-col, 
    .split-text-col {
        width: 100%;
    }
    .split-text-col {
        text-align: center; /* 手機版文字置中會比較好睇 */
    }
    
    .motto-section { padding: 60px 20px; }
    .motto-container h2 { font-size: 24px; }
    .motto-container p { font-size: 16px; }
}

/* =========================================
   首頁 Hero Banner (底部 V 形切口)
   ========================================= */
.home-hero-section {
    height: 70vh; /* 佔螢幕 70% 高度 */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    /* 🌟 重點：製作底部向下指的 V 形切口 🌟 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

.hero-arrow {
    color: #ffffff;
    font-size: 50px;
    cursor: pointer;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}
.hero-arrow:hover { transform: scale(1.2); }

/* =========================================
   Motto Section (純白底字體排版)
   ========================================= */
.motto-section {
    padding: 60px 20px 80px;
    text-align: center;
    background-color: #ffffff;
}

.motto-container {
    max-width: 900px;
    margin: 0 auto;
}

.motto-label {
    color: #384e85; /* 深藍色 */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.motto-quote {
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
    line-height: 1.4;
}

.motto-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
}

/* =========================================
   Split Section (滿版無縫左右分割)
   ========================================= */
.split-section-seamless {
    width: 100%;
    overflow: hidden;
}

.split-row {
    display: flex;
    flex-wrap: wrap;
}

/* 一人佔一半螢幕 */
.split-half {
    flex: 1;
    width: 50%;
    min-height: 550px; /* 鎖死高度確保圖片同文字框一樣高 */
}

/* 左邊圖片自動填滿 */
.split-img-half {
    background-size: cover;
    background-position: center;
}

/* 右邊深藍色文字框 */
.split-text-half {
    background-color: #384e85;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 10%; /* 確保內文唔會貼住邊緣 */
}

.split-text-inner {
    max-width: 500px;
    width: 100%;
}

.split-text-inner h2 {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 25px;
}

.split-content-wysiwyg {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin-bottom: 35px;
}

/* 紅色圓角按鈕 */
.split-btn {
    background-color: var(--accent-red, #d32f2f);
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s, transform 0.3s;
}

.split-btn:hover {
    background-color: #b52c29;
    transform: translateY(-2px);
}

/* =========================================
   手機版響應式 (Responsive)
   ========================================= */
@media (max-width: 992px) {
    .split-text-half { padding: 60px 5%; }
    .motto-quote { font-size: 26px; }
}

@media (max-width: 768px) {
    /* 頂部 Hero V 形切口縮細 */
    .home-hero-section {
        height: 400px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
    }
    .hero-arrow { display: none; } /* 手機版隱藏箭咀 */
    
    /* 左右分割變上下疊排 */
    .split-half {
        width: 100%;
        flex: none;
        min-height: 400px;
    }
}

/* =========================================
   首頁 Hero Banner (底部 V 形切口)
   ========================================= */
.home-hero-section {
    height: 70vh; 
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background-color: #cccccc; /* 加入底色防白屏 */
}

.hero-arrow {
    color: #ffffff;
    font-size: 50px;
    cursor: pointer;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* =========================================
   Motto Section (純白底字體排版)
   ========================================= */
.motto-section {
    padding: 60px 20px 80px;
    text-align: center;
    background-color: #ffffff;
}

.motto-container {
    max-width: 900px;
    margin: 0 auto;
}

.motto-label {
    color: #384e85 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.motto-quote {
    font-size: 32px !important;
    font-weight: 700 !important; /* 強制粗體 */
    color: #333333 !important;
    margin-bottom: 25px;
    line-height: 1.4;
    font-family: Arial, sans-serif;
}

.motto-text {
    font-size: 16px !important;
    line-height: 1.8;
    color: #555555;
}

/* =========================================
   Split Section (強制滿版無縫)
   ========================================= */
.split-section-seamless {
    /* 🌟 強制突破 Container 限制，佔滿全螢幕闊度 🌟 */
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #384e85; /* 防止穿崩位見白底 */
}

.split-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.split-half {
    flex: 1;
    width: 50%;
    min-height: 550px;
}

.split-img-half {
    background-size: cover;
    background-position: center;
}

.split-text-half {
    background-color: #384e85;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 10%;
    box-sizing: border-box;
}

.split-text-inner {
    max-width: 500px;
    width: 100%;
}

.split-text-inner h2 {
    font-size: 32px !important;
    font-weight: 700 !important; /* 強制標題變粗，對應設計圖 */
    color: #ffffff !important;
    margin-bottom: 25px;
    font-family: Arial, sans-serif;
}

.split-content-wysiwyg, 
.split-content-wysiwyg p {
    font-size: 16px !important;
    line-height: 1.8;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 35px;
}

.split-btn {
    background-color: var(--accent-red, #d32f2f) !important;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    border: none;
}

/* =========================================
   手機版響應式
   ========================================= */
@media (max-width: 992px) {
    .split-text-half { padding: 60px 5%; }
    .motto-quote { font-size: 26px !important; }
}

@media (max-width: 768px) {
    .home-hero-section {
        height: 400px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
    }
    .hero-arrow { display: none; }
    
    .split-half {
        width: 100%;
        flex: none;
        min-height: 400px;
    }
}

/* =========================================
   Motto Section (像素級排版微調)
   ========================================= */
.motto-section {
    padding: 60px 20px 80px;
    text-align: center;
    background-color: #ffffff;
}

.motto-container {
    max-width: 1000px;
    margin: 0 auto;
}

.motto-label {
    color: #384e85 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    letter-spacing: 1px;
}

.motto-quote {
    font-size: 28px !important; /* 縮細少少，無咁壓迫 */
    font-weight: 700 !important;
    color: #333333 !important;
    max-width: 800px; /* 限制金句闊度，令佢斷行好睇啲 */
    margin: 0 auto 25px auto !important; /* 確保置中 */
    line-height: 1.4;
}

.motto-text {
    font-size: 15px !important;
    line-height: 1.8;
    color: #555555 !important;
    max-width: 850px; /* 限制內文闊度 */
    margin: 0 auto !important; /* 確保置中顯示 */
    display: block !important; /* 強制顯示，防隱藏 */
    font-weight: 400 !important;
}

/* =========================================
   Split Section (修正字體粗幼)
   ========================================= */
.split-section-seamless {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #384e85;
}

.split-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.split-half {
    flex: 1;
    width: 50%;
    min-height: 550px;
}

.split-img-half {
    background-size: cover;
    background-position: center;
}

.split-text-half {
    background-color: #384e85;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 10%;
    box-sizing: border-box;
}

.split-text-inner {
    max-width: 500px;
    width: 100%;
}

.split-text-inner h2 {
    font-size: 32px !important;
    font-weight: 500 !important; /* 🌟 降級字重：無咁粗，貼近原設計圖 */
    color: #ffffff !important;
    margin-bottom: 25px;
}

.split-content-wysiwyg, 
.split-content-wysiwyg p {
    font-size: 16px !important;
    font-weight: 400 !important; /* 🌟 升級字重：解決字體太幼嘅問題 */
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 35px;
}

.split-btn {
    background-color: var(--accent-red, #d32f2f) !important;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 600 !important;
    text-decoration: none;
    display: inline-block;
    border: none;
    letter-spacing: 0.5px;
}

/* =========================================
   Split Section (絕對強制 50/50 滿版)
   ========================================= */
.split-section-seamless {
    /* 更穩定嘅滿版寫法，避免受 Scrollbar 影響比例 */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #384e85;
    overflow: hidden;
}

.split-row {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🌟 終極鎖死：強制必定佔 50%，神仙都撐唔開 🌟 */
.split-half {
    flex: 0 0 50% !important; 
    max-width: 50% !important;
    width: 50% !important;
    min-height: 550px;
    box-sizing: border-box !important;
}

.split-img-half {
    background-size: cover;
    background-position: center;
}

.split-text-half {
    background-color: #384e85;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center; /* 確保內容喺正中間 */
    padding: 60px 8% !important; /* 稍微縮減 padding，留返空間呼吸 */
}

.split-text-inner {
    max-width: 500px;
    width: 100%;
}

.split-text-inner h2 {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 25px;
}

.split-content-wysiwyg, 
.split-content-wysiwyg p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 35px;
}

.split-btn {
    background-color: var(--accent-red, #d32f2f) !important;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 600 !important;
    text-decoration: none;
    display: inline-block;
    border: none;
    letter-spacing: 0.5px;
}

/* 手機版疊排修正 (確保手機版變返 100%) */
@media (max-width: 768px) {
    .split-row {
        flex-direction: column !important;
    }
    .split-half {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 400px;
    }
}

/* =========================================
   Split Section (CSS Grid 絕對鎖死版)
   ========================================= */
.ys-split-grid-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 🌟 霸道指令：強制分兩格，一人一半 🌟 */
    width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-height: 550px;
    background-color: #eeeeee; /* 防穿崩底色 */
}

.ys-split-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 550px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #cccccc; /* 如果圖片死 link，起碼會出灰色，唔會變白屏 */
}

.ys-split-text {
    width: 100% !important;
    height: 100% !important;
    background-color: #384e85 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 垂直置中 */
    padding: 60px 10% !important;
    box-sizing: border-box !important;
}

.ys-split-text-inner {
    max-width: 500px;
    width: 100%;
}

.ys-split-text-inner h2 {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 25px !important;
}

.ys-split-content, 
.ys-split-content p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 35px !important;
}

.ys-split-btn {
    background-color: var(--accent-red, #d32f2f) !important;
    color: #ffffff !important;
    padding: 12px 35px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
    letter-spacing: 0.5px !important;
}

/* =========================================
   手機版：自動變為上圖、下文
   ========================================= */
@media (max-width: 768px) {
    .ys-split-grid-section {
        grid-template-columns: 1fr !important; /* 變成單欄 */
    }
    .ys-split-img {
        min-height: 400px !important;
    }
    .ys-split-text {
        padding: 60px 5% !important;
    }
}