/* ==========================================================================
   Housing Services Savings Calculator (Gravity Forms #1)
   Slider inputs (left, stacked) + unified mint result panel (right)
   Styled to match the reference template housing-landing-page-v4.html
   (values below were taken directly from that template's computed styles).
   ========================================================================== */

#gform_wrapper_1 .gform_body {
	width: 100%;
}

#gform_wrapper_1 #gform_fields_1 {
	display: grid;
	/* A fixed 2-column split (not auto-fit): with only 2 real items in row 1
	   and the email row spanning "1 / -1" below, auto-fit's empty-track
	   collapsing never kicks in (the spanning item touches every track),
	   so on a wide container it silently creates extra empty columns and
	   crams both real items into the left side. Collapsing to 1 column is
	   handled explicitly by the media query below instead. */
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
	gap: 48px;
	align-items: start;
}

/* Sliders (left) and result panel (right) are the two grid columns; the
   email field is moved (by JS) to right after the panel in DOM order and
   spans both columns, so it always renders as its own full-width row below
   - matching the reference template's layout exactly. */
#gform_wrapper_1 .hsc-slider-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#gform_wrapper_1 .hsc-email {
	grid-column: 1 / -1;
}

/* Hidden helper field (Stundenlohn) - Gravity Forms already hides it via its
   own "Verborgen" visibility, this is just a safety net in the grid. */
#gform_wrapper_1 #field_1_12 { display: none; }

/* "Betrag in CHF" (field 13, label "Estimated Savings") is shown below the
   result tiles since S03 (19.10.2026), see "Result column" below. */

/* Footer (submit button) is emptied by JS once the button is moved into the
   email row, so collapse the extra space it would otherwise leave behind. */
#gform_wrapper_1 .gform-footer.gform_footer {
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* ---- Sliders (Delegates / Average stay / Hotels) ---- */

#gform_wrapper_1 .hsc-slider .gfield_label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: 15px;
	font-weight: 400;
	color: var(--c-text, #1f2225);
	margin-bottom: 8px;
}

#gform_wrapper_1 .hsc-slider .hsc-slider-value {
	font-weight: 600;
	color: var(--c-gruen-text, #2e7a5c);
	white-space: nowrap;
}

#gform_wrapper_1 .hsc-slider input[type="range"] {
	width: 100%;
	accent-color: var(--c-gruen, #4aa383);
	cursor: pointer;
	margin: 6px 0 4px;
	/* The theme's base stylesheet sets appearance:none on all inputs, which
	   throws away the browser's native range track/thumb rendering (the
	   reference template relies on that native rendering - a dark track,
	   filled green up to the thumb, plain solid thumb - via accent-color
	   alone). Restore native appearance just for this slider so it renders
	   the same way, and drop the box styling that was only needed to hide
	   the fallback box appearance:none left behind. */
	-webkit-appearance: auto !important;
	-moz-appearance: auto !important;
	appearance: auto !important;
	border: none;
	background: none;
	box-shadow: none;
	padding: 0;
	height: auto;
}

/* GF's auto-generated "please enter a number from X to Y" hint isn't part of
   the reference template's clean slider look. */
#gform_wrapper_1 .hsc-slider .gfield_description.instruction {
	display: none;
}

/* ---- Unified result panel (mint background, flex columns w/ dividers) ---- */

#gform_wrapper_1 .hsc-result-panel {
	display: flex;
	align-items: stretch;
	background: var(--c-mint, #d8e8de);
	border-radius: 20px;
	padding: 32px 0;
}

#gform_wrapper_1 .hsc-result-panel .hsc-result-divider {
	flex: 0 0 1px;
	width: 1px;
	background: rgba(31, 34, 37, 0.16);
	align-self: stretch;
}

#gform_wrapper_1 .hsc-result-panel .hsc-result {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0 12px;
}

#gform_wrapper_1 .hsc-result .gfield_label {
	order: 2;
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--c-text, #1f2225);
	margin: 12px 0 0;
}

#gform_wrapper_1 .hsc-result .ginput_container {
	order: 1;
}

#gform_wrapper_1 .hsc-result input[type="number"],
#gform_wrapper_1 .hsc-result input[type="text"] {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
	font-family: var(--font-display, "Orator Std", ui-monospace, "SFMono-Regular", monospace);
	font-size: 40px;
	letter-spacing: 0.04em;
	line-height: 1;
	font-weight: 500;
	color: var(--c-gruen-text, #2e7a5c);
	width: 100%;
	padding: 0;
	pointer-events: none;
	white-space: nowrap;
}

/* Hide native number spinner arrows on the read-only result fields */
#gform_wrapper_1 .hsc-result input[type="number"]::-webkit-outer-spin-button,
#gform_wrapper_1 .hsc-result input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#gform_wrapper_1 .hsc-result input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* ---- Email + submit row (button is moved in here by JS) ---- */

#gform_wrapper_1 .hsc-email .ginput_container_email {
	display: flex;
	gap: 12px;
	align-items: stretch;
	flex-wrap: wrap;
	margin-top: 8px;
}

#gform_wrapper_1 .hsc-email .ginput_container_email input[type="email"] {
	flex: 1 1 260px;
	min-height: 44px;
	border: 1px solid var(--c-dunkelgrau, #2b2e34) !important;
	border-radius: 0 !important;
	font-size: 18px;
	padding: 0 16px;
}

#gform_wrapper_1 .hsc-email .ginput_container_email .gform_button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	white-space: nowrap;
	background: var(--c-gruen, #4aa383) !important;
	color: var(--c-on-dark, #ffffff) !important;
	border: none !important;
	border-radius: 0 !important;
	font-weight: 600;
	font-size: 18px;
	padding: 0 24px;
	cursor: pointer;
}

/* Disclaimer note below the email row (plain text inserted by JS - not a
   Gravity Forms field). */
#gform_wrapper_1 .hsc-disclaimer {
	grid-column: 1 / -1;
	margin-top: 16px;
	font-size: 13px;
	color: var(--c-text, #1f2225);
	opacity: 0.6;
}

/* ---- Result values as plain text (S03, 19.10.2026) ----
   The Gravity Forms result inputs stay in the form (submitted with it) but
   are not shown; JS writes the formatted value into .hsc-result-value.
   No number inputs on screen -> no spinner arrows, no decimal comma. */

#gform_wrapper_1 .hsc-result input {
	display: none !important;
}

#gform_wrapper_1 .hsc-result .hsc-result-value {
	display: inline-block;
	text-align: center;
	font-family: var(--font-display, "Orator Std", ui-monospace, "SFMono-Regular", monospace);
	font-size: 40px;
	letter-spacing: 0.04em;
	line-height: 1;
	font-weight: 500;
	color: var(--c-gruen-text, #2e7a5c);
	white-space: nowrap;
}

/* Width-dependent number size (S03, 19.10.2026): all three tile values use
   the same size, derived from the width of the tile panel (container query
   units), so the longest possible values ("100'000", "3'408.3") always fit
   and the size does not jump while dragging. 1cqi = 1% of the panel width.
   Desktop: 3 tiles per row, 24px padding each + 2 dividers = 74px;
   the longest value is ~4.6em wide -> (100cqi - 74px) / 3 / 4.6.
   <= 900px: 2 tiles per row -> (100cqi - 48px) / 2 / 4.6.
   Fallback for browsers without container queries: the fixed sizes above. */
#gform_wrapper_1 .hsc-result-panel,
#gform_wrapper_1 .hsc-savings {
	container-type: inline-size;
}

#gform_wrapper_1 .hsc-result-panel .hsc-result .hsc-result-value {
	font-size: min(40px, calc((100cqi - 74px) / 13.8));
}

/* Right column: tile panel, "Estimated Savings" block, editable note */
#gform_wrapper_1 .hsc-result-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

#gform_wrapper_1 .hsc-savings {
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--c-mint, #d8e8de);
	border: none;
	border-radius: 20px;
	padding: 24px 16px;
}

#gform_wrapper_1 .hsc-savings .gfield_label {
	order: 1;
	margin: 0 0 12px;
}

#gform_wrapper_1 .hsc-savings .ginput_container {
	order: 2;
}

/* Estimated Savings: also width-dependent; "CHF 290'000" is ~7.1em wide. */
#gform_wrapper_1 .hsc-savings .hsc-result-value {
	font-size: clamp(36px, 4vw, 48px);
	font-size: min(48px, calc(100cqi / 7.4));
}

/* Editable note below Estimated Savings (Gravity Forms HTML field) */
#gform_wrapper_1 .hsc-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text-muted, #5b5e62);
	text-align: center;
}

#gform_wrapper_1 .hsc-note p {
	margin: 0;
	padding: 0;
}

/* Visually hidden live region (screen readers only) */
#gform_wrapper_1 .hsc-sr-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- "Request for Proposal" below the results (S03, 19.10.2026) ----
   "Get report" (Gravity Forms submit button) is hidden; the calculator is
   not submitted any more. Email field and RFP button sit in the result
   column; the button uses the Divi button preset of the other RFP buttons
   (c-button-blau: purple, arrow icon) and only opens the request form
   with a valid email address. */

#gform_wrapper_1 #gform_submit_button_1,
#gform_wrapper_1 .gform-footer.gform_footer {
	display: none !important;
}

#gform_wrapper_1 .hsc-result-column .hsc-email {
	margin-top: 8px;
}

#gform_wrapper_1 .hsc-rfp {
	text-align: center;
}

#gform_wrapper_1 .hsc-rfp .hsc-rfp-button {
	display: inline-block;
	min-height: 44px;
	text-decoration: none;
}

#gform_wrapper_1 .hsc-rfp .hsc-rfp-button:focus-visible {
	outline: 2px solid var(--gcid-secondary-color, #5d3fbe);
	outline-offset: 3px;
}

/* Error message below the email field (shown by JS on a click on the RFP
   button without a valid address); colours come from Gravity Forms. */
#gform_wrapper_1 .hsc-email .hsc-email-error {
	margin-top: 8px;
}

/* ==========================================================================
   Teaser <-> Calculator toggle (Divi "Gruppe 1" / "Gruppe 2")
   The calculator group ships collapsed by default (class baked in via Divi);
   JS removes/adds ".hsc-collapsed" on click of the "Calculate your own
   savings" button, so the natural (Divi-computed) display value takes over
   instead of us having to guess/force one.
   ========================================================================== */

.hsc-collapsed {
	display: none !important;
}

/* ---- Responsive: collapse to a single stacked column on narrow screens ---- */

@media (max-width: 900px) {
	#gform_wrapper_1 #gform_fields_1 {
		grid-template-columns: 1fr;
	}

	#gform_wrapper_1 .hsc-result-panel {
		flex-wrap: wrap;
	}

	#gform_wrapper_1 .hsc-result-panel .hsc-result-divider {
		display: none;
	}

	#gform_wrapper_1 .hsc-result-panel .hsc-result {
		flex: 1 1 45%;
		margin-bottom: 16px;
	}
	#gform_wrapper_1 .hsc-result-panel .hsc-result .hsc-result-value {
		font-size: clamp(26px, 8vw, 40px);
		font-size: min(40px, calc((100cqi - 48px) / 9.2));
	}
}