/*
 * 主题基础样式：设计令牌取自 theme.json 调色板，数值与 blog-next 逐一对应。
 * 全站零阴影，层次只靠 1px 边框、留白与背景色差。
 */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

/* FSE 会在根容器上注入块间距与根内距，全部清零后由自建容器控制横向留白。 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

.wp-site-blocks > * + * {
	margin-top: 0;
}

main.wp-block-group {
	flex: 1 0 auto;
}

img {
	height: auto;
	max-width: 100%;
}

/* ===== 容器 ===== */

.hkt-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1152px;
	padding-left: 16px;
	padding-right: 16px;
	width: 100%;
}

.hkt-container--medium {
	max-width: 1024px;
}

.hkt-container--narrow {
	max-width: 768px;
}

/* ===== 页面外框（纵向留白）===== */

.hkt-archive,
.hkt-entry-detail {
	padding-bottom: 40px;
	padding-top: 40px;
}

.hkt-photo-detail {
	padding-bottom: 32px;
	padding-top: 32px;
}

.hkt-page-detail {
	padding-bottom: 56px;
	padding-top: 56px;
}

/* Hero 要贴住页头，顶部留白交给 Hero 后的第一个区块。 */
.hkt-home {
	padding-bottom: 56px;
}

/* ===== 页眉 ===== */

.hkt-header {
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid rgba(229, 229, 229, 0.7);
	position: sticky;
	top: 0;
	-webkit-backdrop-filter: blur(8px);
	z-index: 30;
}

.hkt-header-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	padding-bottom: 12px;
	padding-top: 12px;
}

p.hkt-logo {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.4;
	margin: 0;
}

.hkt-logo a {
	color: inherit;
	text-decoration: none;
}

.hkt-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hkt-nav a {
	border-radius: 9999px;
	color: var(--wp--preset--color--gray-600);
	display: block;
	font-size: 14px;
	padding: 6px 12px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hkt-nav a:hover {
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--gray-900);
}

@media (min-width: 640px) {
	.hkt-nav {
		gap: 8px;
	}
}

/* ===== 页脚 ===== */

footer.hkt-footer {
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-bottom: 32px;
	padding-top: 32px;
}

p.hkt-footer-links {
	font-size: 12px;
	margin: 0 auto 12px;
	text-align: center;
}

.hkt-footer-links a {
	color: var(--wp--preset--color--gray-500);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hkt-footer-links a:hover {
	color: var(--wp--preset--color--gray-900);
	text-decoration: underline;
}

p.hkt-copy {
	color: var(--wp--preset--color--gray-500);
	font-size: 12px;
	margin: 0 auto;
	text-align: center;
}

/* ===== 列表页页头 ===== */

.hkt-archive-title {
	font-size: 24px;
	margin: 0;
}

p.hkt-archive-count {
	color: var(--wp--preset--color--gray-500);
	font-size: 14px;
	margin: 4px 0 0;
}

p.hkt-empty {
	color: var(--wp--preset--color--gray-500);
	font-size: 14px;
	padding-bottom: 80px;
	padding-top: 80px;
	text-align: center;
}

.hkt-empty--list {
	padding-bottom: 64px;
	padding-top: 64px;
}

/* ===== 分类 pill ===== */

.hkt-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.hkt-pills .wp-block-terms-query,
.hkt-pills .wp-block-term-template,
.hkt-pills .wp-block-term > * {
	display: contents;
}

.hkt-pills .wp-block-term,
.hkt-pills p.hkt-pill {
	align-items: center;
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 9999px;
	color: var(--wp--preset--color--gray-700);
	display: flex;
	font-size: 14px;
	gap: 4px;
	margin: 0;
	padding: 6px 16px;
	position: relative;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hkt-pills .wp-block-term:hover,
.hkt-pills p.hkt-pill:hover,
.hkt-pills .wp-block-term.is-active,
.hkt-pills p.hkt-pill.is-active {
	border-color: var(--wp--preset--color--gray-900);
}

/* 首页的分类入口 hover 时连文字一起变深，列表页只变边框。 */
.hkt-pills--home .wp-block-term:hover {
	color: var(--wp--preset--color--gray-900);
}

.hkt-pills .is-active {
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

.hkt-pills a {
	color: inherit;
	text-decoration: none;
}

/* 整块可点：链接的伪元素铺满 pill，计数才不会把点击区切走。 */
.hkt-pills a::after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.hkt-pills .wp-block-term-name {
	font-size: inherit;
	margin: 0;
}

.hkt-pills .wp-block-term-count {
	color: var(--wp--preset--color--gray-500);
	font-size: 12px;
	margin: 0;
}

/* ===== 首页 Hero ===== */

.wp-block-cover.hkt-hero {
	align-items: flex-end;
	background-color: var(--wp--preset--color--gray-900);
	min-height: 60vh;
	padding: 0;
}

.hkt-hero .wp-block-cover__image-background {
	opacity: 0.7;
}

/* 容器宽度只由 .hkt-container 决定，不让核心的约束布局插手。 */
.hkt-hero .wp-block-cover__inner-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

.hkt-hero-body {
	padding-bottom: 56px;
	padding-top: 96px;
	width: 100%;
}

h1.hkt-hero-title {
	color: var(--wp--preset--color--white);
	font-size: 30px;
	margin: 0;
}

p.hkt-hero-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	margin: 12px 0 0;
	max-width: 576px;
}

@media (min-width: 640px) {
	h1.hkt-hero-title {
		font-size: 48px;
	}

	p.hkt-hero-text {
		font-size: 18px;
	}
}

/* ===== 首页区块 ===== */

/* 首个区块与 Hero 之间的留白，对应 Next 容器的 py-14。 */
.hkt-home > .hkt-hero + .hkt-section {
	margin-top: 56px;
}

.hkt-home > * + * {
	margin-top: 64px;
}

/* 区块本身就是栅格：标题与「更多」链接同一行基线对齐，其余子块整行铺开。 */
.hkt-section {
	align-items: baseline;
	column-gap: 8px;
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 16px;
}

.hkt-section > * {
	grid-column: 1 / -1;
	margin: 0;
}

.hkt-section > h2 {
	font-size: 20px;
	grid-column: 1;
}

.hkt-section > p {
	grid-column: 2;
	text-align: right;
}

h2.hkt-section-title {
	font-size: 20px;
	margin: 0;
}

a.hkt-section-more {
	color: var(--wp--preset--color--gray-500);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease;
}

a.hkt-section-more:hover {
	color: var(--wp--preset--color--gray-900);
}

/* 「最新动态」的标题行有两个链接，彼此之间不留文本节点。 */
.hkt-section-more + .hkt-section-more {
	margin-left: 12px;
}

.hkt-featured {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.hkt-featured {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hkt-featured > li {
	aspect-ratio: 1 / 1;
	background-color: var(--wp--preset--color--gray-100);
	border-radius: 12px;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.hkt-featured figure,
.hkt-featured a,
.hkt-featured img {
	height: 100%;
	margin: 0;
	width: 100%;
}

.hkt-featured img {
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hkt-featured > li:hover img {
	transform: scale(1.05);
}

h4.hkt-tile-caption {
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	bottom: 0;
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 400;
	left: 0;
	margin: 0;
	opacity: 0;
	padding: 8px;
	position: absolute;
	right: 0;
	text-align: left;
	transition: opacity 0.15s ease;
}

.hkt-featured > li:hover .hkt-tile-caption,
.hkt-featured > li:focus-within .hkt-tile-caption {
	opacity: 1;
}

/* 触屏没有 hover，标题必须常驻，否则这批照片在手机上等于没有名字。 */
@media (hover: none) {
	h4.hkt-tile-caption {
		opacity: 1;
	}
}

/* ===== 首页最新动态 ===== */

.hkt-mini-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 悬停底色铺满整条，负外边距抵掉自身的内距，条目间距仍是 12px。 */
.hkt-mini-list > li {
	border-radius: 8px;
	margin: -8px;
	padding: 8px;
	position: relative;
	transition: background-color 0.15s ease;
}

.hkt-mini-list > li:hover {
	background-color: var(--wp--preset--color--gray-50);
}

/* 列距要大于条目 8px 的外扩内距，两列的悬停底色才不会叠在一起。 */
.hkt-mini-list--mix {
	column-gap: 40px;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 12px;
}

@media (min-width: 768px) {
	.hkt-mini-list--mix {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hkt-mini-title a {
	color: inherit;
	text-decoration: none;
}

.hkt-mini-title a::after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

h3.hkt-mini-title {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 4px;
}

.hkt-mini-desc {
	margin: 2px 0 4px;
}

.hkt-mini-desc p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	color: var(--wp--preset--color--gray-500);
	display: -webkit-box;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
}

/* 分类与日期都是区块自己输出的 div，排成一行就不用再包一层 group。 */
.hkt-mini-meta {
	color: var(--wp--preset--color--gray-500);
	display: inline;
	font-size: 12px;
	margin: 0;
}

/* 分隔符由 CSS 补，避免留下多余节点；间距用边距而不是空格，模板里的缩进空白不会把它挤歪。 */
.hkt-mini-meta + .hkt-mini-meta::before {
	content: "·";
	margin: 0 6px;
}

.hkt-mini-meta a {
	color: inherit;
	text-decoration: none;
}

/* ===== 长文列表卡片 ===== */

.wp-block-post-template.hkt-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.hkt-cards > li {
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 16px;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 12px;
	position: relative;
	transition: border-color 0.15s ease;
}

.hkt-cards > li:hover {
	border-color: var(--wp--preset--color--gray-400);
}

.hkt-cards figure.hkt-card-thumb {
	flex: 0 0 auto;
	height: 96px;
	margin: 0;
	width: 128px;
}

.hkt-card-thumb img {
	border-radius: 12px;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* 日期/分类/地点三个子块直接落进这个网格的第三行，不再多包一层 group。 */
.hkt-card-body {
	column-gap: 8px;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	min-width: 0;
	row-gap: 0;
}

h2.hkt-card-title {
	font-size: 16px;
	font-weight: 500;
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hkt-card-title a {
	color: inherit;
	text-decoration: none;
}

.hkt-card-title a::after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/* core/post-excerpt 会在段落外再包一层 div，行数限制只能打在内层 p。 */
.hkt-card-desc {
	grid-column: 1 / -1;
	margin: 4px 0 0;
}

.hkt-card-desc p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--wp--preset--color--gray-500);
	display: -webkit-box;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
}

.hkt-card-meta {
	align-self: baseline;
	color: var(--wp--preset--color--gray-500);
	font-size: 12px;
	grid-row: 3;
	margin: 8px 0 0;
}

.hkt-card-meta a {
	color: inherit;
	text-decoration: none;
}

.hkt-card-meta time {
	color: inherit;
}

/* ===== 详情页共用 ===== */

/* core/post-terms 的外壳是 div，「← 返回 」由 prefix 属性带进来。 */
.hkt-back {
	font-size: 14px;
	margin: 0;
}

.hkt-back a {
	color: var(--wp--preset--color--gray-500);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hkt-back a:hover {
	color: var(--wp--preset--color--gray-900);
}

/* 详情页里「← 返回」是第一行，贴顶即可；404 页它在正文之后，需要自己的间距。 */
.hkt-page-detail .hkt-back {
	margin-top: 24px;
}

.hkt-entry-title {
	font-size: 30px;
	margin: 16px 0 0;
}

h1.hkt-entry-title:first-child {
	margin-top: 0;
}

.hkt-photo-title {
	font-size: 24px;
	margin: 24px 0 0;
}

.hkt-meta-row {
	align-items: baseline;
	color: var(--wp--preset--color--gray-500);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 4px 16px;
	margin: 12px 0 0;
}

.hkt-meta-row > * {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.hkt-meta-row time {
	color: inherit;
}

.hkt-photo-meta {
	margin: 8px 0 0;
}

/* 📍 写在 CSS 里：站点字符集是 utf8mb3，避免模板入库时被截断。 */
.hkt-loc::before {
	content: "\1F4CD ";
}

p.hkt-exif,
span.hkt-exif {
	color: var(--wp--preset--color--gray-500);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	margin: 0;
}

p.hkt-updated::before {
	content: "更新于 ";
}

.hkt-entry-hero,
.hkt-photo-image {
	border-radius: 16px;
	margin: 24px 0 0;
	width: 100%;
}

.hkt-photo-image {
	background-color: var(--wp--preset--color--gray-100);
	margin-top: 16px;
}

.hkt-entry-hero img,
.hkt-photo-image img {
	border-radius: 16px;
	display: block;
	width: 100%;
}

.hkt-entry-summary {
	border-left: 2px solid var(--wp--preset--color--gray-200);
	color: var(--wp--preset--color--gray-600);
	margin: 24px 0 0;
	padding-left: 16px;
}

.hkt-photo-desc {
	color: var(--wp--preset--color--gray-700);
	margin: 16px 0 0;
	white-space: pre-line;
}

.hkt-entry-summary p,
.hkt-photo-desc p {
	margin: 0;
}

p.hkt-photo-series {
	color: var(--wp--preset--color--gray-500);
	font-size: 14px;
	margin: 12px 0 0;
}

p.hkt-page-tagline {
	color: var(--wp--preset--color--gray-500);
	font-size: 14px;
	margin: 8px 0 0;
}

.hkt-prose-wrap {
	margin-top: 32px;
}

/* ===== 上/下篇 ===== */

.hkt-pager {
	border-top: 1px solid var(--wp--preset--color--gray-200);
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 56px;
	padding-top: 24px;
}

.hkt-pager--photo {
	margin-top: 40px;
}

/* 两栏都是「左新右旧」，靠 DOM 位置对齐，与核心的 next/previous 命名无关。 */
.hkt-pager > :last-child {
	text-align: right;
}

.hkt-pager a {
	color: inherit;
	text-decoration: none;
}

.hkt-pager .post-navigation-link__label {
	color: var(--wp--preset--color--gray-500);
}

.hkt-pager .post-navigation-link__title {
	display: block;
	font-weight: 500;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hkt-pager a:hover .post-navigation-link__title {
	text-decoration: underline;
}

/* ===== 动效降级 ===== */

@media (prefers-reduced-motion: reduce) {
	.hkt-featured img,
	.hkt-featured > li:hover img,
	.hkt-nav a,
	.hkt-pills .wp-block-term,
	.hkt-pills p.hkt-pill,
	.hkt-mini-list > li,
	.hkt-cards > li,
	.hkt-section-more,
	.hkt-back,
	.hkt-footer-links a,
	.hkt-pager a:hover .post-navigation-link__title {
		transition: none;
	}

	.hkt-featured > li:hover img {
		transform: none;
	}

	.hkt-featured > li:hover .hkt-tile-caption {
		opacity: 1;
	}
}