/* =========================================
   阿鹿小站 v2.0 - 分類列表頁專屬樣式 (category.css)
   ========================================= */

.category-page { 
    padding-top: 10px; 
    padding-bottom: 0; /* 🌟 移除底部的多餘留白 */
    min-height: calc(100vh - 350px); /* 🌟 確保內容太少時頁尾不會浮上來，同時避免強制撐出大空白 */
}
.empty-msg { text-align: center; color: #a0aab2; font-size: 1.2rem; padding: 50px 0; }

/* --- 🌟 2. 麵包屑導航：加回底部間距，解決太貼近的問題 --- */
.breadcrumbs {
    margin-bottom: 25px; /* 把底下的分類按鈕往下推開 */
    font-size: 0.95rem;
    color: #7f8c8d;
}
.breadcrumbs a {
    color: #007bff; /* 讓前面的路徑連結保持藍色 */
    transition: 0.3s;
}
.breadcrumbs a:hover {
    color: var(--accent-color); /* 滑鼠碰到變粉色 */
    text-decoration: underline;
}
.breadcrumbs .current {
    color: #333333 !important; 
    font-weight: bold;
}

/* =========================================
   🌟 1. 骨架排版 (這是剛剛不小心被刪掉的關鍵！)
   ========================================= */
.sub-category-list {
    display: flex;        /* 讓按鈕橫向排列 */
    flex-wrap: wrap;      /* 空間不夠自動換行 */
    gap: 15px;            /* 按鈕之間的間距 */
    margin-bottom: 40px;
}

.sub-cat-item {
    width: 120px;         /* 🌟 限制寬度，才不會變巨大 */
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    
    /* 預設明亮版顏色 */
    background-color: #ffffff !important; 
    border: 2px solid #eaeaea !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; 
    transition: all 0.3s ease !important;
}

/* 圖片區塊大小限制 */
.sub-cat-img {
    width: 100%;
    height: 120px;
    background-color: #fff;
    overflow: hidden;
}

.sub-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 文字區塊預設大小與顏色 */
.sub-cat-name {
    padding: 10px 5px;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: #f8f9fa !important;
    color: #333333 !important; 
    border-top: 1px solid #eaeaea !important;
    transition: all 0.3s ease !important;
}

/* =========================================
   🌟 2. 互動特效 (Hover)
   ========================================= */
.sub-cat-item:hover {
    transform: translateY(-5px) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2) !important;
}

/* 滑鼠移入時圖片微微放大 */
.sub-cat-item:hover .sub-cat-img img {
    transform: scale(1.1);
}

/* 非活躍的按鈕，滑入變藍字 */
.sub-cat-item:not(.active):hover .sub-cat-name {
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
}

/* =========================================
   🌟 3. 活躍狀態 (Active / 目前分類)
   ========================================= */
a.sub-cat-item.active {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.3) !important;
}

/* 強制藍底白字 */
a.sub-cat-item.active .sub-cat-name {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* 滑過去稍微加深藍色 */
a.sub-cat-item.active:hover .sub-cat-name {
    background-color: #0056b3 !important;
    color: #ffffff !important;
}