/* ---------- TOKENS ---------- */
:root {
	/* Colors mapped to the theme.json presets. */
	--color-black: var(--wp--preset--color--contrast, #1a1a1a);
	--color-white: var(--wp--preset--color--base, #ffffff);
	--color-accent-dark: var(--wp--preset--color--primary, #35468c);
	--color-accent-light: var(--wp--preset--color--muted, #c5dced);

	/* Design colors with no palette preset of their own: the header's and
	   footer's hairlines, the navigation link and the footer column label.
	   They are single-purpose UI values, not colors anyone should be able to
	   pick in the editor, which is why they live here and not in theme.json. */
	--color-hairline: rgba(26, 9, 13, 0.1);
	--color-hairline-strong: rgba(26, 9, 13, 0.13);
	--color-nav-link: #3e363b;
	--color-footer-label: #8e858b;
	--color-meta: #a79ca3;

	/* Font weights */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Strokes */
	--stroke-button: 1px solid var(--color-black);
	--stroke-line: 2px solid var(--color-black);
	--stroke-accent: 2px solid var(--color-accent-dark);

	/* Arrow icon (used as a mask; color comes from currentColor) */
	/* Masked, so the arrow takes its color from currentColor wherever it is
	   used - dark accent on light rows, white on dark ones. */
	--icon-arrow: url("../images/arrow-right-solid-full.svg");
}

/* ---------- BASE ---------- */

/* The footer is white in the design, so anything past it - a short page, the
   rubber band at the end of a scroll - carries white too, not the old theme's
   dark footer color. */
html {
	background-color: var(--wp--preset--color--base, #ffffff);
}
body {
	color: var(--color-black);
	background-color: var(--color-white);
}

/* Cap the whole site at 1920px; full-width backgrounds span this width */
.wp-site-blocks {
	max-width: 120rem; /* 1920px */
	margin-inline: auto;
}

/* Custom block width option: "Kapea" = footer/content width, centered.
   "Leveä" uses the core alignfull + has-global-padding classes. */
.responsia-width-narrow {
	max-width: var(--wp--style--global--content-size, 80.625rem);
	margin-inline: auto;
}
/* "Leipäteksti" – exactly like "Kaita" above, only wider: the element keeps its
   normal content width (so its left edge lines up with the heading / other
   content) and its inner blocks are narrowed to the 724px measure. */
.responsia-width-body > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 45.25rem !important; /* 724px */
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* "Kaita" reading width – proportional to the content width (616 : 853).
   The element keeps its normal content width (so its left edge lines up with
   the heading / other content), and its inner blocks are narrowed and pinned
   to the left. The !important beats the constrained layout's margin:auto. */
.responsia-width-text > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 38.5rem !important; /* 616px reading width */
	margin-left: 0 !important;
	margin-right: auto !important;
}

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

:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--color-accent-dark);
	outline-offset: 2px;
}

/* The heading scale comes from theme.json (Ubuntu, the design's sizes):
   the old theme's h1-h4 element rules used to override it from here. */

/* Footnote markers and other superscripts: taken out of the line box with
   line-height:0, so a paragraph carrying one keeps the same leading as the
   paragraphs around it. */
sup,
sub {
	font-size: 0.75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

/* ---------- HEADER (Figma: Navi, node 1:164) ---------- */

/* Brand left, navigation right, hairline underneath. The row itself is the
   group's own flex layout (set in parts/header.html), so only the things core
   cannot express are here: the hairline and the padding. The padding comes from
   the root padding variables, which is what puts the logo at the design's 88px
   from the edge and keeps it in step with the content below. */
.site-header {
	padding: 1.75rem var(--wp--style--root--padding-right, 1.25rem) 1.75rem
		var(--wp--style--root--padding-left, 1.25rem);
	border-bottom: 1px solid var(--color-hairline);
	background: var(--color-white);
}

/* Brand: the theme's own SVG, or the logo uploaded in Site Identity. */
.site-brand__link,
.site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}
.site-brand__link svg {
	display: block;
	width: 10.425rem; /* 166.8px */
	height: auto;
}
.site-header .custom-logo {
	display: block;
	width: auto;
	max-height: 2.5rem; /* Matches the SVG's 39.7px height. */
}
/* Without an SVG or an uploaded logo the site name stands in for it. */
.site-brand__link.is-text {
	font-family: var(--wp--preset--font-family--ubuntu, Ubuntu, sans-serif);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--color-black);
}

/* Navigation list (wp_nav_menu output) */
.main-nav {
	flex: 0 1 auto;
}
.main-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.875rem; /* 30px */
}
/* The gap is between a link and its chevron; the submenu is positioned against
   the item, so every item is its own containing block. */
.main-menu > .menu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4375rem; /* 7px */
}
.main-menu a {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-nav-link);
	text-decoration: none;
}
.main-menu a:hover,
.main-menu a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a,
.main-menu .current-menu-ancestor > a {
	color: var(--color-accent-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* The magenta pill: a normal menu item with the CSS class `nav-cta`. */
.main-menu .nav-cta > a {
	display: inline-flex;
	align-items: center;
	padding: 0.6875rem 1.25rem; /* 11px 20px */
	border-radius: 999px;
	background: var(--color-accent-dark);
	color: var(--wp--preset--color--off-white, #faf7f5);
}
.main-menu .nav-cta > a:hover,
.main-menu .nav-cta > a:focus-visible {
	background: var(--wp--preset--color--secondary, #7a1c64);
	text-decoration: none;
}

/* Submenu disclosure: the chevron is a button next to the link, so the link
   still navigates and the panel opens by mouse, keyboard or touch alike. */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--color-nav-link);
}
.submenu-toggle__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* A downward chevron; the translate lifts the rotated square back onto the
	   text's optical centre. */
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.menu-item.is-open > .submenu-toggle .submenu-toggle__chevron {
	transform: translateY(1px) rotate(-135deg);
}

.main-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 14rem;
	margin: 0.75rem 0 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-hairline);
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgba(26, 9, 13, 0.1);
}
.main-menu .menu-item.is-open > .sub-menu {
	display: block;
}
/* Without JavaScript the chevron button cannot do anything, so the submenu also
   opens on hover and on focus inside the item: the menu still works with the
   script blocked. The hover half is behind a hover query, or a tap on a phone
   would leave a panel stuck open. */
@media (min-width: 1025px) {
	.main-menu .menu-item:focus-within > .sub-menu {
		display: block;
	}
}
@media (min-width: 1025px) and (hover: hover) {
	.main-menu .menu-item:hover > .sub-menu {
		display: block;
	}
}
.main-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.25rem;
}

/* Hamburger toggle – hidden on desktop */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--color-black);
}
.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 18px;
}
.nav-toggle__bar {
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.15s ease;
}
/* Open: the outer bars meet in the middle as a cross, the middle one fades. */
.main-nav.is-open .nav-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.main-nav.is-open .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.main-nav.is-open .nav-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Below 1024px the seven links plus the pill no longer fit beside the logo, so
   the menu becomes a panel under the header.

   Everything that hides the menu is scoped to .is-enhanced, a class nav.js adds
   once it has wired the toggle up. With the script blocked the menu simply
   stays in the page as a list and the hamburger never appears, rather than
   leaving a button that cannot open anything. */
@media (max-width: 1024px) {
	.site-header {
		position: relative;
	}
	.site-brand__link svg {
		width: 8.25rem; /* 132px */
	}
	.main-nav.is-enhanced .nav-toggle {
		display: inline-flex;
	}
	.main-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}
	/* The panel stays in the layout so it can animate; visibility (not display)
	   keeps it out of the tab order and off the screen reader until it opens. */
	.main-nav.is-enhanced .main-menu {
		position: absolute;
		top: 100%;
		left: var(--wp--style--root--padding-left, 1rem);
		right: var(--wp--style--root--padding-right, 1rem);
		z-index: 20;
		padding: clamp(1rem, 4vw, 2rem);
		background: var(--color-white);
		border: 1px solid var(--color-hairline);
		border-radius: 0.75rem;
		box-shadow: 0 16px 40px rgba(26, 9, 13, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity 0.25s ease, transform 0.25s ease,
			visibility 0s linear 0.25s;
	}
	.main-nav.is-enhanced.is-open .main-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}
	/* Bigger tap targets, and the chevron at the far end of the row. */
	.main-menu > .menu-item {
		justify-content: space-between;
	}
	.main-menu a {
		display: block;
		padding: 0.6rem 0;
	}
	.main-menu .nav-cta {
		margin-top: 0.5rem;
	}
	.main-menu .nav-cta > a {
		justify-content: center;
	}
	.submenu-toggle {
		padding: 0.6rem 0.5rem;
	}
	.main-menu a:hover,
	.main-menu a:focus-visible,
	.main-menu .current-menu-item > a,
	.main-menu .current_page_item > a,
	.main-menu .current-menu-ancestor > a {
		text-underline-offset: 4px;
	}
	/* In the panel a submenu opens inline rather than floating over the page. */
	.main-menu .sub-menu {
		position: static;
		width: 100%;
		margin: 0;
		padding: 0 0 0.5rem 1rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.main-menu .sub-menu a {
		padding: 0.5rem 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-menu,
	.main-nav.is-open .main-menu,
	.nav-toggle__bar,
	.submenu-toggle__chevron {
		transition: none;
	}
}

/* Visually hidden but available to screen readers */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link – visible only on keyboard focus */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--color-black);
	color: var(--color-white);
	text-decoration: none;
}
.skip-link.screen-reader-text:focus {
	left: 0;
}

/* Color variants (per-site: blue on one site, green on the other), chosen from
   the block's Asetukset panel. The background sits behind the text column
   only, not the media. Dark is also the fallback for blocks saved before the
   variant setting existed, so no instance renders on a bare white column.
   The is-style-* selectors are legacy content from the old block styles. */
.media-text .text-col {
	background-color: var(--color-accent-dark);
	color: var(--color-white);
}
.media-text .text-col :where(h1, h2, h3, h4, h5, h6),
.media-text .text-col .text-meta {
	color: var(--color-white);
}
.media-text.feature-light .text-col {
	background-color: var(--color-accent-light);
	color: var(--color-black);
}
.media-text.feature-light .text-col :where(h1, h2, h3, h4, h5, h6),
.media-text.feature-light .text-col .text-meta {
	color: var(--color-black);
}

/* Layout: media ~2/5, small gap, text ~3/5 (not 50/50) */
.media-text > .wp-block-columns {
	/* The row declares its own flex layout. Core supplies one through the
	   is-layout-flex class, but only for columns that went through the block
	   renderer; the listing rows are written by hand in
	   latest-posts/render.php, and without this the columns stack like on
	   mobile. */
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
}
/* 40:60, image to text, in every listing. The selector is deliberately long:
   core ships
     @media (min-width: 782px) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex: 1 1 0 }
   which outweighs a two-class selector, so template-rendered rows ended up 1:1
   while the rows the block writes itself (core's columns CSS is not loaded for
   those) kept the theme's ratio. min-width: 0 lets the text column shrink to
   its share instead of holding on to its min-content width. */
.media-text > .wp-block-columns > .wp-block-column.media-col,
.media-text > .wp-block-columns > .wp-block-column.text-col {
	/* border-box, so the text column's own padding comes out of its 60 % share
	   instead of being added on top of it. */
	box-sizing: border-box;
	min-width: 0;
}
/* The share is a percentage of the row, not a grow factor: with flex-basis 0
   the text column's own padding is taken off the top before the split, which
   left the image at 37 % instead of 40 %. Half the 0.75rem gap comes off each
   side so the two still fit on one line. */
.media-text > .wp-block-columns > .wp-block-column.media-col {
	flex: 0 0 calc(40% - 0.375rem);
	padding: 0;
}
.media-text > .wp-block-columns > .wp-block-column.text-col {
	flex: 0 0 calc(60% - 0.375rem);
}
/* A 16:9 video needs more width than a 3:2 image to read at the same height,
   so the shares swap when the media is a video or a YouTube embed: 60 % media,
   40 % text. Matched with :has() on the media column's own first block, so the
   rows saved before this rule follow it too, in both the automatic and the
   hand-built variant. Desktop only – stacked, the basis would apply to the
   height. */
@media (min-width: 769px) {
	.media-text:has(> .wp-block-columns > .media-col > .wp-block-embed) > .wp-block-columns > .wp-block-column.media-col,
	.media-text:has(> .wp-block-columns > .media-col > .wp-block-video) > .wp-block-columns > .wp-block-column.media-col {
		flex: 0 0 calc(60% - 0.375rem);
	}
	.media-text:has(> .wp-block-columns > .media-col > .wp-block-embed) > .wp-block-columns > .wp-block-column.text-col,
	.media-text:has(> .wp-block-columns > .media-col > .wp-block-video) > .wp-block-columns > .wp-block-column.text-col {
		flex: 0 0 calc(40% - 0.375rem);
	}
}
/* The image keeps its exact aspect ratio (3:2 / 4:3) and defines the height;
   the colored text area stretches to match the image (align-items: stretch). */
.media-text .media-col > .wp-block-image,
.media-text .media-col > .wp-block-post-featured-image,
.media-text .media-col > .wp-block-video,
.media-text .media-col > .wp-block-embed,
/* The caption band belongs to the image above it, so it must not pick up the
   column's flow gap – it sits flush against the image. */
.media-text .media-col > .responsia-caption-band {
	margin: 0;
}
.media-text .media-col > .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
}
/* The image fills the row's height. Its 3:2 ratio sets the row height whenever
   the image is the taller side; when the text is longer, the image grows with
   it and crops, so the colored text area never runs past the picture. */
.media-text .media-col {
	display: flex;
	flex-direction: column;
}
.media-text .media-col > .wp-block-image,
.media-text .media-col > .wp-block-post-featured-image,
.media-text .media-col > .wp-block-video {
	flex: 1 1 auto;
	min-height: 0;
}
.media-text .media-col img,
.media-text .media-col video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-text .text-col {
	padding: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 1rem;
}

/* "Valkoinen (ei taustaa)": the text sits straight on the page, so the column
   drops its background and its padding on the outer side. */
.media-text.media-text--plain .text-col {
	background-color: transparent;
	color: inherit;
	padding-block: 0;
	padding-inline-end: 0;
}
.media-text.media-text--plain .text-col :where(h1, h2, h3, h4, h5, h6),
.media-text.media-text--plain .text-col .text-meta,
.media-text.media-text--plain .text-col .wp-block-post-title a {
	color: var(--color-black);
}
.media-text.media-text--plain .text-col .wp-block-read-more {
	color: var(--color-accent-dark);
}

/* One vertical rhythm for every listing: the row's text column, the grid card
   and the Media ja teksti block all space title, meta, ingress and arrow the
   same way. The children's own margins are cleared so only the gap counts. */
.media-text .text-col > * {
	margin-top: 0;
	margin-bottom: 0;
}
/* No auto margin on the arrow: it would swallow the column's free space and
   leave justify-content: space-evenly above with nothing to distribute. */
/* The listing ingress runs at the middle body size (18px). The listings build
   their own markup, so they cannot pick the style in the editor - the size is
   applied here, and matches .text-body-medium / .is-style-responsia-body-medium. */
.media-text .text-col .wp-block-post-excerpt,
.media-text .text-col .wp-block-post-excerpt p,
.media-text .text-col .text-body {
	font-size: 1.125rem;
	line-height: 1.5;
}

/* Media position: right (default is left) */
.media-text.media-right > .wp-block-columns {
	flex-direction: row-reverse;
}

/* Image aspect ratio: driven by the caption toggle. Without a caption the
   main image is 3:2; with a caption it is 4:3. Scoped to the media column's
   own image so the caption logo is unaffected. */
.media-text .media-col > .wp-block-image img { aspect-ratio: 3 / 2; }


/* Video and YouTube embed fill the media column exactly like the image does.
   The embed keeps 16:9 (the video's own ratio) instead of being cropped. */
.media-text .media-col > .wp-block-video video { aspect-ratio: 3 / 2; }

.media-text .media-col > .wp-block-embed .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}
.media-text .media-col > .wp-block-embed .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.media-text .media-col > .wp-block-embed figcaption {
	margin-inline: clamp(1rem, 3vw, 1.5rem);
}





 /* 16px */
 /* 16px */



/* Meta line (date – category) */
.media-text .text-meta {
	margin: 0;
}

/* Accessible arrow link: visible arrow is decorative, link text for screen readers */
.arrow-link a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.arrow-link a::after {
	/* The same masked arrow the listing rows use, so every "image beside text"
	   row ends in an identical link, not a text glyph. */
	content: "";
	flex-shrink: 0;
	width: 1.25rem; /* 20px, the size the buttons carry */
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
	transition: transform 0.15s ease;
}
.arrow-link a:hover::after {
	transform: translateX(4px);
}
/* An editor-built nosto has the arrow as its only link, and the heading and the
   image beside it are plain content. This overlay stretches that one link over
   the whole row, so both open the entry - the same single-<a> pattern the
   rendered cards use, rather than a second and third link to the same place. */
.media-text:has(.arrow-link a) {
	position: relative;
}
.media-text .arrow-link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* A row holding an embedded video keeps its whole-area link, but only across
   the text column: heading, meta, excerpt and arrow all open the entry, while
   the video stays its own destination. Positioning the text column makes it the
   overlay's containing block, which is exactly what confines the overlay there
   – the same mechanism the note above warns against doing to the arrow. */
.media-text:has(.arrow-link a):has(.wp-block-embed) .text-col {
	position: relative;
}
/* Links inside the row's own text stay clickable above the overlay - but not
   the arrow itself: positioning it would make it the overlay's containing block
   and shrink the overlay to the size of the arrow. */
.media-text:has(.arrow-link a) .text-col :where(p:not(.arrow-link), ul, ol) a {
	position: relative;
	z-index: 2;
}

/* Mobile: stack, and optionally show text first */
@media (max-width: 768px) {
	.media-text > .wp-block-columns {
		flex-direction: column;
	}
	/* Stacked, the percentage basis would apply to height instead of width, so
	   the basis goes and the width is stated outright. Without the width the
	   column shrinks to its content, and a 16:9 embed then resolves its ratio
	   against a near-zero width: the wrapper collapses, its absolutely
	   positioned iframe leaves the flow, and the page loses both its height
	   and the space the video should occupy. */
	.media-text > .wp-block-columns > .wp-block-column.media-col,
	.media-text > .wp-block-columns > .wp-block-column.text-col {
		flex: 0 0 auto;
		width: 100%;
	}
	.media-text.mobile-text-first > .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* Block heading (e.g. "Hankkeen julkaisut") above the grid */
.post-grid__heading {
	text-align: center;
	margin: 0 0 2rem;
}

/* The card list is a plain <ul>: drop the browser's default list padding so
   the cards start at the block's own left edge – otherwise a wide grid ends
   up 40px narrower than the other wide blocks. */
.post-grid .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grid of cards – equal columns, cells never overflow (minmax 0) so long
   titles wrap instead of overlapping the next card. */
.post-grid .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(var(--post-grid-columns, 3), minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

/* Each card is a vertical flow; content wraps normally. Per-site light
   background (blue / green); the image is flush at the top and the text
   content is padded. */
.post-grid .wp-block-post-template > li {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--color-accent-light);
	color: var(--color-black);
}
.post-grid .wp-block-post-template > li > *:not(.wp-block-post-featured-image) {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.post-grid .wp-block-post-template > li > .post-meta {
	padding-top: 1.5rem;
}
.post-grid .wp-block-post-template > li > *:last-child {
	padding-bottom: 1.5rem;
}
/* Card color, chosen per block in Asetukset ("Korttien väri"). Light is the
   default; dark is the accent color; plain drops the background altogether so
   the text sits directly on the page (the green site's news listing). */
.post-grid--dark .wp-block-post-template > li {
	background: var(--color-accent-dark);
	color: var(--color-white);
}
.post-grid--plain .wp-block-post-template > li {
	background: none;
	color: inherit;
}
.post-grid--plain .wp-block-post-template > li > *:not(.wp-block-post-featured-image) {
	padding-left: 0;
	padding-right: 0;
}
.post-grid--plain .wp-block-post-template > li > *:last-child {
	padding-bottom: 0;
}

.post-grid .wp-block-post-title {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	margin: 0.5rem 0;
}
.post-grid .wp-block-post-title a {
	color: var(--color-black);
	text-decoration: none;
}
.post-grid .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Whole-card link. The card carries exactly one <a> – the title – and this
   overlay stretches it across the card, so the image and the arrow open the
   entry too without a screen reader hearing the same destination two or three
   times in a row. Only on the cards the Sisältönosto block renders itself
   (.post-card--linked / .media-text--linked); a query loop in a template keeps
   its own links. */
.post-grid .post-card--linked,
.media-text--linked {
	position: relative;
}
.post-grid .post-card--linked .wp-block-post-title a::after,
.media-text--linked .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* The decorative arrow: no longer a link of its own, but it still reacts to the
   card's hover, since the overlay above it belongs to the title link. */
.media-text--linked .text-col .wp-block-read-more {
	pointer-events: none;
}
/* An embedded video is a destination of its own, so it stays above any
   whole-area overlay rather than under it. */
.media-text:has(.arrow-link a) .wp-block-embed {
	position: relative;
	z-index: 2;
}
.post-grid .wp-block-post-featured-image {
	/* display:flex keeps the figure exactly as tall as the image; without it a
	   text line's worth of space crept in under the picture. */
	display: flex;
	margin: 0 0 1rem;
}
.post-grid .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Meta line: date – category */
.post-grid .post-meta {
	gap: 0.35rem;
	margin: 0;
}
.post-grid .post-meta .wp-block-post-terms::before {
	content: "\007C\00a0"; /* | */
}
.post-grid .post-meta .wp-block-post-date,
.post-grid .post-meta .wp-block-post-terms,
.post-grid .post-meta .wp-block-post-terms a {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	color: var(--color-accent-dark);
}
/* Category link: underline only on hover */
.post-grid .post-meta .wp-block-post-terms a {
	text-decoration: none;
}
.post-grid .post-meta .wp-block-post-terms a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Dark cards: the title and the meta line turn white. This has to come after
   the generic title and meta colors above - the selectors weigh the same, so
   source order decides, and earlier the black title and accent meta won. */
.post-grid--dark .wp-block-post-title a,
.post-grid--dark .post-meta .wp-block-post-date,
.post-grid--dark .post-meta .wp-block-post-terms,
.post-grid--dark .post-meta .wp-block-post-terms a {
	color: var(--color-white);
}

/* "See all" link – centered, tertiary style with a trailing arrow */
.see-all-link {
	text-align: center;
	margin-top: 2rem;
}
.see-all-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-accent-dark);
	font-weight: 600;
	font-size: 1.25rem; /* 20px */
	text-decoration: none;
}
.see-all-link a::after {
	content: "";
	flex-shrink: 0;
	width: 1.0625rem; /* 17px */
	height: 1.0625rem; /* 17px */
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
}
.see-all-link a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 900px) {
	/* One card per row: the image runs the full width with the text below it,
	   the same shape as a "Media ja teksti" row on a phone. */
	.post-grid .wp-block-post-template.is-layout-grid {
		--post-grid-columns: 1;
	}

	/* "Määrä mobiilissa": show only the first N cards on narrow screens. */
	.post-grid[data-mobile-count="1"] .wp-block-post-template > li:nth-child(n + 2),
	.post-grid[data-mobile-count="2"] .wp-block-post-template > li:nth-child(n + 3),
	.post-grid[data-mobile-count="3"] .wp-block-post-template > li:nth-child(n + 4),
	.post-grid[data-mobile-count="4"] .wp-block-post-template > li:nth-child(n + 5) {
		display: none;
	}
}

/* The listing at the end of an article is as wide as the front page's news
   grid. There the block sits inside the post content, and WordPress cancels the
   break-out for an alignfull block in a nested has-global-padding container, so
   it stops at the root padding. In a single template the same block is a direct
   child of <main> and would pull itself out to the window edge instead, which
   reads as too wide next to the article. Desktop only – on a phone the cards
   are meant to run edge to edge (see the mobile rules below). */
@media (min-width: 769px) {
	.single .post-grid.alignfull {
		margin-left: 0;
		margin-right: 0;
	}
}



.archive-title {
	margin: 0 0 2rem;
}




/* Title link follows the text-column color (white on dark, black on light) */
.media-text .text-col .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.media-text .text-col .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Read more link inside a listing row: only the arrow shows. The label stays in
   the markup and in the accessibility tree - it is the link's name - but is
   sized to nothing so the row reads as a bare arrow. */
.media-text .text-col .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--color-accent-dark);
	font-weight: 600;
	font-size: 0;
	text-decoration: none;
	/* The text column is a flex column, so the link would stretch across the
	   whole row and leave a wide invisible click target next to the arrow. */
	align-self: flex-start;
}
.media-text .text-col .wp-block-read-more:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* Feature-dark listing: meta, terms and the arrow turn white for contrast. Kept
   after the rules above, which weigh the same and would otherwise win on order
   and leave a dark blue arrow on a dark blue column. */
.feature-dark .text-col .wp-block-post-date,
.feature-dark .text-col .wp-block-post-terms,
.feature-dark .text-col .wp-block-post-terms a,
.feature-dark .text-col .wp-block-read-more {
	color: var(--color-white);
}
.media-text .text-col .wp-block-read-more::after {
	content: "";
	flex-shrink: 0;
	width: 1.25rem; /* 20px, the size the buttons carry */
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
}






/* A link in running text: bold and in the site's accent colour (blue or green,
   whichever the style variation carries), underlined on hover. The nosto blocks
   inside the content (cards, listing rows) keep their own link styling, and so
   do buttons. */
.entry-content :where(p, li, dd, td, blockquote) a:not(.wp-element-button):not(
		:is(.post-grid, .media-text) *
	) {
	font-weight: 700;
	color: var(--color-accent-dark);
	text-decoration: none;
}
.entry-content :where(p, li, dd, td, blockquote) a:not(.wp-element-button):not(
		:is(.post-grid, .media-text) *
	):hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Article body defaults to the 724px measure, handled the same way as the
   "Kaita" and "Leipäteksti" width options: the content area keeps its normal
   width so the text's left edge lines up with the title and meta above, and
   only the blocks inside are narrowed. The core constrained layout centres
   with its own !important margins, so this has to out-specify them. Scoped to
   `body.single` so pages, which centre their content, keep the full width. */
.single .entry-content.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)) {
	max-width: 45.25rem !important; /* 724px */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Air between the article's title and the meta line below it. The title is a
   direct child of the constrained main, so it would otherwise run the full
   1290px measure while the body text below stops at 724px. It gets the same
   measure and the same left edge as the featured image and the article's
   blocks, so the whole article column has one width. */
.single main > .wp-block-post-title {
	margin-bottom: 2rem;
	max-width: 45.25rem; /* 724px, the article measure */
	/* Core centres the constrained container's children with !important
	   margins, so this has to answer in kind. */
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 80.625rem)) / 2) !important;
	margin-right: auto !important;
	/* The article title stays an <h1> for the document outline, but carries the
	   H2 type from the design: 40px / 400, not the 45px / 600 of an h1. */
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 1.2;
}

/* The featured image belongs to the article body. A block template cannot nest
   it inside post-content, so it is given the same measure and the same left
   edge as the blocks in there - it reads as the article's first element. */
.single main > .wp-block-post-featured-image {
	max-width: 45.25rem; /* 724px, the article measure */
	/* Left edge of the content column: the constrained container centres its
	   1290px measure first, and the article's blocks start there. Core centres
	   with !important margins, so this has to answer in kind. */
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 80.625rem)) / 2) !important;
	margin-right: auto !important;
}

/* Meta line (date – category), used in the article header and card grid */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0.5rem 0 0;
}
.post-meta .wp-block-post-date,
.post-meta .wp-block-post-terms,
.post-meta .wp-block-post-terms a {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	color: var(--color-accent-dark);
}
.post-meta .wp-block-post-terms::before {
	content: "\007C\00a0"; /* | */
}
.post-meta .wp-block-post-terms a {
	text-decoration: none;
}
.post-meta .wp-block-post-terms a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}









/* Share block (Jaa artikkeli) */
.share-block {
	margin: 2.5rem 0 0;
}
.share-block__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	margin: 0 0 0.75rem;
}
.share-block__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.share-block__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-accent-dark);
	color: var(--color-white);
}
.share-block__list a:hover,
.share-block__list a:focus-visible {
	background: var(--color-black);
}
.share-block__list svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Article tags (post_tag) – light chips, shown only when tags exist */
.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2.5rem 0 0;
}
.article-tags a {
	background: var(--color-accent-light);
	color: var(--color-black);
	padding: 0.4rem 0.9rem;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	text-decoration: none;
}
.article-tags a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}






















/* Editor-only note shown when an ACF-backed block has no data yet. */
.responsia-block-placeholder {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--color-accent-dark);
	color: var(--color-black);
	font-size: 0.875rem;
	margin: 0;
}

/* Image captions read as body text, so they line up with the text around them
   instead of picking up the block library's centering. */
figcaption.wp-element-caption,
.wp-element-caption {
	text-align: left;
	font-weight: 600;
	font-size: 1rem; /* 16px */
	line-height: 1.2;
	color: var(--color-black);
	margin-top: 0.5rem;
}

/* ---------- FOOTER (Figma: Footer, node 1:310) ---------- */

/* White, like the rest of the page: the design ends the footer with a hairline
   and the small logo rather than a colored band. */
.site-footer {
	padding: 5rem var(--wp--style--root--padding-right, 1.25rem) 2rem
		var(--wp--style--root--padding-left, 1.25rem);
	background: var(--color-white);
	color: var(--color-black);
}
/* Core's flow-layout margins are written with :where(), so they carry no
   specificity and a plain class selector is enough to reset them - the two
   sections below set their own spacing. */
.site-footer > * {
	margin-block: 0;
}

/* Heading and button on the left, the two menu columns on the right. */
.footer-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: start;
}

.footer-heading {
	margin: 0 0 2rem;
	max-width: 26.25rem; /* 420px – the design's line break. */
	font-family: var(--wp--preset--font-family--ubuntu, Ubuntu, sans-serif);
	font-size: 2.1875rem; /* 35px */
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.025em; /* -0.88px at 35px */
	color: var(--color-black);
}
.footer-cta {
	margin: 0;
}

/* The columns sit flush against the footer's right edge, 96px apart. */
.footer-menus {
	display: flex;
	justify-content: flex-end;
	gap: 6rem;
}
.footer-menu {
	min-width: 11.25rem; /* 180px */
}
/* A column heading is a label, not a display heading: body font, muted grey. */
.footer-menu__title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--color-footer-label);
}
.footer-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem; /* 14px */
}
.footer-menu__list a {
	color: var(--color-black);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.5;
}
.footer-menu__list a:hover,
.footer-menu__list a:focus-visible,
.footer-privacy:hover,
.footer-privacy:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Bottom row: small logo left, social icons, privacy link and copyright right. */
.footer-bottom {
	margin-top: 5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-hairline-strong);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.footer-bottom__brand .site-brand__link,
.footer-bottom__brand .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}
.footer-bottom__brand svg {
	display: block;
	width: 6.7rem; /* 107.2px */
	height: auto;
}
.footer-bottom__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 1.6rem; /* Matches the SVG's 25.5px height. */
}
.footer-bottom__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem; /* 20px */
}

.footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
}
.footer-social__item {
	margin: 0;
}
/* A 32px target around an 18px glyph, as in the design. */
.footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	color: var(--color-black);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
	color: var(--color-accent-dark);
}
.footer-social__icon {
	display: block;
	width: 1.125rem; /* 18px */
	height: 1.125rem;
}

.footer-privacy {
	color: var(--color-black);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.5;
}
.footer-copyright {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted, #6a6066);
}

@media (max-width: 900px) {
	.footer-top {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.footer-menus {
		justify-content: flex-start;
		gap: 3rem;
	}
	.footer-bottom {
		margin-top: 3rem;
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.footer-menus {
		flex-direction: column;
	}
}

/* A plain page's title band: 56px, as on the design's Referenssit, Blogi and
   Yhteystiedot pages. The inner pages that open with responsia/page-hero carry
   their own H1 and use the "Sivu ilman otsikkoa" template instead. */
.page-title {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* ---------- ARTICLE (Figma: Artikkeli, node 1:973) ---------- */

/* The lead image runs the content width, not the full window. */
.article-hero-image img {
	width: 100%;
	aspect-ratio: 1264 / 460;
	object-fit: cover;
	border-radius: 6px;
}

/* Meta row and title share the article's own 760px measure. The meta is the
   design's small spaced-out capitals in a light warm grey, not the accent
   colour the archive listings use. */
.article-header {
	margin-top: 2.5rem;
}
.article-header .post-meta {
	margin: 0;
	gap: 0.625rem;
}
.article-header .post-meta .wp-block-post-date,
.article-header .post-meta .wp-block-post-terms,
.article-header .post-meta .wp-block-post-terms a {
	font-size: var(--wp--preset--font-size--small); /* 14px */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-meta);
}
.article-header .post-meta .wp-block-post-terms::before {
	color: rgba(167, 156, 163, 0.6);
}
.article-header .wp-block-post-title {
	margin: 1.25rem 0 0;
	font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); /* 52px in the design */
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.article-body {
	margin-top: 3.5rem;
}
.article-body .wp-block-post-content > p {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75;
	color: var(--color-nav-link, #3e363b);
}
.article-body .wp-block-post-content > :where(h2, h3) {
	margin-top: 3.5rem;
}
.article-body .wp-block-post-content > ul,
.article-body .wp-block-post-content > ol {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75;
	color: var(--color-nav-link, #3e363b);
}

/* ---------- BLOG LISTING (Figma: Blogi, node 1:872) ---------- */

.archive-title,
.blog-featured {
	margin-top: 3.5rem;
}

.blog-featured {
	margin-bottom: 4.5rem;
}
.blog-featured__media img {
	width: 100%;
	aspect-ratio: 690 / 420;
	object-fit: cover;
	border-radius: 6px;
}
.blog-featured__text .wp-block-post-title {
	margin: 0;
}
.blog-featured__text .wp-block-post-title a {
	color: var(--color-black);
	text-decoration: none;
}
.blog-featured__text .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.blog-featured__text .post-card__date {
	margin-top: 1.25rem;
}
.blog-featured__text .wp-block-post-excerpt {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--color-nav-link, #3e363b);
}

/* The card grid; the same shape carries the case listing on Referenssit. */
.post-cards .wp-block-post-template {
	gap: 1.5rem !important;
}
.post-card {
	display: flex;
	flex-direction: column;
}
.post-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 405 / 250;
	object-fit: cover;
	border-radius: 6px;
}
/* The date is set as small spaced-out capitals, so the Finnish month name
   WordPress gives in lower case needs no capital of its own. */
.post-card__date {
	margin: 1rem 0 0;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-meta);
}
.post-card .wp-block-post-title {
	margin: 1rem 0 0;
	font-size: 1.5rem; /* 24px */
	line-height: 1.28;
	letter-spacing: 0;
}
.post-card .wp-block-post-title a {
	color: var(--color-black);
	text-decoration: none;
}
.post-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.post-card .wp-block-post-excerpt {
	margin-top: 1rem;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}
.post-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* Pagination: 40px round targets, as in the design. */
.post-cards .wp-block-query-pagination {
	margin-top: 3.5rem;
	gap: 0.5rem;
}
.post-cards .wp-block-query-pagination-numbers a,
.post-cards .wp-block-query-pagination-numbers span,
.post-cards .wp-block-query-pagination-previous,
.post-cards .wp-block-query-pagination-next {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--color-black);
	text-decoration: none;
}
.post-cards .wp-block-query-pagination-numbers .current {
	background-color: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--accent);
}
.post-cards .wp-block-query-pagination a:hover {
	background-color: var(--wp--preset--color--sand);
}

@media (max-width: 48rem) {
	.blog-featured .wp-block-columns {
		gap: 1.5rem;
	}
}

/* ---------- CUSTOMER CASE (Figma: Asiakascase, node 1:789) ---------- */

/* The case opens with the customer's logo on the same light panel the
   Referenssit listing uses, not with a photo. */
.case-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 21.25rem; /* 340px */
	padding: 2.5rem;
	border-radius: 6px;
	background-color: #efeae8;
}
.case-hero img {
	max-width: 26.25rem; /* 420px */
	max-height: 7.5rem; /* 120px */
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.68;
}

/* The "Asiakascase" label above the title reads like the article meta row. */
.post-meta__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-meta);
}

/* A case's opening paragraph is set larger, as an ingress. */
.article-body .wp-block-post-content > p:first-child {
	font-size: 1.375rem; /* 22px */
	line-height: 1.45;
	color: var(--color-black);
}

/* The plum quote card (core Quote → "Sitaattikortti"). */
.wp-block-quote.is-style-responsia-quote-card {
	margin: 3.5rem 0;
	padding: 2.5rem 2.75rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent);
	color: #fbf4f9;
}
.wp-block-quote.is-style-responsia-quote-card p {
	margin: 0;
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: 1.5rem; /* 24px */
	line-height: 1.5;
}
.wp-block-quote.is-style-responsia-quote-card cite {
	display: block;
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	line-height: 1.5;
	color: rgba(251, 244, 249, 0.86);
}

/* ---------- COMPANY AND CONTACT PAGES (Figma 1:1035, 1:1180) ---------- */

/* The customer logo row: each logo on its own light panel, in grey. */
.logo-row__label {
	margin: 0 0 1.75rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}
.logo-row .wp-block-gallery {
	gap: 1.5rem;
}
.logo-row .wp-block-gallery .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border-radius: 6px;
	background-color: #efeae8;
}
.logo-row .wp-block-gallery img {
	max-width: 11.5rem;
	max-height: 3.25rem;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.68;
}

/* Yhteystiedot: the portrait, the map and the company details. */
.contact-portrait img,
.contact-map img {
	width: 100%;
	border-radius: 6px;
	object-fit: cover;
}
.contact-portrait img {
	aspect-ratio: 411 / 420;
}
.contact-map img {
	aspect-ratio: 821 / 420;
}
/* An image block with no image yet still needs to show its placeholder box. */
.contact-portrait:not(:has(img[src])),
.contact-map:not(:has(img[src])) {
	border-radius: 6px;
	background-color: var(--wp--preset--color--cream);
}
.contact-portrait:not(:has(img[src])) {
	aspect-ratio: 411 / 420;
}
.contact-map:not(:has(img[src])) {
	aspect-ratio: 821 / 420;
}
.contact-links {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}
.contact-facts {
	margin-top: 2.5rem;
}
.contact-facts p:not(.is-style-responsia-eyebrow) {
	margin: 0.625rem 0 0;
	color: var(--color-nav-link, #3e363b);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

/* A listing card is clickable as a whole, with a single link: the title's own
   link is stretched over the card. Core would otherwise give the featured image
   a second link to the same place - and set its alt to the post title, which
   throws away the alt written in the media library (on the case cards that is
   the customer's name). */
.post-card,
.case-card {
	position: relative;
}
.post-card .wp-block-post-title a::after,
.case-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}