/**
 * IEMA Contact Us block styles.
 *
 * A white rounded (40px) card with, on the left, a heading and Team Member
 * contact profiles (grayscale photo, name, role, email, phone, LinkedIn)
 * and, on the right, a Gravity Form (white card, navy border) restyled to
 * the design. Two columns on desktop; stacks on mobile (profiles above the
 * form). Fully scoped under `.iema-contactus`.
 */

.iema-contactus {
	width: 100%;
	box-sizing: border-box;
	background-color: #f2f4f6;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.iema-contactus__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 80px;
	box-sizing: border-box;
}

.iema-contactus__card {
	background-color: #ffffff;
	border-radius: 40px;
	padding: 64px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 532px);
	gap: 56px;
	align-items: start;
}

.iema-contactus--form-left .iema-contactus__card {
	grid-template-columns: minmax(0, 532px) minmax(0, 1fr);
}

.iema-contactus--form-left .iema-contactus__left {
	order: 2;
}

/* Left: heading + profiles ----------------------------------------- */
.iema-contactus__heading {
	margin: 0 0 40px;
	color: #002147;
	font-weight: 700;
	font-size: 40px;
	line-height: 110%;
}

/* Optional intro paragraph under the heading (e.g. partner pages). Pulled
   up so it sits close beneath the heading rather than a full gap away. */
.iema-contactus__intro {
	margin: -28px 0 32px;
	max-width: 460px;
	color: #767676;
	font-weight: 400;
	font-size: 16px;
	line-height: 22.4px;
}

.iema-contactus__intro p {
	margin: 0;
}

.iema-contactus__profiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.iema-contactus__profile {
	min-width: 0;
}

.iema-contactus__photo {
	height: 240px;
	border-radius: 16px;
	overflow: hidden;
	background: #e8ebee;
	aspect-ratio: 270/240;
}

.iema-contactus__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Anchor the crop to the top so heads are never clipped. The staff photos
	 * are 500x487 (ratio 1.027) but this box is 270/240 (1.125), so `cover`
	 * renders them ~263px tall in a 240px slot. Centred, that took ~11px off
	 * the top of every head; anchored, the full 23px comes off the bottom of
	 * the frame instead. (The team-card box is 308/300, which matches the
	 * source ratio, so it never had this problem.)
	 */
	object-position: center top;
	filter: grayscale(1);
}

.iema-contactus__name {
	margin: 16px 0 0;
	color: #002147;
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
}

.iema-contactus__role {
	margin: 8px 0 0;
	color: #767676;
	font-weight: 400;
	font-size: 12px;
	line-height: 15px;
}

.iema-contactus__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.iema-contactus__row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #757575;
	font-size: 12px;
	line-height: normal;
	text-decoration: none;
}

.iema-contactus__ic {
	flex: none;
	color: #757575;
}

.iema-contactus__linkedin {
	display: inline-block;
	margin-top: 16px;
	line-height: 0;
}

/* Right: form card + Gravity Form ---------------------------------- */
.iema-contactus__form {
	background-color: #ffffff;
	border: 1px solid #002147;
	border-radius: 16px;
	padding: 40px;
	box-sizing: border-box;
	box-shadow: 0 6px 30px 0 rgba(140, 140, 140, 0.40);
}

.iema-contactus__form .gform_wrapper.gravity-theme input[type="text"],
.iema-contactus__form .gform_wrapper.gravity-theme input[type="email"],
.iema-contactus__form .gform_wrapper.gravity-theme input[type="phone"],
.iema-contactus__form .gform_wrapper.gravity-theme textarea {
	font-size: 12px;
	line-height: normal;
}

.iema-contactus__form .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full),
.gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full) ~ span:not(.ginput_full) {
	padding: 0 !important;
}

.iema-contactus__note {
	margin: 0;
	color: #757575;
}

.iema-contactus__form .gform_wrapper {
	margin: 0;
}

/* Heading is provided by the section (left), so hide the form's own. */
.iema-contactus__form .gform_title,
.iema-contactus__form .gform_description {
	display: none;
}

.iema-contactus__form .gform_fields {
	grid-row-gap: 24px;
	grid-column-gap: 16px;
	row-gap: 24px;
	column-gap: 16px;
}

.iema-contactus__form .gfield {
	margin: 0;
}

/* Hidden labels — keep for a11y, out of the flow. */
.iema-contactus__form .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.iema-contactus__form .ginput_container {
	margin-top: 0;
}

/* Name field: First / Last side by side. */
.iema-contactus__form .ginput_container_name {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 8px;
}

.iema-contactus__form .ginput_container_name > span {
	margin: 0;
	padding: 0;
}

.iema-contactus__form .gform_wrapper input[type="text"],
.iema-contactus__form .gform_wrapper input[type="email"],
.iema-contactus__form .gform_wrapper input[type="tel"],
.iema-contactus__form .gform_wrapper input[type="url"],
.iema-contactus__form .gform_wrapper input[type="number"],
.iema-contactus__form .gform_wrapper select {
	width: 100% !important;
	height: 46px !important;
	box-sizing: border-box;
	padding: 0 16px !important;
	border: 1px solid #002147 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #002147;
	font-family: inherit;
	font-size: 14px;
	line-height: 44px;
}

.iema-contactus__form .gform_wrapper textarea {
	width: 100% !important;
	box-sizing: border-box;
	min-height: 220px;
	padding: 12px 16px !important;
	border: 1px solid #002147 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #002147;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}

.iema-contactus__form .gform_wrapper input::placeholder,
.iema-contactus__form .gform_wrapper textarea::placeholder {
	color: #33506b;
	opacity: 1;
}

.iema-contactus__form .gform_wrapper input:focus,
.iema-contactus__form .gform_wrapper textarea:focus {
	outline: none;
	/* box-shadow: 0 0 0 1px #002147; */
}

/* Consent checkbox */
.iema-contactus__form .gfield--type-consent .gfield_consent_label,
.iema-contactus__form .gfield_checkbox label,
.iema-contactus__form .gfield--type-consent label {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	color: #002147;
	font-size: 12px;
	line-height: 140%;
	font-weight: 400;
}

.iema-contactus__form .gfield--type-consent .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 16px;
}

.iema-contactus__form .gform_wrapper.gravity-theme .gform_footer,
.iema-contactus__form .gform_wrapper.gravity-theme .gform_page_footer {
	padding: 16px 0 0;
}

.iema-contactus__form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.iema-contactus__form .gform_wrapper.gravity-theme .gform_page_footer .gform_button {
	margin: 0;
}

.iema-contactus__form .gfield--type-consent .gfield_consent_label,
.iema-contactus__form .gfield_checkbox label,
.iema-contactus__form .gfield--type-consent label {
	font-family: "Libre Franklin", sans-serif;
}

.iema-contactus .gform_wrapper.gravity-theme .gfield.gfield--width-full {
	margin-top: 12px;
	padding-bottom: 2px;
}

/* The design omits the "(Required)" marker; the field stays required. */
.iema-contactus__form .gfield_required,
.iema-contactus__form .gfield_required_text,
.iema-contactus__form .gfield_required_asterisk {
	display: none !important;
}

.iema-contactus__form .gfield--type-consent input[type="checkbox"] {
	flex: none;
	width: 13px;
	height: 13px;
	margin: 0;
	accent-color: #002147;
}

/* Submit button */
.iema-contactus__form .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

.iema-contactus__form .gform_wrapper .gform_footer input[type="submit"],
.iema-contactus__form .gform_wrapper .gform_button {
	display: block;
	width: 100% !important;
	background-color: #002147 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 16px 24px !important;
	font-family: inherit;
	font-weight: 700;
	font-size: 20px;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.2s ease;
	border: 1px solid #002147 !important;
}

.iema-contactus__form .gform_wrapper .gform_footer input[type="submit"]:hover,
.iema-contactus__form .gform_wrapper .gform_button:hover {
	background-color: #00152D !important;
	border-color: #C1D82A !important;
	color: #FFFFFF !important;
	box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Mobile: stack, profiles above the form. -------------------------- */
@media (max-width: 900px) {
	.iema-contactus__inner {
		padding: 24px;
	}
	
	.iema-contactus__intro {
		margin: 0;
	}

	.iema-contactus__card,
	.iema-contactus--form-left .iema-contactus__card {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 32px 24px;
		border-radius: 24px;
	}

	.iema-contactus--form-left .iema-contactus__left {
		order: 0;
	}

	.iema-contactus__profiles {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.iema-contactus__photo {
		height: 300px;
	}

	.iema-contactus__heading {
		font-size: 32px;
		margin-bottom: 24px;
	}

	.iema-contactus__form {
		padding: 24px 20px;
	}
}