/* 外層 */
.blogs {
    --blogs-primary: #2b7bbb;
    --blogs-muted: #e7f1f7;
    --blogs-border: #dbe4ea;
    --blogs-text: #222;
    --blogs-radius: 14px;
    font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

/* 頁籤列 */
.blogs-tabbar {
    display: flex;
    gap: 10px;                   /* 間距稍微放大 */
    margin-bottom: 18px;
    justify-content: flex-start; /* 靠左 */
    align-items: flex-start;
}

/* 按鈕大小調整：比一半大一些 */
.blogs-tab {
    padding: 8px 14px;           /* 原本 6x10 → 稍微放大 */
    font-size: 16px;             /* 原本 14 → 放大一點 */
    border: 1px solid var(--blogs-border);
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
    color: var(--blogs-text);
}

.blogs-tab-title {
    font-size: 16px;             /* 原本 14 → 放大一點 */
    font-weight: 700;
}

.blogs-tab-subtitle {
    font-size: 13px;             /* 原本 12 → 放大 */
    opacity: .85;
    font-weight: 600;
}

.blogs-tab.is-active {
    border-color: #000;             /* 外框改黑色 */
    box-shadow: 0 0 0 0.5px #000 inset; /* 線條變薄 */
    background: #fff;
}

/* 面板切換 */
.blogs-panel { display: none; }
.blogs-panel.is-active { display: block; }

/* 卡片網格 */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 8px;
    background: transparent;
    border-radius: var(--blogs-radius);
}

/* 卡片 */
.blogs-card {
    background: #fff;
    border: 1px solid var(--blogs-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease;
}

.blogs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

.blogs-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blogs-card-img img,
.blogs-img-ph {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #eee;
}

.blogs-card-title {
    margin: 12px 14px 8px;
    font-size: 16px;      /* 原本 20px → 縮小 */
    line-height: 1.4;
    font-weight: 700;
}

.blogs-card-excerpt {
    margin: 0 14px 16px;
    color: #555;
    line-height: 1.6;
    font-size: 14px;
}

.blogs-empty {
    padding: 12px 0 12px 20px;  /* 上右下左 */
    text-align: left;   /* ← 改成靠左 */
    color: #666;
}