/* byZhen 全屏轮播增强样式 */

/* ================= 组合容器 =================
   JS 动态创建 .av-fs-header-group，并【插在 .avia-slideshow 内部】。
   原因：滑块把 click 事件委托在 .avia-slideshow 上（实例就挂在它身上），
   横线一旦被移出 .avia-slideshow，点击切换就失效。务必保持横线留在里面。
   容器绝对定位于左侧中部，内部顺序：横线 → 整体标题 → 整体描述 → 按钮组。 */
.avia-fullscreen-slider .av-fs-header-group{
	position:absolute;
	left:50px;
	top:50%;
	transform:translateY(-50%);
	z-index:30;
	max-width:44%;
	text-align:left;
	pointer-events:none;   /* 文字不挡视频；横线/按钮单独开 auto */
}

/* 改动2：整体固定标题与描述（不随幻灯片切换） */
.avia-fullscreen-slider .av-fs-header-group .av-fullscreen-widget-title{
	position:static;
	left:auto;
	top:auto;
	transform:none;
	max-width:none;
	color:#fff;
}
.avia-fullscreen-slider .av-fs-widget-title{
	font-size:clamp(28px,4vw,54px);
	font-weight:700;
	line-height:1.12;
	margin:0 0 .45em;
	letter-spacing:.02em;
	text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.avia-fullscreen-slider .av-fs-widget-desc{
	font-size:clamp(13px,1.2vw,16px);
	line-height:1.7;
	margin:0;
	color:#fff;
	opacity:.92;
	text-shadow:0 1px 14px rgba(0,0,0,.5);
}
/* 描述已支持 HTML（后台 textarea 走 wpautop + wp_kses_post），
   这里控制自动生成的段落间距，避免 </p><p> 造成的额外空白 */
.avia-fullscreen-slider .av-fs-widget-desc p{
	margin:0 0 .9em;
}
.avia-fullscreen-slider .av-fs-widget-desc p:last-child{
	margin-bottom:0;
}

/* ===== 按钮组（胶囊描边 CTA）=====
   描边与 hover 填充色统一为 #e8c8a7；hover 时金色从左向右填充、文字转深色。 */
.avia-fullscreen-slider .av-fs-widget-actions{
	margin-top:36px;
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	pointer-events:auto;   /* 父块 .av-fs-header-group 是 pointer-events:none */
}
.avia-fullscreen-slider .av-fs-btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border-radius:999px;
	border:1px solid #e8c8a7;
	padding:14px 28px;
	font-size:11px;
	font-weight:400;
	line-height:1;
	letter-spacing:.32em;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
	color:#e8d9ad;
	background:transparent;
	cursor:pointer;
	transition:color .5s ease, border-color .5s ease;
}
/* 文字压在填充层之上 */
.avia-fullscreen-slider .av-fs-btn span{
	position:relative;
	z-index:1;
}
/* hover 填充：从左向右展开 */
.avia-fullscreen-slider .av-fs-btn::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:0;
	background:#e8c8a7;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.avia-fullscreen-slider .av-fs-btn:hover::before,
.avia-fullscreen-slider .av-fs-btn:focus::before{
	transform:scaleX(1);
}
.avia-fullscreen-slider .av-fs-btn:hover,
.avia-fullscreen-slider .av-fs-btn:focus{
	color:#0d0d0d;
	border-color:#e8c8a7;
	text-decoration:none;
}
/* 第二个按钮：同色号但半透明描边，保留主次层次 */
.avia-fullscreen-slider .av-fs-btn-ghost{
	border-color:rgba(232,200,167,.55);
}
.avia-fullscreen-slider .av-fs-btn-ghost:hover,
.avia-fullscreen-slider .av-fs-btn-ghost:focus{
	border-color:#e8c8a7;
}

/* 每帧标题选择"控制导航右侧"后，隐藏默认 caption 位置，只在导航右侧显示 */
.avia-fullscreen-slider .av-slideshow-caption.caption_nav_right{
	display:none !important;
}

/* 横线容器：从原来的「底部居中」改为「容器顶部、左对齐」 */
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots{
	position:static;
	width:auto;
	height:auto;
	bottom:auto;
	left:auto;
	z-index:auto;
	text-align:left;
	margin:0 0 30px;
	line-height:1;
	pointer-events:auto;   /* 父块是 pointer-events:none，横线要可点击切换 */
}

/* ===== 横线本身：修正抬升 + 放大点击热区 =====
   主题 wb-slider-dots.css 用 .avia-fullscreen-slider .avia-slideshow-dots a
   （优先级 0,2,1 + !important）把横线锁成 height:1px; padding:0，鼠标根本点不中。
   这里用 3 个 class（0,3,1）+ !important 压过它：
   上下各撑 11px 透明内边距（总高 23px），再用 box-sizing:content-box +
   background-clip:content-box 保证金色仍然只画中间那 1px，外观不变。 */
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots a{
	bottom:0 !important;
	vertical-align:middle;
	box-sizing:content-box !important;
	height:1px !important;
	padding:11px 0 !important;
	background-clip:content-box !important;
	-webkit-background-clip:content-box !important;
	cursor:pointer !important;
	pointer-events:auto !important;
}

/* ===== 修复：激活/悬停横线「变粗」 =====
   根因：主题 wb-slider-dots.css 用【简写】background:#d8b177 !important 设置激活色，
   简写会把 background-clip 一并重置为 border-box，导致上面撑出的 23px 热区被整块填成金色。
   且该规则优先级 (0,3,1) 与热区规则相同、又后加载 → 主题胜出。
   这里改用【非简写】background-color，并用 (0,4,1) 选择器压过主题，同时锁死 clip。 */
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots a:not(.active){
	background-color:rgba(216,177,119,.45) !important;
	background-image:none !important;
	background-clip:content-box !important;
	-webkit-background-clip:content-box !important;
}
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots a.active,
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots a:hover{
	background-color:#d8b177 !important;
	background-image:none !important;
	background-clip:content-box !important;
	-webkit-background-clip:content-box !important;
}

/* 改动1：激活导航线【正后方】显示对应小字标题（参考 georgemounir.com） */
/* 不能放进 <a> 里：wb-slider-dots.css 给 <a> 设了 text-indent:-9999px!important+overflow:hidden，
   放进去会被推离屏幕并裁掉。这里作为 <a> 的兄弟节点插在其后。 */
.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots .av-fs-active-title{
	display:inline-block;
	position:static;
	bottom:auto;
	margin-left:16px;
	font-size:12px;
	font-weight:300;
	line-height:1;
	color:#ead9b6;
	opacity:.95;
	white-space:nowrap;
	vertical-align:middle;
	letter-spacing:.12em;
	pointer-events:none;
	text-shadow:0 1px 10px rgba(0,0,0,.55);
}

@media (max-width:767px){
	.avia-fullscreen-slider .av-fs-header-group{ left:20px; max-width:88%; }
	.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots{ margin:0 0 20px; }
	.avia-fullscreen-slider .av-fs-header-group .avia-slideshow-dots .av-fs-active-title{ font-size:10px; margin-left:10px; letter-spacing:.08em; }
	.avia-fullscreen-slider .av-fs-widget-actions{ margin-top:26px; gap:10px; }
	.avia-fullscreen-slider .av-fs-btn{ padding:12px 22px; font-size:10px; letter-spacing:.22em; }
}