/**
 * Ethantheme Utilities
 * ----------------------------------------------------
 * 精简工具类（仅高频使用）
 * 完整 utility 列表参考设计系统.css，按需扩展
 */

/* =========================================================
 * 1. Display
 * ========================================================= */
.eth-d-block { display: block; }
.eth-d-inline { display: inline; }
.eth-d-inline-block { display: inline-block; }
.eth-d-flex { display: flex; }
.eth-d-grid { display: grid; }
.eth-d-none { display: none; }

@media (max-width: 768px) {
	.eth-d-none\@m { display: none; }
	.eth-d-block\@m { display: block; }
	.eth-d-flex\@m { display: flex; }
}

/* =========================================================
 * 2. Flex 工具
 * ========================================================= */
.eth-flex-row { flex-direction: row; }
.eth-flex-col { flex-direction: column; }
.eth-flex-wrap { flex-wrap: wrap; }
.eth-flex-1 { flex: 1; }
.eth-items-center { align-items: center; }
.eth-items-start { align-items: flex-start; }
.eth-items-end { align-items: flex-end; }
.eth-justify-center { justify-content: center; }
.eth-justify-between { justify-content: space-between; }
.eth-justify-start { justify-content: flex-start; }
.eth-justify-end { justify-content: flex-end; }
.eth-gap-2xs { gap: var(--eth-space-2xs); }
.eth-gap-xs { gap: var(--eth-space-xs); }
.eth-gap-s { gap: var(--eth-space-s); }
.eth-gap-m { gap: var(--eth-space-m); }
.eth-gap-l { gap: var(--eth-space-l); }

/* =========================================================
 * 3. Grid 工具
 * ========================================================= */
.eth-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eth-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eth-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.eth-grid-auto-xs { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.eth-grid-auto-s  { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.eth-grid-auto-m  { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.eth-grid-auto-l  { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); }

@media (max-width: 992px) {
	.eth-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.eth-grid-cols-2,
	.eth-grid-cols-3,
	.eth-grid-cols-4 { grid-template-columns: 1fr; }
}

/* =========================================================
 * 4. 文字
 * ========================================================= */
.eth-text-left { text-align: left; }
.eth-text-center { text-align: center; }
.eth-text-right { text-align: right; }
.eth-text-xs { font-size: var(--eth-fs-xs); }
.eth-text-s { font-size: var(--eth-fs-small); }
.eth-text-m { font-size: var(--eth-fs-body); }
.eth-text-l { font-size: var(--eth-fs-h4); }
.eth-text-xl { font-size: var(--eth-fs-h3); }
.eth-text-2xl { font-size: var(--eth-fs-h2); }
.eth-text-3xl { font-size: var(--eth-fs-h1); }
.eth-text-4xl { font-size: var(--eth-fs-hero); }

.eth-fw-medium { font-weight: var(--eth-fw-medium); }
.eth-fw-semibold { font-weight: var(--eth-fw-semibold); }
.eth-fw-bold { font-weight: var(--eth-fw-bold); }

.eth-text-muted { color: var(--eth-text-muted); }
.eth-text-title { color: var(--eth-text-title); }
.eth-text-primary { color: var(--eth-primary); }
.eth-text-secondary { color: var(--eth-secondary); }
.eth-text-invert { color: var(--eth-text-invert); }

/* =========================================================
 * 5. 间距（仅常用，完整版按需扩展）
 * ========================================================= */
.eth-mt-2xs { margin-top: var(--eth-space-2xs); }
.eth-mt-xs { margin-top: var(--eth-space-xs); }
.eth-mt-s { margin-top: var(--eth-space-s); }
.eth-mt-m { margin-top: var(--eth-space-m); }
.eth-mt-l { margin-top: var(--eth-space-l); }
.eth-mt-xl { margin-top: var(--eth-space-xl); }
.eth-mt-2xl { margin-top: var(--eth-space-2xl); }
.eth-mt-0 { margin-top: 0; }

.eth-mb-2xs { margin-bottom: var(--eth-space-2xs); }
.eth-mb-xs { margin-bottom: var(--eth-space-xs); }
.eth-mb-s { margin-bottom: var(--eth-space-s); }
.eth-mb-m { margin-bottom: var(--eth-space-m); }
.eth-mb-l { margin-bottom: var(--eth-space-l); }
.eth-mb-xl { margin-bottom: var(--eth-space-xl); }
.eth-mb-0 { margin-bottom: 0; }

.eth-pt-m { padding-top: var(--eth-space-m); }
.eth-pb-m { padding-bottom: var(--eth-space-m); }
.eth-p-m { padding: var(--eth-space-m); }
.eth-p-s { padding: var(--eth-space-s); }
.eth-p-xs { padding: var(--eth-space-xs); }

/* =========================================================
 * 6. 尺寸
 * ========================================================= */
.eth-w-full { width: 100%; }
.eth-w-auto { width: auto; }
.eth-max-w-narrow { max-width: var(--eth-container-narrow); margin-inline: auto; }
.eth-max-w-base { max-width: var(--eth-container); margin-inline: auto; }

/* =========================================================
 * 7. 颜色背景（仅高频）
 * ========================================================= */
.eth-bg-primary { background: var(--eth-primary); color: var(--eth-light); }
.eth-bg-primary-5 { background: var(--eth-primary-5); }
.eth-bg-primary-10 { background: var(--eth-primary-10); }
.eth-bg-surface { background: var(--eth-bg-surface); }
.eth-bg-muted { background: var(--eth-bg-muted); }
.eth-bg-body { background: var(--eth-bg-body); }

/* =========================================================
 * 8. 圆角 / 阴影 / 边框
 * ========================================================= */
.eth-radius-s { border-radius: var(--eth-radius-s); }
.eth-radius-m { border-radius: var(--eth-radius-m); }
.eth-radius-l { border-radius: var(--eth-radius-l); }
.eth-radius-full { border-radius: var(--eth-radius-full); }

.eth-shadow-s { box-shadow: var(--eth-shadow-s); }
.eth-shadow-m { box-shadow: var(--eth-shadow-m); }
.eth-shadow-l { box-shadow: var(--eth-shadow-l); }

.eth-border { border: 1px solid var(--eth-border); }
.eth-border-strong { border: 1px solid var(--eth-border-strong); }
.eth-border-t { border-top: 1px solid var(--eth-border); }
.eth-border-b { border-bottom: 1px solid var(--eth-border); }

/* =========================================================
 * 9. 定位
 * ========================================================= */
.eth-relative { position: relative; }
.eth-absolute { position: absolute; }
.eth-sticky { position: sticky; }
.eth-fixed { position: fixed; }

/* =========================================================
 * 10. 视觉
 * ========================================================= */
.eth-overflow-hidden { overflow: hidden; }
.eth-aspect-1 { aspect-ratio: 1; }
.eth-aspect-video { aspect-ratio: 16 / 9; }
.eth-aspect-4-3 { aspect-ratio: 4 / 3; }
.eth-aspect-3-4 { aspect-ratio: 3 / 4; }
.eth-object-cover { object-fit: cover; }
.eth-object-contain { object-fit: contain; }

/* clickable-parent 模式：让整张卡片可点击 */
.eth-clickable {
	position: relative;
}

.eth-clickable a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* 隐藏标题（SEO 友好） */
.eth-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}