@charset "utf-8";
/* ==========================================================
   Great Bay Bio —— FAQ 板块样式
   文件：static/css/faq.css
   说明：1. 所有规则均以 .gbbfaq 前缀包裹，不影响站点其它样式。
        2. 颜色 / 圆角 / 字号 / 间距全部优先复用站点变量，
           断点与站点保持一致：1600 / 1440 / 1366（含1280）/ 768。
        3. 板块上下间距走 --ptb（100→80→70→50），与 Advantages、
           CTA 板块同一节奏；手机端字号走 --fs18 / --fs16（自动降为 14px）。
   ========================================================== */

/* ---------- 板块容器 ---------- */
.gbbfaq {
	margin-top: var(--ptb, 100px);
}

.gbbfaq_list {
	margin-top: var(--mt45p, 45px);
}

/* ---------- 单条卡片 ---------- */
.gbbfaq,
.gbbfaq_list,
.gbbfaq_item {
	max-width: 100%;
}
.gbbfaq_item {
	background: #fff;
	border: 1px solid #e6effb;
	border-radius: var(--border20, 20px);
	box-shadow: 0 2px 10px rgba(216, 231, 255, 0.45);
	overflow: hidden;
	transition: border-color 0.35s, box-shadow 0.35s;
}
.gbbfaq_item + .gbbfaq_item {
	margin-top: 20px;
}
.gbbfaq_item:hover,
.gbbfaq_item.gbbfaq_on {
	border-color: #cfe0f7;
	box-shadow: var(--boxshadow, 0 5px 20px rgba(216, 231, 255, 0.8));
}

/* ---------- 问题行 ---------- */
.gbbfaq_q {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 40px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.gbbfaq_qtxt {
	flex: 1;
	padding-right: 30px;
	font-size: var(--fs18, 18px);
	line-height: 1.45;
	font-weight: var(--b500, 500);
	color: #222;
	word-break: break-word;
	overflow-wrap: break-word;
	transition: color 0.3s, font-weight 0.3s;
}
.gbbfaq_item:hover .gbbfaq_qtxt,
.gbbfaq_item.gbbfaq_on .gbbfaq_qtxt {
	color: var(--blue, #0055a5);
}
.gbbfaq_item.gbbfaq_on .gbbfaq_qtxt {
	font-weight: var(--b600, 600);
}

/* ---------- 加减号图标（纯 CSS，不依赖字体图标） ---------- */
.gbbfaq_ico {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.gbbfaq_ico i {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	background: #9aa9bd;
	transition: transform 0.35s var(--power-3-ease-out, cubic-bezier(0.165, 0.84, 0.44, 1)),
		background 0.3s;
}
.gbbfaq_ico i:nth-child(1) {
	width: 16px;
	height: 1.5px;
	transform: translate(-50%, -50%);
}
.gbbfaq_ico i:nth-child(2) {
	width: 1.5px;
	height: 16px;
	transform: translate(-50%, -50%);
}
.gbbfaq_item:hover .gbbfaq_ico i,
.gbbfaq_item.gbbfaq_on .gbbfaq_ico i {
	background: var(--blue, #0055a5);
}
/* 展开：竖线收缩 —— “+” 变 “−” */
.gbbfaq_item.gbbfaq_on .gbbfaq_ico i:nth-child(2) {
	transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* ---------- 答案区（JS 控制高度做展开动画） ---------- */
.gbbfaq_a {
	height: 0;
	overflow: hidden;
	transition: height 0.4s var(--power-3-ease-out, cubic-bezier(0.165, 0.84, 0.44, 1));
}
.gbbfaq_ain {
	padding: 0 40px 30px;
	font-size: var(--fs16, 16px);
	line-height: 1.65;
	color: #666;
	text-align: justify;
	word-break: break-word;
	overflow-wrap: break-word;
}
.gbbfaq_ain p + p {
	margin-top: 12px;
}
.gbbfaq_ain a {
	color: var(--blue, #0055a5);
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-all;
}
.gbbfaq_ain a:hover {
	color: var(--qian, #1c93ff);
}

/* 键盘聚焦可见 */
.gbbfaq_q:focus-visible {
	outline: 2px solid rgba(0, 85, 165, 0.35);
	outline-offset: -2px;
	border-radius: var(--border20, 20px);
}

/* 尊重系统“减少动效”偏好 */
@media (prefers-reduced-motion: reduce) {
	.gbbfaq_item,
	.gbbfaq_qtxt,
	.gbbfaq_ico i,
	.gbbfaq_a {
		transition: none !important;
	}
}

/* ============================ 响应式 ============================
   断点与站点一致：1600 / 1440 / 1366（max-width 向下覆盖 1280 及以下）/ 768
   ============================================================== */

@media screen and (max-width: 1600px) {
	.gbbfaq_q {
		padding: 26px 36px;
	}
	.gbbfaq_ain {
		padding: 0 36px 28px;
	}
}

@media screen and (max-width: 1440px) {
	.gbbfaq_q {
		padding: 24px 32px;
	}
	.gbbfaq_ain {
		padding: 0 32px 26px;
	}
}

@media screen and (max-width: 1366px) {
	.gbbfaq_q {
		padding: 22px 28px;
	}
	.gbbfaq_qtxt {
		padding-right: 24px;
	}
	.gbbfaq_ain {
		padding: 0 28px 24px;
	}
	.gbbfaq_item + .gbbfaq_item {
		margin-top: 16px;
	}
}

/* ---------- 手机端（站点在此断点切换 .pc / .phone 版式） ---------- */
@media screen and (max-width: 768px) {
	.gbbfaq {
		margin-top: var(--ptb, 50px);
	}
	.gbbfaq_list {
		margin-top: var(--mt45p, 25px);
	}
	.gbbfaq_item {
		border-radius: var(--border10, 10px);
		box-shadow: 0 2px 8px rgba(216, 231, 255, 0.5);
	}
	.gbbfaq_item + .gbbfaq_item {
		margin-top: 12px;
	}
	.gbbfaq_q {
		padding: 16px 18px;
	}
	/* 字号交给站点变量：--fs18 在 768px 以下自动变为 14px */
	.gbbfaq_qtxt {
		padding-right: 14px;
		line-height: 1.4;
	}
	.gbbfaq_ico {
		width: 16px;
		height: 16px;
	}
	.gbbfaq_ico i:nth-child(1) {
		width: 13px;
		height: 1.5px;
	}
	.gbbfaq_ico i:nth-child(2) {
		width: 1.5px;
		height: 13px;
	}
	.gbbfaq_ain {
		padding: 0 18px 16px;
		line-height: 1.6;
		text-align: left;
	}
	.gbbfaq_q:focus-visible {
		border-radius: var(--border10, 10px);
	}
}

/* ---------- 小屏手机（≤480px）微调 ---------- */
@media screen and (max-width: 480px) {
	.gbbfaq_q {
		padding: 15px 15px;
	}
	.gbbfaq_qtxt {
		padding-right: 12px;
	}
	.gbbfaq_ain {
		padding: 0 15px 15px;
	}
}