/* =============================================================
   Dista Modular — single stylesheet (frontend + editor)

   Rules of this file:
   - Every color / spacing / font value references a theme.json
     preset variable. No stray hex codes, no one-off pixel values.
   - Mobile-first: base styles are the 375px experience, media
     queries only add desktop enhancements.
   - Desktop breakpoint 782px matches WordPress' own columns
     stacking breakpoint so everything reflows at the same width.
   ============================================================= */

:root {
	--dista-base: var(--wp--preset--color--base);
	--dista-surface: var(--wp--preset--color--surface);
	--dista-surface-2: var(--wp--preset--color--surface-2);
	--dista-ink: var(--wp--preset--color--contrast);
	--dista-ink-2: var(--wp--preset--color--contrast-2);
	--dista-primary: var(--wp--preset--color--primary);
	--dista-secondary: var(--wp--preset--color--secondary);
	--dista-outline: var(--wp--preset--color--outline);
	--dista-outline-soft: var(--wp--preset--color--outline-soft);
	--dista-mono: var(--wp--preset--font-family--mono);
	--dista-radius: 4px;
	--dista-radius-lg: 8px;
}

/* ---------- 1. Base ---------- */

::selection {
	background: var(--dista-primary);
	color: var(--dista-base);
}

:focus-visible {
	outline: 2px solid var(--dista-primary);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- 2. Utilities ---------- */

/* Small caps mono label — the "YRITYS" / "02 NÄIN SE TOIMII" role. */
.dista-label {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
}

.dista-hairline-top {
	border-top: 1px solid var(--dista-outline);
}

.dista-hairline-bottom {
	border-bottom: 1px solid var(--dista-outline);
}

/* ---------- 3. Header ---------- */

.dista-header {
	position: sticky;
	top: 0;
	z-index: 200;
	border-bottom: 1px solid var(--dista-outline);
}

/* The blur lives on a pseudo-element: backdrop-filter directly on
   the header would create a containing block that traps the mobile
   navigation overlay (position:fixed) inside the header bar. */
.dista-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--dista-base) 88%, transparent);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.dista-header__bar {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.dista-header__logo img {
	height: 34px;
	width: auto;
	border-radius: var(--dista-radius);
	display: block;
}

.dista-header .wp-block-navigation a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Top-level menu item spacing. Synced wp_navigation blocks often drop
   blockGap from the template-part wrapper, so enforce it in CSS — this
   also survives staging DB pulls that overwrite header markup. */
.dista-header .wp-block-navigation.is-layout-flex {
	gap: 56px;
}

.dista-header .wp-block-navigation a:hover,
.dista-header .wp-block-navigation a:focus-visible {
	color: var(--dista-primary);
}

/* Mobile overlay menu inherits the dark palette. Core navigation
   often paints link colors that lose contrast on --dista-base, so
   force ink on every interactive item inside the open overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--dista-base) !important;
	color: var(--dista-ink) !important;
	padding-top: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	color: var(--dista-ink) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--dista-primary) !important;
}

/* Top-level section labels. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item
	> .wp-block-navigation-submenu__toggle {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--10);
}

/* Child links: compact list under the parent, no nested chrome. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item
	a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	padding: var(--wp--preset--spacing--10) 0;
}

/* Palvelut icons — same SVGs as the desktop mega panel. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/suunnittelu"]::before,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/resursointi"]::before,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/data-ja-analytiikka"]::before {
	content: "";
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/suunnittelu"]::before {
	background-image: url("../images/icons/suunnittelu.svg");
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/resursointi"]::before {
	background-image: url("../images/icons/resursointi.svg");
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	a[href*="/palvelut/data-ja-analytiikka"]::before {
	background-image: url("../images/icons/data.svg");
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--dista-ink);
}

/* Core Navigation overlayMenu:"mobile" flips at 600px. Raise it to the
   theme's 782px breakpoint so tablet widths (e.g. 768) get the hamburger
   instead of a squeezed desktop bar. */
@media (max-width: 781.98px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* Native dropdown submenus (desktop / non-overlay) keep the
   surface treatment. Inside the open mobile overlay they flatten
   into an indented list under each section label. */
.wp-block-navigation__submenu-container {
	background-color: var(--dista-surface) !important;
	border: 1px solid var(--dista-outline) !important;
	border-radius: var(--dista-radius-lg);
	padding: var(--wp--preset--spacing--20) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0;
	padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) !important;
	box-shadow: none !important;
}

/* ---------- 4. Mega menu panel ---------- */

.dista-mega {
	background: var(--dista-surface);
	border-bottom: 1px solid var(--dista-outline);
}

/* Frontend behavior: hidden dropdown attached to the header. */
body:not(.editor-styles-wrapper) .dista-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* alignfull negative margins would shift the absolutely
	   positioned panel past the viewport edges. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45);
}

body:not(.editor-styles-wrapper) .dista-mega.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* The mega panel is a desktop-only construct; the mobile overlay
   menu (native submenu items) replaces it below 782px. */
@media (max-width: 781.98px) {
	body:not(.editor-styles-wrapper) .dista-mega {
		display: none;
	}
}

/* On desktop the mega panel replaces the native Palvelut dropdown. */
@media (min-width: 782px) {
	.has-mega-menu .wp-block-navigation__submenu-container {
		display: none !important;
	}
}

/* In the Site Editor the panel renders in normal flow so the team
   can edit it. The dashed line marks it as the dropdown surface. */
.editor-styles-wrapper .dista-mega {
	position: static;
	border: 1px dashed var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	margin-top: var(--wp--preset--spacing--20);
}

/* The panel spans the full viewport; its inner content is a
   self-contained centered column — hard cap at the wide size with
   the standard 24px gutter, immune to nested-alignment quirks. */
.dista-mega__inner {
	max-width: 1400px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: var(--wp--preset--spacing--40) 24px;
}

/* Every direct child of the panel spans the panel's full width —
   the editor's content/wide width distinctions don't apply inside
   a dropdown, and letting them leak in is what misaligns rows. */
.dista-mega__inner > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The mega panel's columns fill the full panel height: each item
   grows to an equal slot, so all three columns bottom-align and
   their rows line up with each other. */
@media (min-width: 782px) {
	.dista-mega__inner > .wp-block-columns > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	.dista-mega__inner > .wp-block-columns > .wp-block-column > .wp-block-heading {
		flex: 0 0 auto;
	}

	.dista-mega__inner > .wp-block-columns > .wp-block-column > .wp-block-group,
	.dista-mega__inner > .wp-block-columns > .wp-block-column > .wp-block-columns {
		flex: 1 1 auto;
	}

	/* Text-only items center within their slot to match the
	   vertically-centered icon rows. */
	.dista-mega__inner > .wp-block-columns > .wp-block-column > .wp-block-group:not(.dista-mega-item) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* Title + description sit flush; global blockGap (1.25rem)
		   and paragraph margins would otherwise open a large gap. */
		gap: 0;
	}

	/* Constrained-layout children carry auto side margins, which
	   inside a flex column would shrink and center them — force
	   them back to full-width left alignment. Also kill the
	   blockGap-emulation margin-block-start between siblings. */
	.dista-mega__inner > .wp-block-columns > .wp-block-column > .wp-block-group:not(.dista-mega-item) > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
		width: 100%;
	}
}

/* Icon nav item: icon tile + title + description. */
.dista-mega-item {
	border-radius: var(--dista-radius-lg);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	transition: background-color 0.15s ease;
}

.dista-mega-item:hover {
	background: var(--dista-surface-2);
}

.dista-mega-item p {
	margin: 0;
}

.dista-icon-tile {
	width: 44px;
	height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dista-surface-2);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
}

.dista-icon-tile img {
	width: 22px;
	height: 22px;
}

/* Equal-height cards: when a card is a column's only child it
   stretches to the row height, so side-by-side card edges always
   align regardless of how much text each one holds. */
.wp-block-column > .dista-mega-card:only-child,
.wp-block-column > .is-style-framed:only-child {
	height: 100%;
	box-sizing: border-box;
}

/* Featured card inside the mega panel. */
.dista-mega-card {
	background: linear-gradient(150deg, var(--dista-surface-2), var(--dista-surface));
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	min-height: 170px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.dista-badge {
	font-family: var(--dista-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dista-secondary);
	background: var(--dista-surface-2);
	border: 1px solid var(--dista-outline);
	border-radius: 999px;
	padding: 3px 10px;
	display: inline-block;
}

/* ---------- 5. Footer ---------- */

.dista-footer {
	border-top: 1px solid var(--dista-outline);
}

/* Brand column: vertically center its content within the row height
   (the divided-columns row stretches every column to match the
   tallest one, so the shorter brand column would otherwise sit
   pinned to the top with empty space below it). */
.dista-footer .is-style-divided-columns > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dista-footer__logo img {
	width: 90%;
	max-width: 480px;
	height: auto;
	border-radius: var(--dista-radius);
}

.dista-footer .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
}

.dista-footer .wp-block-navigation a {
	color: var(--dista-ink);
}

.dista-footer .wp-block-navigation a:hover {
	color: var(--dista-primary);
}

/* Brand-column LinkedIn: large ghost button (icon + label). */
.dista-footer__linkedin .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 3rem;
	padding: 0.85em 1.5em;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
}

.dista-footer__linkedin .wp-block-button__link img {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

/* ---------- 6. Block styles ---------- */

/* 6a0. List indent: the browser default (~40px) reads as an awkward
   double-indent once it's added on top of column padding (e.g. inside
   is-style-divided-columns), pushing bullets far from the column edge. */
.wp-block-list {
	padding-inline-start: 1.25em;
}

/* 6a. Divided columns: hairline vertical dividers that become
   horizontal dividers when the columns stack on mobile. */
@media (min-width: 782px) {
	.wp-block-columns.is-style-divided-columns {
		gap: 0;
	}

	.wp-block-columns.is-style-divided-columns > .wp-block-column {
		border-left: 1px solid var(--dista-outline-soft);
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	.wp-block-columns.is-style-divided-columns > .wp-block-column:first-child {
		border-left: none;
		padding-left: 0;
	}

	.wp-block-columns.is-style-divided-columns > .wp-block-column:last-child {
		padding-right: 0;
	}
}

@media (max-width: 781.98px) {
	.wp-block-columns.is-style-divided-columns > .wp-block-column:not(:first-child) {
		border-top: 1px solid var(--dista-outline-soft);
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* 6b. Logo grid on the native Gallery block. Team controls the
   column count with the gallery's own Columns slider. */
.wp-block-gallery.is-style-dista-logo-grid {
	gap: 0 !important;
	border-top: 1px solid var(--dista-outline);
	border-bottom: 1px solid var(--dista-outline);
	align-items: stretch !important;
}

.wp-block-gallery.is-style-dista-logo-grid .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	width: 100%;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--40) 10px;
	min-height: 112px;
	border-right: 1px solid var(--dista-outline-soft);
}

.wp-block-gallery.is-style-dista-logo-grid .wp-block-image:last-child {
	border-right: none;
}

/* Logo bar: stretch each mark to nearly fill its cell (width-led sizing).
   Selector specificity matches WP gallery `height:auto` (0,3,2). */
.wp-block-gallery.is-style-dista-logo-grid.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	filter: none;
	mix-blend-mode: normal;
	opacity: 0.92;
	transition: opacity 0.2s ease;
}

.wp-block-gallery.is-style-dista-logo-grid .wp-block-image:hover img {
	opacity: 1;
}

/* A trust bar reads as one continuous line, not a wrapped grid —
   force a single row regardless of the editor's "columns" setting,
   shrinking each logo to fit. Only on mobile, where a single row of
   every logo would be illegibly small, does it wrap into a grid. */
@media (min-width: 782px) {
	.wp-block-gallery.is-style-dista-logo-grid {
		flex-wrap: nowrap !important;
	}

	.wp-block-gallery.is-style-dista-logo-grid .wp-block-image {
		flex-basis: 0;
		flex-shrink: 1;
		min-width: 0;
		padding: 40px 10px;
		min-height: 148px;
	}
}

/* 6c. Ghost button: gold border secondary CTA. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--dista-ink);
	border: 1px solid var(--dista-secondary);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--dista-secondary) 8%, transparent);
	color: var(--dista-secondary);
}

/* 6d. Framed card group. */
.wp-block-group.is-style-framed {
	background: var(--dista-surface);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
}

/* ---------- 7. Section header pattern ---------- */

.dista-section-header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.dista-section-header::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--dista-outline);
}

.dista-section-header p {
	margin: 0;
}

/* ---------- 8. CTA row ---------- */

.dista-cta-row {
	background: var(--dista-surface);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
}

/* Decorative soittosimulaatio preview under the CTA copy/button.
   flex-basis 100% forces a full-width wrap under the existing row. */
.dista-cta-row .dista-sim-mock {
	flex: 1 1 100%;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	background: var(--dista-base);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	overflow: hidden;
}

.dista-sim-mock__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--dista-surface-2);
	border-bottom: 1px solid var(--dista-outline);
}

.dista-sim-mock__title {
	font-family: var(--dista-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
}

.dista-sim-mock__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dista-sim-mock__chip {
	font-family: var(--dista-mono);
	font-size: 0.65rem;
	color: var(--dista-ink-2);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius);
	padding: 2px 7px;
	background: var(--dista-surface);
}

.dista-sim-mock__chip.is-accent {
	color: var(--dista-primary);
	border-color: color-mix(in srgb, var(--dista-primary) 40%, var(--dista-outline));
}

.dista-sim-mock__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dista-sim-mock__table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-family: var(--dista-mono);
	font-size: 0.75rem;
}

.dista-sim-mock__table th {
	text-align: left;
	color: var(--dista-ink-2);
	font-weight: 500;
	padding: 10px 12px;
	border-bottom: 1px solid var(--dista-outline);
	white-space: nowrap;
}

.dista-sim-mock__table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--dista-outline-soft);
	color: var(--dista-ink);
	white-space: nowrap;
}

.dista-sim-mock__table tr:last-child td {
	border-bottom: none;
}

.dista-sim-mock__table .is-row-label {
	font-weight: 700;
}

.dista-sim-mock__table .is-accent {
	color: var(--dista-primary);
	font-weight: 700;
}

.dista-sim-mock__table .is-muted {
	color: var(--dista-ink-2);
}

.dista-sim-mock__table .is-total td {
	background: color-mix(in srgb, var(--dista-surface-2) 75%, transparent);
	font-weight: 700;
}

/* ---------- 8b. Asiakaspolku timeline ---------- */

/* Mobile-first: a single column against a left rail. From 782px up
   the rail moves to the center and steps alternate sides — driven
   by nth-child, so adding/removing steps keeps the rhythm. */
.dista-polku {
	position: relative;
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.dista-polku::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	width: 1px;
	background: var(--dista-outline);
}

.dista-polku__step {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
}

.dista-polku__step::before {
	content: "";
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dista-primary);
	left: 0;
	top: 4px;
}

@media (min-width: 782px) {
	.dista-polku::before {
		left: 50%;
	}

	.dista-polku__step {
		width: calc(50% - 56px);
		padding-left: 0;
	}

	.dista-polku__step::before {
		top: 5px;
	}

	.dista-polku__step:nth-child(odd) {
		text-align: right;
	}

	.dista-polku__step:nth-child(odd)::before {
		left: auto;
		right: -61px;
	}

	.dista-polku__step:nth-child(even) {
		margin-left: calc(50% + 56px);
		text-align: left;
	}

	.dista-polku__step:nth-child(even)::before {
		left: -61px;
	}
}

/* ---------- 8b2. Process steps ---------- */

/* Columns already stretch to equal height (default columns
   behavior). Make each step a flex column filling that height, then
   pin the stat block (divider + label + value) to the bottom via
   margin-top:auto on the divider — so the stat row lines up across
   all steps regardless of how long each heading/description runs. */
.dista-process-step {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dista-process-step .wp-block-separator.is-style-wide {
	width: 32px;
	margin-top: auto;
	margin-bottom: var(--wp--preset--spacing--20);
	/* Keep the short rule under centered Gutenberg textAlign;
	   does not set text-align — editor alignment still wins on labels/stats. */
	align-self: center;
}

.dista-process-step h3 {
	margin: 0;
}

.dista-process-step > .wp-block-paragraph {
	margin: 0;
}

/* The step description is real body copy, not a caption — keep it at
   full reading contrast instead of the dimmer "contrast-2" tone some
   of these blocks were authored with, so shade doesn't vary between
   process-step cards and the ordinary body paragraphs around them. */
.dista-process-step > .wp-block-paragraph.has-contrast-2-color {
	color: var(--dista-ink) !important;
}

/* Non-front pages: body copy uses full white (contrast), not muted
   contrast-2. Front page keeps authored muted lead text. */
body:not(.home):not(.front-page) .entry-content .has-contrast-2-color {
	color: var(--dista-ink) !important;
}

body:not(.home):not(.front-page) .entry-content .dista-pricing-card__list {
	color: var(--dista-ink);
}

/* Space between description and the stat divider (above the gray line). */
.dista-process-step > .wp-block-paragraph:has(+ .wp-block-separator) {
	margin-bottom: 1rem;
}

/* ---------- 8b3. Pricing: one card style, featured = class ---------- */

/* All three cards share identical markup + this base style.
   Add `is-featured` on the Group to activate accent colors + solid CTA.
   Swap which tier is recommended by moving that one class. */
.dista-pricing-card {
	height: 100%;
	box-sizing: border-box;
	position: relative;
	gap: 0;
}

.dista-pricing-card > * {
	margin-top: 0;
	margin-bottom: 0;
}

.dista-pricing-card__tag {
	display: inline-block;
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--20);
	visibility: hidden;
}

.dista-pricing-card .dista-label {
	margin-bottom: 6px;
}

.dista-pricing-card h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
}

.dista-pricing-card__price {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--sans) !important;
	line-height: 1.2;
}

.dista-pricing-card .wp-block-separator {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}

.dista-pricing-card__list {
	color: var(--dista-ink-2);
}

.dista-pricing-card .dista-pricing-card__list {
	margin-bottom: var(--dista-pricing-button-reserve, 96px);
}

.dista-pricing-card__list li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.dista-pricing-card__button {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	margin-top: 0 !important;
}

/* Default CTA = ghost. Featured overrides below. */
.dista-pricing-card__button .wp-block-button__link {
	width: 100%;
	text-align: center;
	background: transparent;
	color: var(--dista-ink);
	border: 1px solid var(--dista-secondary);
}

.dista-pricing-card__button .wp-block-button__link:hover,
.dista-pricing-card__button .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--dista-secondary) 8%, transparent);
	color: var(--dista-secondary);
}

/* --- Featured: one class activates tag, label, price, solid button --- */
.dista-pricing-card.is-featured .dista-pricing-card__tag {
	visibility: visible;
	color: var(--dista-primary);
}

.dista-pricing-card.is-featured .dista-label,
.dista-pricing-card.is-featured .dista-pricing-card__price {
	color: var(--dista-primary);
}

.dista-pricing-card.is-featured .dista-pricing-card__button .wp-block-button__link {
	background: var(--dista-primary);
	border-color: var(--dista-primary);
	color: var(--dista-base);
	font-weight: 500;
}

.dista-pricing-card.is-featured .dista-pricing-card__button .wp-block-button__link:hover,
.dista-pricing-card.is-featured .dista-pricing-card__button .wp-block-button__link:focus-visible {
	background: var(--dista-secondary);
	border-color: var(--dista-secondary);
	color: var(--dista-base);
}

/* ---------- 8c. Team grid ---------- */

/*
 * WP Group grid with a fixed columnCount emits
 * grid-template-columns: repeat(N, minmax(0, 1fr)) and does not
 * collapse on narrow viewports — that crushed contact cards on
 * mobile. Override to 1→3 at the theme breakpoint. !important
 * matches the specificity fight documented for core layout CSS.
 */
.dista-team-grid.is-layout-grid {
	grid-template-columns: 1fr !important;
	/* Saved pages often omit blockGap; WP default is 0.5em (~9px). */
	gap: max(10px, var(--wp--preset--spacing--40));
}

@media (min-width: 782px) {
	.dista-team-grid.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/*
 * Stacked (≤781px): portrait crop that scales with card width, capped
 * so tablet (~768) gets a tall photo without eating the whole viewport.
 * Absolute img fill keeps WP's height:auto on <img> from expanding the
 * figure. Desktop 3-col keeps a fixed height.
 */
.dista-team-card__photo {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	max-height: 480px;
	border-radius: var(--dista-radius-lg);
	border: 1px solid var(--dista-outline);
}

@media (min-width: 782px) {
	.dista-team-card__photo {
		aspect-ratio: auto;
		height: 220px;
		max-height: none;
	}
}

.dista-team-card__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.dista-team-card h4 {
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.dista-team-card > .wp-block-paragraph {
	margin: 0;
}

.dista-team-card__icons {
	margin-top: var(--wp--preset--spacing--20);
}

.dista-team-card__icon img {
	width: 20px;
	height: 20px;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.dista-team-card__icon:hover img {
	opacity: 1;
}

.dista-team-card .wp-block-button {
	width: 100%;
}

.dista-team-card .wp-block-button__link {
	white-space: normal;
	text-align: center;
}

/* ---------- 9. Blog ---------- */

.dista-card {
	background: var(--dista-surface);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	overflow: hidden;
	height: 100%;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.dista-card:hover {
	border-color: var(--dista-surface-2);
	transform: translateY(-2px);
}

.dista-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.dista-card .wp-block-post-excerpt__excerpt {
	color: var(--dista-ink-2);
	font-size: var(--wp--preset--font-size--small);
}

.dista-card .wp-block-post-date,
.dista-article-meta,
.dista-article-meta a,
.wp-block-post-date {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
}

.wp-block-query-pagination {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination a:hover {
	color: var(--dista-primary);
}

/* Single post reading column niceties.
   Title + meta sit on the wide rail (same left edge as the header logo).
   Post body stays on the centered content measure, one “title tab” in. */
.dista-article {
	/* ~“Min…” under the H1 — a fraction of the title size, not the full em. */
	--dista-article-indent: calc(var(--wp--preset--font-size--huge) * 0.35);
}

.dista-article .wp-block-post-content {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto !important;
	padding-inline-start: var(--dista-article-indent);
}

.dista-article .wp-block-post-content p {
	line-height: 1.7;
}

/* A little editorial life on the reading column: the opening
   paragraph reads as a lede (larger, full-contrast), and its first
   letter gets a quiet accent-colored drop cap. */
.dista-article .wp-block-post-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--dista-ink);
}

.dista-article .wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--serif, var(--wp--preset--font-family--sans));
	font-size: 3.2em;
	font-weight: 300;
	line-height: 0.8;
	float: left;
	padding-right: 0.1em;
	color: var(--dista-primary);
}

/* Reading time badge, appended after the post-date block's own text. */
.dista-reading-time {
	display: inline-flex;
	align-items: center;
}

.dista-reading-time::before {
	content: "·";
	margin: 0 0.5em;
	opacity: 0.6;
}

.dista-article .wp-block-post-featured-image:not(:empty) {
	margin-block: var(--wp--preset--spacing--40);
}

.dista-article .wp-block-post-featured-image img {
	border-radius: var(--dista-radius-lg);
	border: 1px solid var(--dista-outline);
}

/* ---------- 9b. Cookie consent banner ---------- */

.dista-cookie-banner {
	position: fixed;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 300;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: 720px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--30);
	background: var(--dista-surface);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.dista-cookie-banner.is-visible {
	opacity: 1;
	transform: none;
}

.dista-cookie-banner__text p {
	margin: 0;
	color: var(--dista-ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.dista-cookie-banner__text a {
	color: var(--dista-ink);
	text-decoration: underline;
}

.dista-cookie-banner__actions {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--20);
}

.dista-cookie-banner__btn {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 4px;
	padding: 10px 20px;
	cursor: pointer;
	border: 1px solid var(--dista-outline);
	background: transparent;
	color: var(--dista-ink);
}

.dista-cookie-banner__btn--accept {
	background: var(--dista-primary);
	border-color: var(--dista-primary);
	color: #131313;
}

.dista-cookie-banner__btn--reject:hover {
	border-color: var(--dista-ink-2);
}

.dista-cookie-banner__btn--accept:hover {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}

@media (max-width: 600px) {
	.dista-cookie-banner {
		flex-direction: column;
		align-items: stretch;
		left: 12px;
		right: 12px;
		bottom: 12px;
	}

	.dista-cookie-banner__actions {
		justify-content: flex-end;
	}
}

/* ---------- 10. Editor-only affordances ---------- */

/* Make template part boundaries easier to see while editing. */
.editor-styles-wrapper .dista-header {
	position: relative;
}

/* ---------- Duplicate <h1> guard ----------
   page.html renders the post title as an <h1>. Several pages also open with
   their own <h1> in the content (e.g. Tietosuoja, and any legacy hero), which
   emits two <h1>s — an accessibility and SEO fault. Where the content supplies
   its own, hide the template's. display:none also drops it from the
   accessibility tree, so screen readers see exactly one.
   Pages with no heading of their own (e.g. Palvelut) keep the template title,
   which is why this stays conditional instead of removing post-title outright. */
main:has(.wp-block-post-content h1) > .wp-block-post-title {
	display: none;
}

/* ---------- Match engine (hero data visual) ----------
   Regenerated from the old theme's hero-anim in this design system. Three
   hairline panels: the decision-maker database, the match engine, and the
   calendar filling with booked meetings. Decorative only — aria-hidden in the
   markup, and every animation is disabled under prefers-reduced-motion.

   The old version used a cyan second accent that does not exist in this
   palette; the booked/outbound side uses --dista-secondary (gold) instead so
   the figure stays inside the Midnight Executive range. */

.dista-engine {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr) minmax(0, 1.15fr);
	/* A definite height is required, not optional: the ticker column is a flex
	   column whose scrolling list is ~1600px of rows. Without it the panel
	   grows to the full list height instead of clipping to a window. */
	height: 340px;
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	background: var(--dista-surface);
	overflow: hidden;
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--dista-ink-2);
	box-sizing: border-box;
	position: relative;
}

/* Page-shell width (wideSize), not the narrower content column — matches the
   hero H1 / header. Existing front-page markup has no alignwide on this node;
   beat WP constrained-layout's contentSize clamp without editing post_content.
   width:100% keeps mobile filling the content column.
   margin-top adds a Spacer-sized breath after the CTA (blockGap alone is tight). */
.wp-block-post-content .dista-engine,
.entry-content .dista-engine {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
}

/* min-height:0 matters as much as min-width:0 here — a grid item defaults to
   min-height:auto, so the 1600px ticker list pushed the column open instead of
   being clipped by the panel's fixed height. */
.dista-engine__col {
	min-width: 0;
	min-height: 0;
	border-right: 1px solid var(--dista-outline);
	display: flex;
	flex-direction: column;
}

.dista-engine__col:last-child {
	border-right: none;
}

/* Panel header strip */
/* Panel header strip — temporarily hidden */
.dista-engine__head {
	display: none;
}

/*
.dista-engine__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--dista-outline);
	background: var(--dista-base);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dista-engine__head-r {
	margin-left: auto;
	color: var(--dista-ink-2);
	opacity: 0.75;
}
*/

.dista-engine__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dista-outline-soft);
	flex: none;
}

.dista-engine__dot--live {
	background: var(--dista-primary);
	animation: dista-engine-blink 2s steps(1) infinite;
}

.dista-engine__dot--pulse {
	background: var(--dista-secondary);
	animation: dista-engine-blink 1.2s steps(1) infinite;
}

@keyframes dista-engine-blink {
	0%, 60% { opacity: 1; }
	61%, 100% { opacity: 0.25; }
}

/* --- Database ticker --- */
.dista-engine__tickerwrap {
	position: relative;
	min-height: 0;
	overflow: hidden;
	flex: 1;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.dista-engine__row {
	display: grid;
	/* Title | company — employees + category hidden for now */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 7px 12px;
	border-bottom: 1px solid var(--dista-outline);
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Stored post HTML sometimes has <br> between cells (editor autofill).
   Those become grid items and push company onto a second row. */
.dista-engine__row > br {
	display: none;
}

.dista-engine__row > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.dista-engine__r-title { color: var(--dista-ink); }
.dista-engine__r-co    { color: var(--dista-ink-2); opacity: 0.7; text-align: right; }

/* Temporarily off — restore with the 4-col grid above when needed again */
.dista-engine__r-emp,
.dista-engine__r-cat {
	display: none;
}

/* .dista-engine__r-emp   { color: var(--dista-ink-2); opacity: 0.7; text-align: right; } */
/* .dista-engine__r-cat   { color: var(--dista-ink-2); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.08em; } */

/* Row currently being scanned, then confirmed as a match. */
.dista-engine__row.is-scanning {
	background: color-mix(in srgb, var(--dista-primary) 10%, transparent);
}

.dista-engine__row.is-matched .dista-engine__r-title,
.dista-engine__row.is-scanning .dista-engine__r-title {
	color: var(--dista-primary);
}

/* .dista-engine__row.is-matched .dista-engine__r-cat {
	color: var(--dista-secondary);
	opacity: 1;
} */

/* --- Match engine stage (legacy hub) — off; middle hosts call waves --- */
.dista-engine__stage {
	display: none;
}

/*
.dista-engine__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
*/

.dista-engine__col--match {
	position: relative;
	justify-content: center;
	align-items: center;
}

/* Call equalizer — visible only during the ~2s pause at B */
.dista-engine__call {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	height: 56px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.dista-engine__call.is-on {
	opacity: 1;
}

.dista-engine__call span {
	display: block;
	width: 5px;
	border-radius: 2px;
	background: var(--dista-primary);
	transform-origin: bottom center;
	height: 14px;
}

.dista-engine__call.is-on span {
	animation: dista-engine-call-bar 0.35s ease-in-out infinite alternate;
}

.dista-engine__call span:nth-child(1) { height: 18px; animation-delay: 0s; }
.dista-engine__call span:nth-child(2) { height: 32px; animation-delay: 0.08s; }
.dista-engine__call span:nth-child(3) { height: 48px; animation-delay: 0.16s; }
.dista-engine__call span:nth-child(4) { height: 28px; animation-delay: 0.24s; }
.dista-engine__call span:nth-child(5) { height: 20px; animation-delay: 0.32s; }

@keyframes dista-engine-call-bar {
	from { transform: scaleY(0.35); opacity: 0.55; }
	to   { transform: scaleY(1); opacity: 1; }
}

/* Full-engine path overlay: tip + fading wake */
.dista-engine__paths {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}

.dista-engine__path-wake {
	fill: none;
	stroke: var(--dista-primary);
	stroke-width: 2.25;
	stroke-linecap: round;
	opacity: 0;
}

.dista-engine__path-tip-bloom {
	fill: var(--dista-primary);
	opacity: 0;
	filter: blur(5px);
}

.dista-engine__path-tip {
	fill: #fff8e0;
	opacity: 0;
	filter: blur(1.1px);
}

.dista-engine__svg {
	flex: 1;
	width: 100%;
	height: 100%;
	display: block;
}

.dista-engine__line {
	stroke-width: 0.6;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dista-engine__line--in  { stroke: var(--dista-primary); }
.dista-engine__line--out { stroke: var(--dista-secondary); }
.dista-engine__line.is-on { opacity: 0.55; }

.dista-engine__ring {
	fill: none;
	stroke: var(--dista-outline-soft);
	stroke-width: 0.6;
}

.dista-engine__pulse {
	fill: none;
	stroke: var(--dista-primary);
	stroke-width: 0.9;
	transform-origin: 100px 160px;
	animation: dista-engine-pulse 2.4s ease-out infinite;
}

@keyframes dista-engine-pulse {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(2.1); opacity: 0; }
}

.dista-engine__core { fill: var(--dista-primary); }

/* Stats strip — temporarily hidden */
.dista-engine__stats {
	display: none;
}

/*
.dista-engine__stats {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--dista-outline);
	letter-spacing: 0.08em;
}

.dista-engine__stats div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dista-engine__stats span { opacity: 0.6; }
.dista-engine__stats b { color: var(--dista-primary); font-weight: 500; }
*/

/* --- Calendar --- */
.dista-engine__cal {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.dista-engine__calhead,
.dista-engine__calgrid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dista-engine__calhead {
	border-bottom: 1px solid var(--dista-outline);
}

.dista-engine__calhead span {
	padding: 8px 6px;
	text-align: center;
	letter-spacing: 0.1em;
	opacity: 0.6;
	border-right: 1px solid var(--dista-outline);
}

.dista-engine__calhead span:last-child { border-right: none; }

.dista-engine__calgrid { flex: 1; }

.dista-engine__calcol {
	border-right: 1px solid var(--dista-outline);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.dista-engine__calcol:last-child { border-right: none; }

.dista-engine__slot {
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius);
	padding: 6px 5px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease, border-color 0.35s ease, background-color 0.35s ease;
}

/* Tip nearing the slot — fade in just before booking. */
.dista-engine__slot.is-approaching {
	opacity: 0.85;
	visibility: visible;
}

.dista-engine__slot.is-booked {
	opacity: 1;
	visibility: visible;
	border-color: var(--dista-primary);
	background: color-mix(in srgb, var(--dista-primary) 12%, transparent);
}

.dista-engine__slot-time { color: var(--dista-ink); }

.dista-engine__slot-who {
	opacity: 0.7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dista-engine__slot.is-booked .dista-engine__slot-time { color: var(--dista-primary); }

/* --- Hidden on mobile: three-panel engine is desktop-only --- */
@media (max-width: 781.98px) {
	.dista-engine {
		display: none;
	}
}

/* Motion is decoration here; without it the panels simply show their end
   state — matched rows, booked calendar — which still reads correctly. */
@media (prefers-reduced-motion: reduce) {
	.dista-engine__dot--live,
	.dista-engine__dot--pulse,
	.dista-engine__pulse,
	.dista-engine__call.is-on span {
		animation: none;
	}

	.dista-engine__ticker { transform: none !important; }
	.dista-engine__line { opacity: 0.4; }
	.dista-engine__slot { opacity: 1; visibility: visible; }
}