/**
 * RS Syunyang Home — 首頁分類 tab 部件樣式
 *
 * 設計原則：除 spec 提供的內外距與樣式外，不額外增加裝飾。
 * 以下少數「非 spec」屬性皆為版面功能性必要項，已逐一註明。
 * 桌機 / 手機切換斷點：max-width: 768px。
 */

/* box-sizing 與 width:100% 為功能性設定：
   - border-box 讓 padding 不撐破 100% 寬度
   - 寬度交由外層容器控制（需求第 6 點） */
.rs-syunyang-home,
.rs-syunyang-home * {
	box-sizing: border-box;
}

.rs-syunyang-home {
	width: 100%;
}

/* ===== 分類 tabs ===== */
/* 需求第 3 點：分類超過寬度時水平卷軸。
   原 spec 為 inline-flex（內容寬），此處改 flex + overflow-x:auto 才能觸發
   容器內部捲動；tab 以 flex:0 0 auto + nowrap 維持單行。 */
.rs-syunyang-home__tabs {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
	overflow-x: auto;
}

/* inactive tab：純文字（無 padding / 背景）。
   button 重置為純文字外觀。 */
.rs-syunyang-home__tab {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 15px;
	color: #888888;
	font-family: "Noto Sans TC", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	letter-spacing: 1.4px;
	white-space: nowrap;
	cursor: pointer;
}

/* active / hover tab：紅底白字膠囊。 */
.rs-syunyang-home__tab:hover,
.rs-syunyang-home__tab.is-active {
	padding: 4px 10px;
	background: #E60012;
	color: #ffffff;
}

/* --- 若不希望 hover 時因 padding 造成位移，改用以下做法（取代上方兩段）：

.rs-syunyang-home__tab {
	... 維持上述設定，但加上 ...
	padding: 4px 10px;          // 所有 tab 都先給 padding
	background: transparent;    // inactive 透明
}
.rs-syunyang-home__tab:hover,
.rs-syunyang-home__tab.is-active {
	background: #E60012;
	color: #ffffff;
}

   代價：inactive tab 也會佔 padding，視覺間距略大於原 spec。 --- */

/* ===== 文章 list ===== */
/* 分類下方間距：桌機 67px。 */
.rs-syunyang-home__list {
	width: 100%;
	margin-top: 67px;
}

/* loop item：桌機 120px、左右 20px、底線、左右分散。 */
.rs-syunyang-home__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 120px;
	padding: 0 20px;
	border-bottom: 1px solid #F5F5F5;
	text-decoration: none;
}

/* hover：整列換背景色（桌機 / 手機相同）。 */
.rs-syunyang-home__item:hover {
	background: #F7F7F7;
}

/* 左側群組 Frame83：桌機橫向 gap 31px。 */
.rs-syunyang-home__item-main {
	display: flex;
	align-items: center;
	gap: 31px;
	min-width: 0; /* flex 溢位保護，避免長標題擠掉箭頭 */
}

/* 日期 + 標籤群組 Frame82：桌機 gap 24px。 */
.rs-syunyang-home__item-meta {
	display: flex;
	align-items: center;
	gap: 24px;
}

.rs-syunyang-home__date {
	color: #888888;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	letter-spacing: 1.4px;
	white-space: nowrap;
}

/* 標籤：外框紅線（與 active tab 的實心紅底不同）。 */
.rs-syunyang-home__tag {
	padding: 4px 10px;
	border-radius: 15px;
	outline: 1px solid #E60012;
	outline-offset: -1px;
	color: #E60012;
	font-family: "Noto Sans TC", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	letter-spacing: 1.4px;
	white-space: nowrap;
}

.rs-syunyang-home__title {
	min-width: 0; /* flex 溢位保護 */
	color: #222222;
	font-family: "Noto Sans TC", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	letter-spacing: 1.6px;
}

/* 箭頭：桌機顯示。line-height:0 避免 inline 殘留高度。 */
.rs-syunyang-home__arrow {
	flex: 0 0 auto;
	line-height: 0;
}

/* 空狀態。 */
.rs-syunyang-home__empty {
	padding: 20px;
	color: #888888;
	font-family: "Noto Sans TC", sans-serif;
	font-size: 14px;
}

/* ===== 手機版（max-width: 768px） ===== */
@media (max-width: 768px) {
	/* 分類下方間距：手機 32px。 */
	.rs-syunyang-home__list {
		margin-top: 32px;
	}

	/* loop item：手機 padding 20px 10px、高度自動。 */
	.rs-syunyang-home__item {
		height: auto;
		padding: 20px 10px;
	}

	/* 左側群組改直向，gap 20px，撐滿可用寬度讓標題換行。 */
	.rs-syunyang-home__item-main {
		flex: 1 1 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* 日期 + 標籤群組：手機 gap 12px。 */
	.rs-syunyang-home__item-meta {
		gap: 12px;
	}

	/* 標題撐滿寬度。 */
	.rs-syunyang-home__title {
		align-self: stretch;
	}

	/* 手機無箭頭。 */
	.rs-syunyang-home__arrow {
		display: none;
	}
}