/*
 * page.css — shared furniture for the inner pages.
 *
 * The page hero, the editorial article measure, and the post meta. Section
 * components are reused from the homepage wherever the content matches.
 */

/* ---- Page hero ---- */
.page-hero {
	background: var(--bg-alt);
	padding-block: calc(104px + var(--s-16)) var(--s-16); /* clears the fixed header */
	border-bottom: 1px solid var(--line);
}

.page-hero__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.page-hero__lead {
	margin: var(--s-6) 0 0;
	max-width: 60ch;
}

/* ---- Editorial body copy (single post, simple pages) ---- */
.entry {
	max-width: 68ch;
}

.entry > * + * {
	margin-top: var(--s-6);
}

.entry h2 {
	margin-top: var(--s-12);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 500;
}

.entry h3 {
	margin-top: var(--s-8);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
}

.entry img {
	border-radius: var(--radius);
}

.entry blockquote {
	margin: var(--s-8) 0;
	padding-left: var(--s-6);
	border-left: 2px solid var(--koivu);
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--ink);
}

.entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Post meta ---- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-bottom: var(--s-8);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* ---- Blog index grid ---- */
.post-grid {
	display: grid;
	gap: var(--s-12) var(--s-8);
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.post-grid > li {
	margin: 0;
}

@media (min-width: 600px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- 404 ---- */
.error-404 {
	text-align: center;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-4);
	margin: var(--s-8) 0 0;
	max-width: none;
}

/* ---- Service detail (Palvelumme) ---- */
.service-detail {
	display: grid;
	gap: var(--s-16);
	max-width: 72rem;
}

.service-detail__title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	line-height: var(--lh-heading);
}

.service-detail__body p {
	margin: 0 0 var(--s-4);
	max-width: 68ch;
	color: var(--text-muted);
}

.service-detail__body p:last-child {
	margin-bottom: 0;
}

.service-detail__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin: var(--s-16) 0 0;
	max-width: none;
}

@media (min-width: 900px) {
	/* Title left, prose right: the page scans as a list of answers. */
	.service-detail__block {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: var(--s-12);
		align-items: start;
	}
}

/* ---- Taloyhtiöportaali (D3) ---- */
.portal-intro {
	max-width: 68ch;
}

.portal-intro p {
	margin: 0 0 var(--s-4);
	color: var(--text-muted);
}

.portal-intro .lead {
	color: var(--ink);
}

.portal-intro__actions {
	margin: var(--s-8) 0 0;
}

/*
 * The three audiences are hairline rows, not three equal cards: they are one
 * list of answers to "what can I do here", and boxing them would make them
 * look like three products to choose between.
 */
.portal-audiences {
	margin-top: var(--s-16);
	border-top: 1px solid var(--line);
}

.portal-audience {
	padding-block: var(--s-8);
	border-bottom: 1px solid var(--line);
}

.portal-audience__title {
	margin: 0 0 var(--s-2);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 500;
	line-height: var(--lh-heading);
}

/* The client's own parenthetical, kept as a quieter second line. */
.portal-audience__note {
	display: block;
	margin-top: var(--s-1);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--muted);
}

.portal-audience__text {
	margin: 0;
	max-width: 68ch;
	color: var(--text-muted);
}

/* ---- Usein kysytyt (D4) ---- */

/* On its own page the accordion is the content, so it gets the full measure. */
.faq--page .faq__tabs {
	margin-top: 0;
}

.useful-links {
	margin-top: var(--s-16);
	padding-top: var(--s-12);
	border-top: 1px solid var(--line);
}

.useful-links__title {
	margin: 0 0 var(--s-8);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 500;
}

/*
 * Two columns of links, not cards: each is a signpost, and boxing nine of
 * them would build a wall of containers.
 */
.useful-links__list {
	display: grid;
	gap: var(--s-6) var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.useful-links__item {
	padding-bottom: var(--s-6);
	border-bottom: 1px solid var(--line);
}

.useful-links__link {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--koivu);
	transition: color 0.2s ease;
}

.useful-links__link:hover {
	color: var(--koivu);
}

.useful-links__text {
	margin: var(--s-2) 0 0;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

@media (min-width: 768px) {
	.useful-links__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.portal-audience {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: var(--s-12);
		align-items: start;
	}

	.portal-audience__title {
		margin-bottom: 0;
	}
}

/* ---- Price list (Erillishinnasto) ---- */
.price-group + .price-group {
	margin-top: var(--s-16);
}

.price-group__title {
	margin: 0 0 var(--s-6);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 500;
}

.price-list {
	margin: 0;
	max-width: 60rem;
}

/* Rows, not a boxed table: label left, figure right, hairline between. */
.price-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2) var(--s-8);
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--line);
}

.price-list__row:first-child {
	border-top: 1px solid var(--line);
}

.price-list__row dt {
	flex: 1 1 20ch;
	color: var(--ink);
}

.price-list__row dd {
	margin: 0;
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}

/*
 * Some rows state a condition instead of a figure ("postitaksan perusteella",
 * "veloitukseton"). Those must wrap — a nowrap sentence pushes the row wider
 * than the viewport on a phone.
 */
.price-list__row dd.price-list__value--text {
	flex: 1 1 18ch;
	white-space: normal;
	text-align: right;
	text-wrap: pretty;
}

.price-group__note {
	margin: var(--s-4) 0 0;
	max-width: 60rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* ---- Yhteystiedot (D5) ---- */
.contact-grid {
	display: grid;
	gap: var(--s-8);
}

.contact-card__title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
}

.contact-list {
	margin: 0;
}

.contact-list__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-4);
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--line);
}

.contact-list__row:first-child {
	border-top: 1px solid var(--line);
}

.contact-list__row dt {
	color: var(--text-muted);
	font-size: var(--fs-small);
}

.contact-list__row dd {
	margin: 0;
	text-align: right;
}

.contact-card__note,
.contact-card__text {
	margin: var(--s-4) 0 0;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* ---- Team ---- */
.team {
	margin-top: var(--s-16);
	padding-top: var(--s-12);
	border-top: 1px solid var(--line);
}

.team__title,
.contact-form-section__title {
	margin: 0 0 var(--s-8);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
}

.team__list {
	display: grid;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A person is a row with a mark, not a boxed card: nine boxes would read as a
 * product grid. The initials stand in until real portraits arrive (A9).
 */
.team__member {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-4);
	align-items: start;
}

.team__initials {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--koivu);
}

.team__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 500;
}

/*
 * A person's name is NEVER hyphenated or balanced: the global h1–h3
 * text-wrap: balance split "Kaisa Näreranta" across two lines, and with
 * hyphenation on that became "Kai-sa". Names break at spaces or not at all.
 */
.team__name {
	text-wrap: normal;
	-webkit-hyphens: manual; /* Safari still needs the prefix. */
	hyphens: manual;
}

/*
 * Job titles may hyphenate. Finnish ones are long compounds
 * ("Kiinteistöassistentti") and the global overflow-wrap would otherwise snap
 * one at an arbitrary point; the page declares lang="fi", which is what makes
 * proper Finnish hyphenation patterns apply.
 */
.team__role {
	-webkit-hyphens: auto; /* Safari still needs the prefix. */
	hyphens: auto;
}

.team__role {
	margin: 2px 0 0;
	color: var(--ink);
}

.team__quals {
	margin: 2px 0 0;
	font-size: var(--fs-small);
	color: var(--muted);
}

.team__contact {
	margin: var(--s-2) 0 0;
	font-size: var(--fs-small);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
}

.contact-form-section {
	margin-top: var(--s-16);
	padding-top: var(--s-12);
	border-top: 1px solid var(--line);
}

.contact-form-section__lead {
	margin: 0 0 var(--s-8);
	max-width: 60ch;
	color: var(--text-muted);
}

@media (min-width: 700px) {
	.contact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.team__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-8) var(--s-12);
	}
}

@media (min-width: 1024px) {
	.contact-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Three people per row only once a column is genuinely wide enough for a
 * Finnish job title next to the initials mark. At 1024 it was not, and the
 * titles broke mid-word.
 */
@media (min-width: 1240px) {
	.team__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- Tarjouspyyntö (D6) ---- */
.quote-intro {
	max-width: 60ch;
	margin-bottom: var(--s-12);
}

.quote-intro p {
	margin: 0 0 var(--s-4);
	color: var(--text-muted);
}