/*
首页专属CSS：只在is_front_page()加载（见functions.php的条件enqueue），不影响其他页面。
配色/字号/圆角/hover等视觉token统一记在docs/视觉样式规范_配色字号交互.md。
*/

/* "欧爸都聊些什么"四个栏目卡片网格（Spectra容器，className在页面内容里加）。Spectra只有782px/480px
   两个断点：>782px固定4列，导致783~1099px每张卡片只剩约170~250px宽、背景图被裁成细长条。
   这里把这段补成2列，跟分类归档页文章网格的1099px断点对齐。Spectra原生规则是
   body .wp-block-spectra-container:where(...)（权重0,1,1），双class（0,2,0）即可覆盖，不需要!important。 */
/* 栏目卡片整张是一个<a>（Spectra容器htmlTag:a + linkURL，标题本身是纯文本，避免<a>嵌套<a>）。
   style.css的`.entry-content a`/`a:hover`（蓝字+下划线）会作用到整张卡片，这里恢复成区块设置的
   文字颜色（--spectra-text-color）、去掉整卡下划线，只给标题保留下划线作为可点击提示。
   Astra给h1~h6单独设了颜色，标题要显式inherit才会跟随卡片颜色。 */
.obago-category-grid > a.wp-block-spectra-container,
.obago-category-grid > a.wp-block-spectra-container:hover {
	color: var(--spectra-text-color, #FFFFFF);
	text-decoration: none;
}
.obago-category-grid > a.wp-block-spectra-container h3 {
	color: inherit;
	text-decoration: underline;
}
/* 悬停时整张图淡入一层15%黑色压暗，文字保持白色不变色（字压在明暗不一的照片上，换任何彩色都会
   在部分卡片上对比度不够）。::before已被Spectra用作底部渐变（z-index:0），这里用::after叠在它上面；卡片里的
   标题/描述被Spectra设成position:relative; z-index:3，始终在这层压暗上方。 */
.obago-category-grid > a.wp-block-spectra-container::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.obago-category-grid > a.wp-block-spectra-container:hover::after {
	opacity: 1;
}
@media (min-width: 783px) and (max-width: 1099px) {
	.obago-category-grid.wp-block-spectra-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 首页"欧爸都聊些什么"/"最近更新"/"热门分类"/"热门文章"四个区块共用的间距阶梯（className在页面内容里加）：
   区块上下 60/48/40、左右 32/24/20、区块标题下方 40/32/24，断点跟Spectra的782px/480px对齐。
   ≤480px左右用20px而不是更常见的16px，是为了跟Astra手机端导航栏的左右padding（20px）对齐，内容左边缘
   跟Logo对齐。三个core/group的padding是写在元素style属性里的内联样式，Spectra区块的padding是
   权重0,4,0的动态CSS，这里只能用!important统一覆盖——区块编辑器里填的间距数值不再生效，改间距改这里。 */
.obago-home-section {
	padding: 60px 32px !important;
}
.obago-home-section-title {
	padding-bottom: 40px !important;
}
@media (max-width: 782px) {
	.obago-home-section {
		padding: 48px 24px !important;
	}
	.obago-home-section-title {
		padding-bottom: 32px !important;
	}
}
@media (max-width: 480px) {
	.obago-home-section {
		padding: 40px 20px !important;
	}
	.obago-home-section-title {
		padding-bottom: 24px !important;
	}
}

/* 首页Hero翻页幻灯片（Spectra原生spectra/slider，className在页面内容里加）。幻灯片是页面最外层的
   通栏区块：第2页是原Hero根容器（2eb1f6cd，padding/contentSize三档断点+左右2栏网格）原样放进去，
   左侧文字排版跟改版前一致；第1页是"从零开始"分类入口，背景插画+居中文字。
   - Spectra默认把.swiper-wrapper设成align-items:center、每页高度各自按内容算；这里改成stretch，
     让第1页跟随第2页的高度，切换时Hero整体高度不跳动。
   - 箭头尺寸/离边距离走区块属性（arrowDistance/navigationSize，responsiveControls里lg/md/sm
     三档各一套），Spectra会生成带[data-spectra-id]的高权重内联CSS，CSS里不再重复设。三档尺寸
     按第2页左右padding（80/50/30px）定，箭头整个落在padding里，不压左栏文字。
   - 箭头/圆点配色走Spectra自己的CSS变量，跟上面"最近更新"轮播的白底圆按钮/蓝色圆点保持一致；
     圆点同时叠在插画和白底上，加一圈白色描边保证两种底色上都看得见。
   权重：Spectra原生规则最高到0,3,0（.wp-block-spectra-slider .swiper .swiper-wrapper），
   这里统一用.obago-hero-slider.wp-block-spectra-slider双class开头压过去。 */
.obago-hero-slider.wp-block-spectra-slider {
	padding: 0;
	--spectra-arrow-background-color: #FFFFFF;
	--spectra-arrow-background-color-hover: #FFFFFF;
	--spectra-arrow-color: #2B2A28;
	--spectra-arrow-color-hover: #3E8FC4;
	--spectra-pagination-color: rgba(43, 42, 40, 0.25);
	--spectra-pagination-color-hover: rgba(43, 42, 40, 0.45);
	--spectra-pagination-color-active: #3E8FC4;
}
.obago-hero-slider.wp-block-spectra-slider .swiper .swiper-wrapper {
	align-items: stretch;
}
.obago-hero-slider.wp-block-spectra-slider .swiper .swiper-slide {
	height: auto;
	min-height: 0;
}
.obago-hero-slider.wp-block-spectra-slider .swiper-slide .slide-content {
	min-height: 0;
}
.obago-hero-slider.wp-block-spectra-slider .swiper-button-prev,
.obago-hero-slider.wp-block-spectra-slider .swiper-button-next {
	border: 1px solid rgba(43, 42, 40, 0.12);
}
.obago-hero-slider.wp-block-spectra-slider .swiper-pagination .swiper-pagination-bullet {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* 第1页：背景插画是一个<picture>（Custom HTML区块），按1920/783/481三个断点给四张不同构图的图，
   浏览器只下载命中的那一张；四张都是"中间留空、元素围一圈"的构图，文字居中叠在留空处。
   插画绝对定位铺满、object-fit:cover，不参与撑高，高度跟随第2页。
   文字两套：>782px显示完整的小标题+标题+说明（.obago-hero-copy-full），≤782px换成"澳洲生活/
   从零开始"两行错开的短标题（.obago-hero-copy-short），按钮共用。782/480对齐Spectra自己的断点。 */
.obago-hero-slider.wp-block-spectra-slider .obago-hero-slide-banner .slide-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.obago-hero-slider .obago-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.obago-hero-slider .obago-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.obago-hero-slider .obago-hero-copy-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
}
/* 文字列宽度随屏宽收窄（1286px起封顶720px），标题字号同样是流式的（区块属性clamp(32px,3.33vw,48px)），
   窄屏时文字收在画面中间留空处，不往两侧插画上铺。 */
.obago-hero-slider .obago-hero-copy-wrap > .obago-hero-copy {
	max-width: min(720px, 56vw);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.obago-hero-slider .obago-hero-copy .obago-hero-copy-short {
	display: none;
}
/* 小标题/说明跟标题一起随屏宽缩放（1440px起都是18px，1024px及以下回到主题默认的14px/15px）。
   说明的换行写在文案里（四个阶段一行、说明一行），不用text-wrap:balance——它不认中文词边界，会把词拆到两行。 */
.obago-hero-slider .obago-hero-copy h6.obago-hero-copy-full {
	font-size: clamp(14px, 1.25vw, 18px);
	letter-spacing: 0.08em;
}
.obago-hero-slider .obago-hero-copy p.obago-hero-copy-full {
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.75;
}
/* 783~1099px时完整文案相对画面太宽，会压到两侧插画，给文字区垫一层带羽化边缘的暖白底。 */
@media (min-width: 783px) and (max-width: 1099px) {
	.obago-hero-slider .obago-hero-copy-wrap > .obago-hero-copy {
		background: rgba(250, 247, 242, 0.85);
		border-radius: 16px;
		box-shadow: 0 0 32px 24px rgba(250, 247, 242, 0.85);
	}
}
@media (max-width: 782px) {
	.obago-hero-slider .obago-hero-copy .obago-hero-copy-full {
		display: none;
	}
	.obago-hero-slider .obago-hero-copy .obago-hero-copy-short {
		display: block;
		margin: 0 0 12px;
		font-size: clamp(40px, 7.6vw, 60px);
		font-weight: 800;
		line-height: 1.15;
		color: #2B2A28;
	}
	.obago-hero-slider .obago-hero-copy-short span {
		display: block;
	}
	/* 两行各往左/右错开半个字，第二行用主题蓝。 */
	.obago-hero-slider .obago-hero-copy-short span:first-child {
		transform: translateX(-0.6em);
	}
	.obago-hero-slider .obago-hero-copy-short span:last-child {
		transform: translateX(0.6em);
		color: #3E8FC4;
	}
}

/* 首页Hero区块（标题+头像图）的padding/gap/字号/背景色是直接改Spectra区块JSON属性
   （post_content）做的，不在CSS里。当前断点现状详见docs/首页Hero模块_CSS与断点整理.md，
   如果以后需要CSS层面才能做到的Hero专属修复（比如网格子项min-width这类区块属性管不到的
   问题），再建assets/css/home-hero.css。 */
/* 说明文案里的四个阶段名链到对应二级分类页：主题蓝、无下划线、hover深蓝，跟分类页描述里同一组
   链接的样式一致（style.css的.ast-archive-description a）；用更具体的选择器压过.entry-content a的下划线。 */
.obago-hero-slider .obago-hero-copy p.obago-hero-copy-full a {
	color: #3E8FC4;
	text-decoration: none;
}
.obago-hero-slider .obago-hero-copy p.obago-hero-copy-full a:hover {
	color: #2E6F9C;
}