/*
SNIPPET: CPGE-Program Group Campaign Landing Page RFI Section
v 1.2
UMC - 2026-08-18

Loaded to /_templates/_resources/xsl/_shared/snippets.xsl 
*/


/* ==========================================================
   Campaign Landing RFI 1.2
   Module-specific layout only.
   Campus/Foundation utility classes remain externally owned.

   Site desktop scale: 1rem = 23px.
   Breakpoints and the fixed 1280px lockup remain in px.
   ========================================================== */

.campaign-landing-rfi {
	--campaign-blue: #0055a2;
	--campaign-max-width: 1280px;
	--campaign-form-width: 19.48rem; /* 448px */
	--campaign-gutter: 1rem;  /* 0.7rem ~16px */
	--campaign-space: 1.4rem;        /* ~32px */
	--campaign-hero-height: 27.83rem; /* 640px */
	position: relative;
	width: 100%;
}

/* ----------------------------------------------------------
   Content / form lockup
   ---------------------------------------------------------- */

.campaign-landing-rfi .campaign-lockup {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--campaign-max-width);
	margin-inline: auto;
	/* padding-inline: var(--campaign-gutter); */
}

/* ----------------------------------------------------------
   Full-width visual fields
   ---------------------------------------------------------- */

.campaign-landing-rfi .campaign-visual {
	display: none;
}

/* ----------------------------------------------------------
   Hero mobile first
   ---------------------------------------------------------- */

.campaign-landing-rfi .campaign-hero {
	position: relative;
	width: 100%;
	min-height: 15.65rem; /* 360px */
	overflow: hidden;
	background-color: #002f59;
	background-image: var(--campaign-hero-image);
	background-position: 62% center;
	background-repeat: no-repeat;
	background-size: cover;
}


.campaign-landing-rfi .campaign-visual--photo::after, 
.campaign-landing-rfi .campaign-hero::after {
	content: "";
	position: absolute;
	overflow: hidden;
	inset: 0;
	pointer-events: none;

	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--campaign-image-fade)) 0%,
		rgba(0, 0, 0, calc(var(--campaign-image-fade) * 0.4)) 38%,
		rgba(0, 0, 0, 0) 68%
	);
}

.campaign-landing-rfi .campaign-hero__content {
	position: absolute;
	z-index: 1;
	right: var(--campaign-gutter);
	bottom: var(--campaign-gutter);
	/* left: var(--campaign-gutter); */
	left:  0px;
}

.campaign-landing-rfi .campaign-hero__message,
.campaign-landing-rfi .campaign-hero__message * {
	margin-top: 0;
	color: #fff;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 
				 0 0 2px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------
   Lower content mobile first
   ---------------------------------------------------------- */

.campaign-landing-rfi .campaign-details {
	width: 100%;
	padding-top: var(--campaign-space);
	padding-right: var(--campaign-gutter);
	padding-bottom: var(--campaign-space);
	background: #fff;
}

.campaign-landing-rfi .campaign-details__copy {
	min-width: 0;
}

.campaign-landing-rfi .campaign-details__copy > :first-child {
	margin-top: 0;
}

.campaign-landing-rfi .campaign-details__copy > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------
   Form mobile first

   Form begins in the white field. Blue begins lower behind
   the form instead of framing the entire form.
   ---------------------------------------------------------- */

.campaign-landing-rfi .campaign-form-region {
	width: 100%;
	margin: 0;
	padding-top: var(--campaign-space);
	padding-bottom: var(--campaign-gutter);
	padding-left: var(--campaign-gutter);
	background: linear-gradient(
		to bottom,
		transparent 0,
		transparent 5.57rem,
		var(--campaign-blue) 5.57rem,
		var(--campaign-blue) 100%
	);
}

.campaign-landing-rfi .form-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--campaign-space);

	background: #fff;
	border: 1px solid #b7b7b7;
	box-shadow: none;
}

/* ----------------------------------------------------------
   Slate RFI form
   ---------------------------------------------------------- */

.campaign-landing-rfi .form_container:first-child {
	padding-top: 0.96rem; /* ~22px */
}

/* Question line spacing */
.campaign-landing-rfi .form_container input:not([type="radio"]):not([type="checkbox"]),
.campaign-landing-rfi .form_container select, 
.campaign-landing-rfi .form_container div.form_radio, 
.campaign-landing-rfi .form_container div.form_checkbox {
	margin-bottom: 0.8rem;
}

/* Radio & checkbox (input controls only) excepted */
.campaign-landing-rfi .form_container [type="radio"], 
.campaign-landing-rfi .form_container [type="checkbox"] {
	margin-bottom: 0;
}

/* Pagination */
.campaign-landing-rfi .form_container .form_p:has(+ .form_h2) .form_label {
	font-size: 1rem;
	/* 	font-weight: 700; <strong> is set in Slate */
}

/* Form title */
.campaign-landing-rfi .form_container .form_h2 .form_label {
	font-size: 1.5rem;
	font-weight: 400;
}

/* Form description */
.campaign-landing-rfi .form_container .form_h2 + .form_p .form_label {
	font-size: 0.875rem;
}

/* Form labels */
.campaign-landing-rfi .form_container label {
	font-size: 0.875rem;
}

/* Form disclaimer (final question) */
.campaign-landing-rfi .form_container div.form_question:last-child { /* last-child:has(a) */
	font-size: max(12px, 0.6rem); /* 12x on 1rem = 20px */
}

/* Required marker */
.campaign-landing-rfi .form_container .form_question[data-required="1"] .form_label::after {
    color: red;
    content: " *";
}

/* Form question */
.campaign-landing-rfi .form_container div.form_question {
	margin-bottom: 0.4em;
}


/* Button layouts */
.campaign-landing-rfi .form_container .form_action_back {
	border: 1px solid var(--campaign-blue);
	background: #ffffff;
	color: var(--campaign-blue);
}

.campaign-landing-rfi .form_container button {
	margin: 0.83rem 10% 0 10%;
	margin-top: 0.8rem;
    width: 80%;
	padding: 0.65rem 1.7rem; /* ~15px 39px */
	border: 1px solid var(--campaign-blue);
	background: var(--campaign-blue);
	color: #fff;
	cursor: pointer;
}

.campaign-landing-rfi .form_container button:hover,
.campaign-landing-rfi .form_container button:focus {
	background: #fff;
	color: var(--campaign-blue);
}



/* ==========================================================
   Desktop composition
   1024px+
   ========================================================== */

@media screen and (min-width: 1024px) {

	.campaign-landing-rfi {
		--campaign-copy-inset: 14vw;
		--campaign-copy-width: 33rem; /* 19.1rem 440px */
		--campaign-form-overlap: 18vw;
	}

	.campaign-landing-rfi .campaign-lockup {
		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(6.96rem, 18vw)
			minmax(6.96rem, 18vw)
			minmax(2.78rem, 8vw);

		grid-template-rows:
			var(--campaign-hero-height)
			minmax(0, 1fr);

		padding-inline: 0;
	}

	.campaign-landing-rfi .campaign-hero__content {
		left: 0;
	}

	/* ------------------------------------------------------
	   Independent visual layers
	   ------------------------------------------------------ */

	.campaign-landing-rfi .campaign-visual {
		display: block;
		position: absolute;
		pointer-events: none;
	}

	.campaign-landing-rfi .campaign-visual--photo {
		z-index: 0;
		top: 0;
		left: 0;
		width: calc(   50% - (var(--campaign-max-width) / 2) + 1115px  );
		height: var(--campaign-hero-height);
		background-color: #002f59;
		background-image: var(--campaign-hero-image);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.campaign-landing-rfi .campaign-visual--blue {
		z-index: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: calc(   50% - (var(--campaign-max-width) / 2) + 165px  );
		background: var(--campaign-blue);
	}

	/* ------------------------------------------------------
	   Hero
	   ------------------------------------------------------ */

	.campaign-landing-rfi .campaign-hero {
		grid-column: 1 / 3;
		grid-row: 1;

		width: auto;
		min-width: 0;
		min-height: 0;
		height: var(--campaign-hero-height);

		background: transparent;
		overflow: hidden;
	}
	
	.campaign-landing-rfi .campaign-hero::after {
		display: none;
	}

	/*
		Neutralize the nested campus grid geometry only inside
		the custom hero copy region.
	*/
	.campaign-landing-rfi .campaign-hero__content > .row {
		margin-right: 0;
		margin-left: 0;
	}

	.campaign-landing-rfi
		.campaign-hero__content
		> .row
		> .col-lg-6:first-child {
		width: 100%;
		max-width: none;
		/* padding-right: 0; */
		/* padding-left: var(--campaign-space); */
	}

	.campaign-landing-rfi .campaign-hero__message {
		width: 100%;
		width: calc(100% - var(--campaign-form-overlap));
		max-width: var(
		--campaign-copy-width);
	}


	/* ------------------------------------------------------
	   Form

	   User-selected design offset: 8rem from hero top.
	   Form remains in grid flow so long forms determine the
	   overall module height.
	   ------------------------------------------------------ */

	.campaign-landing-rfi .campaign-form-region {
		grid-column: 2 / 5;
		grid-row: 1 / 3;
		position: relative;
		z-index: 2;
		width: auto;
		min-width: 0;
		padding-top: 8rem;
		padding-bottom: var(--campaign-space);
		padding-left: var(--campaign-space);
		background: transparent;
	}

	.campaign-landing-rfi .form-wrap {
		width: 100%;
		/* max-width: var(--campaign-form-width); */
		margin: 0;
		padding: var(--campaign-space);
		background: #fff;
		border: 1px solid #b7b7b7;
		box-shadow: none;
	}
}

/* ==========================================================
   Exact design geometry
   1280px+
   ========================================================== */

@media screen and (min-width: 1280px) {

	.campaign-landing-rfi {
		--campaign-hero-height: 31.3rem; /* 720px */
		--campaign-copy-inset: 7.65rem;  /* 176px */
		--campaign-copy-width: 32rem; /* 440px */
		--campaign-form-overlap: 2rem; /* 224px */
	}

	.campaign-landing-rfi .campaign-lockup {
		/*
			Fixed 1280px design geometry:

			736px + 224px + 224px + 96px = 1280px.

			These grid tracks remain px because they define
			the exact fixed-width lockup proportions.
		*/
		grid-template-columns:
			minmax(0, 1fr)
			224px
			224px
			96px;
	}

	.campaign-landing-rfi .campaign-hero__content {
		right: calc(
			var(--campaign-form-overlap) + var(--campaign-space)
		);
		/* left: var(--campaign-copy-inset); */
		left: 0px;
	}

	.campaign-landing-rfi .campaign-details {
		padding-top: var(--campaign-space);
		padding-right: calc(var(--campaign-form-overlap) + var(--campaign-space));
		padding-bottom: var(--campaign-space);
	}

}