/* ==========================================================================
   Genshi Clean — 页面组件
   原先由 Elementor / Element Pack 渲染的 6 个页面主体，这里用原生 HTML + CSS 承接。
   所有数值取自线上 Elementor 渲染后的计算样式（CDP 实测），逐项对齐。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 区块容器
   -------------------------------------------------------------------------- */
.gs-section {
	margin-inline: auto;
	padding: 60px var(--wp--preset--spacing--40, 32px);
	box-sizing: border-box;
}
.gs-section--full { max-width: 1240px; }
.gs-section--boxed { max-width: 800px; }
.gs-section--nopad { padding-block: 0; padding-inline: 0; max-width: none; }
/* 在线预约：线上表单宽 740px，容器 800 - 左右各 30 = 740 */
.gs-section--form { padding-block: 70px; padding-inline: 30px; }
.gs-center { text-align: center; }
.gs-section > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   2. 装修设计 —— justified 瀑布对齐图库（按每张图的真实宽高比例排版）
   -------------------------------------------------------------------------- */
.gs-gallery {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-gallery--justified {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-inline: 8px;
}
.gs-gallery--justified .gs-gallery__item {
	display: block;
	position: relative;
	overflow: hidden;
	height: 240px;
	/* 关键：按宽高比决定伸展与基准宽度，使每一行正好铺满 */
	flex-grow: calc(var(--w) / var(--h) * 100);
	flex-basis: calc(var(--w) / var(--h) * 200px);
	margin: 0;
	background: #f2f2f2;
}
.gs-gallery--justified .gs-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.gs-gallery--justified .gs-gallery__item:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   3. 按钮
   线上（Elementor Button）统一是 inline-block + line-height 15px：
     · 装修设计「点此预约设计」→ 底色 #ce6161、字 500、padding 12px 24px、圆角 3px
     · 品牌中心「电话咨询」    → 底色 #000、字 600、padding 15px 45px、无圆角
   -------------------------------------------------------------------------- */
.gs-btn {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}
/* 线上图标外框固定 21×17，图标本体 1em 大小并居中 */
.gs-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 17px;
	margin-right: 5px;
	vertical-align: middle;
	flex: none;
}
.gs-btn__icon img {
	display: block;
	width: 15px;
	height: 15px;
	object-fit: contain;
}
.gs-form__submit .gs-btn__icon img {
	width: 14px;
	height: 14px;
}
.gs-btn--design {
	padding: 12px 24px;
	background: #ce6161;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 15px;
	border-radius: 3px;
}
.gs-btn--design:hover { background: #b84c28; color: #fff; }

.gs-btn--phone {
	padding: 15px 45px;
	background: #000;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 15px;
	text-transform: uppercase;
	border-radius: 0;
}
/* 线上这个按钮的图标与文字之间没有额外间距，宽度正好 246px */
.gs-btn--phone .gs-btn__icon { margin-right: 0; }
.gs-btn--phone:hover { background: #00ce1b; color: #fff; }

/* --------------------------------------------------------------------------
   4. 服务保障 —— 标题 / 副题 / 分隔线 / 导语 / 材料商墙
   -------------------------------------------------------------------------- */
.gs-heading {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 45px;
	font-weight: 600;
	line-height: 45px;
	color: #000;
}
/*
 * 副题与导语的上下间距就是段落默认的 1em —— 线上也是这样，没有额外偏移。
 * 这里显式写出来，免得被别处的段落重置吃掉。
 */
.gs-sub {
	margin: 1em 0;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.75;
	color: #bfbfbf;
	text-transform: uppercase;
}
.gs-divider {
	display: flex;
	justify-content: center;
	margin: 12px 0;
}
.gs-divider span {
	display: block;
	width: 6%;
	min-width: 46px;
	border-top: 2px solid #00ce1b;
}
.gs-lead {
	margin: 1em 0;
	font-family: Roboto, sans-serif;
	font-size: 30px;
	font-weight: 100;
	line-height: 1.3;
	color: #000;
}
.gs-section--logos { padding-top: 10px; }
.gs-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	align-items: center;
}
.gs-logos__item { margin: 0; }
.gs-logos__item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. 品牌中心 —— 左文右图
   -------------------------------------------------------------------------- */
.gs-brand {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}
.gs-prose {
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 2;
	color: #6f6a6a;
}
.gs-prose p { margin: 1em 0; }
/* 线上正文里的 <strong> 并没有加粗（字重仍是 400），照抄 */
.gs-prose strong { font-weight: 400; color: inherit; }
.gs-brand__cta { padding-top: 15px; }
.gs-address {
	padding-top: 15px;
	font-family: Roboto, sans-serif;
	font-size: 24px;
	line-height: 1.75;
	color: #0c0000;
}
.gs-address p { margin: 1em 0; }
.gs-brand__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   6. 文章卡片列表（工程管理 / 装修资讯）
   线上是 Elementor Posts 的「卡片」皮肤：
     网格 gap 35px 30px、卡片白底 + 圆角 3px + 0 0 10px rgba(0,0,0,.15) 阴影、
     文本区 padding 0 30px、标题 Roboto 21/600 #54595F、摘要 Roboto 14/400 #777、
     「阅读更多」Roboto 12/500 #61CE70、元信息 Roboto Slab 12/400 #ADADAD。
   -------------------------------------------------------------------------- */
.gs-cards .wp-block-post-template {
	display: grid;
	gap: 35px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-cards--cols-3 .wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
.gs-cards--cols-2 .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }

.gs-card {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	min-height: 100%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	overflow: hidden;
	transition: all .25s;
}

/* 缩略图：线上用 padding-bottom 66% 固定比例盒，图片居中裁切 */
.gs-card__thumb {
	display: block;
	position: relative;
	margin: 0 0 20px;
}
.gs-card__thumb-inner {
	display: block;
	position: relative;
	padding-bottom: 66%;
	overflow: hidden;
}
.gs-card__thumb-inner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.gs-card:hover .gs-card__thumb-inner img { transform: scale(1.05); }

/* 右上角分类徽章（只有工程管理页用到） */
.gs-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	margin: 20px;
	padding: .6em 1.2em;
	background: #61ce70;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 999px;
	z-index: 1;
}
.gs-card__badge span { color: inherit; }

/* 文本区 */
.gs-card__text {
	margin: 20px 0 0;
	padding: 0 30px;
}
.gs-card__title {
	margin: 0 0 25px;
	font-family: Roboto, sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 28.56px;
	color: #54595f;
}
.gs-card__title a {
	color: inherit;
	text-decoration: none;
}
.gs-card__title a:hover { color: #54595f; }
.gs-card__excerpt { margin: 0 0 25px; }
.gs-card__excerpt p {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: #777;
}
.gs-card__more {
	display: inline-block;
	margin: 0 0 20px;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 21px;
	color: #61ce70;
	text-decoration: none;
	text-transform: uppercase;
}
.gs-card__more:hover { color: #61ce70; }

/* 底部元信息 */
.gs-card__meta {
	padding: 15px 30px;
	border-top: 1px solid #eaeaea;
	font-family: "Roboto Slab", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 15.6px;
	color: #adadad;
}
.gs-card__meta span { color: inherit; }

/*
 * 分页器：线上是纯数字，Roboto Slab 20px，左右各 5px 间距，首尾去掉外侧间距。
 * 普通页码是黑色，当前页继承容器的 #666。
 */
.gs-cards .wp-block-query-pagination {
	display: block;
	text-align: center;
	margin-top: 0;
	font-family: "Roboto Slab", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 35px;
	color: #666;
}
/*
 * 分页器里给读屏软件看的「页面」二字，视觉上要藏起来。
 * 原主题用的是 Elementor 自带的 elementor-screen-only，一旦停用 Elementor
 * 那段样式就没了、文字会露出来，所以这里用主题自己的类。
 */
.gs-cards .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	word-wrap: normal !important;
	border: 0;
}
.gs-cards .page-numbers {
	display: inline;
	margin: 0 5px;
	padding: 0;
	font: inherit;
	color: #000;
	text-decoration: none;
	background: none;
	border: 0;
}
.gs-cards .page-numbers:first-child { margin-left: 0; }
.gs-cards .page-numbers:last-child { margin-right: 0; }
.gs-cards .page-numbers.current { color: #666; }

/* --------------------------------------------------------------------------
   7. 在线预约表单
   线上规格：表单宽 740；标签 Roboto 20/400 #7A7A7A；下拉与输入框白底、
   1px #69727D 边框、圆角 4px；提交按钮 #B84C28、高 40、圆角 3px。
   -------------------------------------------------------------------------- */
.gs-form { display: block; }
.gs-form__row { margin: 0 0 10px; }
.gs-form__label {
	display: block;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 35px;
	color: #7a7a7a;
}
.gs-form__control { display: block; width: 100%; }
/*
 * 下拉箭头：线上是 Elementor 的图标字体画的（.select-caret-down-wrapper 绝对定位
 * 在 right:10px、垂直居中）。停用 Elementor 后图标字体会消失，所以这里用纯 CSS
 * 三角承接相同的位置与大小（select 本身已去掉浏览器默认外观）。
 */
.gs-form__select { position: relative; }
.gs-form__caret {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #7a7a7a;
	pointer-events: none;
}
.gs-form input[type="text"],
.gs-form input[type="tel"],
.gs-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 47px;
	box-sizing: border-box;
	padding: 6px 16px;
	color: #7a7a7a;
	background-color: #fff;
	border: 1px solid #69727d;
	border-radius: 4px;
}
.gs-form select {
	padding-right: 20px;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 35px;
	/* 线上用 Elementor 图标字体画箭头，这里改用自绘三角，所以去掉浏览器默认外观 */
	-webkit-appearance: none;
	appearance: none;
}
.gs-form input[type="text"],
.gs-form input[type="tel"] {
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24.96px;
}
.gs-form select:focus,
.gs-form input:focus {
	outline: none;
	border-color: #69727d;
}
.gs-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
	padding: 0 24px;
	color: #fff;
	background: #b84c28;
	border: 0;
	border-radius: 3px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 15px;
	text-align: center;
	cursor: pointer;
	transition: background-color .25s ease;
}
.gs-form__submit:hover { background: #9c3d1e; }
.gs-form__hint { font-size: 13px; color: #999; text-align: center; }

/* 提交结果提示 */
.gs-form__notice {
	display: none;
	margin: 0 0 26px;
	padding: 16px 20px;
	font-size: 15px;
	line-height: 1.7;
	border-left: 4px solid #00ce1b;
	background: #f3fbf4;
	color: #14601f;
}
.gs-form__notice--error {
	border-left-color: #d14040;
	background: #fdf4f4;
	color: #8c1f1f;
}
.gs-form--done { display: none; }
body.gs-sent .gs-form__notice--ok { display: block; }
body.gs-sent-error .gs-form__notice--error { display: block; }
body.gs-sent .gs-form { display: none; }

/* --------------------------------------------------------------------------
   8. 响应式（断点沿用 Elementor 的 1024 / 767）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.gs-logos { grid-template-columns: repeat(3, 1fr); }
	.gs-cards--cols-3 .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.gs-section { padding: 40px 20px; }
	.gs-brand { grid-template-columns: 1fr; }
	.gs-heading { font-size: 35px; line-height: 35px; }
	.gs-lead { font-size: 25px; }
	.gs-address { font-size: 19px; }
	.gs-gallery--justified .gs-gallery__item { height: 170px; }
	.gs-logos { grid-template-columns: repeat(2, 1fr); }
	.gs-cards--cols-3 .wp-block-post-template,
	.gs-cards--cols-2 .wp-block-post-template { grid-template-columns: 1fr; }
}