/* ==================== SRIS Events Display ==================== */

:root {
    --sris-brand-color: #2C92B8;
    --sris-brand-light: #ECFEFF;
    --sris-text-dark: #333;
    --sris-text-light: #666;
    --sris-border-light: #E0E0E0;
    --sris-bg-light: #F9F9F9;
    --sris-success: #52c41a;
    --sris-warning: #faad14;
}

/* Container & Layout */
.sris-events-container {
    width: 100%;
    margin: 20px 0;
}

.sris-events-wrapper {
    display: grid;
    gap: 24px;
}

/*.sris-events-grid .sris-events-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}*/
/* 1. 手機與平板 (預設)：保持彈性，避免在小螢幕硬切成4欄會太擠 */
.sris-events-grid .sris-events-wrapper {
    display: grid;
    gap: 24px;
    /* auto-fill 會保留空白軌道，比 auto-fit 更適合不想讓卡片變太大的情境 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* 2. 桌機版 (螢幕大於 1024px)：強制鎖定為 4 欄 */
@media (min-width: 1024px) {
    .sris-events-grid .sris-events-wrapper {
        /* 這裡強制切成 4 等份 */
        grid-template-columns: repeat(4, 1fr);
    }
}

.sris-events-list .sris-events-wrapper {
    grid-template-columns: 1fr;
}

/* Event Card */
.sris-event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--sris-border-light);
    transition: transform 0.3s ease;
}

.sris-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(147, 11, 127, 0.15);
}

/* Image */
.sris-event-image-wrapper {
    position: relative;
    background: var(--sris-bg-light);
    overflow: hidden;
}

.sris-event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Status Badge */
.sris-event-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}
.sris-status-ongoing { background: var(--sris-success); }
.sris-status-upcoming { background: var(--sris-warning); }
.sris-status-ended { background: #D9D9D9; color: #333; }

/* Content */
.sris-event-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sris-event-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    line-height: 1.4;
}
.sris-event-title a { color: var(--sris-text-dark); text-decoration: none; }
.sris-event-title a:hover { color: var(--sris-brand-color); }

/* Categories */
.sris-event-categories {
    margin-bottom: 12px;
}
.sris-event-category {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 5px;
    background: var(--sris-brand-light);
    color: var(--sris-brand-color);
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
}

/* Times */
.sris-event-times {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sris-border-light);
    font-size: 13px;
    color: var(--sris-text-light);
}

.sris-event-sessions-summary {
    margin-top: 5px;
}

/* Footer Buttons */
.sris-event-footer {
    margin-top: auto;
}

.sris-event-link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--sris-text-dark);
    color: var(--sris-text-dark);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.sris-event-link-btn:hover {
    background: var(--sris-text-dark) !important;
    color: #fff !important;
    border: unset;
}

/* Calendar Group - New Styles */
.sris-event-calendar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sris-event-calendar-btn {
    flex: 1;
    min-width: 45%; /* 讓按鈕在空間不足時換行，每行約兩個 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    background: #ef821d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.sris-event-calendar-btn:hover {
    background: #e3740c !important;
    color: #fff !important;
}

.sris-event-calendar-btn.loading {
    opacity: 0.7;
    cursor: wait;
}

.sris-event-calendar-btn .dashicons {
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}


/* =========================================
   Load More Button Styles (載入更多按鈕)
   ========================================= */

/* 1. 外層容器：負責置中 */
.sris-load-more-container {
    text-align: center;      /* 讓按鈕置中 */
    margin-top: 50px;        /* 與上方卡片保持距離 */
    margin-bottom: 30px;
    width: 100%;
    clear: both;             /* 避免被 float 元素干擾 */
}

/* 2. 按鈕本體：使用品牌橘色漸層 */
.sris-load-more-btn {
    display: inline-block;
    padding: 12px 40px;      /* 按鈕大一點，比較好按 */
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #ef821d; /* 品牌橘 */
    border: none;
    border-radius: 50px;     /* 膠囊狀圓角 */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 130, 29, 0.3); /* 發光陰影 */
    letter-spacing: 1px;     /*字距微調*/
}

/* 3. 滑鼠移過去的效果 */
.sris-load-more-btn:hover {
    background-color: #e3740c; /* 漸層反轉 */
    transform: translateY(-3px); /* 輕微上浮 */
    box-shadow: 0 8px 25px rgba(239, 130, 29, 0.5); /* 陰影加深 */
}

/* 4. 點擊載入中 (Loading) 的狀態 */
.sris-load-more-btn:disabled,
.sris-load-more-btn[disabled] {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: none;
}


/* =========================================
   View Switcher (檢視切換按鈕 - 仿 EDM 風格)
   ========================================= */
.sris-view-switcher {
    display: flex;
    justify-content: flex-end; /* 保持靠右對齊 */
    margin-bottom: 20px;
    gap: 5px; /* 間距縮小以符合 EDM 風格 */
}

.sris-view-btn {
    background: #fff;
    border: 1px solid #ddd; /* 使用 EDM 的淺灰邊框 */
    color: #666;
    padding: 8px 12px; /* 使用 EDM 的內距設定 */
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    
    /* 移除之前的固定寬高，改由 padding 撐開，與 EDM 一致 */
    width: auto;
    height: auto;
}

.sris-view-btn:hover {
    background: #f9f9f9;
    color: #333;
}

.sris-view-btn.active {
    /* 使用 EDM 的品牌橘色 #ef821d */
    background: #ef821d !important; 
    border-color: #ef821d !important;
    color: #fff !important;
}

.sris-view-btn .dashicons {
    font-size: 18px; /* 稍微調整圖示大小以配合按鈕 */
    width: 18px;
    height: 18px;
    margin: 0;
    line-height: 1;
}


/* =========================================
   List View Layout (表格化列表模式 - 欄位對齊版)
   ========================================= */

/* 1. 外層容器：如同表格的外框 */
.sris-events-list .sris-events-wrapper {
    grid-template-columns: 1fr !important;
    gap: 0; 
    background: #fff;
    border: 1px solid #e0e0e0; 
    border-radius: 4px;
    /* 讓內容不會溢出圓角 */
    overflow: hidden; 
}

/* 2. 每一列 (Row)：設定為 Flex 容器，不換行 */
.sris-events-list .sris-event-card {
    display: flex;
    flex-direction: row; /* 水平排列 */
    flex-wrap: nowrap;   /* [關鍵] 禁止換行，確保欄位對齊 */
    align-items: center; /* 垂直置中 */
    
    min-height: 80px;    /* 設定最小高度，讓畫面更有呼吸感 */
    margin: 0;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    transition: background-color 0.2s;
}

.sris-events-list .sris-event-card:last-child {
    border-bottom: none;
}

.sris-events-list .sris-event-card:hover {
    background-color: #f8fcfd; /* Hover 時顯示淡藍色背景 */
}

/* 3. 隱藏圖片 (維持) */
.sris-events-list .sris-event-image-wrapper {
    display: none; 
}

/* 4. 內容區域：設定為 Flex 容器，用來裝載子欄位 */
.sris-events-list .sris-event-content {
    flex: 1; /* 佔滿整列寬度 */
    width: 100%;
    padding: 15px 20px;
    
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: flex-start; /* 從左開始排列 */
    gap: 20px; /* 欄位間距 */
}

/* =========================================
   [關鍵] 定義各欄位寬度 (Table Columns)
   ========================================= */

/* (A) 第一欄：標題 (最寬，自動填滿剩餘空間) */
.sris-events-list .sris-event-title {
    flex: 1 1 auto; /* Grow, Shrink, Auto */
    min-width: 0;   /* 防止標題過長撐爆版面 */
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
}

/* (B) 第二欄：分類 (固定寬度 90px，靠右一點) */
.sris-events-list .sris-event-categories {
    flex: 0 0 90px; /* 固定不縮放 */
    display: flex;
    flex-direction: column; /* [修改] 讓多個標籤垂直堆疊，比較整齊 */
    align-items: flex-start; /* 靠左對齊 */
    gap: 4px;
    margin: 0;
}
/* 分類標籤樣式微調 */
.sris-events-list .sris-event-category {
    font-size: 11px;
    padding: 2px 8px;
    margin: 0;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap; /* 不換行 */
}

/* (C) 第三欄：時間 (固定寬度 300px，呈現灰色資訊) */
.sris-events-list .sris-event-times {
    flex: 0 0 300px; /* 固定不縮放 */
    margin: 0;
    padding: 0;
    border: none;
    
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    white-space: normal; /* 允許長日期換行 */
    text-align: left;
}
.sris-events-list .sris-time-label {
    display: none; /* 隱藏 "活動時間:" 文字 */
}

/* (D) 第四欄：按鈕區 (固定寬度 210px，靠右) */
.sris-events-list .sris-event-footer {
    flex: 0 0 210px; /* 固定不縮放 */
    margin: 0;
    
    display: flex;
    flex-direction: row; /* 按鈕左右並排 */
    justify-content: flex-end; /* 靠右對齊 */
    align-items: center;
    gap: 8px;
}

/* 按鈕樣式：固定高度與內距，確保整齊 */
.sris-events-list .sris-event-link-btn,
.sris-events-list .sris-event-calendar-btn {
    width: auto;
    margin: 0;
    font-size: 13px;
    padding: 0 12px;
    height: 36px;       /* 統一高度 */
    line-height: 34px;  /* 文字垂直置中 */
    white-space: nowrap;
    border-radius: 4px;
}

/* 了解更多按鈕：做成白色背景+邊框 */
.sris-events-list .sris-event-link-btn {
    background: #fff;
    border: 1px solid #ccc;
    color: #666;
}
.sris-events-list .sris-event-link-btn:hover {
    border-color: #333;
    color: #333;
}

/* --- 手機版 RWD (小螢幕時自動變回堆疊模式) --- */
@media (max-width: 992px) {
    /* 在平板以下就開始換行，因為橫向空間不足以塞下所有欄位 */
    
    .sris-events-list .sris-event-content {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
    }
    
    /* 解除欄位寬度限制，改為 100% */
    .sris-events-list .sris-event-title,
    .sris-events-list .sris-event-categories,
    .sris-events-list .sris-event-times,
    .sris-events-list .sris-event-footer {
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
    }
    
    /* 分類改回水平排列 */
    .sris-events-list .sris-event-categories {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    /* 按鈕區塊 */
    .sris-events-list .sris-event-footer {
        justify-content: flex-start; /* 靠左 */
        margin-top: 5px;
    }
}



/* ============================================
   標籤顯示樣式 (新增到 events-display.css)
   ============================================ */

/* 標籤與分類的共同樣式保持不變 */
.sris-event-categories {
    margin-bottom: 12px;
}

.sris-event-category {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 6px;
    margin-bottom: 6px;
    background: var(--sris-brand-light);
    color: var(--sris-brand-color);
    border-radius: 4px;
    font-size: 10px;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sris-event-category:hover {
    background: var(--sris-brand-color);
    color: #fff;
}

/* 標籤專用樣式 (新增) */
.sris-event-tag {
    /* 標籤以 # 開頭，使用稍微不同的風格 */
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 可選：使用不同的顏色區分標籤 */
/* 如果想要標籤有不同顏色，可以取消以下註解 */
/*
.sris-event-tag {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.sris-event-tag:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}
*/