/* Lohtu — Paikkakunnat family (index page + kaupunki city pages).
   Patterns/blocks: lohtu/page-paikkakunnat, lohtu/city-index, lohtu/city-page.
   Reuses main.css scaffolding (lohtu-section, lohtu-inner, lohtu-section-head,
   lohtu-h2, buttons, rating pill, quotes, reviews numbers, FAQ, arrow links).
   Desktop-first; artboard inline values are the styling authority. */

:root {
	--icon-phone-white: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/></svg>');
	--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>');
}

/* ============================================================
   Paikkakunnat index page
   ============================================================ */

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

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

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

.lohtu-kau-phero__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

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

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

.lohtu-kau-phero__lead {
	font-size: 21px;
	line-height: 1.5;
	max-width: 640px;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-kau-phero__actions {
	padding-top: 4px;
}

.lohtu-kau-phero__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lohtu-kau-phero__map {
	height: 380px;
	border-radius: var(--radius-xl);
	background: var(--sage-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lohtu-kau-phero__map-badge {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--leaf-800);
	font-size: 15px;
	font-weight: 500;
	margin: 0;
}

.lohtu-kau-brief {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 32px;
	border-radius: 20px;
	background: #fff;
}

.lohtu-kau-brief__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-kau-brief p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- Alueet (city index) ---------- */

.lohtu-kau-alueet {
	background: #fff;
}

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

.lohtu-kau-index__region {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--sage-200);
}

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

.lohtu-kau-index__cities {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* City chips: filled on the index, hairline-outlined on city pages. */
.lohtu-kau-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: var(--leaf-50);
	color: var(--leaf-800) !important;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

a.lohtu-kau-chip:hover {
	background: var(--sage-100);
}

.lohtu-kau-chip--plain {
	cursor: default;
}

.lohtu-kau-chip--outline {
	min-height: 44px;
	padding: 0 18px;
	background: #fff;
	font-size: 16px;
	box-shadow: inset 0 0 0 1px var(--sage-200);
}

a.lohtu-kau-chip--outline:hover {
	background: var(--sage-100);
}

/* ---------- Erityisosaaminen ---------- */

.lohtu-kau-special {
	background: #fff;
	padding: 0 var(--lohtu-gutter) var(--lohtu-section-pad);
}

.lohtu-kau-special__card {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px);
	border-radius: var(--radius-xl);
	background: var(--leaf-50);
}

.lohtu-kau-special__card h2 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(28px, 2.8vw, 36px);
	line-height: 1.05;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-kau-special__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.lohtu-kau-special__body p {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- CTA band ---------- */

.lohtu-kau-cta {
	background: var(--leaf-800);
	padding: 96px var(--lohtu-gutter);
}

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

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

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

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

.lohtu-kau-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lohtu-kau-cta__actions .wp-block-button__link {
	width: 100%;
}

/* White button on the dark band: no hairline ring */
.lohtu-kau-cta .lohtu-btn--secondary > .wp-block-button__link {
	box-shadow: none;
}

.lohtu-kau-cta .lohtu-btn--secondary > .wp-block-button__link:hover {
	background: var(--sage-100);
}

/* Ghost button: transparent, white text, white hairline ring */
.lohtu-kau-btn--ghost > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 16px 28px;
	border-radius: var(--radius-pill);
	border: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
	cursor: pointer;
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}

.lohtu-kau-btn--ghost > .wp-block-button__link:hover {
	background: var(--sage-700);
	color: #fff;
}

.lohtu-kau-btn--ghost.lohtu-btn--phone > .wp-block-button__link::before {
	background-image: var(--icon-phone-white);
}

/* ============================================================
   City page (lohtu/city-page)
   ============================================================ */

/* ---------- Hero (unified with the Järjestä hautajaiset hero: circular
   portrait + caption; actions are a separate grid child so the mobile
   order is text → photo → buttons per the mobile artboard) ---------- */

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

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

/* 28px row-gap already provides the artboard's crumb → pill spacing */
.lohtu-kau-hero .lohtu-breadcrumbs {
	margin-bottom: 0;
}

.lohtu-kau-hero__content {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

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

.lohtu-kau-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, 64px);
	line-height: 1.04;
	color: var(--leaf-800);
	margin: 0;
	text-wrap: balance;
}

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

.lohtu-kau-hero__actions {
	grid-column: 1;
	grid-row: 3;
	align-self: start;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 4px;
}

/* Circular portrait + caption. Jutta's face sits at the right edge of the
   source photo, hence object-position 95% center (as on /hautaustoimisto/);
   the yrittäjä portrait (ACF image, e.g. Mervi Kylmänen media 325) is a
   square face-centered photo, so the default position is kept for it. */
.lohtu-kau-hero__portrait {
	grid-column: 2;
	grid-row: 2 / span 2;
	align-self: center;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.lohtu-kau-hero__photo {
	width: 420px;
	height: 420px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0;
	background: var(--green-header);
	flex-shrink: 0;
}

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

.lohtu-kau-yrit .lohtu-kau-hero__photo img {
	object-position: center;
}

/* Sage circle with initials when a yrittäjä photo does not exist yet */
.lohtu-kau-hero__photo--placeholder {
	background: var(--sage-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: clamp(52px, 6vw, 72px);
	color: var(--leaf-800);
}

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

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

/* ---------- Näin se etenee ---------- */

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

.lohtu-kau-steps > .lohtu-inner {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 56px);
	align-items: flex-start;
}

.lohtu-kau-steps .lohtu-h2 {
	max-width: none;
}

.lohtu-kau-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	width: 100%;
}

/* Connector line behind the step numbers */
.lohtu-kau-steps__list::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 24px;
	right: 24px;
	height: 2px;
	background: var(--sage-200);
}

.lohtu-kau-steps__list li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lohtu-kau-steps__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;
	box-shadow: 0 0 0 8px #fff; /* masks the connector line, not a drop shadow */
}

.lohtu-kau-steps__list h3 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
}

.lohtu-kau-steps__list p {
	font-size: 18px;
	line-height: 1.55;
	color: #3D3A36;
	margin: 0;
}

/* ---------- Kirkot ja siunauskappelit ---------- */

.lohtu-kau-venues {
	background: var(--leaf-50);
}

.lohtu-kau-venues__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.lohtu-kau-venue {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: var(--radius-card);
	background: #fff;
}

.lohtu-kau-venue__type {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--leaf-100);
	color: var(--leaf-800);
	font-weight: 600;
	font-size: 13px;
}

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

.lohtu-kau-venue__info {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-muted);
}

/* ---------- Tukenasi alusta loppuun + hinnat ---------- */

.lohtu-kau-practical {
	background: #fff;
}

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

.lohtu-kau-practical__info {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

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

/* Check items ("Olemme tukenasi alusta loppuun"): bare leaf-500 check mark,
   no circle — differs from the shared .lohtu-check pill component. */
.lohtu-kau-check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-top: 24px;
	border-top: 1px solid var(--sage-200);
}

.lohtu-kau-check::before {
	content: "";
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 2px;
	background: var(--icon-check-leaf) no-repeat center / 24px;
}

.lohtu-kau-check__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lohtu-kau-check__body h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

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

.lohtu-kau-prices {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	padding: clamp(28px, 3vw, 40px);
	border-radius: 24px;
	background: var(--leaf-50);
}

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

.lohtu-kau-prices__rows {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.lohtu-kau-prices__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sage-200);
}

.lohtu-kau-prices__row strong {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: 28px;
	color: var(--leaf-800);
}

.lohtu-kau-prices__row span {
	font-size: 19px;
	font-weight: 600;
}

.lohtu-kau-prices__note {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

/* ---------- Arviot ---------- */

.lohtu-kau-reviews {
	background: var(--leaf-50);
}

.lohtu-kau-reviews__head {
	margin-bottom: 40px;
}


/* Quote cards sit on leaf-50 here: flip them to white */
.lohtu-kau-reviews .lohtu-quote {
	background: #fff;
}

/* ---------- UKK (white variant of the shared FAQ section) ---------- */

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

/* ---------- Muut paikkakunnat ---------- */

.lohtu-kau-others {
	background: var(--leaf-50);
	padding: 96px var(--lohtu-gutter);
}

.lohtu-kau-others > .lohtu-inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

.lohtu-kau-others .lohtu-h2 {
	font-size: clamp(30px, 3vw, 40px);
}

.lohtu-kau-others__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lohtu-kau-others__all {
	margin: 0;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
	.lohtu-kau-phero__grid,
	.lohtu-kau-hero__grid,
	.lohtu-kau-practical__grid,
	.lohtu-kau-cta__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

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

	.lohtu-kau-special__card {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Hero stacks: natural order = content → portrait → actions
	   (mobile artboard: photo between text and buttons) */
	.lohtu-kau-hero__content,
	.lohtu-kau-hero__actions,
	.lohtu-kau-hero__portrait {
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
	}

	.lohtu-kau-hero__photo {
		width: min(420px, 60vw);
		height: min(420px, 60vw);
	}

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

	.lohtu-kau-cta__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.lohtu-kau-cta__actions .wp-block-button__link {
		width: auto;
	}
}

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

	.lohtu-kau-phero__map {
		height: 240px;
	}

	/* mobile artboard: 180px circle */
	.lohtu-kau-hero__photo {
		width: 180px;
		height: 180px;
	}

	.lohtu-kau-hero__photo--placeholder {
		font-size: 44px;
	}

	.lohtu-kau-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-kau-steps__list::before {
		display: none;
	}

	.lohtu-kau-steps__num {
		box-shadow: none;
	}

	.lohtu-kau-venues__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-kau-prices__row strong {
		font-size: 24px;
	}
}

/* ============================================================
   City page — license-entrepreneur variant (.lohtu-kau-yrit on
   the .lohtu-kau root; KaupunkiYrittaja-Desktop artboard).
   Handoff 2026-10-14: the "Paikallinen yrittäjäsi" and
   "Lisenssiyrittäjät muilla paikkakunnilla" sections are gone and
   the section background rhythm matches the standard city page,
   so only the hero deltas remain.
   ============================================================ */

.lohtu-kau-yrit .lohtu-kau-hero h1 {
	font-size: clamp(38px, 4.4vw, 60px);
}