/*
 * Collect & Showcase – Submission form (Figma 1270:14427 "submissionFoorm", 1280×894; 120px gap after it
 * in the pattern). Section Divider (green bar) · 24 · row of two 620×846 boxes, 40 apart:
 * - panel: radius 32, 0.5px #e7e7e7 stroke, light-blue gradient ("Rectangle 20", 9px past top/bottom),
 *   a 5% white layer with soft inset shadows ("Rectangle 8", starts 219px left of the panel), text frame
 *   p40/gap 16, form-builder image fill 528 wide at (44, 284), clipped by the panel.
 * - grid: radius 16, 0.5px #e7e7e7 stroke; rows 306 / 234 / 306; cells p40, icon circle 48, gap 20,
 *   title/description gap 10; 1px rgba(0,0,0,.1) dividers drawn inside the cells (Figma inside strokes).
 */

/* Section Divider (teal bar): the 1056px rule has 9.95px dashes every 19.906px, starting with a half dash. */
.rs-cs-form > .rs-eyebrow.has-rule {
	--rs-rule-offset: -4.477px;
	--rs-rule-period: 19.906px;
}

.rs-cs-form__main > *,
.rs-cs-form__panel > *,
.rs-cs-form__intro > *,
.rs-cs-form__grid > *,
.rs-cs-form__pair > *,
.rs-cs-form__feature > *,
.rs-cs-form__text > * {
	margin: 0;
}

/* ---- Row ---- */
.rs-cs-form__main > .rs-cs-form__panel,
.rs-cs-form__main > .rs-cs-form__grid {
	position: relative;
	flex: 0 1 620px;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* 0.5px #e7e7e7 stroke: Chrome draws borders at ≥1px, so a 1px overlay at half the colour. */
.rs-cs-form__panel::after,
.rs-cs-form__grid::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 50%, transparent);
	border-radius: inherit;
	pointer-events: none;
}

/* ---- Panel ---- */
.rs-cs-form__main > .rs-cs-form__panel {
	border-radius: 32px;
	background: linear-gradient(180deg, rgb(230 239 250) 0%, rgb(232 242 250) 26.25%, rgb(233 247 249) 61.817%, rgb(234 251 247) 100%) 0 -9px / 100% calc(100% + 18px) no-repeat;
}

.rs-cs-form__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 0 -219px;
	background: rgb(255 255 255 / 5%);
	box-shadow:
		inset -40px -40px 60px -8px rgb(225 225 226 / 20%),
		inset 40px 96px 60px -8px rgb(225 225 226 / 20%);
	pointer-events: none;
}

.rs-cs-form__panel > * {
	position: relative;
}

.rs-cs-form__panel > .rs-cs-form__intro {
	padding: 40px 40px 0;
}

.rs-cs-form__lead {
	opacity: 0.7;
}

/* Form-builder image: bottom-aligned, so it meets the panel's lower edge at any height (y 284 at 846). */
.rs-cs-form__panel > .rs-cs-form__builder {
	align-self: flex-start;
	width: 528px;
	max-width: calc(100% - 88px);
	margin: auto 0 0 44px;
}

.rs-cs-form__builder img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Feature grid ---- */
.rs-cs-form__main > .rs-cs-form__grid {
	border-radius: var(--wp--preset--border-radius--16);
}

.rs-cs-form__pair > .rs-cs-form__feature {
	flex: 1 1 0;
	min-width: 0;
}

.rs-cs-form__feature {
	padding: 40px;
}

/* Dividers: right of the first feature in a pair, above and below a full-width feature, between pairs. */
.rs-cs-form__pair > .rs-cs-form__feature:not(:last-child) {
	box-shadow: inset -1px 0 0 rgb(0 0 0 / 10%);
}

.rs-cs-form__grid > .rs-cs-form__feature {
	box-shadow: inset 0 1px 0 rgb(0 0 0 / 10%), inset 0 -1px 0 rgb(0 0 0 / 10%);
}

.rs-cs-form__grid > .rs-cs-form__feature:first-child {
	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
}

.rs-cs-form__grid > .rs-cs-form__feature:last-child {
	box-shadow: inset 0 1px 0 rgb(0 0 0 / 10%);
}

.rs-cs-form__grid > .rs-cs-form__pair + .rs-cs-form__pair {
	box-shadow: inset 0 1px 0 rgb(0 0 0 / 10%);
}

/* Icon in a 48px circle with a 1px rgba(0,0,0,.1) stroke inside it. */
.rs-cs-form__feature > .rs-cs-form__icon {
	display: flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 50px;
}

.rs-cs-form__icon img {
	display: block;
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
	.rs-cs-form__feature {
		padding: clamp(24px, 3.125vw, 40px);
	}
}

@media (max-width: 1023px) {
	.rs-cs-form .rs-cs-form__main {
		flex-direction: column;
		align-items: stretch;
	}

	.rs-cs-form__main > .rs-cs-form__panel,
	.rs-cs-form__main > .rs-cs-form__grid {
		flex: none;
	}

	.rs-cs-form__panel > .rs-cs-form__builder {
		align-self: center;
		max-width: calc(100% - 48px);
		margin: 24px auto 0;
	}
}

@media (max-width: 781px) {
	.rs-cs-form .rs-cs-form__main {
		gap: 24px;
	}

	.rs-cs-form__main > .rs-cs-form__panel {
		border-radius: var(--wp--preset--border-radius--24);
	}

	.rs-cs-form__panel > .rs-cs-form__intro {
		padding: 24px 24px 0;
	}

	.rs-cs-form__panel > .rs-cs-form__builder {
		max-width: calc(100% - 32px);
	}

	.rs-cs-form .rs-cs-form__pair {
		flex-direction: column;
	}

	.rs-cs-form__pair > .rs-cs-form__feature {
		flex: none;
	}

	.rs-cs-form__feature {
		padding: 24px;
	}

	.rs-cs-form__pair > .rs-cs-form__feature:not(:last-child) {
		box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
	}

	.rs-cs-form .rs-eyebrow.has-rule {
		white-space: normal;
	}
}