/* --- 變數 --- */
:root {
    --fj-primary-red: #d90429;
}

/* --- Feature Card Widget (.f-card) --- */
.fj-card {
    /* 移除寫死的背景與邊框，改由 Elementor 控制 */
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    height: 100%; /* 讓它在等高容器中填滿 */
    display: flex;
    flex-direction: column;
}

/* 確保 Icon 區域有空間 */
.fj-card-icon {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* 預設內容置中，但會被父層排列覆蓋 */
    line-height: 1;
    transition: 0.3s;
}

/* 修復 Icon 不顯示的問題 */
.fj-card-icon i {
    font-size: 3rem; /* 預設大小 */
}

.fj-card-icon svg {
    width: 3rem;     /* 預設 SVG 寬度 */
    height: 3rem;    /* 預設 SVG 高度 */
    fill: currentColor; /* 讓 SVG 顏色跟隨文字顏色設定 */
}

.fj-card-content {
    flex-grow: 1;
}

.fj-card h3 {
    margin: 0 0 15px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    transition: 0.3s;
}

.fj-card p {
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.6;
    margin: 0;
    transition: 0.3s;
}

/* --- Product Item Widget (.prod-item) --- */
.fj-prod-item {
    position: relative;
    overflow: hidden;
    height: 400px; /* 預設高度，可由 Elementor 覆寫 */
    border-right: 1px solid rgba(255,255,255,0.1); /* 預設邊框 */
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 讓內容靠下對齊 */
}

.fj-prod-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 0;
}

/* 漸層遮罩 (Overlay) */
.fj-prod-overlay {
    content: '';
    position: absolute;
    bottom: 0; left: 0; 
    width: 100%; 
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* 預設漸層，Elementor 可覆寫 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    transition: 0.3s;
}

.fj-prod-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 40px; /* 預設內距，可由 Elementor 覆寫 */
    width: 100%;
}

.fj-prod-num {
    font-size: 4rem;
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    position: absolute;
    top: -60px; /* 預設位置 */
    left: 0;
    transition: 0.3s;
    line-height: 1;
    color: rgba(255,255,255,0.1); /* 預設顏色 */
    pointer-events: none;
}

.fj-prod-title {
    font-size: 2rem;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    transition: 0.3s;
}

.fj-prod-link {
    display: inline-block;
    color: #fff;
    background: var(--fj-primary-red);
    padding: 10px 25px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0; /* 預設隱藏 */
    transform: translateY(20px);
    transition: 0.4s;
    text-decoration: none;
    font-family: 'Noto Sans TC', sans-serif;
    border: 1px solid transparent; /* 預留給邊框設定 */
}

/* Hover Effects */
.fj-prod-item:hover .fj-prod-bg {
    transform: scale(1.1);
}

.fj-prod-item:hover .fj-prod-num {
    transform: translateY(-15px); /* 數字下沉 */
    color: rgba(255,255,255,0.3);
}

.fj-prod-item:hover .fj-prod-link {
    opacity: 1;
    transform: translateY(0);
}