/**
 * Hinta-arviolaskuri.
 *
 * Card-style radios per the designer's reference. Colours are inherited from
 * the theme where possible and set as custom properties otherwise, so the
 * calculator can be restyled without touching this file.
 */
.laskuri {
	--laskuri-green: #507f41;
	--laskuri-dark: #2c2c2c;
	--laskuri-line: rgba(44, 44, 44, 0.18);
	--laskuri-bg: #fff;

	background: var(--laskuri-bg);
	border-radius: 24px;
	padding: clamp(1.5rem, 4vw, 3rem);
	color: var(--laskuri-dark);
}

.laskuri__title {
	margin: 0 0 2rem;
}

.laskuri__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.laskuri__grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

/* --- questions ------------------------------------------------------- */

.laskuri__group {
	border: 0;
	margin: 0 0 1.75rem;
	padding: 0;
}

.laskuri__legend {
	color: var(--laskuri-green);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
	padding: 0;
}

.laskuri__options {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.laskuri__options--wide {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Kerrosala is a short numeric scale, so it gets chips rather than cards.
   Seven have to sit on one row inside the questions column, which is ~488px
   when the calculator is in a 980px container — about 61px each. A radio plus
   its gap costs 23px of that, so the control is visually hidden here and the
   chip itself carries the selected state. It stays focusable and in the
   accessibility tree; only its appearance is dropped. */
.laskuri__options--compact {
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
}

.laskuri__options--compact .laskuri__option {
	padding: 12px 10px;
	position: relative;
}

.laskuri__options--compact .laskuri__option input[type="radio"] {
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.laskuri__options--compact .laskuri__option-label {
	font-size: 14px;
	white-space: nowrap;
}

.laskuri__option {
	border: 1px solid var(--laskuri-line);
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.laskuri__option:hover {
	border-color: var(--laskuri-green);
}

/* The native control stays in the accessibility tree and keeps keyboard
   behaviour; only its appearance is replaced. */
.laskuri__option input[type="radio"] {
	accent-color: var(--laskuri-green);
	flex: 0 0 auto;
	margin: 0;
}

.laskuri__option:has(input:checked) {
	border-color: var(--laskuri-green);
	background: rgba(80, 127, 65, 0.06);
}

.laskuri__option:has(input:focus-visible) {
	outline: 2px solid var(--laskuri-green);
	outline-offset: 2px;
}

.laskuri__option-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.laskuri__option-label {
	font-size: 15px;
	line-height: 1.35;
}

/* Explanations for terms that are not self-evident — "Kiintokalustevalikoima",
   "Ulkoverhous". Blank unless an editor has filled one in. */
.laskuri__option-help {
	color: rgba(44, 44, 44, 0.7);
	font-size: 13px;
	line-height: 1.4;
}

/* A described option needs room for two lines, so it aligns to the top
   rather than centring against a tall body. */
.laskuri__option--described {
	align-items: flex-start;
}

.laskuri__option--described input[type="radio"] {
	margin-top: 3px;
}

.laskuri__group-help {
	color: rgba(44, 44, 44, 0.7);
	font-size: 13px;
	line-height: 1.4;
	margin: -0.25rem 0 0.75rem;
}

/* --- result ---------------------------------------------------------- */

.laskuri__result {
	border: 1px solid var(--laskuri-line);
	border-radius: 16px;
	padding: clamp(1.25rem, 3vw, 2rem);
	position: sticky;
	top: 100px;
}

@media (max-width: 991.98px) {
	.laskuri__result {
		position: static;
	}
}

.laskuri__result-label {
	color: var(--laskuri-green);
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}

.laskuri__total {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.laskuri__disclaimer {
	color: rgba(44, 44, 44, 0.7);
	font-size: 13px;
	margin: 0 0 1.5rem;
}

/* --- contact --------------------------------------------------------- */

.laskuri__contact {
	border-top: 1px solid var(--laskuri-line);
	padding-top: 1.25rem;
}

.laskuri__contact-intro {
	font-size: 14px;
	margin: 0 0 1rem;
}

.laskuri__field {
	display: block;
	margin-bottom: 0.75rem;
}

.laskuri__field span {
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}

.laskuri__field input {
	border: 1px solid var(--laskuri-line);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
}

.laskuri__field input:focus-visible {
	border-color: var(--laskuri-green);
	outline: 2px solid var(--laskuri-green);
	outline-offset: 1px;
}

.laskuri__consent {
	font-size: 12px;
	line-height: 1.4;
	margin: 0 0 1rem;
}

.laskuri__submit {
	background: var(--laskuri-green);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 14px 24px;
	text-transform: uppercase;
	width: 100%;
}

.laskuri__submit:hover:not(:disabled) {
	filter: brightness(1.1);
}

.laskuri__submit:disabled {
	cursor: default;
	opacity: 0.6;
}

.laskuri__message:empty {
	display: none;
}

.laskuri__message {
	font-size: 14px;
	margin: 0.75rem 0 0;
}

/* Closing note for the whole calculator, below both columns. Smaller and
   quieter than the estimate's own caveat, which sits beside the figure. */
.laskuri__errata {
	border-top: 1px solid var(--laskuri-line);
	color: rgba(44, 44, 44, 0.7);
	font-size: 12px;
	line-height: 1.5;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	max-width: 70ch;
	padding-top: 1rem;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.laskuri__hp {
	left: -9999px;
	position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	.laskuri__option {
		transition: none;
	}
}