/* Järjestä hautajaiset — page family (Hautajaiset-Desktop artboard).
   lohtu-pkg-*  = reusable package-card component (photo, badge, itemised rows, total, CTA)
   lohtu-htj-*  = page-specific sections (hero, steps timeline, cost buckets, phone CTA band) */

/* ---------- Hero ---------- */

.lohtu-htj-hero {
	background: var(--leaf-50);
	padding: 32px var(--lohtu-gutter) var(--lohtu-section-pad);
}

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

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

.lohtu-htj-hero .lohtu-rating-pill {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sage-100);
	color: #1B1D18;
}

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

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

.lohtu-htj-hero__content .wp-block-buttons {
	padding-top: 4px;
}

/* Circular portrait per updated artboard — the face sits at the right edge
   of the source photo, hence object-position 95% center. */
.lohtu-htj-hero__portrait {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	justify-self: center;
}

.lohtu-htj-hero__portrait .wp-block-image {
	width: 420px;
	height: 420px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0;
	background: var(--green-header);
	flex-shrink: 0;
}

.lohtu-htj-hero__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 95% center;
}

p.lohtu-htj-hero__caption {
	margin: 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	color: var(--text-muted);
}

.lohtu-htj-hero__caption strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--leaf-800);
	margin-bottom: 2px;
}

/* ---------- Näin se etenee (steps timeline) ---------- */

.lohtu-htj-steps {
	background: #fff;
}

.lohtu-htj-steps > .lohtu-inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.lohtu-htj-steps .lohtu-section-head {
	margin-bottom: 0;
}

.lohtu-htj-steps .lohtu-section-head h2 {
	max-width: 620px;
}

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

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

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

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

.lohtu-htj-step p {
	font-size: 17px;
	line-height: 1.55;
	color: #3D3A36;
	margin: 0;
}

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

/* ---------- Paketit (reusable package card: lohtu-pkg-*) ---------- */

.lohtu-htj-packages {
	background: var(--leaf-50);
}

.lohtu-htj-packages > .lohtu-inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.lohtu-htj-packages .lohtu-section-head {
	margin-bottom: 0;
}

.lohtu-htj-packages .lohtu-section-head h2 {
	max-width: 560px;
}

.lohtu-htj-packages .lohtu-section-head p {
	max-width: 460px;
}

/* Intro + ALV note share the right column of the section head */
.lohtu-htj-packages__lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 460px;
}

.lohtu-section-head p.lohtu-htj-alv {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
}

.lohtu-pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.lohtu-pkg-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.lohtu-pkg-card__photo {
	margin: 0;
	height: 220px;
	flex-shrink: 0;
	background: var(--green-header);
}

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

.lohtu-pkg-card__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

.lohtu-pkg-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

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

p.lohtu-pkg-card__badge {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--leaf-500);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	flex-shrink: 0;
}

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

.lohtu-pkg-card__rows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #EDEBEB;
}

.lohtu-pkg-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #EDEBEB;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
}

p.lohtu-pkg-row,
.lohtu-pkg-row > p {
	display: flex;
	flex: 1;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.lohtu-pkg-row strong {
	font-weight: 600;
	white-space: nowrap;
}

.lohtu-pkg-row__thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sage-100);
}

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

/* --sage-100 placeholder for a row without a product photo */
.lohtu-pkg-row__placeholder {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--sage-100);
}

p.lohtu-pkg-total {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin: auto 0 0;
	padding-top: 8px;
	font-size: 15px;
	color: var(--text-muted);
}

.lohtu-pkg-total strong {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--leaf-800);
	white-space: nowrap;
}

/* CTA slot inside a card (used by pages that put a button in each card) */
.lohtu-pkg-card__cta {
	padding-top: 8px;
}

/* ---------- Mistä hinta muodostuu (cost buckets) ---------- */

.lohtu-htj-costs {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 40px;
	border-top: 1px solid var(--sage-200);
}

.lohtu-htj-costs > h3 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(28px, 2.6vw, 36px);
	line-height: 1.1;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-htj-costs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.lohtu-htj-cost h4 {
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	color: inherit;
	margin: 0 0 8px;
}

.lohtu-htj-cost p {
	font-size: 17px;
	line-height: 1.55;
	color: #3D3A36;
	margin: 0;
}

/* ---------- Arviot: USP chips ---------- */

.lohtu-htj-usps {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

p.lohtu-htj-usp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--sage-200);
	font-size: 17px;
	font-weight: 500;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-htj-usp::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: 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>') no-repeat center / contain;
}

/* ---------- Soita asiantuntijalle (phone CTA band) ---------- */

.lohtu-htj-call.lohtu-section {
	background: var(--leaf-800);
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(56px, 7vw, 96px);
}

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

.lohtu-htj-call__text h2 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(34px, 3.5vw, 52px);
	line-height: 1.05;
	color: #fff;
	margin: 0 0 16px;
	max-width: 640px;
}

.lohtu-htj-call__text p {
	font-size: 20px;
	line-height: 1.5;
	color: var(--sage-100);
	margin: 0;
	max-width: 640px;
}

.lohtu-htj-call__action {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

/* plain white pill on the dark band — no hairline border */
.lohtu-htj-call .lohtu-btn--secondary > .wp-block-button__link {
	box-shadow: none;
}

p.lohtu-htj-call__hours {
	font-size: 15px;
	line-height: 1.5;
	color: var(--sage-100);
	margin: 0;
}

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

@media (max-width: 1100px) {
	.lohtu-htj-hero > .lohtu-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-htj-hero__portrait .wp-block-image {
		width: min(420px, 60vw);
		height: min(420px, 60vw);
	}

	.lohtu-htj-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 28px;
	}

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

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

	.lohtu-pkg-grid,
	.lohtu-htj-costs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-htj-call > .lohtu-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.lohtu-htj-hero {
		padding-top: 24px;
	}

	/* mobile artboard: 180px circle */
	.lohtu-htj-hero__portrait .wp-block-image {
		width: 180px;
		height: 180px;
	}

	.lohtu-htj-steps > .lohtu-inner {
		gap: 40px;
	}

	/* mobile artboard: number beside the text, single column */
	.lohtu-htj-steps__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.lohtu-htj-step {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 4px 16px;
	}

	.lohtu-htj-step__num ~ * {
		grid-column: 2;
	}

	p.lohtu-htj-step__num {
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
	}

	.lohtu-pkg-card__body {
		padding: 24px 20px;
	}

	.lohtu-pkg-total strong {
		font-size: 32px;
	}
}