/* =========================================================================
   SIYOU · sections.css — surfaces (mist / stone / night / red panel / stage),
   section header with the numbered pill, the red data line (signature),
   return path, approval notes.

   Night is rationed: hero stage, module-03 product cards, module-06 loop band,
   footer (+ small accents). Red as a surface: final CTA panel and buttons only.
   ========================================================================= */

/* ---------- light surfaces ---------- */
.is-style-mist {
	background-color: var(--sy-mist);
}

.is-style-stone {
	background-color: var(--sy-stone);
}

/* Inset band (module 06 night loop, final CTA): full width minus 10px, large radius. */
.sy-band--inset {
	border-radius: var(--sy-r-xl);
}

.has-global-padding > .alignfull.sy-band--inset,
.sy-band--inset.alignfull {
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1 + 10px) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1 + 10px) !important;
}

@media (max-width: 639px) {
	.has-global-padding > .alignfull.sy-band--inset,
	.sy-band--inset.alignfull {
		margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1 + 8px) !important;
		margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1 + 8px) !important;
	}
}

/* ---------- night (dark surface) ---------- */
.is-style-night {
	--sy-focus: #FFFFFF;
	background: radial-gradient(55% 60% at 100% 0%, rgba(185, 10, 17, .30), rgba(185, 10, 17, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(185, 10, 17, .12), rgba(185, 10, 17, 0) 70%), var(--sy-night);
	color: var(--sy-on-night);
}

.is-style-night :where(h1, h2, h3, h4, h5, h6),
.is-style-card-night :where(h1, h2, h3, h4, h5, h6),
.is-style-stage :where(h1, h2, h3, h4, h5, h6),
.is-style-red-panel :where(h1, h2, h3, h4, h5, h6) {
	color: #FFFFFF;
}

.is-style-night :where(p, li, dd, figcaption),
.is-style-card-night :where(p, li, dd, figcaption) {
	color: var(--sy-on-night-muted);
}

.is-style-night :where(a:not(.wp-element-button):not(.sy-btn)),
.is-style-card-night :where(a:not(.wp-element-button):not(.sy-btn)),
.is-style-red-panel :where(a:not(.wp-element-button):not(.sy-btn)) {
	color: #FFFFFF;
}

.is-style-night .is-style-eyebrow,
.is-style-night .sy-eyebrow,
.is-style-card-night .is-style-eyebrow,
.is-style-stage .is-style-eyebrow {
	color: var(--sy-red-hi);
}

.is-style-night .is-style-lead,
.is-style-night .sy-section-head__sub {
	color: rgba(255, 255, 255, .78);
}

/* ---------- red CTA panel (final CTA only) ---------- */
.is-style-red-panel {
	--sy-focus: #FFFFFF;
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 72px);
	border-radius: var(--sy-r-xl);
	background: radial-gradient(70% 120% at 100% 100%, #D0141C 0%, rgba(208, 20, 28, 0) 62%), linear-gradient(135deg, var(--sy-red) 0%, var(--sy-red-800) 100%);
	color: #FFFFFF;
}

.is-style-red-panel :where(p, li) {
	color: rgba(255, 255, 255, .92);
}

/* Contact chips on the red panel (rendered only when configured). */
.sy-contact-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.sy-contact-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: var(--sy-r-pill);
	background: rgba(60, 0, 4, .22);
	font-size: 14px;
	font-weight: 600;
}

/* Mascot on the cloud (decorative image inside the red panel; never clipped). */
.sy-final-mark {
	position: absolute;
	right: clamp(24px, 5vw, 64px);
	bottom: clamp(40px, 6vw, 84px);
	width: clamp(150px, 19vw, 270px);
	margin: 0 !important;
	transform: rotate(-6deg);
	pointer-events: none;
}

.sy-final-mark img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- section header: [05] eyebrow · H2 left (7/12) · sub + CTA right (5/12) ---------- */
.sy-section-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px 56px;
	align-items: end;
	margin-bottom: 48px;
}

.sy-section-head > * {
	margin-block: 0 !important;
}

.sy-section-head--inline {
	grid-template-columns: minmax(0, 1fr) auto;
}

.sy-section-head--center {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.sy-section-head__main > :last-child {
	margin-bottom: 0;
}

.sy-section-head__main :where(h1, h2) {
	margin: 0;
}

.sy-section-head__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.sy-section-head__side > * {
	margin-block: 0 !important;
}

.sy-section-head__sub {
	max-width: 32em;
	color: var(--sy-muted);
	font-size: 17px;
	line-height: 1.75;
}

@media (max-width: 899px) {
	.sy-section-head,
	.sy-section-head--inline {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		margin-bottom: 32px;
	}

	.sy-section-head__side {
		gap: 18px;
	}
}

/* ---------- the red data line ----------
   .is-style-data-line on a core/group (row) or core/columns: every direct child becomes a step with a
   node; the line runs behind the nodes; add .is-active to a step for the filled node with halo.
   reveal.js adds .is-inview once: one dot travels the line (1.6s), then stops. Vertical below 640px. */
.is-style-data-line {
	--sy-line-c: var(--sy-red);
	--sy-node-bg: #FFFFFF;
	--sy-halo: var(--sy-red-50);
	position: relative;
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 28px;
	padding-top: 6px;
}

.is-style-data-line > * {
	position: relative;
	margin: 0 !important;
	padding-top: 40px;
	flex-basis: auto !important;
}

.is-style-data-line::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 6px;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--sy-line-c);
}

.is-style-data-line > *::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border: 2.5px solid var(--sy-line-c);
	border-radius: 50%;
	background: var(--sy-node-bg);
	box-sizing: content-box;
}

.is-style-data-line > .is-active::before {
	background: var(--sy-line-c);
	box-shadow: 0 0 0 4px var(--sy-halo);
}

/* Travelling dot (one pass). */
.is-style-data-line::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 8px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sy-line-c);
	box-shadow: 0 0 0 4px var(--sy-halo);
	opacity: 0;
}

.is-style-data-line.is-inview::after {
	animation: sy-travel 1.6s var(--sy-ease) forwards;
}

@keyframes sy-travel {
	0% {
		left: 0;
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		left: calc(100% - 8px);
		opacity: 0;
	}
}

:where(.is-style-night, .is-style-card-night, .is-style-stage) .is-style-data-line {
	--sy-line-c: var(--sy-red-hi);
	--sy-node-bg: var(--sy-night);
	--sy-halo: rgba(255, 116, 121, .18);
}

@media (max-width: 639px) {
	.is-style-data-line {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: 0;
		padding-left: 0;
	}

	.is-style-data-line > * {
		padding-top: 0;
		padding-left: 40px;
	}

	.is-style-data-line > *::before {
		top: 4px;
	}

	.is-style-data-line::before {
		top: 6px;
		bottom: 6px;
		left: 6px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.is-style-data-line::after {
		display: none;
	}
}

/* Labelled link between two nodes (module 04: "商品与客户价"). Put .sy-link-label on a paragraph inside a step. */
.sy-link-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: var(--sy-r-pill);
	background: #FFFFFF;
	border: 1px solid var(--sy-red-100);
	color: var(--sy-red);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

/* Dashed return path (loop: step 5 back to 1) with a centred label. */
.sy-return {
	position: relative;
	height: 46px;
	margin-top: 28px !important;
	border: 2px dashed var(--sy-line-c, var(--sy-red));
	border-top: 0;
	border-radius: 0 0 26px 26px;
	opacity: .85;
}

.sy-return::before {
	content: "";
	position: absolute;
	left: -7px;
	top: -8px;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom: 9px solid var(--sy-line-c, var(--sy-red));
}

.sy-return > * {
	position: absolute;
	left: 50%;
	bottom: -12px;
	margin: 0 !important;
	padding: 0 14px;
	transform: translateX(-50%);
	background: var(--sy-surface, #FFFFFF);
	color: var(--sy-line-c, var(--sy-red));
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}

:where(.is-style-night) .sy-return {
	--sy-line-c: var(--sy-red-hi);
	--sy-surface: var(--sy-night);
}

@media (max-width: 639px) {
	.sy-return {
		height: auto;
		padding: 12px 16px;
		border: 2px dashed var(--sy-line-c, var(--sy-red));
		border-radius: 16px;
	}

	.sy-return::before {
		display: none;
	}

	.sy-return > * {
		position: static;
		transform: none;
		padding: 0;
		white-space: normal;
		background: transparent;
	}
}

/* ---------- approval notes (editors only; stripped for visitors by inc/blocks.php) ---------- */
.is-style-approval-note,
.sy-approval-note {
	padding: 12px 16px;
	border: 1px dashed var(--sy-note-line);
	border-radius: var(--sy-r-xs);
	background: var(--sy-note-bg);
	color: var(--sy-note-fg);
	font-size: 13px;
	line-height: 1.6;
}

.is-style-approval-note::before,
.sy-approval-note::before {
	content: "● ";
	opacity: .7;
}

/* ---------- separators ---------- */
.wp-block-separator {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 1;
}

.wp-block-separator.is-style-dashed {
	border-top-style: dashed;
}