/* 更具體的 UTOWN Post Grid CSS（scope 更具體，優先權較高）*/
/* 確認容器 class 請輸入 hero-bg（無前導點）在編輯器的 CSS class 欄位 */

:root{
  --utown-gold: #FFD34D;
  --utown-neon: #48F9E9;
  --utown-muted: #9AA4C3;
}

/* 更具體的容器路徑（針對常見 ut5-wrap / post-grid 結構） */
.hero-bg, .hero-bg .ut5-wrap {
  position: relative;
}

/* Grid container - 更具體選擇器以增加權重 */
.hero-bg.utown-posts-outer .ut5-wrap .post-grid,
.hero-bg .ut5-wrap .post-grid,
.hero-bg .post-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  margin-top: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 980px){
  .hero-bg .ut5-wrap .post-grid,
  .hero-bg .post-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 560px){
  .hero-bg .ut5-wrap .post-grid,
  .hero-bg .post-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Card shell (glass look) - 高權重選擇器 */
.hero-bg .ut5-wrap .post-grid .post-card,
.hero-bg .post-grid .post-card {
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 0 18px 48px rgba(2,6,14,0.55), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease !important;
  min-height: 220px !important;
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
}

/* 確認 link 覆蓋整個卡片 */
.hero-bg .ut5-wrap .post-grid .post-card .post-link,
.hero-bg .post-grid .post-card .post-link {
  display: flex !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  padding: 12px !important;
  align-items: flex-start !important;
}

/* Media */
.hero-bg .ut5-wrap .post-grid .post-card .post-media,
.hero-bg .post-grid .post-card .post-media {
  position: relative !important;
  flex: 0 0 120px !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#08121a,#0f1626) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.hero-bg .ut5-wrap .post-grid .post-card .post-media img,
.hero-bg .post-grid .post-card .post-media img {
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
  transition: transform .36s ease !important;
}
.hero-bg .ut5-wrap .post-grid .post-card:hover .post-media img,
.hero-bg .post-grid .post-card:hover .post-media img,
.hero-bg .post-card:focus-within .post-media img {
  transform: scale(1.04) !important;
}

/* Badge */
.hero-bg .ut5-wrap .post-grid .post-card .post-badge,
.hero-bg .post-card .post-badge {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  z-index: 6 !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  font-size:.78rem !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)) !important;
  color:#071027 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
}

/* Body */
.hero-bg .ut5-wrap .post-grid .post-card .post-body,
.hero-bg .post-card .post-body {
  flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:8px !important;
}
.hero-bg .ut5-wrap .post-grid .post-card .post-title,
.hero-bg .post-card .post-title {
  margin:0 !important; font-weight:900 !important; font-size:1.02rem !important; line-height:1.18 !important;
  background: linear-gradient(90deg, var(--utown-gold), #EAF2FF) !important;
  -webkit-background-clip:text !important; color:transparent !important;
}
.hero-bg .ut5-wrap .post-grid .post-card .post-excerpt,
.hero-bg .post-card .post-excerpt {
  margin:0 !important; color: rgba(230,240,255,0.92) !important; line-height:1.5 !important; font-size:.95rem !important;
}

/* Meta */
.hero-bg .ut5-wrap .post-grid .post-card .post-meta,
.hero-bg .post-card .post-meta {
  margin-top:auto !important; display:flex !important; gap:8px !important; align-items:center !important;
  color: var(--utown-muted) !important; font-size:.86rem !important;
}
.hero-bg .utown-posts-outer .post-grid .post-meta .meta-dot,
.hero-bg .post-meta .meta-dot { opacity:.26 !important; margin:0 4px !important; }

/* Hover / focus */
.hero-bg .ut5-wrap .post-grid .post-card:hover,
.hero-bg .post-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 80px rgba(2,6,14,0.7) !important;
}

/* Mobile stacking */
@media (max-width: 560px){
  .hero-bg .ut5-wrap .post-grid .post-card .post-link,
  .hero-bg .post-grid .post-card .post-link { flex-direction: column !important; align-items: flex-start !important; padding:12px !important; }
  .hero-bg .ut5-wrap .post-grid .post-card .post-media,
  .hero-bg .post-grid .post-card .post-media { width:100% !important; height:160px !important; flex:0 0 auto !important; border-radius:10px !important; }
  .hero-bg .ut5-wrap .post-grid .post-card .post-body,
  .hero-bg .post-card .post-body { width:100% !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg .ut5-wrap .post-grid .post-card, .hero-bg .post-card, .hero-bg .post-media img { transition: none !important; transform: none !important; }
}

/* 簡單 debug 測試（上線後可移除）：
   如果你貼上後沒有看到綠色邊框，代表 selector 仍未匹配到元素 */
.hero-bg .ut5-wrap .post-grid .post-card.debug-test,
.hero-bg .post-grid .post-card.debug-test {
  outline: 3px solid lime !important;
}

/* --- 延伸閱讀 (Related Posts) 樣式 --- */
.related-section { 
    margin-top: 60px; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 40px; 
}

.related-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    margin-top: 20px; 
}

.related-card {
    background: #1e1b29; /* 深色卡片底 */
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05); 
    display: flex; 
    align-items: center; 
    padding: 15px; 
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.related-card:hover { 
    border-color: #ffd700; /* 懸停變金色邊框 */
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.related-thumb { 
    width: 80px; 
    height: 60px; 
    background: #333; 
    border-radius: 8px; 
    margin-right: 15px; 
    flex-shrink: 0; 
    object-fit: cover; 
}

.related-title { 
    color: #fff; 
    font-size: 1rem; 
    font-weight: bold; 
    line-height: 1.4; 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制標題最多兩行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-meta { 
    display: block; 
    font-size: 0.8rem; 
    color: #888; 
    margin-top: 5px; 
}

/* RWD: 手機版單欄顯示 */
@media (max-width: 600px) {
    .related-grid { grid-template-columns: 1fr; }
}