/*
文章卡片轮播共用CSS：首页和分类归档页加载（见functions.php的条件enqueue）。
配色/字号/圆角/hover等视觉token统一记在docs/视觉样式规范_配色字号交互.md。
*/

/* 文章卡片横向滑动轮播（配合mu-plugins/obago-post-carousels.php），首页"最近更新"/"热门文章"/"热门分类"
   和一级分类页（从零开始/日常生活）的"热门文章"共用。滑动手感用原生CSS scroll-snap实现，不引入额外的轮播JS库——横向滚动容器
   本身天生支持触屏滑动/触控板横滑/shift+滚轮，箭头按钮只是给纯鼠标用户多一个入口（JS在
   mu-plugin里，只是调用scrollBy）。桌面端一屏4张卡（flex-basis 25%减去gap），≤767px
   （Astra的手机断点）一屏1张卡，靠横向滚动触达，不做分页。 */
.obago-post-carousel-wrap {
	position: relative;
}
.obago-post-carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* 原生滚动条改成下面的圆点翻页指示器，这里把滚动条本身隐藏掉（scrollbar-width:none对
	   Firefox，::-webkit-scrollbar对Chrome/Safari/Edge），横向滑动手势不受影响。 */
	scrollbar-width: none;
	/* overflow-x非visible时overflow-y也会被强制成auto，容器会在上下边缘裁掉卡片hover时的
	   translateY(-4px)和下方阴影。上下留出padding给位移和阴影（阴影0 12px 24px，向下约36px），
	   再用等量负margin抵消，页面排版位置不变。 */
	padding: 8px 0 36px;
	margin: -8px 0 -36px;
}
.obago-post-carousel::-webkit-scrollbar {
	display: none;
}
.obago-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	/* 上面轮播容器的下方padding会盖到圆点区域，而外层wrap是position:relative、绘制层级高于
	   普通流元素；圆点也设成relative（且在DOM里排在后面），才能叠在上面、保证可点击。 */
	position: relative;
}
.obago-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(43, 42, 40, 0.15);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.obago-carousel-dot.is-active {
	background: #3E8FC4;
	transform: scale(1.25);
}
/* 卡片渲染在WordPress页面的.entry-content容器里（Page模板本来就会把正文包一层.entry-content，
   不是只有文章才有），style.css里的`.entry-content a`（权重0,1,1：一个class+一个元素）会把
   卡片里任何<a>都染上蓝字+下划线。卡片内部有分类/标题/Read More好几个独立链接（不能整体包
   一个<a>，HTML不允许<a>嵌套<a>），每一处需要自定义颜色/下划线的链接都单独用"元素+class"
   （比如`a.obago-post-card-thumb-link`）这种权重追平`.entry-content a`的写法覆盖。 */
.obago-post-card {
	flex: 0 0 calc(25% - 15px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(43, 42, 40, 0.08);
	background: #FFFFFF;
}
/* 轮播卡片和"欧爸都聊些什么"栏目卡片（Spectra容器，网格的直接子元素）共用同一个hover上浮效果。 */
.obago-post-card,
.obago-category-grid > .wp-block-spectra-container {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.obago-post-card:hover,
.obago-category-grid > .wp-block-spectra-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(43, 42, 40, 0.10);
}
a.obago-post-card-thumb-link {
	display: block;
	text-decoration: none;
}
.obago-post-card-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #EDF5FA;
	overflow: hidden;
}
.obago-post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* .obago-post-card-body用flex column，.obago-post-card-excerpt设flex:1把下面的footer
   （日期+Read More）推到底部；footer内部justify-content:space-between让日期靠左、
   Read More靠右——不管摘要几行，Read More始终贴在卡片右下角。 */
.obago-post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 20px;
}
.obago-post-card-cats {
	display: block;
	font-size: 12px;
	margin-bottom: 6px;
}
.obago-post-card-cats a {
	color: #3E8FC4;
	text-decoration: none;
}
/* hover走全站原生的通用链接hover色`a:hover,a:focus{color:var(--ast-global-color-1)}`
   （珊瑚橙#E8834B），跟分类归档页卡片网格的分类标签（category-page.css）hover行为保持一致。 */
.obago-post-card-cats a:hover {
	color: #E8834B;
}
.obago-post-card-title {
	font-size: 16px;
	line-height: 1.4;
	margin: 0 0 8px;
}
.obago-post-card-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #2B2A28;
	text-decoration: none;
}
/* 整卡可点击（stretched link）：标题链接的::after铺满整张卡片（.obago-post-card是定位容器），
   卡片空白处点击等于点标题。分类标签链到别的分类页、Read More有自己的hover色，这两类链接
   单独抬到遮罩层上面，保留各自的点击目标和hover效果。 */
.obago-post-card {
	position: relative;
}
.obago-post-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.obago-post-card-cats a,
a.obago-post-card-readmore {
	position: relative;
	z-index: 1;
}
/* 文章卡片的摘要（get_the_excerpt()）和分类卡片的分类描述共用这一条规则/同一个class。 */
.obago-post-card-excerpt {
	font-size: 13px;
	line-height: 1.5;
	color: #6B6862;
	margin: 0 0 12px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.obago-post-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.obago-post-card-date {
	font-size: 13px;
	color: #6B6862;
}
a.obago-post-card-readmore {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: #E8834B;
	text-decoration: none;
	white-space: nowrap;
}
a.obago-post-card-readmore:hover {
	color: #C96B34;
}
/* 箭头字符（›‹）字形在字体里偏下，flex居中是按内容区居中不是按字形视觉重心，加一点不对称的
   padding-bottom把内容区往上顶一点，让箭头看起来居中。 */
.obago-carousel-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0 0 8px;
	border-radius: 999px;
	border: 1px solid rgba(43, 42, 40, 0.12);
	background: #FFFFFF;
	color: #2B2A28;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.obago-carousel-prev {
	left: 8px;
}
.obago-carousel-next {
	right: 8px;
}

/* 轮播一屏几张卡：≥1100px 4张（上面的默认值）、481~1099px 2张、≤480px 1张，跟首页"欧爸都聊些什么"
   栏目卡片网格（home-page.css）的断点一致；分类页正文区更窄，≥1100px改成一屏3张（category-page.css）。圆点页数由JS按scrollWidth/clientWidth计算，不用跟着改。 */
@media (max-width: 1099px) {
	.obago-post-card {
		flex: 0 0 calc(50% - 10px);
	}
}
@media (max-width: 480px) {
	.obago-post-card {
		flex: 0 0 100%;
	}
}
@media (max-width: 767px) {
	.obago-carousel-nav {
		display: none;
	}
}