/*
 * Applies the focal point picked via the core/image inspector to the
 * inner <img>. Only has a visible effect when the image is cropped —
 * i.e. when an aspect ratio is set and object-fit: cover is active.
 */
.wp-block-image img,
.wp-block-post-featured-image img {
	object-position: var( --trime-focal-point, 50% 50% );
}

/*
 * Skills taxonomy on Team CPT — render each linked term as a pill.
 * Targets core/post-terms when used with the trime_team_skill taxonomy.
 */
.wp-block-post-terms[class*="taxonomy-trime_team_skill"] a {
	display: inline-block;
	padding: 0.25em 0.75em;
	margin: 0 0.25em 0.25em 0;
	border-radius: 9999px;
	background: rgba( 0, 0, 0, 0.06 );
	color: inherit;
	text-decoration: none;
	font-size: 0.875em;
	line-height: 1.4;
}

/*
 * Layout for the Team experience block: date trigger + override input on
 * one row, computed display below.
 */
.trime2026-team-experience__controls {
	display: flex;
	gap: 0.5em;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
}

.trime2026-team-experience__override {
	flex: 1 1 16em;
	min-width: 12em;
	margin: 0;
}

.trime2026-team-experience__display {
	margin: 0;
}

/*
 * Reset the core `:where(figure) { margin: 0 0 1em }` rule so image
 * blocks follow the theme's sibling-spacing model (gaps come from the
 * next block's margin-top via `> * + *`, never from a trailing bottom
 * margin on the figure itself). Only the bottom is zeroed so the
 * column's `> * + *` margin-top rule still applies.
 */
.wp-block-image {
	margin-bottom: 0;
}

/*
 * Image block styles. "default" is the unstyled image; "rounded" matches
 * the card border radius; "round" is a forced-square circular crop;
 * "card-edge-to-edge" bleeds out of a card column's 32px padding, leaving
 * an 8px gap so the card still frames the image.
 */
.wp-block-image.is-style-rounded img {
	border-radius: 40px;
}

.wp-block-image.is-style-round img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 9999px;
}

/*
 * Edge to edge in card — 24px negative margin (card padding is 32px → 8px
 * visible gap). Horizontal bleed always; top/bottom bleed only when the
 * image is the first/last child so sibling spacing stays untouched. Image
 * radius is card radius (40px) − gap (8px) = 32px so corners stay concentric.
 */
.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge {
	margin-inline: -24px;
}

.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge:first-child {
	margin-block-start: -24px;
}

.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge:last-child {
	margin-block-end: -24px;
}

.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
}

/*
 * Rive block styles — mirrors the image block above. The Rive wrapper is
 * the equivalent of <figure>, and its <canvas> child is the equivalent of
 * <img>. Radii sit on the wrapper because the canvas paints to its
 * intrinsic drawing surface — clipping the wrapper hides the artboard
 * corners cleanly.
 */
.wp-block-trime2026-rive.is-style-rounded {
	border-radius: 40px;
	overflow: hidden;
}

.wp-block-trime2026-rive.is-style-round {
	aspect-ratio: 1 / 1 !important;
	border-radius: 9999px;
	overflow: hidden;
}

.wp-block-trime2026-column.is-variant-card .wp-block-trime2026-rive.is-style-card-edge-to-edge {
	margin-inline: -24px;
	border-radius: 32px;
	overflow: hidden;
}

.wp-block-trime2026-column.is-variant-card .wp-block-trime2026-rive.is-style-card-edge-to-edge:first-child {
	margin-block-start: -24px;
}

.wp-block-trime2026-column.is-variant-card .wp-block-trime2026-rive.is-style-card-edge-to-edge:last-child {
	margin-block-end: -24px;
}

/*
 * Optional mobile aspect ratio override. Triggered by
 * `has-mobile-aspect-ratio` + inline --trime-mobile-aspect-ratio on the
 * figure wrapper. !important is needed because core writes aspect-ratio
 * and object-fit inline on the <img>.
 *
 * The `.is-mobile-preview` body-class selector is added by
 * blocks/editor/image-mobile-aspect-ratio.js when Gutenberg's device
 * preview is "Mobile" — the editor canvas iframe keeps its real viewport
 * width regardless of device preview, so the media query alone never
 * fires inside the editor.
 */
@media ( max-width: 781px ) {
	.wp-block-image.has-mobile-aspect-ratio img {
		aspect-ratio: var( --trime-mobile-aspect-ratio ) !important;
		object-fit: cover !important;
		width: 100% !important;
		height: auto !important;
	}
}

body.is-mobile-preview .wp-block-image.has-mobile-aspect-ratio img {
	aspect-ratio: var( --trime-mobile-aspect-ratio ) !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
}

/*
 * Site-logo variant swap for the fixed slides navigation header.
 * `.custom-logo-variant` is injected by trime2026_inject_logo_variant()
 * next to the primary `.custom-logo`. The slides frontend syncs the
 * current slide's `is-theme-*` class onto `.trime2026-slides-header`,
 * so the logo tracks the active container theme as the reader advances.
 *
 * Default: primary logo is visible. The variant fades in only on
 * explicitly dark container themes (green, dark-green). Cover slides
 * don't sync a theme class, so they keep the primary logo.
 *
 * Fade matches the text color transition in slides-header.css.
 *
 * Scoped to the slides header only — in-content site-logo blocks (e.g.
 * the big cover logo) are left untouched.
 */
.trime2026-slides-header .custom-logo-link {
	position: relative;
	display: inline-block;
}

/*
 * Hide the injected variant by default. We can't scope this to
 * `.custom-logo-link` — when the site-logo block has `isLink: false`,
 * core strips the `<a>` wrapper via regex after the filter injects the
 * variant, leaving both `<img>`s as bare siblings.
 */
.custom-logo-variant {
	display: none;
}

/*
 * Overlapped crossfade: the leaving logo fades out over 0.6s, the
 * arriving logo fades in over 0.6s but starts 0.3s later. There's a
 * 0.3s overlap so the logo is never fully invisible, and a 0.3s tail
 * at each end keeps the visible logo dominant for most of the run.
 * Total duration is 0.9s to match the text color fade.
 *
 * Both images use object-fit: contain so any aspect-ratio mismatch
 * scales them identically inside the box.
 */
.trime2026-slides-header .custom-logo-link .custom-logo,
.trime2026-slides-header .custom-logo-link .custom-logo-variant {
	transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
	object-fit: contain;
}

.trime2026-slides-header .custom-logo-link .custom-logo-variant {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition-delay: 0.3s;
}

.trime2026-slides-header .custom-logo-link .custom-logo {
	transition-delay: 0s;
}

.trime2026-slides-header.is-theme-green .custom-logo-link .custom-logo,
.trime2026-slides-header.is-theme-dark-green .custom-logo-link .custom-logo {
	opacity: 0;
	transition-delay: 0s;
}

.trime2026-slides-header.is-theme-green .custom-logo-link .custom-logo-variant,
.trime2026-slides-header.is-theme-dark-green .custom-logo-link .custom-logo-variant {
	opacity: 1;
	transition-delay: 0.3s;
}

/*
 * core/button — Filled (default) hover animation.
 * Accent-1 green panel slides in from the left, clipped by the button's
 * own border-radius via overflow:hidden. Text + icon flip to the dark
 * contrast color so they stay legible on the green. The ::before sits
 * at z-index:-1 inside an isolated stacking context — that puts the
 * panel above the button's background but below the label and icon.
 * Scoped away from is-style-simple (text+underline) and is-style-outline
 * (transparent fill) which have their own hover treatments.
 */
.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.45s ease;
}

.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--accent-1);
	border-radius: inherit;
	transform: translateX(-101%);
	transition: transform 0.45s ease;
	z-index: -1;
}

.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
}

.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link:hover::before,
.wp-block-button:not(.is-style-simple):not(.is-style-outline) .wp-block-button__link:focus-visible::before {
	transform: translateX(0);
}

/*
 * core/button — Filled (default) hover "wave" structure.
 * blocks/button-filled/frontend.js replaces the link's children with a
 * two-layer stack (visible + clone below). Both layers tween up by one
 * line height with a left-to-right per-char stagger via GSAP SplitText,
 * so the visible glyphs roll out and the same glyphs roll in from below.
 *
 * The wave wrapper is `overflow: hidden` so the clone stays out of view
 * until it scrolls in. `vertical-align: middle` aligns the inline-block
 * wrapper to the button's text baseline (otherwise the descenders
 * would shift the green panel and the focus ring).
 */
.wp-block-button__link.has-trime-wave {
	display: inline-flex;
	align-items: center;
}

/* The wave replaces the pseudo-element icon with two real ones, so hide
 * the original ::after on wave-enabled buttons. Specificity has to beat
 * `.wp-block-button.has-trime-icon .wp-block-button__link::after` above. */
.wp-block-button.has-trime-icon .wp-block-button__link.has-trime-wave::after {
	display: none;
}

.trime2026-btn-wave {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 1.5em;
	line-height: 1.5;
	vertical-align: middle;
	white-space: nowrap;
}

.trime2026-btn-wave__layer {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	height: 1.5em;
	line-height: 1.5;
	white-space: nowrap;
}

.trime2026-btn-wave__layer--clone {
	position: absolute;
	top: 100%;
	left: 0;
}

.trime2026-btn-wave__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1.5em;
	flex-shrink: 0;
}

.trime2026-btn-wave__icon::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: var(--trime-button-icon);
	mask-image: var(--trime-button-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/*
 * core/button — Fluent icon support (works on any button style).
 * The icon is delivered as a mask-image data URL via `--trime-button-icon`,
 * set on the .wp-block-button wrapper by blocks/editor/button-style.js.
 */
.wp-block-button.has-trime-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.has-trime-icon.is-icon-before .wp-block-button__link {
	flex-direction: row-reverse;
}

.wp-block-button.has-trime-icon .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: var(--trime-button-icon);
	mask-image: var(--trime-button-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/*
 * core/button — "Simple" block style.
 * Text-only link with an underline drawn using the same SVG path as
 * trime2026/highlight (different stroke weight and lower position).
 * The underline redraws on hover via a CSS clip-path animation.
 */
.wp-block-button.is-style-simple .wp-block-button__link {
	background-color: transparent;
	color: var(--trime-text, var(--wp--preset--color--contrast));
	padding: 0;
	border-radius: 0;
	border: 0;
	position: relative;
	font-weight: 500;
}

.wp-block-button.is-style-simple .wp-block-button__link:hover,
.wp-block-button.is-style-simple .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--trime-text, var(--wp--preset--color--contrast));
}

/* Underline — same SVG path as trime2026/highlight, stroke 44 (vs 80) so
   it reads as a thin underline. `background-image` + `background-size`
   reliably stretches the path with `preserveAspectRatio="none"`. */
/* Underline — a real inline <svg> (injected by trime2026_inject_simple_button_underline
   in functions.php). Same path as trime2026/highlight, with viewBox cropped to the
   path's vertical bounding box (y 32..62) so the squiggle fills the box. The actual
   stroke animates on hover via stroke-dashoffset — not a clip mask of a rasterised line. */
.wp-block-button.is-style-simple .trime2026-simple-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.55em;
	width: 100%;
	height: 0.7em;
	pointer-events: none;
	overflow: visible;
	color: var(--wp--preset--color--accent-1, #37fb5b);
}

/* Stroke color only — the actual animation (stroke-dashoffset on hover) is
   driven by GSAP in blocks/button-simple/frontend.js, matching the
   trime2026/highlight pattern. CSS transitions on SVG geometry properties
   aren't reliable in Safari, so we don't try to use them. */
.wp-block-button.is-style-simple .trime2026-simple-line path {
	stroke: var(--wp--preset--color--accent-1, #37fb5b);
}

/* When an icon is present, stop the underline at the icon gap so the line
   only sits under the label text. */
.wp-block-button.is-style-simple.has-trime-icon.is-icon-after .trime2026-simple-line {
	right: calc(1em + 0.5em);
}

.wp-block-button.is-style-simple.has-trime-icon.is-icon-before .trime2026-simple-line {
	left: calc(1em + 0.5em);
}


/*
 * Page template wrappers shouldn't add bleed below or above edge-to-edge themed
 * sections. The default page.html template wraps post-content in a padded
 * wp-block-group; that padding shows the body background as a gap between the
 * last trime2026/container and the footer (and between the header and the
 * first container). When the entry-content begins or ends with an alignfull
 * trime2026/container, collapse the wrapper's matching padding so sections
 * butt cleanly against the template parts above and below.
 */
/* !important is required because page.html sets padding-top / padding-bottom
   as an inline style on this wrap group, which beats external CSS otherwise. */
.wp-block-group.alignfull:has(> .wp-block-post-content > .wp-block-trime2026-container.alignfull:last-child) {
	padding-bottom: 0 !important;
}

.wp-block-group.alignfull:has(> .wp-block-post-content > .wp-block-trime2026-container.alignfull:first-child) {
	padding-top: 0 !important;
}

/* Same neutralization when the post-content itself is the last child (no
   featured-image / title above it inside the wrap group). */
.wp-block-group.alignfull > .wp-block-post-content:last-child > .wp-block-trime2026-container.alignfull:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * Reference (trime_reference) CPT
 *
 * Styles for the locked editor template + front-end single page. Loaded
 * in both contexts via block-overrides.css, so the editor canvas matches
 * the front end. Selectors hook on the reference-only block classes
 * (and :has() for the generic post-title/excerpt in the hero), so nothing
 * leaks onto other post types.
 * ------------------------------------------------------------------ */

/* Offset the "Lue lisää" anchor target so the floating header doesn't sit
   over the top of the project-details section when jumped to. */
#projektin-sisalto {
	scroll-margin-top: 7rem;
}

/* Hero top spacing is handled by the generic "first container clears the
   fixed nav" rule in the container block's style.scss — no bespoke override. */

.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) {
	text-align: center;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 24px);
}

.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) .wp-block-post-title {
	font-size: clamp(3.25rem, 9vw, 120px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 500;
	margin: 0;
}

.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) .wp-block-post-excerpt {
	font-size: clamp(1.25rem, 2.4vw, 28px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 300;
	color: var(--trime-text, var(--wp--preset--color--contrast));
	margin: 0;
	max-width: 40ch;
}

.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* The hero excerpt never uses a "read more" link — hide its placeholder in
   the editor and any stray link on the front end. */
.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) .wp-block-post-excerpt__more-link,
.wp-block-trime2026-column:has(.wp-block-trime2026-reference-meta) .wp-block-post-excerpt__more-text {
	display: none;
}

/* reference-meta — CTA button + date / site pills. */
.wp-block-trime2026-reference-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 24px);
	width: 100%;
}

/* The "Lue lisää" CTA renders as the theme's standard filled button
   (.wp-block-button > .wp-block-button__link), so it inherits the dark
   fill, colours, and the green-slide + wave hover effects. The theme's
   default button is square, so the design's pill radius is added here; the
   green hover panel picks it up via its border-radius:inherit. */
.trime2026-reference-meta__cta.wp-block-button {
	margin: 0;
}

.trime2026-reference-meta__cta .wp-block-button__link {
	border-radius: 28px;
}

.trime2026-reference-meta__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
}

/* Self-contained pill styling — the trime2026/pill block's stylesheet is
   only enqueued when that block is on the page, so the reused classes are
   restyled here for the reference hero. */
.trime2026-reference-meta__pills .wp-block-trime2026-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 20px;
	background-color: var(--trime-card-bg, var(--wp--preset--color--accent-2));
	text-decoration: none;
}

.trime2026-reference-meta__pills .trime2026-pill__text {
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--trime-text, var(--wp--preset--color--contrast));
}

.trime2026-reference-meta__site {
	gap: 6px;
	text-decoration: none;
	color: var(--trime-text, var(--wp--preset--color--contrast));
}

.trime2026-reference-meta__arrow {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--trime-text, var(--wp--preset--color--contrast));
}

/* reference-hero — full-bleed image or video in a rounded frame. When a
   crop aspect ratio is chosen (is-cropped) the wrapper carries an inline
   `aspect-ratio` (reliable cross-browser, incl. Safari — unlike putting it
   on the <img>, where Safari falls back to the media's intrinsic height
   and overflows) with overflow:hidden, and the media fills/covers it.
   With "Original" the media keeps its natural ratio. */
.wp-block-trime2026-reference-hero {
	width: 100%;
	border-radius: 40px;
	overflow: hidden;
}

.trime2026-reference-hero__media {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-trime2026-reference-hero.is-cropped .trime2026-reference-hero__media {
	height: 100%;
	object-fit: cover;
}

/* Projektin sisältö card — contents list, category pills, budget. The card
   shell (beige bg, 40px radius, 32px padding) comes from is-variant-card.
   The column is normally display:block (sibling-margin spacing), which made
   the inner spacing uneven; switch to a flex column with a single 16px gap
   to match the Figma design, and zero the children's own margins so the gap
   is the only thing controlling spacing (incl. the core separator's default
   block margins). */
.wp-block-trime2026-column.is-variant-card:has(.wp-block-trime2026-reference-budget) {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wp-block-trime2026-column.is-variant-card:has(.wp-block-trime2026-reference-budget) > * {
	margin-block: 0;
}

/* Thin divider, flush to the 16px rhythm (its default 30px/9px margins are
   reset above). */
.wp-block-trime2026-column.is-variant-card:has(.wp-block-trime2026-reference-budget) > .wp-block-separator {
	width: 100%;
	margin-inline: 0;
}

/* The card title is a semantic h2 but reads as a small label per the
   design — override the h2 type scale for this instance only. */
.wp-block-heading.trime2026-reference-card-title {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
}

.wp-block-list.trime2026-reference-contents {
	margin: 0;
	padding-left: 1.1em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 300;
	line-height: 1.5;
	color: var(--trime-text, var(--wp--preset--color--contrast));
}

/* 8px between bullet items, no trailing margin (the card gap handles the
   space to the next section). */
.wp-block-list.trime2026-reference-contents li {
	margin: 0;
}

.wp-block-list.trime2026-reference-contents li + li {
	margin-top: 8px;
}

/* Category terms rendered as white pills on the beige card. */
.wp-block-post-terms.trime2026-reference-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* core/post-terms inserts a separator element between the links, which is a
   real flex item — leaving 8px + separator + 8px between pills. Hide it so
   the single 8px flex gap controls the spacing (matches the Figma 8px). */
.wp-block-post-terms.trime2026-reference-categories .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms.trime2026-reference-categories a {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 20px;
	background-color: var(--trime-bg, var(--wp--preset--color--base));
	color: var(--trime-text, var(--wp--preset--color--contrast));
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
}

/* Budget block: "Budjettiluokka" label + value, 4px apart per the design. */
.trime2026-reference-budget {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trime2026-reference-budget__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.4;
}

.trime2026-reference-budget__value {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

/* Editor-only control panels (never rendered on the front end). A light
   boxed treatment so editors can tell these are inputs, not page content. */
.trime2026-reference-meta__controls,
.trime2026-reference-budget__controls {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	padding: 12px;
	border: 1px dashed var(--wp--preset--color--contrast, #141c16);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.6);
	text-align: left;
}

.trime2026-reference-meta__controls > * + * {
	margin-top: 8px;
}