/*
 * Product page hero with enquiry form.
 * Enqueued only on pages that render template-parts/product/hero.php.
 */
/* 
.product-hero {
	position: relative;
	background-color: #000;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	overflow-x: hidden;
}
 */
.product-hero {
	position: relative;
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow-x: hidden;
}

.product-hero__inner {
	position: relative;
	display: grid;
	/* Fixed 376px so the panel never shrinks; it stacks at <=1024px. */
	grid-template-columns: 1fr 376px;
	align-items: center;
	gap: 40px;
	/*
	 * Fill the viewport below the header. The cap is a soft one: the
	 * enquiry form sizes to its own content and must stay fully
	 * reachable, so on a window too short to hold it the hero is
	 * allowed to grow rather than clip fields off the bottom.
	 */
/* 	min-height: calc(100svh - var(--rittal-header-height, 71px)); */
	padding-top: 24px;
	padding-bottom: 60px;
}

/*
 * Copy block: sits in the left column, above the product shot.
 * Anchored to the top so the heading lands at the Figma Y (285 from the
 * page top, less the 71px header and the section's 60px top padding).
 */
/*
 * 430px suits Blue E's short headline, but the longer product-page
 * headings wrapped again inside each line the editor had already
 * broken by hand. The wider cap lets the copy's own line breaks be
 * the ones that show; the subheading keeps the narrower measure.
 */
.product-hero__content {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	/*
	 * Figma's 154px lead-in, but as a ceiling rather than a fixed gap:
	 * on a short window it collapses towards 40px instead of shunting
	 * the copy below the fold.
	 */
	margin-top: clamp(40px, 14vh, 154px);
	max-width: 620px;
	min-height: 0;
}

.product-hero__content .product-hero__subheading {
	max-width: 435px;
}

.product-hero__heading {
	margin: 0 0 16px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 40px;
	/*
	 * Semibold rather than Bold. No webfont is loaded, so this resolves
	 * against the system face: Helvetica Neue supplies a real Medium on
	 * macOS, while Windows/Arial has no 600 and rounds up to Bold.
	 */
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

/*
 * Blue E's headline is short enough to hold one line, but the other
 * product pages wrap. nowrap would also swallow the <br> the editor
 * gets from a newline in the ACF textarea, so the heading wraps
 * normally and the copy decides where the breaks fall.
 */
.product-hero__heading {
	max-width: 100%;
	overflow-wrap: break-word;
}

.product-hero__subheading {
	margin: 0 0 32px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.5556;
}

.product-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma 230x40, fixed so a longer label does not widen the button. */
	width: 230px;
	max-width: 100%;
	height: 40px;
	padding: 0 12px;
	background-color: #e50043;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	box-sizing: border-box;
	transition: background-color .3s;
}

.product-hero__button:hover,
.product-hero__button:focus {
	background-color: #c8003a;
}

/* Product shot: shares the left column, sitting behind the copy. */
.product-hero__media {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	max-width: 70%;
	/* Keep the product shot inside the viewport-height hero, less the
	   inner grid's 24px/60px paddings. */
	max-height: calc(100svh - var(--rittal-header-height, 71px) - 84px);
}

.product-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: inherit;
	object-fit: contain;
	object-position: bottom;
}

/*
 * Enquiry form panel — Figma 174:547: 376 x 660 at (1285, 195),
 * radius 0. Pinned to the top of the hero rather than centred, so the
 * Y matches the design; the 10px Figma "spacing" is the gap between
 * the title block and the field list.
 */
.product-hero__form {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	/* 124px from the hero top, less the inner grid's top padding. */
	margin-top: clamp(16px, 4vh, 48px);
	/*
	 * Sized by the form inside it. Figma's 660px was a fixed height with
	 * an inner scrollbar; the fields have to be reachable without
	 * scrolling a panel, so the panel takes whatever height the form
	 * needs and the hero flexes around it.
	 */
	height: auto;
	padding: 20px;
	/* Figma 174:547 / 174:542. */
	background: rgba(9, 9, 9, .8);
	border: 1.27px solid rgba(255, 255, 255, .5);
	backdrop-filter: blur(22px);
}

.product-hero__form-title {
	/* Figma: panel inset 25.4, form block starts at 81.27 -> ~10px gap. */
	margin: 0 0 10px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	/* Figma 45.714px; the title needs no leading of its own here. */
	line-height: 34px;
	text-align: center;
}

@media (max-width: 1024px) {
	.product-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 24px;
	}

	.product-hero__content,
	.product-hero__media,
	.product-hero__form {
		grid-column: 1;
	}

	.product-hero__content {
		grid-row: 1;
		max-width: none;
		margin-top: 0;
	}

	.product-hero__media {
		grid-row: 2;
		justify-self: center;
		max-width: 100%;
		max-height: none;
	}

	.product-hero__media img {
		height: auto;
	}

	.product-hero__form {
		grid-row: 3;
		/* Stacked: let the panel grow with its content. */
		height: auto;
		max-height: none;
		margin-top: 0;
		overflow-y: visible;
	}

	/* font-size handled by the shared responsive type scale. */
}

/* ==========================================
   HubSpot form
========================================== */

.hs-form {
	max-width: 100%;
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
}

fieldset.form-columns-2 {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 100% !important;
}
fieldset.form-columns-1 {
    max-width: 100% !important;
}

fieldset.form-columns-1 .field.hs-form-field {
	width: 100% !important;
	padding: 0;
}

fieldset.form-columns-2 .field.hs-form-field {
	width: 100% !important;
	padding: 0;
}

/* Labels are hidden visually; placeholders carry the field names. */
.hs-form label:not(.hs-error-msg):not(.hs-form-booleancheckbox-display) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hs-form .hs-form-field {
	/*
	 * Figma's gap is 22.857px, but it is paid eight times over and the
	 * panel has to fit one viewport without an inner scrollbar. Tightened
	 * here rather than dropping fields.
	 */
	margin-bottom: 14px;
}

.hs-form .input {
	margin: 0 !important;
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form textarea,
.hs-form select {
	width: 100% !important;
	/* Figma is 35.556px; trimmed to fit eight fields in one viewport. */
	height: 32px;
	padding: 2px 0 0;
	background: transparent;
	border: none;
	border-bottom: 1.27px solid rgba(255, 255, 255, .35);
	border-radius: 0;
	/*
	 * Declared, not inherited: form controls take the UA font, which
	 * left the textarea rendering in monospace.
	 */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	transition: .3s;
	box-sizing: border-box;
	-webkit-appearance: none;
}

.hs-form input::placeholder,
.hs-form textarea::placeholder {
	color: #777777;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	opacity: 1;
}

.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
	outline: none;
	border-bottom: 2px solid #e50043;
}

.hs-form textarea {
	/* Figma Message field is 66.03px; trimmed with the rest. */
	height: 54px;
	resize: vertical;
}

.hs-button,
.hs-form input[type="submit"] {
	width: 100%;
	/* Figma 174:547 submit — 322 x 40, radius 4. */
	height: 40px;
	/* Figma panel spacing is 10px. */
	margin-top: 10px;
	padding: 0;
	background: #e50043 !important;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22.857px;
	cursor: pointer;
	transition: background-color .3s;
}

.hs-button:hover,
.hs-form input[type="submit"]:hover {
	background: #c8003a !important;
}

ul.no-list.hs-error-msgs.inputs-list {
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
}

.hs-error-msg {
	color: #ff5b5b;
	font-size: 13px;
}

/* Highlight for our own required-field check. */
.hs-form input.rittal-invalid,
.hs-form textarea.rittal-invalid,
.hs-form select.rittal-invalid {
	border-bottom: 2px solid #ff5b5b !important;
}

@media(max-width: 991px){
	.product-hero__heading {
    margin: 0;
	}
	.product-hero__subheading {
    margin: 0 0 20px;
	}
	.product-hero__inner{
		padding-top: 40px;
    padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.hs-form .hs-form-field {
		margin-bottom: 16px;
	}
}