/* 首頁「城市脈動」（享新聞）區塊樣式
   區塊結構、卡片、輪播、按鈕都沿用首頁其他分區（選物提案等）的 index.css，
   這裡放首頁新增的樣式：城市脈動的底色與插圖位置、所有區塊共用的分類標籤顏色。標題裝飾符號是隔一個有、一個沒有（食旅有、生活無、好買有、城市脈動無、影音有）。
   要放在 index.css 之後載入，同樣權重的規則才會以這裡為準。 */

.section-bg-news {
    background: linear-gradient(to bottom, #ffffff 0%, #eef3f9 30%, #eef3f9 70%, #ffffff 100%);
}

.section-bg-news .article-card:hover {
    background-color: rgba(214, 226, 241, 0.55);
    scale: 0.9;
}

/* 標題旁的大插圖：首頁插圖是左右交替的（食旅左、生活右、好買左、城市脈動右、影音左），
   所以城市脈動放右邊，影音從右邊換到左邊（videoleft是原本videoright左右翻轉）。
   寫法跟 index.css 的 .coffeeicon（右）、.buyicon（左）一致 */
.newsicon {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    user-select: none;
}

.newsicon img {
    width: 42%;
    height: auto;
    margin-top: 10px;
}

.videoicon-left {
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
}

.videoicon-left img {
    width: 40%;
    height: auto;
    margin-top: 12px;
}

/* 電腦版、手機版各一組輪播，跟其他分區一樣用ID切換顯示 */
#newsCarousel-computer {
    display: block;
}

#newsCarousel-cellphone {
    display: none;
}

@media (max-width: 767px) {
    /* 手機版其他分區的大插圖都隱藏，這兩個也一樣 */
    .newsicon,
    .videoicon-left {
        display: none !important;
    }

    #newsCarousel-computer {
        display: none;
    }

    #newsCarousel-cellphone {
        display: block;
    }
}

/* 分類標籤（首頁所有區塊共用）：每個分類一個顏色，文字用該色、底色用該色的淡色。
   地方／教育／社會／政經的色票跟享新聞頁面（news.css）一致，其他分類各自挑了同一個色系的顏色 */
.cat-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 10px;
    border-radius: 999px;
    letter-spacing: 0.08rem;
    white-space: nowrap;
    color: var(--cc, #555);
    background: color-mix(in srgb, var(--cc, #555) 13%, #fff);
}

/* 享食旅 */
.cat-chip.c-trip { --cc: #1f6f8b; }
.cat-chip.c-food { --cc: #c2552d; }
.cat-chip.c-drink { --cc: #8a5a2e; }
/* 享生活 */
.cat-chip.c-life { --cc: #4f7f58; }
.cat-chip.c-tech { --cc: #3f64a8; }
.cat-chip.c-acg { --cc: #8352a8; }
/* 享好買 */
.cat-chip.c-shop { --cc: #b9423a; }
.cat-chip.c-unbox { --cc: #b36b1a; }
.cat-chip.c-deal { --cc: #c0366f; }
/* 享新聞 */
.cat-chip.c-loc { --cc: #3b74bd; }
.cat-chip.c-edu { --cc: #a4702c; }
.cat-chip.c-soc { --cc: #2a7a8a; }
.cat-chip.c-eco { --cc: #3b5b8c; }