/* Lohtu — service-page template family (Ennakkovalmistelut, Pesänselvitys).
   Shared by patterns lohtu/page-ennakko and lohtu/page-pesanselvitys.
   Reuses main.css scaffolding (lohtu-section, lohtu-inner, lohtu-h2, buttons,
   checklist, quotes, FAQ, GF base). Desktop-first; artboard inline values are
   the styling authority. */

:root {
	--icon-check-leaf: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2354872B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
	--icon-check-deep: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23325119" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* ---------- Hero (light variant with photo) ---------- */

.lohtu-svc-hero {
	background: var(--leaf-50);
	padding-top: 32px;
}

.lohtu-svc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.lohtu-svc-hero__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

/* Rating pill on light ground (home hero pill is dark) */
.lohtu-svc-hero .lohtu-rating-pill {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sage-100);
	color: #1B1D18;
}

.lohtu-svc-hero h1 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(38px, 4.7vw, 68px);
	line-height: 1.04;
	color: var(--leaf-800);
	margin: 0;
	text-wrap: balance;
}

.lohtu-svc-hero__lead {
	font-size: 22px;
	line-height: 1.5;
	max-width: 560px;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-svc-hero__actions {
	padding-top: 4px;
}

.lohtu-svc-hero__media {
	margin: 0;
	height: 580px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--green-header);
}

.lohtu-svc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Topic cards ("Mitä kaikkea…" / "Mitä kuuluu…") ---------- */

.lohtu-svc-topics {
	background: #fff;
}

.lohtu-svc-topics__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.lohtu-svc-topics__aside {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.lohtu-svc-topics__aside > p {
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-svc-topics__aside .wp-block-buttons {
	margin-top: 8px;
}

.lohtu-svc-topics__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lohtu-svc-topic {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--radius-card);
	background: var(--leaf-50);
}

.lohtu-svc-topic__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

p.lohtu-svc-topic__num {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--leaf-500);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 17px;
	flex-shrink: 0;
	margin: 0;
}

.lohtu-svc-topic__head h3 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	color: var(--leaf-800);
	margin: 0;
}

p.lohtu-svc-topic__intro {
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
}

ul.lohtu-svc-topic__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
}

ul.lohtu-svc-topic__list li {
	position: relative;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.5;
}

ul.lohtu-svc-topic__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background: var(--icon-check-leaf) no-repeat center / contain;
}

/* ---------- Dark inline CTA band ---------- */

.lohtu-svc-cta {
	background: var(--leaf-800);
	padding-top: clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}

.lohtu-svc-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.lohtu-svc-cta__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
}

.lohtu-svc-cta__content h2 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 52px);
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.lohtu-svc-cta__content p {
	font-size: 20px;
	line-height: 1.5;
	color: var(--sage-100);
	margin: 0;
}

/* Artboard CTA button: solid white, no hairline */
.lohtu-svc-cta .lohtu-btn--secondary > .wp-block-button__link {
	box-shadow: none;
	white-space: nowrap;
}

/* ---------- "Mitä sisältää" + price card (Ennakko) ---------- */

.lohtu-svc-include {
	background: #fff;
}

.lohtu-svc-include__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.lohtu-svc-include__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.lohtu-svc-include .lohtu-checklist {
	gap: 28px;
	padding: 0;
}

/* ---------- Price cards ---------- */

.lohtu-svc-price {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	padding: 40px;
	border-radius: 24px;
	background: var(--leaf-50);
}

p.lohtu-svc-eyebrow {
	font-size: 16px;
	font-weight: 600;
	color: var(--leaf-800);
	margin: 0;
}

p.lohtu-svc-price__amount {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: clamp(56px, 6vw, 80px);
	line-height: 0.95;
	color: var(--leaf-800);
	margin: 0;
}

p.lohtu-svc-price__note {
	font-size: 17px;
	line-height: 1.5;
	color: #3D3A36;
	margin: 0;
}

p.lohtu-svc-price__alv {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

.lohtu-svc-price .wp-block-buttons {
	margin-top: 8px;
	align-self: stretch;
}

.lohtu-svc-price--dark {
	background: var(--leaf-800);
}

.lohtu-svc-price--dark p.lohtu-svc-eyebrow {
	color: #C6E0A9;
}

.lohtu-svc-price--dark p.lohtu-svc-price__amount {
	font-size: clamp(52px, 5.5vw, 72px);
	color: #fff;
}

.lohtu-svc-price--dark p.lohtu-svc-price__note {
	color: var(--sage-100);
}

.lohtu-svc-price--dark .wp-block-buttons {
	margin-top: auto;
	align-self: flex-start;
}

.lohtu-svc-price--dark .lohtu-btn--secondary > .wp-block-button__link {
	box-shadow: none;
}

/* ---------- Services + prices (Pesänselvitys) ---------- */

.lohtu-svc-services {
	background: #fff;
}

.lohtu-svc-services .lohtu-h2 {
	margin-bottom: 48px;
}

.lohtu-svc-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px;
	align-items: stretch;
}

.lohtu-svc-service-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 24px;
	background: var(--leaf-50);
	padding: 8px 40px;
}

.lohtu-svc-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 28px 0;
	border-bottom: 1px solid var(--sage-200);
}

.lohtu-svc-service:last-child {
	border-bottom: 0;
}

.lohtu-svc-service__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lohtu-svc-service__info h3 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-svc-service__info p {
	font-size: 17px;
	line-height: 1.5;
	color: #3D3A36;
	margin: 0;
}

p.lohtu-svc-service__price {
	font-size: 15px;
	color: var(--text-muted);
	white-space: nowrap;
	margin: 0;
}

p.lohtu-svc-service__price strong {
	color: #1B1D18;
	font-size: 22px;
	font-weight: 600;
}

/* ---------- Numbered step timeline ("Näin se etenee") ---------- */

.lohtu-svc-steps {
	background: var(--leaf-50);
}

.lohtu-svc-steps .lohtu-h2 {
	margin-bottom: 56px;
}

.lohtu-svc-steps__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.lohtu-svc-steps__grid::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 24px;
	right: 24px;
	height: 2px;
	background: var(--sage-200);
}

.lohtu-svc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

p.lohtu-svc-step__num {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	background: var(--leaf-500);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 18px;
	margin: 0;
	box-shadow: 0 0 0 8px var(--leaf-50); /* solid halo masking the line, not a drop shadow */
}

.lohtu-svc-step h3 {
	font-family: inherit;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: #1B1D18;
	margin: 0;
}

.lohtu-svc-step p:not(.lohtu-svc-step__num) {
	font-size: 17px;
	line-height: 1.55;
	color: #3D3A36;
	margin: 0;
}

/* ---------- Expert + reviews ---------- */

.lohtu-svc-people {
	background: #fff;
}

.lohtu-svc-people__stack {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 72px);
}

.lohtu-svc-expert {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.lohtu-svc-expert__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

h2.lohtu-svc-expert__name {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(32px, 3vw, 44px);
	line-height: 1.05;
	color: var(--leaf-800);
	margin: 0;
}

p.lohtu-svc-expert__role {
	font-size: 17px;
	color: var(--text-muted);
	margin: 0;
}

.lohtu-svc-expert__content > p:not(.lohtu-svc-eyebrow):not(.lohtu-svc-expert__role) {
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
}

/* Asiantuntijan pyöreä muotokuva (kasvot lähdekuvan oikeassa laidassa) */
figure.lohtu-svc-expert__photo {
	margin: 0;
	width: min(280px, 100%);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	justify-self: center;
}

.lohtu-svc-expert__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 95% center;
	display: block;
}

/* ---------- Comparison table ---------- */

.lohtu-svc-compare {
	background: var(--leaf-50);
}

.lohtu-svc-compare .lohtu-h2 {
	margin-bottom: 40px;
}

figure.lohtu-svc-compare__table {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
}

.lohtu-svc-compare__table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.lohtu-svc-compare__table th,
.lohtu-svc-compare__table td {
	border: 0;
	text-align: left;
	font-size: 17px;
	line-height: 1.45;
	vertical-align: top;
}

.lohtu-svc-compare__table thead {
	border-bottom: 0;
}

.lohtu-svc-compare__table th {
	padding: 20px 24px;
	font-weight: 600;
}

.lohtu-svc-compare__table th:first-child {
	padding: 20px 32px;
	width: 41.6%;
}

.lohtu-svc-compare__table th:nth-child(2) {
	color: var(--text-muted);
	width: 25%;
}

.lohtu-svc-compare__table th:nth-child(3) {
	color: #fff;
	background: var(--leaf-500);
	width: 33.4%;
}

.lohtu-svc-compare__table td {
	padding: 22px 24px;
	border-top: 1px solid #EDEBEB;
}

.lohtu-svc-compare__table td:first-child {
	padding: 22px 32px;
	font-weight: 600;
}

.lohtu-svc-compare__table td:nth-child(2) {
	color: var(--text-muted);
}

.lohtu-svc-compare__table td:nth-child(3) {
	font-weight: 600;
	padding-left: 54px;
	background: var(--sage-100) var(--icon-check-deep) no-repeat 24px 23px / 20px;
}

p.lohtu-svc-compare__note {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	max-width: 760px;
	margin: 40px 0 0;
}

/* ---------- UKK (service pages: white, between leaf-50 Vertailu and Kartoitus) ---------- */

.lohtu-faq.lohtu-svc-faq {
	background: #fff;
}

/* ---------- Kartoitus form section ---------- */

.lohtu-svc-contact {
	background: var(--leaf-50);
}

.lohtu-svc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.lohtu-svc-contact__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lohtu-svc-contact__info > p {
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-svc-contact__phone {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 24px;
	margin-top: 8px;
	border-top: 1px solid #EDEBEB;
}

p.lohtu-svc-contact__phone-label,
p.lohtu-svc-contact__phone-hours {
	font-size: 15px;
	color: var(--text-muted);
	margin: 0;
}

p.lohtu-svc-contact__phone-number {
	margin: 0;
}

p.lohtu-svc-contact__phone-number a {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: clamp(34px, 3vw, 44px);
	line-height: 1.1;
	color: var(--leaf-800);
	text-decoration: none;
}

p.lohtu-svc-contact__phone-number a:hover {
	color: var(--leaf-500);
}

.lohtu-svc-contact__form {
	padding: 40px;
	border-radius: 24px;
	background: var(--leaf-50);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.lohtu-svc-hero__grid,
	.lohtu-svc-topics__grid,
	.lohtu-svc-include__grid,
	.lohtu-svc-services__grid,
	.lohtu-svc-expert,
	.lohtu-svc-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-svc-cta__grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.lohtu-svc-topics__aside {
		position: static;
	}

	.lohtu-svc-hero__media {
		height: clamp(320px, 55vw, 480px);
	}

	.lohtu-svc-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lohtu-svc-steps__grid::before {
		content: none;
	}

	p.lohtu-svc-step__num {
		box-shadow: none;
	}
}

@media (max-width: 700px) {
	.lohtu-svc-steps__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	ul.lohtu-svc-topic__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-svc-topic {
		padding: 24px;
	}

	.lohtu-svc-price,
	.lohtu-svc-contact__form {
		padding: 28px;
	}

	.lohtu-svc-service-list {
		padding: 8px 24px;
	}

	.lohtu-svc-service {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	figure.lohtu-svc-compare__table {
		overflow-x: auto;
	}

	.lohtu-svc-compare__table table {
		min-width: 640px;
	}
}