/**
 * 黑田媽 · 首頁 CSS
 * by 卡卡東工作室 · Phase 3.7
 *
 * 對齊設計稿 黑田媽-首頁設計-standalone.html（除頁首頁尾，3.8 處理）
 *
 * 區段：
 *   1. Hero  — bg-warm + 條紋 + 左對齊內容（480px desktop / 400px mobile）
 *   2. 本週新品 — 走 shortcode [kkd_this_week]，CSS 在 category-templates.css
 *   3. 三大分類入口 — paper bg + border + 上半色塊 + 下半文字
 *   4. 熱銷回購 — 走 shortcode [kkd_hot_sellers]，CSS 在 category-templates.css
 *
 * 載入：functions.php is_front_page() 時 enqueue
 */

/* ==================================================================
 * Hero
 * ================================================================== */
.kkd-home-hero {
	padding-top: 48px;
}
.kkd-home-hero__inner {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	background-color: #ECE3D2;
}
/* 條紋 placeholder（沒 hero 圖時顯示） */
.kkd-home-hero:not(.has-image) .kkd-home-hero__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(90,74,58,0.05) 0px, rgba(90,74,58,0.05) 1px, transparent 1px, transparent 14px);
	pointer-events: none;
}
/* Hero 圖 */
.kkd-home-hero__pic {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.kkd-home-hero__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 有圖時，文字加左到右漸層 overlay 確保可讀性 */
.kkd-home-hero.has-image .kkd-home-hero__content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 60%, rgba(255,255,255,0) 100%);
	z-index: 0;
	pointer-events: none;
}
.kkd-home-hero.has-image .kkd-home-hero__text {
	position: relative;
	z-index: 1;
}
/* 左上角灰色 label（提示 placeholder，client 換圖後可拿掉） */
.kkd-home-hero__placeholder {
	position: absolute;
	top: 24px;
	left: 24px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	color: rgba(90,74,58,0.5);
	text-transform: uppercase;
	z-index: 2;
}
.kkd-home-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-left: 64px;
	padding-right: 64px;
	z-index: 3;
}
.kkd-home-hero__text {
	max-width: 560px;
}
.kkd-home-hero__eyebrow {
	font-size: 12px;
	color: var(--kkd-sumi);
	letter-spacing: 0.25em;
	margin-bottom: 24px;
	text-transform: uppercase;
}
.kkd-home-hero__title {
	font-family: var(--kkd-font-serif);
	font-size: 48px;
	line-height: 1.4;
	color: var(--kkd-ink);
	margin: 0 0 20px;
	font-weight: 400;
}
.kkd-home-hero__desc {
	color: var(--kkd-inkgray);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 40px;
}
.kkd-home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--kkd-ink);
	color: var(--kkd-paper) !important;
	padding: 16px 32px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color .25s ease;
	border: 1px solid var(--kkd-ink);
}
.kkd-home-hero__cta:hover {
	background: var(--kkd-sumi);
	border-color: var(--kkd-sumi);
}

/* ==================================================================
 * 分類入口（Phase 3.14 改 ACF Repeater，column 數依 count 動態）
 *   3 → 1×3, 4 → 2×2, 5 → 1×5, 6 → 3×2, 其他 fallback 3 col
 *   平板 5/6 張壓回 2 欄；手機（≤768）一律 1 欄 stack
 * ================================================================== */
.kkd-home-cats {
	padding-top: 96px;
}
.kkd-home-cats__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}
.kkd-home-cats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.kkd-home-cats__grid--4 { grid-template-columns: repeat(2, 1fr); }
.kkd-home-cats__grid--5 { grid-template-columns: repeat(5, 1fr); }
.kkd-home-cats__grid--6 { grid-template-columns: repeat(3, 1fr); }

.kkd-home-cat {
	display: block;
	background: var(--kkd-paper);
	border: 1px solid var(--kkd-rule);
	text-decoration: none;
	color: inherit;
	transition: border-color .25s ease, transform .25s ease;
}
.kkd-home-cat:hover {
	border-color: var(--kkd-sumi);
	transform: translateY(-2px);
}

.kkd-home-cat__image {
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: var(--kkd-cream);
	background-size: cover;
	background-position: center;
}
.kkd-home-cat.has-image .kkd-home-cat__image {
	background-color: transparent;
}
.kkd-home-cat__image .kkd-ph-label {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	color: rgba(90,74,58,0.5);
	text-transform: uppercase;
}
.kkd-home-cat__eyebrow {
	font-size: 11px;
	color: var(--kkd-inkgray);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.kkd-home-cat__body {
	padding: 28px;
}
.kkd-home-cat__body h3 {
	font-family: var(--kkd-font-serif);
	font-size: 20px;
	color: var(--kkd-ink);
	margin: 0 0 12px;
	font-weight: 400;
	line-height: 1.4;
}
.kkd-divider-line {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--kkd-sumi);
	margin-bottom: 16px;
}
.kkd-home-cat__body p {
	color: var(--kkd-inkgray);
	font-size: 13px;
	line-height: 1.7;
	margin: 0 0 20px;
}
.kkd-home-cat__more {
	color: var(--kkd-sumi);
	font-size: 13px;
	letter-spacing: 0.1em;
	transition: color .25s ease;
}
.kkd-home-cat:hover .kkd-home-cat__more {
	color: var(--kkd-matcha);
}

/* ==================================================================
 * Responsive
 * ================================================================== */
@media (max-width: 1024px) {
	.kkd-home-hero__inner { height: 420px; }
	.kkd-home-hero__title { font-size: 36px; }
	.kkd-home-hero__content { padding-left: 40px; padding-right: 40px; }

	/* 平板：5/6 張壓 2 欄；3/4 維持 */
	.kkd-home-cats__grid--5,
	.kkd-home-cats__grid--6 { grid-template-columns: repeat(2, 1fr); }
	.kkd-home-cats__grid { gap: 16px; }
	.kkd-home-cat__image { height: 180px; }
	.kkd-home-cat__body { padding: 20px; }
	.kkd-home-cat__body h3 { font-size: 18px; }
}

@media (max-width: 768px) {
	/* 手機：一律 1 欄 stack */
	.kkd-home-cats__grid,
	.kkd-home-cats__grid--3,
	.kkd-home-cats__grid--4,
	.kkd-home-cats__grid--5,
	.kkd-home-cats__grid--6 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.kkd-home-hero {
		padding-top: 24px;
	}
	.kkd-home-hero__inner {
		height: 400px;
	}
	.kkd-home-hero__content {
		align-items: flex-end;
		padding: 0;
	}
	.kkd-home-hero__text {
		padding: 0 20px 32px;
		max-width: none;
	}
	.kkd-home-hero__eyebrow {
		font-size: 11px;
		margin-bottom: 16px;
	}
	.kkd-home-hero__title {
		font-size: 28px;
		margin-bottom: 12px;
	}
	.kkd-home-hero__desc {
		font-size: 12px;
		line-height: 1.7;
		margin-bottom: 24px;
	}
	.kkd-home-hero__cta {
		padding: 12px 20px;
		font-size: 13px;
		gap: 8px;
	}

	.kkd-home-cats { padding-top: 64px; }
	.kkd-home-cats__grid { gap: 12px; }
	.kkd-home-cat__image { height: 140px; }
	.kkd-home-cat__body { padding: 20px; }
	.kkd-home-cat__body h3 { font-size: 17px; }
	.kkd-home-cat__body p { font-size: 12px; }
}