/* Path: /wp-content/plugins/releated-post/assets/css/rp-frontend.css */
/* Version: 1.2.1 */

/* =============================================
   骨架屏容器 (Skeleton Screen Wrapper)
   ============================================= */
.jct-ai-related-wrap {
    margin: 30px 0;
}

/* =============================================
   外層區塊與標題
   ============================================= */
.jct-ai-related-section {
    border: 1px solid #e0c97f;
    border-radius: 8px;
    padding: 20px 24px;
}

.jct-ai-related-header {
    font-size: 15px;
    font-weight: bold;
    color: #b8922a;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0e4c0;
}

/* =============================================
   關聯文章網格 (Related Posts Grid)
   固定單欄，4 篇文章各佔一排
   ============================================= */
.jct-ai-related-grid {
    display: flex;
    flex-direction: column;
    gap: 0;              /* gap 由卡片自帶的 margin-bottom 控制 */
    margin-top: 0;
    /* 建立獨立的 stacking context，避免 jct-stylish-box-title
       的 position:relative + 負 margin 形成的覆蓋層阻擋點擊 */
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* 確保卡片完整寬度，且連結可被點擊 */
.jct-ai-related-grid > * {
    width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* 消除最後一張卡片多餘的 margin-bottom */
.jct-ai-related-grid > *:last-child {
    margin-bottom: 0 !important;
}

/* jct-post-card 是 <a> 標籤，確保它可點擊 */
.jct-ai-related-grid .jct-post-card,
.jct-ai-related-grid a.jct-post-card {
    display: flex;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* =============================================
   骨架屏卡片 (Skeleton Card)
   ============================================= */
.jct-skeleton-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.jct-skeleton-img {
    width: 100%;
    height: 160px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: jct-shimmer 1.5s infinite;
}

.jct-skeleton-body {
    padding: 14px;
}

.jct-skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: jct-shimmer 1.5s infinite;
    margin-bottom: 10px;
}

.jct-skeleton-line:last-child {
    width: 60%;
    margin-bottom: 0;
}

/* =============================================
   骨架屏閃爍動畫 (Shimmer Animation)
   ============================================= */
@keyframes jct-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================
   載入失敗提示 (Error State)
   ============================================= */
.jct-ai-related-error {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 20px 0;
}

/* =============================================
   載入中指示器 (Loading Indicator)
   ============================================= */
.jct-ai-related-loading-label {
    font-size: 12px;
    color: #aaa;
    text-align: right;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.jct-ai-related-loading-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #aaa;
    animation: jct-pulse 1.2s ease-in-out infinite;
}

@keyframes jct-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.1); }
}

/* =============================================
   淡入動畫 (Fade-in when content loads)
   ============================================= */
.jct-ai-related-content {
    animation: jct-fade-in 0.5s ease-in-out;
}

@keyframes jct-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   搜尋頁：AI 推薦 badge（由 JS 注入 span.jct-ai-badge）
   ============================================= */
.jct-ai-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #b8922a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: .04em;
    z-index: 10;
    pointer-events: none;
}

/* =============================================
   相關文章圖片排版優化 (Related Posts Image Optimization)
   解決圖片比例不一與下方留白問題，使其等比放大並填充置中
   ============================================= */
.jct-ai-related-grid .jct-post-card img,
.jct-ai-related-grid .jct-post-card .jct-post-card-image img,
.jct-ai-related-grid .jct-post-card-fallback img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 物件填充模式 (Object Fit) 設為等比覆蓋 */
    object-position: center !important; /* 置中對齊 (Object Position) */
    display: block !important; /* 消除 inline 元素所帶來的基線留白 (Baseline Gap) */
}

/* 確保卡片圖片容器具有裁剪溢出及彈性置中效果 */
.jct-ai-related-grid .jct-post-card .jct-post-card-image {
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}