/* 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;
	}
}