/*
 * TPMA 相簿/活動/足跡卡片專屬 CSS
 * 適用於 WP 掛載，用於事件列表、策略聯盟足跡等模組，區別於通用資訊卡片。
 * 專注於網格佈局與單一卡片的結構樣式。
 */

/* 1. 卡片網格佈局 (響應式設計) */
.tpma-card-grid {
    display: grid;
    /* 自動填充，最小寬度 280px */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* 2. 單張事件卡片樣式 (相簿/活動卡片) */
.tpma-event-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* 確保卡片等高 */
    border: 1px solid #e5e7eb; /* 輕微邊框 (gray-200) */
    border-radius: 8px; /* 統一圓角 */
    overflow: hidden;
    /* 輕度陰影 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease;
    background-color: white; /* 確保背景為白色 */
    cursor: pointer; /* 點擊指示 */
}

/* 卡片懸停效果 */
.tpma-event-card:hover {
    transform: translateY(-5px);
    /* 提升陰影 */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* 3. 圖片容器 */
.card-image-wrap {
    height: 250px; /* 固定高度，確保統一視覺 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb; /* 輕量背景色 */
    flex-shrink: 0; /* 防止圖片容器被內容壓縮 */
}

.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片覆蓋整個容器並保持比例 */
    transition: transform 0.3s ease;
}

/* 圖片在懸停時稍微放大 */
.tpma-event-card:hover .card-image-wrap img {
    transform: scale(1.05);
}

/* 4. 內容區塊 */
.card-content {
    flex-grow: 1; /* 讓內容佔用剩餘空間，確保 footer 始終在底部 */
    padding: 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: #374151; /* gray-700 */
}

/* 內容區塊中的標題 */
.card-content h5 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* gray-800 */
    margin-top: 0;
    margin-bottom: 0;
    /* 限制行數 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 最多顯示 3 行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. 底部資訊區塊 (日期/作者/其他) */
.card-footer {
    height: 48px; /* 固定底部高度 */
    padding: 12px 16px;
    background-color: #f3f4f6; /* gray-100 */
    border-top: 1px solid #e5e7eb; /* gray-200 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* gray-500 */
    flex-shrink: 0; /* 防止被壓縮 */
}

/* 日期/資訊文字 */
.card-footer span {
    font-weight: 500;
}