/*
分类归档页专属CSS：只在is_archive()/is_home()加载（见functions.php的条件enqueue），
文章列表卡片网格，不影响首页/单篇文章/单页面。
配色/字号/圆角/hover等视觉token统一记在docs/视觉样式规范_配色字号交互.md。
*/

/* 文章列表用CSS Grid卡片网格，固定列数（不用auto-fill自动猜）——侧边栏占宽后内容区变窄，
   auto-fill的minmax判断容易在中间宽度意外退化成1列，行为不可预期。移动端优先：默认1列，
   ≥600px 2列，≥1100px 3列。 */
#main > .ast-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}
@media (min-width: 600px) {
	#main > .ast-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}
@media (min-width: 1100px) {
	#main > .ast-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 卡片网格顶部+左侧间距，照抄.ast-archive-description/.ast-article-single的断点保持统一。
   右侧/下不加内边距，这块区域没有独立的白色容器包裹，加了会显得莫名凹进去一块。
   ≤780px侧边栏掉到下方、右边不再有侧边栏的间隙，只留左边距会让卡片整体偏右，所以去掉左边距，
   让卡片跟上面的描述卡片左右对齐。 */
@media (max-width: 1200px) {
	#main > .ast-row {
		padding-top: 30px;
		padding-left: 30px;
	}
}
@media (max-width: 780px) {
	#main > .ast-row {
		padding-left: 0;
	}
}
@media (min-width: 1201px) {
	#main > .ast-row {
		padding-top: 40px;
		padding-left: 40px;
	}
}

.ast-row .ast-article-post {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid rgba(43,42,40,0.08);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-row .ast-article-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(43,42,40,0.10);
}
/* 悬停整张卡片时标题变蓝，跟首页轮播卡片的hover色（style.css里.entry-content a:hover的#2E6F9C）一致；
   不加下划线。没有这条时标题只在鼠标正好在标题上时才变色，且走全站a:hover的珊瑚橙。 */
.ast-row .ast-article-post:hover .entry-title a {
	color: #2E6F9C;
}
.ast-row .ast-article-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ast-row .post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ast-row .ast-blog-featured-section.post-thumb {
	margin: 0;
}
.ast-row .post-thumb-img-content img {
	object-fit: cover;
	width: 100%;
	display: block;
}
.ast-row .entry-title {
	font-size: 18px;
	line-height: 1.4;
	margin: 16px 20px 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ast-row .ast-blog-meta-container {
	margin: 0 20px;
}
.ast-row .entry-meta {
	font-size: 12px;
	color: #3E8FC4;
}
.ast-row .entry-meta a {
	color: #3E8FC4;
}
.ast-row .ast-excerpt-container {
	margin: 8px 20px 0;
	flex: 1;
}
.ast-row .ast-excerpt-container p {
	font-size: 14px;
	color: #6B6862;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
.ast-row .ast-read-more-container {
	margin: 12px 20px 20px;
}
.ast-row .ast-read-more-container a {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #E8834B;
}

/* "澳洲生活"分类页专属的"从零开始"阶段导航区块（见obago-life-category-stage-cards.php），
   跟上面.ast-archive-description是平级的独立白卡片容器，不是嵌套在描述卡片里面——内边距/圆角
   照抄.ast-archive-description同一套响应式断点（30px/40px + 16px圆角），margin-top撑开
   两个卡片之间的间距，视觉上是两块独立的卡片而不是一块。 */
.obago-stage-section {
	background: #FFFFFF;
	border-radius: 16px;
	margin-top: 24px;
}
@media (max-width: 1200px) {
	.obago-stage-section {
		padding: 30px;
	}
}
@media (min-width: 1201px) {
	.obago-stage-section {
		padding: 40px;
	}
}
/* 手机端（≤780px）去掉白色容器，卡片直接放在页面背景上，跟首页.obago-home-section的做法一致，
   卡片左右边缘落在容器边距（20px）那条线上，跟没有这层容器的二级子分类卡片网格对齐。
   标题+引导段落（.obago-stage-head）单独做成一张跟描述卡同样式的白卡片，不让文字直接落在背景上。
   电脑端保留白色容器，.obago-stage-head不加任何样式。 */
@media (max-width: 780px) {
	.obago-stage-section {
		background: transparent;
		border-radius: 0;
		padding: 0;
		margin-top: 24px;
	}
	.obago-stage-head {
		background: #FFFFFF;
		border-radius: 16px;
		padding: 20px;
	}
	.obago-stage-head > h2 {
		margin: 0;
	}
	/* 多带一层.obago-stage-section：下面的基础规则.obago-stage-head > p写在后面，同权重会盖掉这条。 */
	.obago-stage-section .obago-stage-head > p {
		margin-bottom: 0;
	}
}
/* 引导段落排版照抄.ast-archive-description原生的p{font-size:20px;line-height:1.65;font-weight:300}
   ——.obago-stage-section不是.ast-archive-description，拿不到这条原生规则，之前只补了font-size，
   漏了font-weight:300这个细光体，用默认字重(400)看起来比上面的描述文字更"深"更"粗"，不是颜色
   本身不同，是字重不同造成的视觉错觉。用直接子选择器只框住这一段引导文字，不影响下面卡片里
   字号更小的.obago-stage-card-body p。 */
.obago-stage-head > p {
	font-size: 20px;
	line-height: 1.65;
	font-weight: 300;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* "了解更多"（只在顶层"澳洲生活"页的两个区块标题右边有）：标题和按钮同一行两端对齐，
   引导段落占满下一行。按钮样式跟文章分享条的"复制链接"同一套描边胶囊。 */
.obago-stage-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 12px;
}
.obago-stage-head > p {
	grid-column: 1 / -1;
}
a.obago-stage-more {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #3E8FC4;
	border-radius: 999px;
	color: #3E8FC4;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
a.obago-stage-more:hover,
a.obago-stage-more:focus-visible {
	background: #3E8FC4;
	color: #FFFFFF;
}

/* "从零开始"阶段导航卡片本身——不是文章列表，所以用独立的class，不跟.ast-row/.ast-article-post
   这套文章卡片选择器混用；视觉上照抄同一套卡片token（16px圆角/hover上浮），保持两种卡片看起来一致。
   卡片套在首页同一个轮播外框里（.obago-post-carousel，滑动/圆点样式在components/post-carousel.css）：
   手机端（≤780px）左右滑动，≤480px一屏1张、481~780px一屏2张，跟首页轮播同一套断点；
   电脑端把轮播轨道还原成两列网格，隐藏箭头和圆点。 */
.obago-stage-cards {
	margin-top: 24px;
}
@media (max-width: 780px) {
	.obago-stage-cards .obago-stage-card {
		flex: 0 0 calc(50% - 10px);
		scroll-snap-align: start;
	}
}
@media (max-width: 480px) {
	.obago-stage-cards .obago-stage-card {
		flex: 0 0 100%;
	}
}
@media (min-width: 781px) {
	.obago-stage-cards .obago-post-carousel {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.obago-stage-cards .obago-carousel-nav,
	.obago-stage-cards .obago-carousel-dots {
		display: none;
	}
}
.obago-stage-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid rgba(43,42,40,0.08);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.obago-stage-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(43,42,40,0.10);
}
.obago-stage-card-thumb img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}
/* 卡片body撑满剩余高度、文章数margin-top:auto贴底，同一行卡片描述长短不一时文章数仍然对齐。 */
.obago-stage-card-body {
	padding: 16px 20px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.obago-stage-card-body h3 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.4;
	color: #2B2A28;
}
.obago-stage-card-body p {
	margin: 0;
	font-size: 14px;
	color: #6B6862;
}
/* 文章数跟文章卡片上的分类标签(.obago-post-card-cats)同一套小号蓝字。 */
.obago-stage-card-count {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #3E8FC4;
}
/* 区块没有标题/引导段（一级子类页）时，卡片网格直接贴着区块padding开始，不再额外留24px。 */
.obago-stage-section > .obago-stage-cards:first-child {
	margin-top: 0;
}
/* 一级子类页的"热门文章"轮播（卡片/轮播样式在post-carousel.css）。分类页有侧边栏，正文区比首页窄，
   ≥1100px一屏放3张而不是首页的4张；481~1099px 2张、≤480px 1张沿用post-carousel.css。 */
.obago-popular-section .obago-post-carousel-wrap {
	margin-top: 24px;
}
@media (min-width: 1100px) {
	.obago-popular-section .obago-post-card {
		flex: 0 0 calc((100% - 40px) / 3);
	}
}

/* 归档页想要跟文章页一样的"白色卡片"外观，靠的是astra-settings里archive-post-content-style
   这个DB option（unboxed→boxed，不是CSS能改的，是wp_options里astra-settings序列化数组的
   一个键，用wp eval读出整个数组改这一个键再写回去，没有对应的Customizer界面入口）——这一改
   让归档页body class从ast-plain-container变成跟文章页一样的ast-separate-container，
   .ast-archive-description因此拿到了原生白底。标签/作者/日期归档用的是同一个键，会一起变白，
   没有单独区分。 */

/* 归档页标题区（面包屑+分类名+描述，.ast-archive-description）内边距，照抄.ast-article-single
   的响应式断点保持统一（≤1200px时30px，>1200px时40px，四边等距）。选择器原样照抄原生的
   （权重相等），靠子主题加载顺序赢。 */
@media (max-width: 1200px) {
	body.archive .ast-archive-description {
		padding: 30px;
	}
}
@media (min-width: 1201px) {
	body.archive .ast-archive-description {
		padding: 40px;
	}
}
/* 手机端（≤780px）收到20px，跟下面栏目卡/文章卡的内边距一致，描述卡里的面包屑、标题、文字
   跟卡片里的文字左右对齐在同一条线上。 */
@media (max-width: 780px) {
	body.archive .ast-archive-description {
		padding: 20px;
	}
}

/* .ast-archive-description原生白底，跟全站卡片统一16px圆角。 */
body.archive .ast-archive-description {
	border-radius: 16px;
}

/* 手机端分类页的左右边距统一成20px，跟首页卡片、手机header的Logo/汉堡按钮、页尾对齐：
   Astra原生在≤544px把容器左右收到0.54em（约7px），545px以上本来就是20px；
   ≤780px侧边栏掉到下方后自带1em左右内边距，清掉才能跟上面的卡片对齐。
   只作用于分类页（body.archive），文章页不变。 */
@media (max-width: 544px) {
	body.archive.ast-separate-container #content .ast-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (max-width: 780px) {
	body.archive.ast-separate-container.ast-right-sidebar #secondary {
		padding-left: 0;
		padding-right: 0;
	}
}