/* Affiliate Observer — 卡片样式(契约 §3.6:clean / restrained / responsive)
 *
 * 为什么是现在这个样子
 * --------------------
 * 1. **卡面是实心白,不跟随正文底色。** 上一版用 currentColor + 透明底,理由写在
 *    当时的注释里:"深浅主题通吃"。那个理由回答的是这个站**没有**的问题 ——
 *    GolfHubz 是浅色站,不会切深色。而它**有**的问题是:Kadence 自定义器把
 *    `.content-bg`(承载正文的 <article>)设成了 #7ae282 亮绿。透明卡坐在亮绿上
 *    没有自己的表面,读起来就是"图片和文字散落在绿底上"。实心白卡在绿底上立得住,
 *    而且亚马逊商品图本身就是白底 —— 白卡面让商品图**无缝融进卡面**,不会出现
 *    一个包着图片的方框。
 *
 * 2. **间距写在 .ao-card 上,不写在容器上。** 正文卡由 card_html() 直接输出,
 *    没有 .ao-cards 包裹(那层只包文末那一组)。早先把 margin 只写在容器上,
 *    结果正文卡的上下间距是 0,直接顶在段落上。
 *
 * 3. **CTA 和披露是标记里的真文本,不是 CSS content 注进去的。** 披露尤其不能走
 *    ::after —— 那不进 DOM 文本、辅助技术未必读得到,而它存在的意义恰恰是被读到。
 */
.ao-cards {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	margin: 0 0 1em;
}

.ao-card {
	display: flex;
	align-items: center;
	gap: 0.9em;

	/* 正文卡的间距在这里(见文件头第 2 条)。 */
	margin: 1.3em 0;
	padding: 0.8em 0.9em;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

	text-decoration: none;
	color: #1a202c;
	line-height: 1.4;
	transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* 文末那一组由 .ao-cards 的 gap 负责间距,卡片自己让位。 */
.ao-cards .ao-card {
	margin: 0;
}

.ao-card img {
	display: block;
	flex: 0 0 auto;
	width: 104px;
	height: 104px;
	/* 商品图长宽比不一,contain 保证不裁掉主体;白卡面上留白是隐形的。 */
	object-fit: contain;
}

.ao-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
	min-width: 0; /* 允许长标题在 flex 子项里收缩,否则 clamp 不生效 */
}

.ao-card-title {
	font-size: 0.95em;
	font-weight: 600;
	color: #1a202c;

	/* 三行而不是两行:亚马逊标题把颜色/尺码放在**末尾**,两行正好会把它截掉,
	 * 而尺码恰恰是读者判断"这个链接是不是我要的那双"的依据。 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA 只是视觉上的按钮 —— 点击仍由外层那个唯一的 <a> 承担。
 * 链接里不能再嵌链接,所以这里是 span,不是 a。 */
.ao-card-cta {
	display: inline-block;
	padding: 0.42em 0.85em;
	background: #1f2937;
	color: #fff;
	border-radius: 6px;
	font-size: 0.84em;
	font-weight: 600;
	line-height: 1.25;
}

.ao-card-disclosure {
	font-size: 0.72em;
	color: #6b7280;
	line-height: 1.3;
}

.ao-card:hover {
	border-color: rgba(0, 0, 0, 0.22);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);
}

.ao-card:hover .ao-card-title {
	text-decoration: underline;
}

.ao-card:focus-visible {
	outline: 2px solid #1f2937;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.ao-card {
		gap: 0.75em;
		padding: 0.7em;
	}

	.ao-card img {
		width: 84px;
		height: 84px;
	}

	/* 窄屏上按钮占满正文区宽度,避免和标题抢同一行。 */
	.ao-card-cta {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-card {
		transition: none;
	}
}

/* Native runtime forms (v12). These are not cards: single/list/table. */
.ao-native { margin: 1.25rem 0; }
.ao-native-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ao-native-item, .ao-native-single { margin: 0; }
.ao-native-link { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; text-decoration: none; }
.ao-native-title { font-weight: 600; }
.ao-native-cta { font-weight: 600; text-decoration: underline; }
.ao-native-disclosure { display: block; width: 100%; font-size: .75rem; opacity: .75; }
.ao-compare-table { width: 100%; border-collapse: collapse; }
.ao-compare-table th, .ao-compare-table td { text-align: left; padding: .5rem; border-bottom: 1px solid rgba(0,0,0,.12); vertical-align: top; }
.ao-compare-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }


/* Universal A/B: B = boxed recommendation block. A keeps the original native list. */
.ao-native--boxed {
	--ao-box-bg: #f7f8fa;
	--ao-box-border: #d8dde4;
	--ao-divider: #dde2e8;
	--ao-text: #20252b;
	--ao-muted: #59636e;
	--ao-action: #145ea8;
	--ao-action-hover: #0f4e8d;
	--ao-focus: #086bd6;
	box-sizing: border-box;
	margin: 1.5rem 0;
	padding: 1rem 1.125rem .875rem;
	background: var(--ao-box-bg);
	border: 1px solid var(--ao-box-border);
	border-radius: 8px;
	color: var(--ao-text);
}
.ao-native--boxed .ao-native-heading {
	margin: 0 0 .375rem;
	padding: 0;
	font-size: .9375rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--ao-text);
}
.ao-native--boxed .ao-native-list {
	margin: 0;
	padding: 0;
}
.ao-native--boxed .ao-native-item {
	min-width: 0;
	margin: 0;
	padding: 0;
}
.ao-native--boxed .ao-native-item + .ao-native-item {
	border-top: 1px solid var(--ao-divider);
}
.ao-native--boxed .ao-native-link {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 168px;
	align-items: center;
	gap: 1rem;
	min-height: 64px;
	padding: .75rem 0;
	color: inherit;
	text-decoration: none;
}
.ao-native--boxed .ao-native-title {
	min-width: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ao-text);
}
.ao-native--boxed .ao-native-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 168px;
	min-height: 40px;
	padding: .5rem .75rem;
	border: 1px solid var(--ao-action);
	border-radius: 5px;
	font-size: .875rem;
	line-height: 1.25;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ao-action);
	background: transparent;
	text-decoration: none;
}
.ao-native--boxed .ao-native-link:hover .ao-native-title {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-underline-offset: .14em;
}
.ao-native--boxed .ao-native-link:hover .ao-native-cta {
	color: #fff;
	background: var(--ao-action-hover);
	border-color: var(--ao-action-hover);
}
.ao-native--boxed .ao-native-link:focus-visible {
	outline: 3px solid var(--ao-focus);
	outline-offset: 3px;
	border-radius: 3px;
}
.ao-native--boxed .ao-native-disclosure {
	display: block;
	width: auto;
	margin: .375rem 0 0;
	padding: .625rem 0 0;
	border-top: 1px solid var(--ao-divider);
	font-size: .8125rem;
	line-height: 1.45;
	font-weight: 400;
	color: var(--ao-muted);
	opacity: 1;
}
.ao-native--boxed .ao-native-item .ao-native-disclosure {
	display: none;
}
@media (max-width: 520px) {
	.ao-native--boxed {
		margin: 1.375rem 0;
		padding: .9375rem;
		border-radius: 7px;
	}
	.ao-native--boxed .ao-native-heading {
		margin-bottom: .25rem;
	}
	.ao-native--boxed .ao-native-link {
		grid-template-columns: minmax(0, 1fr);
		gap: .625rem;
		min-height: 0;
		padding: .875rem 0;
	}
	.ao-native--boxed .ao-native-cta {
		width: 100%;
		min-height: 44px;
	}
	.ao-native--boxed .ao-native-disclosure {
		margin-top: .25rem;
	}
}


/* Universal A/B: D = inline editorial list. No container, no rules, no button. */
.ao-native--inline {
	margin: 1.35rem 0 1.5rem;
	padding: 0;
	background: transparent;
	border: 0;
}
.ao-native--inline .ao-native-intro {
	margin: 0 0 .45rem;
	color: #374151;
	font-size: 1em;
	line-height: 1.55;
}
.ao-native--inline .ao-native-list {
	display: block;
	list-style: disc;
	margin: 0;
	padding-left: 1.15rem;
}
.ao-native--inline .ao-native-item {
	margin: .2rem 0;
	padding: 0;
}
.ao-native--inline .ao-native-link {
	display: inline;
	color: inherit;
	text-decoration: none;
}
.ao-native--inline .ao-native-title {
	font-weight: 600;
}
.ao-native--inline .ao-native-cta {
	margin-left: .25em;
	color: #145ea8;
	font-size: .9em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .12em;
	white-space: nowrap;
}
.ao-native--inline .ao-native-link:hover .ao-native-title {
	text-decoration: underline;
	text-underline-offset: .12em;
}
.ao-native--inline .ao-native-item .ao-native-disclosure {
	display: none;
}
.ao-native--inline .ao-native-disclosure {
	margin: .35rem 0 0;
	font-size: .75rem;
	line-height: 1.4;
	color: #6b7280;
	opacity: 1;
}
@media (max-width: 520px) {
	.ao-native--inline .ao-native-cta {
		white-space: normal;
	}
}