/*
 * 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 ----
 *
 * Their photo band, rebuilt from their own Elementor output (element 345edcd,
 * identical on all five inner pages): 324px of visible photo, cover-cropped
 * centre, a 70%-to-40% black top-down wash, white 300-weight title sitting on
 * the bottom edge, 64px of padding around it.
 *
 * ONE deliberate difference: on their site the nav is transparent and floats
 * over the picture, so their 324px includes the header. Ours is opaque on
 * inner pages (only the front page runs the transparent header), so the band
 * has to carry the header's height on top for the same 324px to stay visible.
 * Hence --hero-headroom below, measured in the browser rather than assumed:
 * the header is 108px under 768 and 145px above it.
 */
.page-hero {
	--hero-headroom: 108px; /* how much of the band the fixed header covers */
	--hero-band: 200px; /* their visible photo height */

	position: relative;
	isolation: isolate; /* keeps the photo and wash behind the text, not the page */
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* their layout: the title rests on the bottom edge */
	min-height: calc(var(--hero-headroom) + var(--hero-band));
	background: var(--ink-deep); /* holds the band's colour until the photo paints */
	padding-block: calc(104px + var(--s-16)) var(--s-16); /* clears the fixed header */
}

.page-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*
 * Their wash is linear-gradient(180deg, #000000B2, #00000066) — 70% black down
 * to 40%. Two adjustments, both measured rather than judged by eye:
 *
 * 1. The 70% is held to the bottom of the header, so the fade starts where the
 *    photo actually becomes visible. Run edge-to-edge instead and the header
 *    would eat the dark end, leaving our visible band paler than theirs.
 * 2. The bottom stop is 52%, not their 40%. Their band carries a title alone;
 *    ours also carries an intro line, and white body text over the photo
 *    measured 3.2:1 at their value — under the 4.5:1 floor. 52% clears it.
 *    Large text was fine either way; this exists for the small line.
 */
.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.7) 0,
		rgba(0, 0, 0, 0.7) var(--hero-headroom),
		rgba(0, 0, 0, 0.52) 100%
	);
}

/*
 * NOTE the descendant selector on the two colour rules below. 404.php and
 * single.php borrow .page-hero__title for a title that is NOT in the band — it
 * sits on plain cream — so colouring the class itself turns those two titles
 * white on cream (axe measured 1.03:1: invisible). The white belongs to the
 * photo band, not to the class.
 */
.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;
}

/*
 * Post titles are written by the client in wp-admin, and Finnish compounds get
 * long: at 390px "ryhmäkorjaushankkeen" did not fit and the global
 * overflow-wrap snapped it mid-word with no hyphen. Proper hyphenation needs
 * the page's lang="fi" (or the post's own lang attribute), which it has.
 */
.single-head .page-hero__title {
	-webkit-hyphens: auto; /* Safari still needs the prefix. */
	hyphens: auto;
}

/* Their value for the heading over the photo (--e-global-color-274c37d). */
.page-hero .page-hero__title,
.page-hero .page-hero__lead {
	color: #fff;
}

@media (min-width: 768px) {
	.page-hero {
		--hero-headroom: 145px;
		--hero-band: 324px;
	}
}

/* ---- 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;
}

/*
 * Tables in post content (blog posts write them as wp:table blocks).
 *
 * Deliberately the SAME visual language as the erillishinnasto rows above:
 * hairline rows, no boxes, no zebra striping. Most post tables on this site
 * are label/figure comparisons, so they should read as the price list the
 * reader may already have seen rather than as a second, unrelated device.
 *
 * ⚠ The scroll container is a correctness fix, not decoration. `html, body`
 * carry `overflow-x: clip` (added when the closed mobile drawer overflowed),
 * so a table wider than the viewport would be CROPPED SILENTLY instead of
 * failing the shot.js overflow gate. Same class of trap as the growth-line
 * leaves. Never remove the overflow-x without re-checking a wide table at
 * 320px.
 *
 * No column is right-aligned on purpose: that would assume the last column is
 * always a figure, and a future table with text there would read as broken.
 * tabular-nums does the digit-alignment work instead, and is harmless on text.
 */
.entry .wp-block-table {
	margin: var(--s-8) 0;
	overflow-x: auto;
}

.entry table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.entry th,
.entry td {
	padding-block: var(--s-4);
	padding-inline: 0 var(--s-6);
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: baseline;
}

.entry th:last-child,
.entry td:last-child {
	padding-inline-end: 0;
}

.entry thead th {
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--text-muted);
}

/* ---- 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;
	grid-template-columns: minmax(0, 1fr);
	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;
}

/* The closing photograph: the page's one photographic moment. */
.service-outro {
	margin: var(--s-24) 0 0;
}

.service-outro__photo {
	width: 100%;
	border-radius: var(--radius);
}

.service-outro__caption {
	margin-top: var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

@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;
}

/*
 * Hairline rows spanning the full container, not cards: each is a signpost,
 * and boxing nine of them would build a wall of containers. (The list must
 * override the global ul measure — it is layout, not prose.)
 */
.useful-links__list {
	display: grid;
	gap: 0 var(--s-12);
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.useful-links__item {
	margin: 0;
	padding-block: var(--s-6);
	border-top: 1px solid var(--line);
}

.useful-links__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

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

/* The outbound arrow answers the hover by stepping out. */
.useful-links__arrow {
	flex-shrink: 0;
	align-self: center;
	color: var(--koivu);
	transition: transform var(--dur-fast) var(--ease);
}

.useful-links__link:hover .useful-links__arrow {
	transform: translate(3px, -3px);
}

.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: 1024px) {
	.useful-links__list {
		grid-template-columns: repeat(3, 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) ---- */

/*
 * Twelve groups run to about 12 000px, so the page gets a sticky index beside
 * them rather than asking anyone to scroll and hope. Below 1024 the index is
 * a plain list above the prices — a sticky rail would eat a phone screen.
 */
.price-layout {
	display: grid;
	gap: var(--s-12);
}

.price-index__title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.price-index__list {
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
	border-top: 1px solid var(--line);
}

.price-index__list li {
	margin: 0;
}

.price-index__link {
	display: block;
	padding-block: var(--s-2);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-small);
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

.price-index__link:hover {
	color: var(--koivu);
}

/* A jumped-to group must not land under the fixed header. */
.price-group {
	scroll-margin-top: calc(104px + var(--s-8));
}

.price-group + .price-group {
	margin-top: var(--s-16);
}

@media (min-width: 1024px) {
	.price-layout {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: clamp(var(--s-12), 5vw, var(--s-24));
		align-items: start;
	}

	.price-index {
		position: sticky;
		top: calc(104px + var(--s-8));
	}
}

.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 styles — contact split, hours panel, office card, team —
   moved to pages/contact.css when the page was rebuilt as editorial sections.) */

/* ---- Tarjouspyyntö (D6) ---- */
/* (The quote page now uses the shared .form-band layout — see
   components/form-band.css. Its old .quote-intro block is gone.) */