/* ==========================================================================
   文章內嵌精選卡片區塊（shortcode：[tshp_market_feature]）
   ==========================================================================
   這支嵌在文章「內容區」(.entry-content 之類),不在 .tshp-page 之下,所以要
   雙重防禦:
   (A) 版面:抵禦父層主題(WoodMart .wd-grid-g 等)對 grid 的污染,自帶
       box-sizing 重置。
   (B) 卡片內文:卡片(product-card.php)原本設計在乾淨的 archive 模板裡,現在
       改到 .entry-content 內,主題會對卡片裡的 <h3> 標題加裝飾底線(::after 色條)
       + 覆寫 margin,對 <a> 加底線/顏色 —— 全部要用「高於主題」的 specificity
       + !important 壓掉,卡片才會跟市集頁長得一模一樣(不會多一條神秘的線)。

   底圖策略(避免上一版「波浪切過卡片」):
   - 桌面(>=900px):寬版底圖(1700x925)當背景,卡片疊在下半部留白。卡片高度
     因 .tshp-card__title 有 min-height(固定兩行)而穩定,故容器高度可預期,
     用 background-size:100% 100% 讓底圖永遠填滿整個容器高度(頂部標頭永遠在
     上、底部波浪永遠在下,不會有色塊縫隙、也不會把波浪卡在卡片中間)。
   - 手機(<900px):卡片會直向堆疊、高度不可預測,無法穩定「疊」在固定比例底圖
     的留白裡 —— 故改成「一次顯示一張的左右輪播」。輪播只顯示一張 → 高度可預期,
     就能穩定疊在直式底圖(post-recommand-bg-mobile.webp)的中間留白區,配左右箭頭。

   查無商品時 render_feature() 直接回傳空字串,文章裡完全不渲染這個區塊。
   ========================================================================== */

.tshp-mfeature {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: var(--tshp-font-cjk);
	color: var(--tshp-text);
	margin: 0;
}
.tshp-mfeature,
.tshp-mfeature * { box-sizing: border-box; }

/* ---- (B) 卡片內文防禦:壓掉主題對 .entry-content 後代的污染 ---------------- */
/* 神秘的線 = 主題給 h3 加的裝飾底線(::after),與主題覆寫的標題 margin。
   specificity 疊到 .tshp-mfeature .tshp-card__title(0,2,x)高過主題
   .entry-content h3::after(0,1,2)。 */
.tshp-mfeature .tshp-card h1,
.tshp-mfeature .tshp-card h2,
.tshp-mfeature .tshp-card h3,
.tshp-mfeature .tshp-card h4,
.tshp-mfeature .tshp-card__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: left !important;
}
.tshp-mfeature .tshp-card h1::before, .tshp-mfeature .tshp-card h1::after,
.tshp-mfeature .tshp-card h2::before, .tshp-mfeature .tshp-card h2::after,
.tshp-mfeature .tshp-card h3::before, .tshp-mfeature .tshp-card h3::after,
.tshp-mfeature .tshp-card h4::before, .tshp-mfeature .tshp-card h4::after,
.tshp-mfeature .tshp-card__title::before,
.tshp-mfeature .tshp-card__title::after {
	content: none !important;
	display: none !important;
}
/* 主題對 .entry-content a 常加底線/改色 —— 卡片整張是連結,鎖回原樣。 */
.tshp-mfeature .tshp-card a,
.tshp-mfeature .tshp-card a:link,
.tshp-mfeature .tshp-card a:visited,
.tshp-mfeature .tshp-card a:hover {
	text-decoration: none !important;
	box-shadow: none !important;
}
.tshp-mfeature .tshp-card__title { color: var(--tshp-text) !important; }
.tshp-mfeature .tshp-card__price { color: var(--tshp-text) !important; }

/* ---- Hero:桌面版底圖背景 ------------------------------------------------- */
.tshp-mfeature__hero {
	position: relative;
	border-radius: var(--tshp-radius);
	overflow: hidden;
	background-color: #eef1f7;
	background-image: var(--tshp-mf-bg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;   /* 填滿整個容器高度:標頭固定在上、波浪固定在下 */
	padding: 12% 4% 20px;         /* 上邊留白 = 讓出底圖標頭區(約寬度 12%);下邊收窄約 10px */
}

/* ---- 桌面版:carousel 外殼在桌面是透明容器,viewport 不捲動,箭頭隱藏 ------- */
.tshp-mfeature__carousel { position: relative; }
.tshp-mfeature__viewport { position: relative; }
.tshp-mfeature__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 桌面版不需要箭頭。用 !important + 疊 .tshp-mfeature 提高權重,壓過父主題
   對 .entry-content button 的顯示規則(否則箭頭會在桌面現形、還被當一般 inline
   元素擠進版面把卡片頂上去)。 */
.tshp-mfeature .tshp-mfeature__nav { display: none !important; }

/* ---- 手機/平板(<900px):直式底圖 + 一次一張的左右輪播 --------------------- */
/* 底圖量測(post-recommand-bg-mobile.webp 941x1672,9:16):標頭(logo+文字+閃電
   分隔線)結束於高度 33%、底部波浪起於高度 94%,中間 61% 是留白。用 background-size:
   100% 100% 填滿容器(圖比例已接近容器 → 幾乎不變形),padding 上 62%(讓開標頭)/
   下 11%(露出底部波浪)讓卡片剛好落在中間留白帶。 */
@media (max-width: 899px) {
	.tshp-mfeature__hero {
		background-image: var(--tshp-mf-bg-m);
		background-size: 100% 100%;
		background-position: top center;
		padding: 62% 14px 11%;   /* 上邊讓開高身標頭;下邊露出波浪 */
	}

	/* 輪播可視窗:橫向捲動 + scroll-snap,一次對齊「一張」(不露出鄰張)。 */
	.tshp-mfeature__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tshp-mfeature__viewport::-webkit-scrollbar { display: none; }

	.tshp-mfeature__grid {
		display: flex !important;
		grid-template-columns: none;
		gap: 0;
		padding: 0;
	}
	.tshp-mfeature__grid > .tshp-card {
		flex: 0 0 100%;
		max-width: 100%;
		scroll-snap-align: center;
	}

	/* 左右箭頭:容器左右兩側、正圓形白底黑箭頭,垂直置中於卡片。
	   父主題(WoodMart)會給 <button> 加 min-width/padding/height,把圓鈕撐成橢圓,
	   所以盒模型全部 !important 鎖死成 36x36 正圓(比照 tshp-showcase.css 的箭頭)。 */
	.tshp-mfeature .tshp-mfeature__nav {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box !important;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 4;
		flex: 0 0 auto;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		max-width: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		color: #111111 !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
		cursor: pointer;
		line-height: 0 !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		transition: opacity 0.15s ease;
	}
	.tshp-mfeature__nav svg { display: block; width: 22px; height: 22px; }
	.tshp-mfeature__nav--prev { left: -6px; }
	.tshp-mfeature__nav--next { right: -6px; }
	.tshp-mfeature__nav:disabled { opacity: 0.32; cursor: default; }
}