/* ===== Shared List Card Wrapper — all card types ===== */
.list-card{background:white;border-radius:10px;overflow:hidden;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid #f0f0f0;}
.list-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,0.08);border-color:#e0e0e0;}

/* ===== Shared Image Wrapper ===== */
.news-card-image{overflow:hidden;position:relative;background:linear-gradient(135deg,#f9fafb 0%,#f3f4f6 100%);}
.news-card-image img{transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.list-card:hover .news-card-image img{transform:scale(1.08);}

/* ===== Shared Content & Title ===== */
.news-card-content,
.video-card-content{padding:15px 18px 18px;}
.news-card-title,
.video-card-title{font-size:0.92rem;font-weight:600;color:#1f2937;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.25s ease;letter-spacing:-0.01em;}
.list-card:hover .news-card-title,
.list-card:hover .video-card-title{color:#111;}

/* ===== News Card Extension — gradient top line ===== */
.news-card{position:relative;}
.news-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#6b7280 0%,#9ca3af 50%,#6b7280 100%);transform:scaleX(0);transition:transform 0.35s ease;transform-origin:left;}
.news-card:hover::before{transform:scaleX(1);}
.news-card-meta{display:flex;align-items:center;justify-content:space-between;color:#9ca3af;font-size:12px;}
.news-card-date{display:flex;align-items:center;gap:5px;}
.news-card-date svg{width:13px;height:13px;opacity:0.6;}
/* Hover arrow circle */
.news-card-arrow{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;transform:translateX(4px);opacity:0;}
.list-card:hover .news-card-arrow{transform:translateX(0);opacity:1;}
.news-card-arrow:hover{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);}
.news-card-arrow:hover svg{stroke:white;}
.news-card-arrow svg{width:12px;height:12px;stroke:#9ca3af;transition:stroke 0.25s ease;}

/* ===== Video Card Extension — thumb overlay / play-btn / duration ===== */
.video-card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a;}
.video-card-thumb img{width:100%;height:100%;object-fit:cover;opacity:0.82;transition:all 0.6s cubic-bezier(0.4,0,0.2,1);}
.list-card:hover .video-card-thumb img{opacity:1;transform:scale(1.06);}
.video-card-thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.05);transition:background 0.4s ease;}
.list-card:hover .video-card-thumb::after{background:rgba(0,0,0,0.2);}
.small-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:2;transition:all 0.35s ease;}
.small-play-btn svg{width:18px;height:18px;display:block;transition:transform 0.3s ease;}
.list-card:hover .small-play-btn{background:#fff;transform:translate(-50%,-50%) scale(1.12);box-shadow:0 6px 24px rgba(0,0,0,0.2);}
.small-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.72);color:#fff;font-size:0.6rem;padding:3px 8px;border-radius:5px;z-index:2;font-weight:500;letter-spacing:0.06em;backdrop-filter:blur(3px);}
.video-card-footer{display:flex;align-items:center;gap:16px;font-size:0.72rem;color:#bbb;}

/* ===== Pagination — all list pages ===== */
.pagination-link{width:clamp(34px,10vw,40px);height:clamp(34px,10vw,40px);display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;color:#374151;font-size:14px;transition:all 0.2s;}
.pagination-link:hover,.pagination-link.active{background-color:#eee;color:#111;border-color:#f2f2f2;}

/* ===== Hero Card — news / exhibition ===== */
.hero-card-content{flex:1;padding:32px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#fafafa 0%,#f5f5f5 100%);}
.hero-card-title{font-size:24px;font-weight:600;color:#1a1a1a;line-height:1.4;margin-bottom:16px;}
.hero-card-excerpt{font-size:15px;color:#666;line-height:1.8;margin-bottom:28px;}
.hero-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid #e5e5e5;}
.hero-card-date{display:flex;align-items:center;gap:8px;color:#999;font-size:13px;}
.hero-card-date svg{width:16px;height:16px;opacity:0.6;}
.hero-card-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);color:#4b5563;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:500;transition:all 0.3s ease;}
.hero-card-btn:hover{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);color:#fff;transform:translateX(4px);}
.hero-card-btn svg{width:16px;height:16px;stroke:#4b5563;transition:all 0.3s ease;}
.hero-card-btn:hover svg{transform:translateX(4px);stroke:#fff;}
@media (max-width:1024px){.hero-card-content{padding:32px;}}
@media (max-width:768px){.hero-card-content{padding:24px;}.hero-card-title{font-size:20px;}}

/* ===== Exhibition-specific extensions ===== */
.ex-card-info{font-size:12px;color:#9ca3af;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.ex-card-info span{display:flex;align-items:center;gap:4px;}
.ex-card-info svg{width:13px;height:13px;opacity:0.6;flex-shrink:0;}
.ex-card-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px;letter-spacing:0.04em;}
.badge-upcoming{background:#fef2f2;color:#dc2626;}
.badge-past{background:#f5f5f5;color:#999;}
.ex-card-arrow{position:absolute;bottom:16px;right:16px;z-index:3;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;transform:translateX(4px);opacity:0;}
.list-card:hover .ex-card-arrow{transform:translateX(0);opacity:1;}
.ex-card-arrow:hover{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);}
.ex-card-arrow:hover svg{stroke:white;}
.ex-card-arrow svg{width:12px;height:12px;stroke:#9ca3af;transition:stroke 0.25s ease;}
.hero-badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:16px;width:fit-content;letter-spacing:0.04em;}
.hero-badge.upcoming{background:#fef2f2;color:#dc2626;}