/**
 * Ethantheme Components
 * ----------------------------------------------------
 * 组件类：button / card / input / badge / link / icon / avatar / divider
 *
 * 这些类同时是古藤堡 Block Style 的底层样式。
 * 编辑器内通过 Block Style 切换，HTML 中以 is-style-xxx 形式呈现。
 */

/* =========================================================
 * 1. Button
 * --------------------------------------------------------
 * 基类 .eth-btn + 修饰符
 * Block Style 映射：
 *   is-style-eth-primary    → .eth-btn--primary
 *   is-style-eth-secondary  → .eth-btn--secondary
 *   is-style-eth-outline    → .eth-btn--outline
 *   is-style-eth-ghost      → .eth-btn--ghost
 *   is-style-eth-soft       → .eth-btn--soft
 * ========================================================= */
.eth-btn,
.wp-block-button.is-style-eth-primary .wp-block-button__link,
.wp-block-button.is-style-eth-secondary .wp-block-button__link,
.wp-block-button.is-style-eth-outline .wp-block-button__link,
.wp-block-button.is-style-eth-ghost .wp-block-button__link,
.wp-block-button.is-style-eth-soft .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eth-space-2xs);
	padding: 0.7em 1.5em;
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-semibold);
	line-height: 1.1;
	border: 1px solid transparent;
	border-radius: var(--eth-radius-m);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--eth-transition-s),
		background var(--eth-transition-s),
		color var(--eth-transition-s),
		border-color var(--eth-transition-s),
		box-shadow var(--eth-transition-s);
}

.eth-btn:hover,
.wp-block-button.is-style-eth-primary .wp-block-button__link:hover,
.wp-block-button.is-style-eth-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-eth-outline .wp-block-button__link:hover,
.wp-block-button.is-style-eth-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-eth-soft .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Primary */
.eth-btn--primary,
.wp-block-button.is-style-eth-primary .wp-block-button__link {
	background: var(--eth-primary);
	color: var(--eth-light);
	box-shadow: var(--eth-shadow-s);
}
.eth-btn--primary:hover,
.wp-block-button.is-style-eth-primary .wp-block-button__link:hover {
	background: var(--eth-primary-d-1);
	box-shadow: var(--eth-shadow-m);
}

/* Secondary */
.eth-btn--secondary,
.wp-block-button.is-style-eth-secondary .wp-block-button__link {
	background: var(--eth-secondary);
	color: var(--eth-light);
	box-shadow: var(--eth-shadow-s);
}
.eth-btn--secondary:hover,
.wp-block-button.is-style-eth-secondary .wp-block-button__link:hover {
	background: var(--eth-secondary-d-1);
}

/* Outline */
.eth-btn--outline,
.wp-block-button.is-style-eth-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--eth-primary);
	color: var(--eth-primary);
}
.eth-btn--outline:hover,
.wp-block-button.is-style-eth-outline .wp-block-button__link:hover {
	background: var(--eth-primary);
	color: var(--eth-light);
}

/* Ghost */
.eth-btn--ghost,
.wp-block-button.is-style-eth-ghost .wp-block-button__link {
	background: var(--eth-primary-5);
	border-color: var(--eth-primary-20);
	color: var(--eth-primary);
}
.eth-btn--ghost:hover,
.wp-block-button.is-style-eth-ghost .wp-block-button__link:hover {
	background: var(--eth-primary-10);
	border-color: var(--eth-primary-40);
}

/* Soft */
.eth-btn--soft,
.wp-block-button.is-style-eth-soft .wp-block-button__link {
	background: var(--eth-primary-10);
	color: var(--eth-primary);
	border-color: var(--eth-primary-10);
}
.eth-btn--soft:hover,
.wp-block-button.is-style-eth-soft .wp-block-button__link:hover {
	background: var(--eth-primary-20);
	box-shadow: var(--eth-shadow-s);
}

/* Size modifiers */
.eth-btn--sm { font-size: var(--eth-fs-xs); padding: 0.5em 1em; }
.eth-btn--lg { font-size: var(--eth-fs-body); padding: 0.9em 2em; }
.eth-btn--block { width: 100%; }
.eth-btn--pill { border-radius: var(--eth-radius-full); }

/* =========================================================
 * 2. Card
 * --------------------------------------------------------
 * 通用卡片容器，用于 loop 项、产品卡、特性卡
 * Block Style 映射：is-style-eth-card
 * ========================================================= */
.eth-card {
	display: grid;
	gap: var(--eth-space-xs);
	padding: var(--eth-space-m);
	background: var(--eth-bg-surface);
	color: var(--eth-text-body);
	border-radius: var(--eth-radius-m);
	box-shadow: var(--eth-shadow-s);
	transition: transform var(--eth-transition-m),
		box-shadow var(--eth-transition-m);
}

.eth-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--eth-shadow-l);
}

.eth-card--flat {
	box-shadow: none;
	border: 1px solid var(--eth-border);
}

.eth-card--primary {
	background: var(--eth-primary);
	color: var(--eth-light);
}

.eth-card--muted {
	background: var(--eth-bg-muted);
}

/* 卡片标题统一处理 */
.eth-card__title {
	color: inherit;
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-semibold);
}

.eth-card--primary .eth-card__title,
.eth-card--secondary .eth-card__title {
	color: var(--eth-light);
}

/* =========================================================
 * 3. Form Inputs
 * --------------------------------------------------------
 * 注意：Fluent Forms 自带样式，这里仅样式化原生 input/textarea/select
 * 与简短接触表单
 * ========================================================= */
.eth-input,
input[type="text"].eth-input,
input[type="email"].eth-input,
input[type="url"].eth-input,
input[type="tel"].eth-input,
input[type="password"].eth-input,
input[type="search"].eth-input,
textarea.eth-input,
select.eth-input {
	padding: 0.65em 0.9em;
	background: var(--eth-bg-surface);
	color: var(--eth-text-title);
	font-size: var(--eth-fs-body);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-m);
	box-shadow: var(--eth-shadow-xs);
	transition: border-color var(--eth-transition-s),
		box-shadow var(--eth-transition-s);
	outline: 0;
	width: 100%;
}

.eth-input:focus {
	border-color: var(--eth-primary);
	box-shadow: 0 0 0 3px var(--eth-primary-20);
}

.eth-input::placeholder {
	color: var(--eth-text-muted);
}

.eth-input:invalid {
	border-color: var(--eth-error);
}

/* =========================================================
 * 4. Badge
 * ========================================================= */
.eth-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--eth-space-3xs);
	padding: 0.3em 0.8em;
	background: var(--eth-primary-10);
	color: var(--eth-primary);
	font-size: var(--eth-fs-xs);
	font-weight: var(--eth-fw-medium);
	border-radius: var(--eth-radius-full);
	line-height: 1.2;
}

.eth-badge--secondary { background: var(--eth-secondary-10); color: var(--eth-secondary); }
.eth-badge--tertiary  { background: var(--eth-tertiary-10); color: var(--eth-tertiary); }
.eth-badge--success   { background: var(--eth-success-10); color: var(--eth-success); }
.eth-badge--error     { background: var(--eth-error-10); color: var(--eth-error); }
.eth-badge--neutral   { background: var(--eth-dark-10); color: var(--eth-text-title); }

/* =========================================================
 * 5. Link（语义化链接，带下划线动画）
 * ========================================================= */
.eth-link {
	color: var(--eth-link);
	font-weight: var(--eth-fw-medium);
	box-shadow: inset 0 -2px var(--eth-primary-20);
	transition: box-shadow var(--eth-transition-s),
		color var(--eth-transition-s);
}

.eth-link:hover {
	color: var(--eth-link-hover);
	box-shadow: inset 0 -2px var(--eth-primary);
}

/* =========================================================
 * 6. Divider
 * ========================================================= */
.eth-divider {
	width: 100%;
	height: 1px;
	background: var(--eth-border);
	border: 0;
	margin: var(--eth-space-m) 0;
}

.eth-divider--vertical {
	width: 1px;
	height: 100%;
	margin: 0 var(--eth-space-s);
}

/* =========================================================
 * 7. Avatar
 * ========================================================= */
.eth-avatar {
	width: var(--eth-space-2xl);
	height: var(--eth-space-2xl);
	border-radius: var(--eth-radius-full);
	object-fit: cover;
	box-shadow: var(--eth-shadow-s);
}

.eth-avatar--sm { width: var(--eth-space-l); height: var(--eth-space-l); }
.eth-avatar--lg { width: var(--eth-space-3xl); height: var(--eth-space-3xl); }

/* =========================================================
 * 8. Loop 卡片专用（产品/文章列表）
 * --------------------------------------------------------
 * .eth-loop-item 是循环项基础类
 * 与 template-parts/loops/ 配合使用
 * ========================================================= */
.eth-loop-item {
	display: flex;
	flex-direction: column;
	background: var(--eth-bg-surface);
	border-radius: var(--eth-radius-m);
	overflow: hidden;
	box-shadow: var(--eth-shadow-s);
	transition: transform var(--eth-transition-m),
		box-shadow var(--eth-transition-m);
}

.eth-loop-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--eth-shadow-l);
}

.eth-loop-item__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--eth-bg-muted);
}

.eth-loop-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--eth-transition-l);
}

.eth-loop-item:hover .eth-loop-item__media img {
	transform: scale(1.05);
}

.eth-loop-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs);
	padding: var(--eth-space-m);
	flex: 1;
}

.eth-loop-item__title {
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-semibold);
	color: var(--eth-text-title);
}

.eth-loop-item__title a {
	color: inherit;
}

.eth-loop-item__title a:hover {
	color: var(--eth-primary);
}

.eth-loop-item__meta {
	display: flex;
	gap: var(--eth-space-xs);
	font-size: var(--eth-fs-xs);
	color: var(--eth-text-muted);
}

.eth-loop-item__excerpt {
	color: var(--eth-text-body);
	font-size: var(--eth-fs-small);
	line-height: var(--eth-lh-body);
}

/* 列表式 loop */
.eth-loop-item--list {
	flex-direction: row;
}

.eth-loop-item--list .eth-loop-item__media {
	width: 40%;
	aspect-ratio: 4 / 3;
}

.eth-loop-item--list .eth-loop-item__body {
	width: 60%;
}

@media (max-width: 768px) {
	.eth-loop-item--list {
		flex-direction: column;
	}
	.eth-loop-item--list .eth-loop-item__media,
	.eth-loop-item--list .eth-loop-item__body {
		width: 100%;
	}
}

/* 紧凑式 loop */
.eth-loop-item--compact {
	flex-direction: row;
	align-items: center;
	gap: var(--eth-space-m);
	padding: var(--eth-space-s);
	box-shadow: none;
	border: 1px solid var(--eth-border);
}

.eth-loop-item--compact .eth-loop-item__media {
	width: 80px;
	aspect-ratio: 1;
	border-radius: var(--eth-radius-s);
	flex-shrink: 0;
}

.eth-loop-item--compact .eth-loop-item__body {
	padding: 0;
	flex: 1;
}

.eth-loop-item--compact .eth-loop-item__title {
	font-size: var(--eth-fs-body);
}