/*
 * ETheme-Block — Ethan 特性项
 *
 * 插件始终加载本文件，负责卡片结构、父模块样式和兼容兜底；主题皮肤
 * 只能在本文件之后覆盖视觉，不能替代这里的基础规则。
 *
 * 样式变体走两条路径，共用同一份规则：
 *   1. 3.0.30–3.0.34 已保存的独立内容 → standalone + is-style-eth-* 兼容路径
 *   2. 在 features 父块内 → 父块 style 属性输出的 etb-features--style-*
 * 因此父块内外的观感完全一致，且无需维护两份样式。
 *
 * 父块级属性（横向布局 / 图标形状与尺寸 / 密度 / 居中 / 底部按钮对齐）
 * 仍由父块负责，仅在父块内生效；独立使用时采用下列默认外观。
 */

/* =========================================================
 * 卡片基础
 * ========================================================= */
.etb-features__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs, 0.6rem);
	padding: var(--eth-space-m, 1.5rem);
	background: var(--eth-bg-surface, #fff);
	border-radius: var(--eth-radius-m, 0.8rem);
	box-shadow: var(--eth-shadow-s, 0 2px 6px rgba(0, 0, 0, 0.08));
	transition: transform var(--etb-duration-normal) ease, box-shadow var(--etb-duration-normal) ease, background-color var(--etb-duration-normal) ease, border-color var(--etb-duration-normal) ease;
}

.etb-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--eth-space-2xs, 0.6rem);
	font-size: 1.5rem;
	background: var(--eth-primary-10, #eef2ff);
	color: var(--eth-primary, #4f46e5);
	border-radius: var(--eth-radius-m, 0.8rem);
	transition: transform var(--etb-duration-normal) ease, background var(--etb-duration-normal) ease;
}

.etb-features__icon--img {
	width: auto;
	height: 2.75rem;
	padding: 0;
	object-fit: contain;
	background: transparent;
	border-radius: 0;
}

.etb-features__card .etb-features__title {
	font-family: var(--eth-font-heading, inherit);
	font-size: calc(var(--eth-fs-h3, 1.35rem) * 0.7);
	font-weight: var(--eth-fw-semibold, 600);
	line-height: var(--eth-lh-heading, 1.25);
	color: var(--eth-text-title, #111);
}

.etb-features__description {
	margin: 0;
	font-size: var(--eth-fs-body, 1rem);
	line-height: var(--eth-lh-body, 1.6);
	color: var(--eth-text-muted, #555);
}

.etb-features__description > :first-child {
	margin-top: 0;
}

.etb-features__description > :last-child {
	margin-bottom: 0;
}

.etb-features__description p,
.etb-features__description ul,
.etb-features__description ol {
	margin-block: 0 0.65em;
}

.etb-features__description ul,
.etb-features__description ol {
	padding-inline-start: 1.25em;
}

.etb-features__description li + li {
	margin-top: 0.3em;
}

.etb-features__description a:where(:not(.eth-btn, .etb-button-block__button, .wp-block-button__link)) {
	color: var(--eth-primary, #4f46e5);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
}

.etb-features__description > :is(.etb-button-block, .wp-block-button, .wp-block-buttons) {
	margin-top: var(--eth-space-s, 1rem);
}

.etb-features__action {
	display: flex;
}

/* =========================================================
 * 样式变体
 * 每组第一条为独立使用的区块样式，第二条为父块属性路径。
 * :where() 令区块样式分支保持 (0,1,0) 特异性，与基础规则同级，
 * 依靠声明顺序覆盖 —— 因此变体必须排在本节，且位于基础规则之后。
 * ========================================================= */

/* 描边 */
.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-outline),
.etb-features--style-outline .etb-features__card {
	border: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
	box-shadow: none;
}

/* 极简 */
.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-minimal),
.etb-features--style-minimal .etb-features__card {
	padding: var(--eth-space-s, 1rem) var(--eth-space-xs, 0.75rem);
	background: transparent;
	border-bottom: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
	border-radius: 0;
	box-shadow: none;
	transition: background-color var(--etb-duration-normal) ease, border-color var(--etb-duration-normal) ease;
}

.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-minimal):first-child,
.etb-features--style-minimal .etb-features__card:first-child {
	border-top: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
}

/* 聚光 */
.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-spotlight),
.etb-features--style-spotlight .etb-features__card {
	border: 1px solid var(--eth-primary-20, rgba(79, 70, 229, 0.2));
	box-shadow: none;
}

.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-spotlight) .etb-features__icon,
.etb-features--style-spotlight .etb-features__icon {
	background: var(--eth-primary, #4f46e5);
	color: var(--eth-light, #fff);
}

/* 顶部强调线 */
.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-accent-top),
.etb-features--style-accent-top .etb-features__card {
	border: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
	border-top: 0.25rem solid var(--eth-primary, #4f46e5);
	box-shadow: var(--eth-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* 顶部渐变 */
.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-gradient-top),
.etb-features--style-gradient-top .etb-features__card {
	overflow: hidden;
	border: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
	box-shadow: var(--eth-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-gradient-top)::before,
.etb-features--style-gradient-top .etb-features__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 0.25rem;
	border-radius: var(--eth-radius-m, 0.8rem) var(--eth-radius-m, 0.8rem) 0 0;
	background: linear-gradient(90deg, var(--eth-primary, #4f46e5), var(--eth-secondary, #0f766e));
}

/* =========================================================
 * 悬停
 * ========================================================= */
@media (hover: hover) {
	.etb-features__card.etb-feature-card--standalone:hover:not(:where(.is-style-eth-minimal)),
	.etb-features:not(.etb-features--style-minimal) .etb-features__card:hover {
		transform: translateY(-4px);
		box-shadow: var(--eth-shadow-m, 0 4px 12px rgba(0, 0, 0, 0.08));
	}

	.etb-features__card.etb-feature-card--standalone:hover:not(:where(.is-style-eth-minimal)) .etb-features__icon,
	.etb-features:not(.etb-features--style-minimal) .etb-features__card:hover .etb-features__icon {
		transform: scale(1.08);
	}

	.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-minimal):hover,
	.etb-features--style-minimal .etb-features__card:hover {
		background: var(--eth-primary-10, #eef2ff);
		border-bottom-color: var(--eth-primary-20, rgba(79, 70, 229, 0.2));
		transform: none;
		box-shadow: none;
	}

	.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-minimal):hover .etb-features__icon,
	.etb-features--style-minimal .etb-features__card:hover .etb-features__icon {
		transform: translateX(0.2rem);
	}
}

.etb-features__card.etb-feature-card--standalone:where(.is-style-eth-minimal):focus-within,
.etb-features--style-minimal .etb-features__card:focus-within {
	background: var(--eth-primary-10, #eef2ff);
	border-bottom-color: var(--eth-primary-20, rgba(79, 70, 229, 0.2));
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.etb-features__card,
	.etb-features__icon {
		transition: none;
	}
}