/**
 * Trähus Child Theme — Custom Styles
 *
 * Extends agoodsite-fse parent theme with Trähus-specific styling.
 */

/* Sans/UI/navigations-typsnittet är Instrument Sans från Google Fonts.
   Theme-tokenen heter "sans" och används för navigation, meta, captions,
   knappar, labels och annan kompakt UI-typografi. */

:root {
	/* Shared content measure for full-bleed sections. Apply .trahus-container
	   to an inner block instead of inventing page-specific side padding. */
	--trahus-container-max: var(--wp--style--global--content-size, 1200px);
	--trahus-container-padding: clamp(1.25rem, 4vw, 3rem);

	/* Pil-ikon för "Läs mer"-länkar m.m. — Lucide "move-right" (ISC-licens),
	   renderad som mask så den ärver textfärgen via currentColor. */
	--trahus-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E");

}

.trahus-container {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--trahus-container-padding))), var(--trahus-container-max)) !important;
	max-width: var(--trahus-container-max) !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Smooth scroll + prevent horizontal overflow */
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}
/* clip (not hidden) avoids creating a new scroll context that could break sticky positioning */
body {
	overflow-x: clip;
}

/* Chronicle should stay elegant and never render heavier than 500.
   Instrument Sans/UI text keeps its own weights. Lighter explicit Chronicle weights
   remain available for numerals, quotes and decorative text. */
:where(
	h1:not(.has-sans-font-family),
	h2:not(.has-sans-font-family),
	h3:not(.has-sans-font-family),
	h4:not(.has-sans-font-family),
	h5:not(.has-sans-font-family),
	h6:not(.has-sans-font-family),
	.has-heading-font-family,
	.has-body-font-family,
	.has-heading-font-family strong,
	.has-body-font-family strong
) {
	font-weight: 500 !important;
}

:where(
	h1:not(.has-sans-font-family),
	h2:not(.has-sans-font-family),
	h3:not(.has-sans-font-family),
	h4:not(.has-sans-font-family),
	h5:not(.has-sans-font-family),
	h6:not(.has-sans-font-family),
	.has-heading-font-family,
	.has-body-font-family
)[style*="font-weight:100"],
:where(.has-heading-font-family, .has-body-font-family)[style*="fontWeight\":\"100"] {
	font-weight: 100 !important;
}

:where(
	h1:not(.has-sans-font-family),
	h2:not(.has-sans-font-family),
	h3:not(.has-sans-font-family),
	h4:not(.has-sans-font-family),
	h5:not(.has-sans-font-family),
	h6:not(.has-sans-font-family),
	.has-heading-font-family,
	.has-body-font-family
)[style*="font-weight:200"],
:where(.has-heading-font-family, .has-body-font-family)[style*="fontWeight\":\"200"] {
	font-weight: 200 !important;
}

:where(
	h1:not(.has-sans-font-family),
	h2:not(.has-sans-font-family),
	h3:not(.has-sans-font-family),
	h4:not(.has-sans-font-family),
	h5:not(.has-sans-font-family),
	h6:not(.has-sans-font-family),
	.has-heading-font-family,
	.has-body-font-family
)[style*="font-weight:300"],
:where(.has-heading-font-family, .has-body-font-family)[style*="fontWeight\":\"300"] {
	font-weight: 300 !important;
}

:where(
	h1:not(.has-sans-font-family),
	h2:not(.has-sans-font-family),
	h3:not(.has-sans-font-family),
	h4:not(.has-sans-font-family),
	h5:not(.has-sans-font-family),
	h6:not(.has-sans-font-family),
	.has-heading-font-family,
	.has-body-font-family
)[style*="font-weight:400"],
:where(.has-heading-font-family, .has-body-font-family)[style*="fontWeight\":\"400"] {
	font-weight: 400 !important;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 100000;
	padding: 8px 16px;
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}
.skip-link:focus {
	left: 0;
	top: 0;
}

/* Focus styles for accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Shared UI label/eyebrow rhythm. Keep these on Instrument Sans so small
   navigational text stays crisp next to Chronicle headings/body copy. */
:where(
	.trahus-contact-kicker,
	.trahus-contact-route__eyebrow,
	.trahus-footer-instagram__eyebrow,
	.trahus-project-card__kicker,
	.trahus-offerings-page-hero__eyebrow,
	.trahus-offerings-page-item__eyebrow,
	.trahus-article-meta__label,
	.trahus-style-guide-toc__eyebrow,
	.trahus-sg-local-layout__eyebrow,
	.trahus-sg-card-direction__eyebrow,
	.trahus-ringhero__kicker
) {
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--2xs, 0.7rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.25;
	text-transform: uppercase;
}


body.page-style-guide .wp-block-group.alignfull > p:is(
	.has-secondary-color,
	.has-primary-dark-color
).has-sm-font-size:first-child {
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif) !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

/* Selection color */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Global nav — transparent header over colored heroes
   ========================================================================== */
/* Pages with colored heroes: nav overlaps hero with transparent background.
   Uses .has-hero-header from PHP (available at first render, no JS needed).
   Parent theme JS (.site-header--mega, .is-sticky-header, .is-transparent)
   takes over once loaded — these CSS rules handle the critical initial state. */
.site-header > .wp-block-group {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Remove top padding so header overlaps hero */
body.has-hero-header .wp-site-blocks {
	--wp--style--block-gap: 0;
	gap: 0 !important;
	padding-top: 0 !important;
}

/* Fix header over hero — uses :first-of-type (skip-link may precede template part) */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type {
	position: fixed !important;
	top: var(--sticky-top-offset, 0px) !important;
	left: 0;
	right: 0;
	z-index: 1000;
	/* NOTE: No transform or will-change:transform here — both create a
	   containing block on iOS Safari, trapping fixed-position descendants
	   (search overlay, mobile nav) inside this stacking context.
	   GPU compositing is not needed; position:fixed already composites. */
	background: rgba(30, 70, 32, 0.92) !important;
	background-color: rgba(30, 70, 32, 0.92) !important;
	border: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Remove 1px gap/border between header and hero on all pages */
.wp-block-template-part:first-of-type,
.wp-block-template-part:first-of-type > .site-header,
.wp-block-template-part:first-of-type > .site-header > .wp-block-group {
	margin-bottom: 0 !important;
	margin-block-end: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* WordPress/parent wrappers can add the visible line either as a template-part
   border or as block-gap before the first hero. Remove both on hero pages. */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .site-header,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .site-header > .wp-block-group {
	background-clip: border-box !important;
	margin-bottom: 0 !important;
	margin-block-end: 0 !important;
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
}

body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type::before,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type::after,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .site-header::before,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .site-header::after {
	display: none !important;
	content: none !important;
}

body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type + .trahus-hero,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type + .hero-advanced {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

body.has-hero-header .wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* Thin white hairline under the sticky header on hero pages (mobil + desktop).
   The fixed header height (~var(--header-height)) and .wp-site-blocks'
   matching padding-top round to slightly different subpixel values, so a ~1px
   sliver of the white <body> background shows through the seam under the
   header. The parent theme closes this with a -1px shift gated on the
   `.has-hero` class, which its JS only sets for its own hero blocks — Trähus's
   custom heroes never get it. Paint the blocks canvas the header green so the
   seam reads as an extension of the header instead of a white line. Verified
   in WebKit: only the 1px seam changes colour; all content below is opaque
   (sections + footer paint over this), so nothing else is tinted. */
body.has-hero-header .wp-site-blocks {
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Semi-transparent dark green on ALL inner header elements on hero pages.
   Two levels deep to catch nested .wp-block-group wrappers. */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > *,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > * > * {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Override parent theme's .is-sticky-header background on hero pages.
   Parent rule (.wp-block-template-part.is-sticky-header > .site-header--mega:not(.is-transparent))
   has specificity 0,5,0 with !important — we need 0,6,1+ to beat it. */
body.has-hero-header .wp-block-template-part.is-sticky-header > .site-header.site-header--mega:not(.is-scrolled),
body.has-hero-header .site-header.site-header--mega.is-sticky-header:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Also override .has-surface-background-color from WordPress core (inline class on header div) */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .has-surface-background-color:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
}

/* Logo drop-shadow for extra contrast over hero images */
body.has-hero-header .site-header:not(.is-scrolled) .wp-block-site-title a {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
body .site-header.is-scrolled .wp-block-site-title a {
	filter: none;
}

/* On hero pages (most heroes are dark) the site title stays full white,
   while the nav links use the same tone-on-tone sage as the solid header so
   they read softer against the green rather than stark white.
   JS refines this with .is-hero-light / .is-hero-dark once loaded. */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-site-title a {
	color: var(--wp--preset--color--surface) !important;
}
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation-item__content {
	color: #C4CDB8 !important;
}
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation-item__content.is-current-nav-link {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Transparent when over hero (after JS adds .site-header--mega) */
.has-hero-header .site-header:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Solid dark green when scrolled past hero */
.has-hero-header .site-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Scrolled state: restore dark green on template part AND override parent sticky rules */
.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type:has(.is-scrolled) > * {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}
body.has-hero-header .wp-block-template-part.is-sticky-header > .site-header.site-header--mega.is-scrolled,
body.has-hero-header .site-header.site-header--mega.is-sticky-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Nav text is ALWAYS white — both on dark green bg and transparent over hero.
   Hero light/dark distinction no longer needed since bg is always dark or transparent. */

/* ==========================================================================
   Sticky header — content offset on non-hero pages
   ========================================================================== */
/* Parent theme's :has()-based rule may not fire because view.js is dequeued.
   Our nav-dark-green.js sets --header-height and .is-sticky-header, so we
   replicate the padding-top offset for all non-hero pages. */
body:not(.has-hero-header) .wp-site-blocks {
	padding-top: var(--header-height, 70px) !important;
}

@media (max-width: 782px) {
	html:has(body.admin-bar) {
		margin-top: 0 !important;
	}

	body.admin-bar #wpadminbar {
		display: none !important;
	}

	body.admin-bar {
		--sticky-top-offset: 0px;
	}

	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-of-type,
	body.admin-bar.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type {
		top: 0 !important;
	}
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.yoast-breadcrumbs,
.yoast-breadcrumbs a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.yoast-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
}

.trahus-breadcrumb-band {
	border-bottom: 1px solid rgba(46, 61, 36, 0.12);
}

/* Breadcrumb band contentSize is set to 1200px in parts/breadcrumbs.html
   to align with the hero-inner max-width. */

/* Hide ⌘K keyboard shortcut tooltip on search icon */
.search-autocomplete__kbd {
	display: none !important;
}


/* ==========================================================================
   Block CSS class fix
   Parent theme SCSS uses .wp-block-agoodsite-* but WordPress generates
   .wp-block-agoodsite-fse-* from the block name "agoodsite-fse/*".
   These rules bridge the gap until parent theme SCSS is corrected.
   ========================================================================== */

/* --- Hero Advanced --- */
.wp-block-agoodsite-fse-hero-advanced {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__background {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	will-change: transform;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__background--video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.wp-block-agoodsite-fse-hero-advanced video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--wp--preset--spacing--md, 1.5rem))), var(--wp--style--global--content-size, 1200px));
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-right: auto;
	margin-left: auto;
	padding: var(--wp--preset--spacing--section, 4rem) 0;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--align-center .hero-advanced__content {
	text-align: center;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--align-left .hero-advanced__content {
	text-align: left;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-center {
	align-items: center;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-top {
	align-items: flex-start;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-bottom {
	align-items: flex-end;
}

/* ==========================================================================
   Color specificity fix
   WordPress generates both .has-surface-color and .has-text-color with
   !important. Since .has-text-color comes last it wins, overriding the
   intended preset color. Higher specificity resolves the conflict.
   ========================================================================== */
.has-surface-color.has-text-color {
	color: var(--wp--preset--color--surface) !important;
}

.has-primary-color.has-text-color {
	color: var(--wp--preset--color--primary) !important;
}

.has-surface-alt-color.has-text-color {
	color: var(--wp--preset--color--surface-alt) !important;
}

.has-secondary-color.has-text-color {
	color: var(--wp--preset--color--secondary) !important;
}

.has-accent-color.has-text-color {
	color: var(--wp--preset--color--accent) !important;
}

.has-text-muted-color.has-text-color {
	color: var(--wp--preset--color--text-muted) !important;
}

.has-surface-background-color.has-background {
	background-color: var(--wp--preset--color--surface) !important;
}

.has-primary-background-color.has-background {
	background-color: var(--wp--preset--color--primary) !important;
}

.has-primary-dark-background-color.has-background {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

.has-secondary-background-color.has-background {
	background-color: var(--wp--preset--color--secondary) !important;
}

.has-surface-alt-background-color.has-background {
	background-color: var(--wp--preset--color--surface-alt) !important;
}

.has-text-background-color.has-background {
	background-color: var(--wp--preset--color--text) !important;
}

/* --- Cover block title readability --- */
.wp-block-cover .wp-block-post-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* --- Site title → Logo replacement --- */
.wp-block-site-title {
	display: flex;
	align-items: center;
	line-height: 1;
}
.wp-block-site-title a {
	text-decoration: none;
	font-size: 0 !important;
	display: block;
	width: 140px;
	height: 48px;
	background: url(../images/trahus-logo-cropped@2x.png) no-repeat center / contain;
}

/* ==========================================================================
   Global nav — Dark green header with white logo/text
   ========================================================================== */

/* Default: dark green background on all pages.
   body prefix adds 0,0,1 to beat parent's equal-specificity rules. */
body .site-header.site-header--mega {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Taller nav: generous padding (compare Mannerheimmuseet) */
.site-header .wp-block-group[style*="padding-top"] {
	padding-top: 1.1rem !important;
	padding-bottom: 1.1rem !important;
}

/* Top-level nav links (dark green bg): compact Instrument Sans with restrained
   tracking. Keep size fixed so the long Swedish labels stay elegant. */
.site-header .wp-block-navigation-item__content {
	color: #C4CDB8 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
	line-height: 1.2;
	position: relative;
	text-decoration: none;
}

.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	font-weight: 500 !important;
}

.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content.is-current-nav-link,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.is-current-nav-link {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	position: absolute;
	right: 0;
	bottom: -0.62rem;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0;
	transform: scaleX(0.55);
	transform-origin: center;
	transition: opacity 180ms ease, transform 180ms ease;
}

.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.site-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content.is-current-nav-link::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.is-current-nav-link::after {
	opacity: 0.72;
	transform: scaleX(1);
}

/* Dark text in dropdown/submenu (white background) */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #333 !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #111 !important;
}

/* Keep every core dropdown readable against its white panel, even when the
   header state applies white top-level navigation text. */
.site-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container *,
.site-header .wp-block-navigation__submenu-container a,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container *,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
}

.site-header .wp-block-navigation__submenu-container {
	background: #fff !important;
}

.site-header .wp-block-navigation__submenu-container a:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620) !important;
	-webkit-text-fill-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}
/* Submenu caret/arrow — white at top level */
.site-header .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-icon svg,
.site-header .wp-block-navigation__submenu-icon path {
	color: #fff !important;
	fill: #fff !important;
	stroke: #fff !important;
	opacity: 0.85;
}
/* Submenu caret inside dropdown — dark */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon path {
	color: #333 !important;
	fill: #333 !important;
	stroke: #333 !important;
	opacity: 1;
}
.site-header .search-autocomplete__trigger,
.site-header .search-autocomplete__trigger svg {
	color: #fff !important;
}

/* Override WordPress inline .has-surface-background-color on the header div */
body .site-header.has-surface-background-color.has-background {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Parent theme's .is-sticky-header rule — override to dark green (all states).
   Parent has up to 0,6,0 specificity with .has-hero — we use body + matching
   selectors to reach 0,6,1 or 0,7,1 and always win. */
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega,
body .site-header.site-header--mega.is-sticky-header,
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega.is-scrolled,
body .site-header.site-header--mega.is-sticky-header.is-scrolled,
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega:not(.is-transparent),
body .site-header.site-header--mega.is-sticky-header:not(.is-transparent),
body .wp-block-template-part.is-sticky-header.has-hero > .site-header.site-header--mega.is-scrolled,
body .wp-block-template-part.is-sticky-header.has-hero > .site-header.site-header--mega:not(.is-transparent) {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
	box-shadow: none !important;
}

/* The sticky header can end on a subpixel while the first content block starts
   on the next whole pixel. Extend the header paint by 1px to avoid a visible
   hairline between the navbar and the hero/content below. */
body:not(.has-hero-header) .wp-site-blocks > .wp-block-template-part.is-sticky-header:first-of-type::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 0;
	display: block;
	height: 1px;
	background: #1E4620;
	content: "";
	pointer-events: none;
}

/* Catch-all: ANY .site-header with .is-scrolled — dark green always */
body .site-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Scrolled template part wrapper background — always dark green */
body .wp-site-blocks > .wp-block-template-part:first-of-type:has(.is-scrolled) > * {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Language switcher: white text */
.site-header .polylang-switcher a,
.site-header .wp-block-group a[hreflang] {
	color: #fff !important;
}

/* --- Navigation: font + spacing --- */
.wp-block-agoodsite-fse-navigation-mega .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 500 !important;
}

/* Ensure nav items have proper gap — child theme strips responsive container
   which can lose the flex gap set by parent theme */
.nav-mega .wp-block-navigation .wp-block-navigation__container,
.nav-mega .wp-block-navigation ul.wp-block-navigation__container {
	display: flex !important;
	flex-wrap: wrap;
	gap: clamp(1.15rem, 1.7vw, 1.55rem) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Mega Menu — Projekt dropdown
   ========================================================================== */

/* The <li> must be static so the panel positions relative to the nav bar */
.wp-block-navigation-item.has-mega-panel {
	position: static !important;
}

/* Toggle chevron button (always present, styled for mobile) */
.trahus-mega-panel__toggle {
	display: none; /* Hidden on desktop */
	background: none;
	border: none;
	color: #fff;
	padding: 0.5rem;
	cursor: pointer;
	line-height: 1;
}

/* --- Mega panel positioning --- */
/* The <li> stays position:relative so hover covers the panel.
   Panel is centered in the viewport via left:50vw + translateX(-50%). */
.has-mega-panel {
	position: relative !important;
}

/* --- Shared Panel: desktop dropdown --- */
.trahus-mega-panel {
	position: absolute;
	top: 100%;
	/* Center in viewport regardless of <li> position */
	left: 50vw;
	right: auto;
	transform: translateX(-50%);
	width: min(1200px, 94vw);
	margin-top: 0;
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
	padding: var(--wp--preset--spacing--lg, 2rem);
	opacity: 0;
	visibility: hidden;
	/* Keep pointer-events active so mouseleave doesn't trigger during hover */
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 1000;
}

/* Triangle arrow pointing up — positioned via JS --arrow-x or centered */
.trahus-mega-panel::after {
	content: '';
	position: absolute;
	top: -8px;
	left: var(--arrow-x, 50%);
	transform: translateX(-50%);
	width: 16px;
	height: 8px;
	background: var(--wp--preset--color--surface, #fff);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	z-index: 1;
}

.has-mega-panel.is-open > .trahus-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* --- Columns grid --- */
.trahus-mega-panel__columns {
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

/* Slimmade paneler ("en länk, ett hem"): smalare paneler med färre kolumner. */
.trahus-mega-projekt__columns {
	grid-template-columns: 1fr;
}

/* Bredden styrs via parenttemats variabel --nav-mega-panel-width:
   parentens .nav-mega__panel (style-navigation.css, laddas efter denna fil)
   sätter width: var(--nav-mega-panel-width), så variabeln är den avsedda
   kroken — en egen width-deklaration förlorar kaskaden. width behålls som
   fallback om parentregeln försvinner. */
.trahus-mega-projekt {
	--nav-mega-panel-width: min(880px, 94vw);
	width: min(880px, 94vw);
}

/* Projektpanelen visar enbart utvalda projekt — fyra kort i rad. */
.trahus-mega-projekt .trahus-mega-panel__featured {
	grid-template-columns: repeat(4, 1fr);
}

.trahus-mega-omoss__columns {
	grid-template-columns: 1fr 1.4fr;
}

.trahus-mega-omoss {
	--nav-mega-panel-width: min(640px, 94vw);
	width: min(640px, 94vw);
}

/* Antal verksamhetsgrenar varierar per språk (3-4) — låt griden anpassa sig. */
.trahus-mega-erbjudande__columns {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.trahus-mega-erbjudande {
	--nav-mega-panel-width: min(1000px, 94vw);
	width: min(1000px, 94vw);
}

.trahus-mega-kunskap__columns {
	grid-template-columns: 1.6fr 1fr;
}

.trahus-mega-kunskap {
	--nav-mega-panel-width: min(820px, 94vw);
	width: min(820px, 94vw);
}

/* Reset nav uppercase — mega panel content should be normal case.
   core/navigation in theme.json sets text-transform: uppercase. */
.trahus-mega-panel {
	text-transform: none;
}

/* --- Column title --- */
.trahus-mega-panel__title {
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.75rem 0;
	padding: 0;
}

.trahus-mega-panel__title a {
	color: inherit;
	text-decoration: none;
}

.trahus-mega-panel__title a:hover {
	color: var(--wp--preset--color--text, #1a1a1a);
}

/* Slimmad Erbjudande-panel: kategorirubriken är själva länken, med en kort
   beskrivningsrad (termbeskrivningen) i stället för länklistor. */
.trahus-mega-erbjudande .trahus-mega-panel__title {
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--wp--preset--color--text, #1a1a1a);
	margin-bottom: 0.4rem;
}

.trahus-mega-erbjudande .trahus-mega-panel__title a:hover {
	color: var(--wp--preset--color--primary, #4A5D3A);
}

.trahus-mega-panel__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #777);
	max-width: 30ch;
}

/* --- Link list --- */
.trahus-mega-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trahus-mega-panel__links li {
	margin: 0;
	padding: 0;
}

.trahus-mega-panel__links a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s, padding-left 0.15s;
}

.trahus-mega-panel__links a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--wp--preset--color--primary, #2C5F2D);
	opacity: 0;
	transition: opacity 0.15s, margin-right 0.15s;
	margin-right: -5px;
	flex-shrink: 0;
}

.trahus-mega-panel__links a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
	padding-left: 4px;
}

.trahus-mega-panel__links a:hover::before {
	opacity: 1;
	margin-right: 0;
}

.trahus-mega-panel__group {
	padding: 0.35rem 0 0.1rem;
}

.trahus-mega-panel__group-label {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--wp--preset--color--text-muted, #666);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
}

.trahus-mega-panel__links--nested {
	padding-left: 0.75rem;
}

/* --- Count bubble --- */
.trahus-mega-panel__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.35em;
	margin-left: auto;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--text-muted, #999);
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	border-radius: 999px;
	flex-shrink: 0;
}

/* --- Featured projects (Projekt panel) --- */
.trahus-mega-panel__featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.trahus-mega-panel__card {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	transition: opacity 0.15s;
}

.trahus-mega-panel__card:hover {
	opacity: 0.85;
}

.trahus-mega-panel__card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.trahus-mega-panel__card-title {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

.trahus-mega-panel__card-meta {
	display: block;
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-muted, #999);
}

/* --- Footer --- */
.trahus-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.trahus-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../year-rings/optimized/7.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 42%;
	filter: grayscale(1) contrast(1.12);
	mix-blend-mode: multiply;
	opacity: 0.16;
}

.trahus-footer > * {
	position: relative;
	z-index: 1;
}

.trahus-mega-panel__footer {
	margin-top: var(--wp--preset--spacing--md, 1.5rem);
	padding-top: var(--wp--preset--spacing--sm, 0.75rem);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	text-align: right;
}

/* Diskret sekundär länk i panelfoten (t.ex. "Genom våra partners"). */
.trahus-mega-panel__secondary-link {
	margin-left: var(--wp--preset--spacing--md, 1.5rem);
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted, #666);
	text-decoration: none;
}

.trahus-mega-panel__secondary-link:hover {
	text-decoration: underline;
}

.trahus-mega-panel__view-all {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
}

.trahus-mega-panel__view-all:hover {
	text-decoration: underline;
}

.trahus-footer-instagram {
	gap: clamp(1.25rem, 3vw, 2rem) !important;
	margin-top: var(--wp--preset--spacing--xl, 3rem) !important;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	border: 1px solid rgba(245, 241, 232, 0.18);
	background: rgba(245, 241, 232, 0.06);
}

.trahus-footer-instagram__text {
	flex: 1 1 26rem;
}

.trahus-footer-instagram__text > * {
	margin-top: 0 !important;
}

.trahus-footer-instagram__text > *:last-child,
.trahus-footer-instagram__actions {
	margin-bottom: 0 !important;
}

.trahus-footer-instagram__eyebrow {
	margin-bottom: 0.55rem !important;
	color: var(--wp--preset--color--surface-alt, #f5f1e8) !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.trahus-footer-instagram h3 {
	margin-bottom: 0.6rem !important;
	color: var(--wp--preset--color--surface, #fff) !important;
}

.trahus-footer-instagram p:not(.trahus-footer-instagram__eyebrow) {
	color: var(--wp--preset--color--surface-alt, #f5f1e8) !important;
}

.trahus-footer-instagram .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.8rem 1.15rem;
	border-color: rgba(245, 241, 232, 0.55) !important;
	color: var(--wp--preset--color--surface, #fff) !important;
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif);
	font-weight: 600;
	text-decoration: none;
}

.trahus-footer-instagram .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent, #b89b5e) !important;
	background: var(--wp--preset--color--accent, #b89b5e) !important;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.trahus-editor-footer-tools {
	padding: 0.85rem var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--primary-dark, #1e4620);
	color: var(--wp--preset--color--surface-alt, #f5f1e8);
	border-top: 1px solid rgba(245, 241, 232, 0.14);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
}

.trahus-editor-footer-tools__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	max-width: 1200px;
	margin: 0 auto;
}

.trahus-editor-footer-tools__label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}

.trahus-editor-footer-tools__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.45rem 0.7rem;
	color: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(245, 241, 232, 0.28);
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 600;
}

.trahus-editor-footer-tools__link:hover,
.trahus-editor-footer-tools__link:focus-visible {
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--primary-dark, #1e4620);
}

/* --- Om oss: Team members --- */
.trahus-mega-omoss__team {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.trahus-mega-omoss__member {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	transition: opacity 0.15s;
}

.trahus-mega-omoss__member:hover {
	opacity: 0.8;
}

.trahus-mega-omoss__member img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.trahus-mega-omoss__member-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	flex-shrink: 0;
}

.trahus-mega-omoss__member-info {
	display: flex;
	flex-direction: column;
}

.trahus-mega-omoss__member-name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.trahus-mega-omoss__member-role {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted, #999);
}

/* --- Om oss: Contact info --- */
.trahus-mega-omoss__contact {
	margin-bottom: 0.25rem;
}

.trahus-mega-omoss__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.5rem 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text, #1a1a1a);
	line-height: 1.4;
}

.trahus-mega-omoss__contact-item svg {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-mega-omoss__contact-item a {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	text-decoration: none;
}

.trahus-mega-omoss__contact-item a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
}

/* --- Mobile: stack columns, show toggle --- */
@media (max-width: 1023px) {
	.trahus-mega-panel__toggle {
		display: inline-flex;
		align-items: center;
	}

	.trahus-mega-panel {
		position: static;
		width: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0 1rem;
		border-radius: 0;
		display: none;
		z-index: auto;
	}

	.trahus-mega-panel::before,
	.trahus-mega-panel::after {
		display: none;
	}

	.has-mega-panel.is-open > .trahus-mega-panel {
		display: block;
		transform: none;
	}

	.trahus-mega-panel__columns {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Hide featured column on mobile to keep menu compact */
	.trahus-mega-panel__column--featured {
		display: none;
	}

	.trahus-mega-panel__title {
		color: var(--wp--preset--color--text, #1a1a1a);
	}

	.trahus-mega-panel__links a {
		padding: 0.4rem 0;
	}

	.trahus-mega-panel__footer {
		text-align: left;
		border-top: none;
		padding-top: 0;
	}
}

/* --- Inside mobile nav drawer --- */
.mobile-nav__drawer .trahus-mega-panel {
	position: static;
	width: auto;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	box-shadow: none;
	background: transparent;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-radius: 0;
	z-index: auto;
}

.mobile-nav__drawer .trahus-mega-panel__columns {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.mobile-nav__drawer .trahus-mega-panel__column--featured {
	display: none;
}

/* ==========================================================================
 * Team Grid
 * ========================================================================== */
.trahus-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	padding: var(--wp--preset--spacing--md, 1.5rem) var(--wp--preset--spacing--sm, 0.75rem);
	border-radius: 8px;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.trahus-team-card:hover {
	background-color: var(--wp--preset--color--surface-alt, #f0ede8);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.trahus-team-card__avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1rem;
	transition: transform 0.25s;
}

.trahus-team-card:hover .trahus-team-card__avatar {
	transform: scale(1.05);
}

.trahus-team-card__avatar img,
.trahus-team-card__avatar svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trahus-team-card__name {
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	line-height: 1.3;
}

.trahus-team-card__role {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.5rem 0;
}

.trahus-team-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	margin-top: 0.25rem;
}

.trahus-team-card__tag {
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0.2em 0.6em;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	color: var(--wp--preset--color--text-muted, #999);
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.trahus-team-card:hover .trahus-team-card__tag {
	background: var(--wp--preset--color--surface, #fff);
}

.trahus-team-card__contact {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text-muted, #999);
	opacity: 0;
	transition: opacity 0.2s;
}

.trahus-team-card:hover .trahus-team-card__contact {
	opacity: 1;
}

/* ==========================================================================
 * Contact Page
 * ========================================================================== */
.trahus-contact-page {
	margin-top: 0 !important;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.page-template-page-kontakt .trahus-animate {
	opacity: 1 !important;
	transform: none !important;
}

.trahus-contact-intro {
	padding-top: clamp(2.5rem, 5vw, 4.75rem) !important;
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
	border-bottom: 1px solid rgba(45, 45, 45, 0.14);
}

.trahus-contact-kicker,
.trahus-contact-card__role,
.trahus-member-header__role,
.trahus-contact-address__label,
.trahus-contact-route__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.trahus-contact-kicker,
.trahus-contact-card__role,
.trahus-member-header__role,
.trahus-contact-address__label,
.trahus-contact-route__eyebrow {
	color: var(--wp--preset--color--secondary);
	font-weight: 500;
}

.trahus-contact-intro h2 {
	max-width: 10ch;
}

.trahus-contact-intro p {
	max-width: 36rem;
}

.trahus-contact-primary {
	box-sizing: border-box;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
	gap: clamp(1.5rem, 3vw, 2.75rem) !important;
	align-items: start !important;
	width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 1120px);
	margin-right: auto !important;
	margin-left: auto !important;
}

.trahus-contact-form-panel,
.trahus-contact-direct,
.trahus-contact-people-link {
	border-radius: 8px;
}

.trahus-contact-form-panel {
	min-width: 0;
	padding: clamp(1.35rem, 2.4vw, 2rem) !important;
	border: 1px solid rgba(45, 45, 45, 0.12);
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 24%, #fff);
	box-shadow: 0 18px 48px rgba(45, 45, 45, 0.045);
}

.trahus-contact-primary > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
	width: auto;
}

.trahus-contact-direct,
.trahus-contact-people-link {
	padding: clamp(1.15rem, 2vw, 1.6rem) !important;
	border: 1px solid rgba(45, 45, 45, 0.1);
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 54%, #fff);
	box-shadow: 0 14px 34px rgba(45, 45, 45, 0.045);
}

.trahus-contact-direct h3,
.trahus-contact-people-link h3 {
	margin-top: 0 !important;
}

.trahus-contact-direct p,
.trahus-contact-people-link p {
	margin-top: 0 !important;
}

.trahus-contact-form-panel > h2 {
	margin-top: 0 !important;
}

.trahus-contact-form-panel > p {
	max-width: 44rem;
	margin-bottom: clamp(1.2rem, 2vw, 1.6rem) !important;
}

.trahus-contact-person-image {
	margin-bottom: 1rem !important;
}

.trahus-contact-person-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	filter: grayscale(100%);
}

.trahus-contact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3vw, 2.75rem);
	row-gap: clamp(2rem, 4vw, 3.5rem);
	align-items: stretch !important;
}

.trahus-contact-grid--people {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	row-gap: clamp(4rem, 6vw, 6rem);
	align-items: stretch !important;
}

.trahus-contact-card__image-link,
.trahus-contact-card__image-frame {
	display: block;
	margin-bottom: 1rem;
	color: inherit;
	text-decoration: none;
}

.trahus-contact-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 0;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-contact-card__image img,
.trahus-contact-card__image svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	filter: grayscale(100%);
	mix-blend-mode: multiply;
}

.trahus-contact-card__image--cutout {
	background: transparent;
	overflow: visible;
}

.trahus-contact-card__image--empty {
	background: transparent;
}

.trahus-contact-card__image--cutout img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	filter: none;
	mix-blend-mode: normal;
	transform: scale(1.34);
	transform-origin: center;
}

/* Approved portrait masters include their own paper surface. Keep their
 * original 3:4 composition intact instead of scaling them as cutouts. */
.trahus-contact-card__image--paper-portrait {
	aspect-ratio: 3 / 4;
	/* Se kommentaren på .projekt-team-inline__avatar: ytan sätts explicit så
	   att multiply ger samma resultat även om blandningen isoleras. */
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-contact-card__image--paper-portrait img {
	object-fit: contain;
	object-position: center;
	filter: none;
	/* Portrait masters are normalized so the paper is pure white; multiply
	 * lets any page surface show through it exactly, on every background. */
	mix-blend-mode: multiply;
}

.trahus-contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	height: 100%;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.trahus-contact-grid--people .trahus-contact-card {
	height: 100%;
}

.trahus-contact-card:hover {
	box-shadow: none;
	transform: none;
}

.trahus-contact-card h3,
.trahus-contact-card p {
	margin-top: 0 !important;
}

.trahus-contact-card h3 a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.trahus-contact-card__role {
	margin-bottom: 0.65rem !important;
}

.trahus-contact-card__description {
	margin: 0.25rem 0 1.1rem;
	max-width: 28ch;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--chronicle);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.28;
}

.trahus-contact-links {
	display: flex;
	flex-direction: column;
	gap: 0.45rem !important;
	margin-top: auto !important;
}

.trahus-contact-links a,
.trahus-contact-address a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.trahus-contact-links .wp-block-button__link {
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.trahus-contact-addresses {
	align-items: stretch !important;
}

.trahus-contact-address {
	height: 100%;
	padding: clamp(1.35rem, 2vw, 2rem) !important;
	border: 1px solid rgba(45, 45, 45, 0.12);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 82%, #fff);
}

.trahus-contact-address h3 {
	margin-top: 0 !important;
}

.trahus-contact-address__label {
	margin-bottom: 0.5rem !important;
}

.trahus-contact-route {
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

.trahus-contact-route p {
	max-width: 48rem;
}

.trahus-contact-form__notice {
	margin-bottom: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 6px;
	font-weight: 500;
}

.trahus-contact-form__notice--success {
	border: 1px solid rgba(74, 93, 58, 0.24);
	background: rgba(74, 93, 58, 0.1);
	color: var(--wp--preset--color--primary);
}

.trahus-contact-form__notice--error {
	border: 1px solid rgba(128, 52, 38, 0.24);
	background: rgba(128, 52, 38, 0.08);
	color: #803426;
}

.trahus-contact-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.trahus-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.25rem, 2.5vw, 2rem);
	row-gap: 0.9rem;
}

.trahus-contact-form__field,
.trahus-contact-form__checkbox,
.trahus-contact-form__actions {
	margin: 0 !important;
}

.trahus-contact-form__field {
	min-width: 0;
}

.trahus-contact-form__field label,
.trahus-contact-form__checkbox label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--text);
}

.trahus-contact-form__field input,
.trahus-contact-form__field select,
.trahus-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.3rem;
	min-height: 2.9rem;
	padding: 0.68rem 0.8rem;
	border: 1px solid rgba(45, 45, 45, 0.14);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.86);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	line-height: 1.45;
}

.trahus-contact-form__field textarea {
	resize: vertical;
	min-height: 9rem;
	padding: 0.85rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 24%, #fff);
	line-height: 1.6;
}

.trahus-contact-form__field input[type="file"] {
	padding: 0.35rem;
	background: rgba(255, 255, 255, 0.58);
}

.trahus-contact-form__field input[type="file"]::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.55rem 0.8rem;
	border: 0;
	border-radius: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 11%, #fff);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font: 600 0.82rem/1 var(--wp--preset--font-family--sans);
}

.trahus-contact-form__field input:focus,
.trahus-contact-form__field select:focus,
.trahus-contact-form__field textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid rgba(74, 93, 58, 0.18);
	outline-offset: 2px;
}

.trahus-contact-form__field--hidden {
	position: absolute;
	left: -9999px;
}

.trahus-contact-form__hint {
	display: block;
	margin-top: 0.4rem;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	line-height: 1.45;
}

.trahus-contact-form__checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.84rem;
	font-weight: 500;
}

.trahus-contact-form__checkbox input {
	width: 1rem;
	height: 1rem;
	margin-top: 0.18rem;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--primary);
}

.trahus-contact-form__actions button {
	min-height: 2.75rem;
	padding: 0.72rem 1.2rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 600;
}

.trahus-contact-form__actions button:hover,
.trahus-contact-form__actions button:focus-visible {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

@media (max-width: 980px) {
	.trahus-contact-primary {
		grid-template-columns: 1fr;
		width: min(calc(100% - 2rem), 760px);
	}

	.trahus-contact-direct {
		max-width: none;
	}
}

@media (max-width: 781px) {
	.trahus-contact-intro h2 {
		max-width: none;
	}

	.trahus-contact-grid {
		grid-template-columns: 1fr;
	}

	.trahus-contact-card,
	.trahus-contact-address {
		height: auto;
	}

	.trahus-contact-links {
		align-items: stretch !important;
	}

	.trahus-contact-links .wp-block-button,
	.trahus-contact-links .wp-block-button__link {
		width: 100%;
	}

	.trahus-contact-form-panel,
	.trahus-contact-direct {
		padding: 1rem !important;
	}

	.trahus-contact-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Compact variant for team-on-project (fewer members, smaller cards) */
.trahus-team-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.trahus-team-grid--compact .trahus-team-card__avatar {
	width: 110px;
	height: 110px;
}

@media (max-width: 1023px) {
	.trahus-team-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--md, 1.5rem);
	}
}

@media (max-width: 767px) {
	.trahus-team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--sm, 0.75rem);
	}

	.trahus-team-card__avatar {
		width: 100px;
		height: 100px;
	}
}

/* ==========================================================================
 * Single Team Member Header
 * ========================================================================== */
.trahus-member-header {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--wp--preset--spacing--xl, 2.5rem);
	align-items: start;
}

.trahus-member-header__photo {
	margin: 0;
	border-radius: var(--wp--custom--radius--lg, 12px);
	overflow: hidden;
	aspect-ratio: 1;
}

.trahus-member-header__photo img,
.trahus-member-header__photo svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trahus-member-header__name {
	font-size: var(--wp--preset--font-size--3xl, 2.5rem);
	font-weight: 700;
	margin: 0 0 0.25rem 0;
	line-height: 1.15;
	color: var(--wp--preset--color--text, #1a1a1a);
}

/* Rollen följer kontaktkortens kicker-modell (selektorgruppen vid
   .trahus-contact-card__role) — här bara marginalen. */
.trahus-member-header__role {
	margin: 0 0 1rem 0;
}

.trahus-member-header__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.trahus-member-header__tag {
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	padding: 0.3em 0.8em;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	color: var(--wp--preset--color--text-muted, #666);
	border-radius: 999px;
	letter-spacing: 0.02em;
}

/* Kontaktuppgifterna återanvänder kontaktkortens trahus-contact-links —
   kortets margin-top:auto (flex-kontext) neutraliseras i headern. */
.trahus-member-header .trahus-contact-links {
	margin-top: 0.75rem !important;
}

/* Brödtexten ligger direkt under roll-kickern, före kompetenstaggarna. */
.trahus-member-header__content {
	margin: 0.85rem 0 1.4rem;
	max-width: 42rem;
	color: var(--wp--preset--color--text, #1a1a1a);
}

.trahus-member-header__content > :first-child {
	margin-top: 0;
}

.trahus-member-header__content > :last-child {
	margin-bottom: 0;
}

.trahus-member-header--cutout {
	grid-template-columns: minmax(300px, 1.02fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	min-height: 0;
}

.trahus-member-header--cutout .trahus-member-header__tags {
	gap: 0.55rem;
	margin-bottom: 1.75rem;
}

/* Diskreta pills: transparent mot papperet, hårfin kant, samma
   sans/xs-typografi som kortens kicker-familj. */
.trahus-member-header--cutout .trahus-member-header__tag {
	padding: 0.38em 0.85em;
	border: 1px solid rgba(46, 61, 36, 0.18);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #595959);
	font-family: var(--wp--preset--font-family--sans);
	letter-spacing: 0.04em;
}

.trahus-member-header--cutout .trahus-member-header__photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

.trahus-member-header--cutout .trahus-member-header__photo img {
	width: min(100%, 38rem);
	height: auto;
	max-height: min(64vh, 42rem);
	object-fit: contain;
}

.trahus-member-header__credit {
	width: min(100%, 38rem);
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text, #1a1a1a);
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
}

.trahus-member-header--paper-portrait .trahus-member-header__photo {
	overflow: visible;
	background: transparent;
}

.trahus-member-header--paper-portrait .trahus-member-header__photo img {
	mix-blend-mode: multiply;
}

.trahus-lightbox-people,
.trahus-lightbox-terms,
.trahus-lightbox-people-editor,
.trahus-lightbox-share,
.trahus-lightbox-caption {
	margin-top: 0.85rem;
	padding-top: 0.72rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.trahus-lightbox-people h3,
.trahus-lightbox-terms h3,
.trahus-lightbox-people-editor h3,
.trahus-lightbox-caption h3 {
	margin: 0 0 0.42rem;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #796A4F);
}

.trahus-lightbox-caption {
	display: grid;
	gap: 0.35rem;
	order: 10;
}

.trahus-lightbox-caption p {
	max-width: 34em;
	margin: 0;
	color: var(--wp--preset--color--text, #2d2d2d);
	font-size: 0.86rem;
	line-height: 1.42;
}

.trahus-lightbox-terms {
	display: grid;
	gap: 0.58rem;
	order: 20;
}

.trahus-lightbox-terms__group {
	display: grid;
	gap: 0.28rem;
}

.trahus-lightbox-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.28rem;
}

.trahus-lightbox-terms__term {
	display: inline-flex;
	align-items: center;
	min-height: 1.45rem;
	padding: 0.18rem 0.52rem;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.36);
	color: var(--wp--preset--color--text-muted, #595959);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.66rem;
	font-weight: 550;
	line-height: 1.1;
	text-decoration: none;
}

.trahus-lightbox-terms__term:hover {
	border-color: rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.8);
	color: var(--wp--preset--color--text, #1a1a1a);
}

.trahus-lightbox-share {
	display: grid;
	gap: 0.25rem;
	margin-top: auto;
	order: 80;
}

.trahus-lightbox-share__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.42rem;
	width: 100%;
	min-height: 2rem;
	padding: 0.52rem 0.72rem;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--primary-dark, #1E4620);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

.trahus-lightbox-share__button::before {
	content: "";
	width: 0.72rem;
	height: 0.72rem;
	border: 1.5px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	transform: translateY(0.02rem) rotate(-45deg);
	opacity: 0.75;
}

.trahus-lightbox-share__button:hover {
	border-color: rgba(0, 0, 0, 0.28);
	background: rgba(255, 255, 255, 0.52);
}

.trahus-lightbox-share__button:disabled {
	opacity: 0.65;
	cursor: default;
}

.trahus-lightbox-share__status {
	min-height: 0.9em;
	margin: 0;
	color: var(--wp--preset--color--text-muted, #595959);
	font-size: 0.7rem;
	line-height: 1.35;
}

.trahus-lightbox-share__copy-field {
	position: fixed;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.trahus-lightbox-people__list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.trahus-lightbox-people {
	order: 30;
}

.trahus-lightbox-people__person {
	display: flex;
	flex-direction: column;
	gap: 0.06rem;
	position: relative;
	padding: 0.42rem 0.52rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.42);
	color: var(--wp--preset--color--text, #1a1a1a);
	text-decoration: none;
}

.trahus-lightbox-people__person[href] {
	padding-right: 1.65rem;
}

.trahus-lightbox-people__person[href]::after {
	content: "→";
	position: absolute;
	right: 0.58rem;
	top: 50%;
	color: currentColor;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.78rem;
	opacity: 0;
	transform: translate(-0.2rem, -50%);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.trahus-lightbox-people__person:hover {
	border-color: rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.8);
}

.trahus-lightbox-people__person[href]:hover::after {
	opacity: 0.65;
	transform: translate(0, -50%);
}

.trahus-lightbox-people__name {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.25;
}

.trahus-lightbox-people__role {
	font-size: 0.7rem;
	line-height: 1.24;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-lightbox-people-editor__option {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.32rem 0.35rem;
	border-radius: 4px;
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
}

.trahus-lightbox-people-editor {
	display: grid;
	gap: 0.45rem;
}

.trahus-lightbox-people-editor__count {
	margin: -0.25rem 0 0;
	font-size: 0.76rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-lightbox-people-editor__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.1rem 0.35rem;
	max-height: min(22rem, 46vh);
	overflow-y: auto;
	padding: 0.35rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.38);
}

.trahus-lightbox-people-editor__option:hover {
	background: rgba(255, 255, 255, 0.72);
}

.trahus-lightbox-people-editor__option input {
	flex: 0 0 auto;
	margin-top: 0.12rem;
}

.trahus-lightbox-people-editor__option span {
	min-width: 0;
	font-weight: 400;
}

.trahus-lightbox-people-editor__status,
.trahus-lightbox-people-editor__save,
.trahus-lightbox-editor-status {
	margin: 0.4rem 0 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-lightbox-media-editor {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 var(--wp--preset--spacing--sm, 0.75rem);
	padding-bottom: var(--wp--preset--spacing--sm, 0.75rem);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.trahus-lightbox-people-editor__actions {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.25rem;
}

.trahus-lightbox-editor-button {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 6px;
	background: var(--wp--preset--color--primary-dark, #1E4620);
	color: #fff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.7rem 0.8rem;
	text-transform: uppercase;
}

.trahus-lightbox-editor-button:disabled {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.38);
	cursor: default;
}

@media (max-width: 767px) {
	.trahus-member-header {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--md, 1.5rem);
	}

	.trahus-member-header__photo {
		max-width: 200px;
	}

	.trahus-member-header--cutout .trahus-member-header__photo {
		max-width: min(100%, 22rem);
		justify-content: flex-start;
	}

	.trahus-member-header__name {
		font-size: var(--wp--preset--font-size--2xl, 2rem);
	}
}

/* --- Sidebar Navigation --- */
.trahus-sidebar-nav {
	position: sticky;
	top: calc(var(--wp--preset--spacing--lg, 2rem) + 80px);
}

.trahus-sidebar-nav__title {
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.75rem 0;
	padding: 0 0 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.trahus-sidebar-nav__title a {
	color: inherit;
	text-decoration: none;
}

.trahus-sidebar-nav__title a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D);
}

.trahus-sidebar-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trahus-sidebar-nav__item {
	margin: 0;
	padding: 0;
}

.trahus-sidebar-nav__item a {
	display: block;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--text, #1a1a1a);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
}

.trahus-sidebar-nav__item a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D);
}

.trahus-sidebar-nav__item.is-current a {
	color: var(--wp--preset--color--primary, #2C5F2D);
	font-weight: 600;
	border-left-color: var(--wp--preset--color--primary, #2C5F2D);
}

@media (max-width: 781px) {
	.trahus-sidebar-nav {
		position: static;
		margin-top: var(--wp--preset--spacing--lg, 2rem);
		padding-top: var(--wp--preset--spacing--md, 1rem);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
}

/* --- Card Feature --- */
.wp-block-agoodsite-fse-card-feature {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: var(--wp--custom--radius--md, 8px);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-agoodsite-fse-card-feature.card-feature--vertical {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wp-block-agoodsite-fse-card-feature.card-feature--hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wp-block-agoodsite-fse-card-feature .card-feature__content {
	padding: var(--wp--preset--spacing--md, 1.5rem);
}

.wp-block-agoodsite-fse-card-feature .card-feature__image-wrapper {
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}

.wp-block-agoodsite-fse-card-feature .card-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-agoodsite-fse-card-feature.card-feature--ratio-16-9 .card-feature__image-wrapper {
	aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Subtle scroll animations
   ========================================================================== */

.trahus-animate {
	--trahus-animate-distance: 10px;
	--trahus-animate-duration: 640ms;
	--trahus-animate-delay: 0ms;
	--trahus-animate-start-opacity: 0;
	opacity: var(--trahus-animate-start-opacity);
	transform: translate3d(0, var(--trahus-animate-distance), 0);
	transition:
		opacity var(--trahus-animate-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--trahus-animate-delay),
		transform var(--trahus-animate-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--trahus-animate-delay);
	will-change: opacity, transform;
}

.trahus-animate--text {
	--trahus-animate-distance: 6px;
	--trahus-animate-duration: 520ms;
	/* The 18 px secondary-colour headings are normal-sized WCAG text, not large
	   text. Any opacity below 1 composites them under the required 4.5:1 ratio
	   during the pre-reveal state. Keep the movement but never fade readable copy. */
	--trahus-animate-start-opacity: 1;
}

.trahus-animate--fade-in {
	--trahus-animate-distance: 0;
}

.trahus-animate--scale-in {
	--trahus-animate-distance: 0;
	transform: scale(0.98);
}

.trahus-animate.is-visible {
	opacity: 1;
	/* transform: none, inte translate3d(0,0,0), och will-change tillbaka till
	   auto. Båda skapar annars en egen stackningskontext som ligger kvar efter
	   att reveal-animationen är klar, och en sådan isolerar mix-blend-mode.
	   Teamporträttens vita papper blandades då mot den isolerade gruppen i
	   stället för mot sidans yta, och syntes som en ljus ruta bakom teckningen
	   — men bara på kort långt ned på sidan, eftersom de överst hinner bli
	   synliga innan observern kör. */
	transform: none;
	will-change: auto;
}

/* Räddningsventil: om reveal-JS:et aldrig kör (krasch, blandad cache,
   observer som inte triggar) tvingas allt synligt efter 2,5 s — en vit
   sida får aldrig bero på JavaScript. Samma mönster som masonry-fallbacken. */
@keyframes trahus-animate-rescue {
	to {
		opacity: 1;
		transform: none;
	}
}

.trahus-animate:not(.is-visible) {
	animation: trahus-animate-rescue 0s 2.5s forwards;
}

.trahus-animate--scale-in.is-visible {
	/* scale(1) skapar fortfarande en stackningskontext — se kommentaren på
	   .trahus-animate.is-visible. */
	transform: none;
}

.trahus-animate--image {
	--trahus-animate-distance: 0;
	overflow: hidden;
	clip-path: inset(6% 0 0 0);
	transform: translate3d(0, 0, 0);
	transition:
		opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--trahus-animate-delay),
		clip-path 1000ms cubic-bezier(0.22, 1, 0.36, 1) var(--trahus-animate-delay);
}

.trahus-animate--image img {
	transform: scale(1.025);
	transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) var(--trahus-animate-delay);
}

.trahus-animate--image.is-visible {
	clip-path: inset(0);
}

.trahus-animate--image.is-visible img {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.trahus-animate,
	.trahus-animate--image,
	.trahus-animate--image img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Masonry Query — gap + filter overrides
   ========================================================================== */

/* Restore full-width centering offset.
   WordPress's has-global-padding layout CSS overrides the plugin's
   margin-left: calc(50% - 50vw) to 0 when inside a padded container,
   while width: 100vw stays intact — causing a 17px right-side overflow
   on mobile. !important restores the intended centering offset. */
.wp-block-goodblocks-masonry-query {
	margin-left: calc(50% - 50vw) !important;
}

/* Never show borders or outlines on masonry images */
.wp-block-goodblocks-masonry-query .masonry-query__item,
.wp-block-goodblocks-masonry-query .masonry-query__item:focus,
.wp-block-goodblocks-masonry-query .masonry-query__item:focus-visible,
.wp-block-goodblocks-masonry-query .masonry-query__item:active,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper img {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Editorial media gets the same hand-softened edge everywhere. Four pixels
   is deliberately just perceptible: it removes the digital sharpness without
   turning the photography into rounded UI cards. */
.wp-block-image:not(.is-style-rounded) > :is(img, a > img),
.wp-block-post-featured-image > :is(img, a > img),
.wp-block-media-text__media > img,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper img {
	border-radius: 4px;
}

.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper {
	overflow: hidden;
}

/* Fallback for masonry on iOS Safari.
   GSAP animation sets inline opacity:0 on items. If GSAP or the
   IntersectionObserver fails on iOS, items stay invisible forever.
   This forces visibility regardless of inline styles from JS.

   The [style] selector boosts specificity to beat inline styles
   combined with !important. This is the only way CSS can override
   element.style.opacity set by JavaScript. */
.wp-block-goodblocks-masonry-query .masonry-query__item {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

.trahus-person-gallery {
	overflow: visible !important;
}

/* Responsive masonry columns — more columns on wider screens */
@media (min-width: 1440px) {
	.masonry-query .masonry-query__grid {
		--masonry-cols-desktop: 5;
	}
}

@media (min-width: 1920px) {
	.masonry-query .masonry-query__grid {
		--masonry-cols-desktop: 6;
	}
}

/* Active filter button: white text on primary background */
.masonry-query__filter.portfolio-meta__pill.is-active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Masonry items — custom cursor (diagonal arrow in dark circle).
   Applied to ALL masonry items and descendants for consistent hover. */
.wp-block-goodblocks-masonry-query .masonry-query__item,
.wp-block-goodblocks-masonry-query .masonry-query__item *,
.trahus-person-gallery .masonry-query__item,
.trahus-person-gallery .masonry-query__item * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='rgba(0,0,0,0.7)'/%3E%3Cpath d='M12 20L20 12M20 12H14M20 12V18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer !important;
}

/* Image-specific metadata in masonry overlay — appears on hover */
.trahus-masonry-hover {
	display: grid;
	gap: 0.38rem;
	max-width: min(100%, 18rem);
}

.trahus-masonry-hover__text,
.masonry-query__caption-text {
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 400;
	line-height: 1.35;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.trahus-masonry-hover__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.trahus-masonry-hover__meta {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin: 0;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38);
}

/* Keep masonry captions attached to their image. The metadata is supplied by
   trahus_masonry_overlay_captions() and should never take up space below the
   image in the masonry flow. */
.wp-block-goodblocks-masonry-query .masonry-query__item .trahus-masonry-hover-wrap {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: 3.5rem 1rem 1rem;
	background: linear-gradient(to bottom, transparent 0%, rgba(16, 30, 16, 0.84) 100%);
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 180ms ease, transform 180ms ease;
}

.wp-block-goodblocks-masonry-query .masonry-query__item:is(:hover, :focus-visible) .trahus-masonry-hover-wrap {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices have no reliable hover state, so leave the context visible. */
@media (hover: none) {
	.wp-block-goodblocks-masonry-query .masonry-query__item .trahus-masonry-hover-wrap {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Breadcrumb — full-bleed background
   Template uses alignfull + constrained layout, so the inner content
   automatically aligns with the header at contentSize (1200px).
   ========================================================================== */

/* ==========================================================================
   Projekt Info Strip — compact horizontal metadata bar
   ========================================================================== */
.projekt-info-strip__item + .projekt-info-strip__item::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--md, 1.5rem);
	color: var(--wp--preset--color--text-muted);
	font-weight: 700;
}

/* Hide items where Block Bindings returns empty meta */
.projekt-info-strip__item:has(p:empty) {
	display: none;
}

/* Hide entire strip if all items are empty */
.projekt-info-strip:has(.projekt-info-strip__item:not([style*="display: none"])):not(:has(.projekt-info-strip__item p:not(:empty))) {
	display: none;
}

/* Also hide when no visible children at all */
.projekt-info-strip:not(:has(a)):not(:has(p:not(:empty))) {
	display: none;
}

/* Taxonomy term pills */
.projekt-info-strip .wp-block-post-terms a {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	transition: background-color 0.2s ease;
}

.projekt-info-strip .wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* Term separator (comma) — hide and use gap instead */
.projekt-info-strip .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* Tjänster — subtle outline pills below info strip */
.projekt-tjanster .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.projekt-tjanster .wp-block-post-terms a {
	display: inline-block;
	padding: 0.2em 0.65em;
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	color: var(--wp--preset--color--text-muted, #666);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.projekt-tjanster .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	background: rgba(var(--wp--preset--color--primary-rgb, 0, 0, 0), 0.04);
}

.projekt-tjanster .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* ==========================================================================
   Projekt Gallery — CSS columns masonry for gallery block
   Overrides the default WP gallery grid on single-projekt pages.
   ========================================================================== */
.type-projekt .wp-block-gallery.has-nested-images,
.projekt-gallery.wp-block-gallery.has-nested-images {
	display: block !important;
	column-count: 4;
	column-gap: 16px;
}

@media (min-width: 1800px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 6;
	}
}

@media (min-width: 1400px) and (max-width: 1799px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 4;
	}
}

@media (max-width: 1399px) and (min-width: 769px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 3;
	}
}

@media (max-width: 768px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 2;
	}
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image {
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	overflow: hidden;
	border-radius: 4px;
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image img,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image:hover img,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image:hover img {
	transform: scale(1.03);
}

/* ==========================================================================
   Language Switcher — compact dropdown in header
   ========================================================================== */
.trahus-lang-switcher {
	position: relative;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

.trahus-lang-switcher__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: none;
	color: #fff !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	letter-spacing: 0.08em;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.trahus-lang-switcher__toggle:hover {
	opacity: 1;
}

.trahus-lang-switcher__toggle svg {
	opacity: 0.7;
	transition: transform 0.2s, opacity 0.2s;
}

.trahus-lang-switcher__toggle:hover svg {
	opacity: 1;
}

.trahus-lang-switcher.is-open .trahus-lang-switcher__toggle svg {
	transform: rotate(180deg);
}

.trahus-lang-switcher__menu {
	display: none !important;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 176px;
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	padding: 4px !important;
	margin: 0 !important;
	list-style: none !important;
	z-index: 1000;
}

.trahus-lang-switcher.is-open .trahus-lang-switcher__menu {
	display: block !important;
}

.trahus-lang-switcher__menu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.trahus-lang-switcher__menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: #1a1a1a !important;
	text-decoration: none;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-family: var(--wp--preset--font-family--sans);
	transition: background 0.15s;
	white-space: nowrap;
}

.trahus-lang-switcher__menu a:hover {
	background: var(--wp--preset--color--surface-alt, #f5f5f5);
}

.trahus-lang-switcher__code {
	display: inline-flex;
	min-width: 2.1em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #595959;
	text-transform: uppercase;
}

.trahus-lang-switcher__name {
	color: #1a1a1a;
	font-weight: 500;
}

.trahus-lang-switcher__flag {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: middle;
}

.trahus-lang-switcher__flag svg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.trahus-lang-switcher__no-translation {
	opacity: 0.82;
}

/* Hide ALL WP Core navigation responsive/mobile infrastructure.
   We use our own mobile-nav__* drawer injected by child theme. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: none !important;
}
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-dialog {
	display: contents !important;
}
.nav-mega .wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	background: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open {
	display: contents !important;
}

/* Hamburger — always white lines on dark green header. */
.mobile-nav__trigger {
	color: #fff !important;
}
.mobile-nav__trigger .mobile-nav__hamburger,
.mobile-nav__trigger .mobile-nav__hamburger::before,
.mobile-nav__trigger .mobile-nav__hamburger::after {
	background-color: #fff !important;
}

/* Pull search icon closer to hamburger on mobile */
@media (max-width: 1024px) {
	.site-header > .wp-block-group {
		justify-content: flex-start !important;
		gap: 0.35rem !important;
	}

	.site-header .wp-block-site-title {
		margin-right: auto !important;
	}

	.site-header .search-autocomplete {
		order: 1;
		margin-right: -0.25rem;
	}

	.site-header .nav-mega {
		order: 2;
	}
}

/* Hide desktop language switcher on mobile — mobile nav has its own */
@media (max-width: 1023px) {
	.trahus-lang-switcher {
		display: none !important;
	}
}

/* Mobile nav drawer — child theme fallback styles
   (parent theme's view.js may not initialize on iOS Safari) */
.mobile-nav__drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(85vw, 360px);
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 10001;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: env(safe-area-inset-top, 0);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav__drawer.is-open {
	transform: translateX(0);
}
.mobile-nav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.mobile-nav__overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.mobile-nav__header {
	display: flex;
	justify-content: flex-end;
	padding: 1rem;
}
.mobile-nav__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	color: #333;
}
.mobile-nav__close svg {
	width: 24px;
	height: 24px;
}
.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0 1.5rem;
}
.mobile-nav__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-nav__link {
	position: relative;
	display: block;
	padding: 0.9rem 0;
	color: #333;
	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 500;
}
.mobile-nav__link:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

.mobile-nav__link.is-current-nav-link {
	color: var(--wp--preset--color--primary-dark, #1E4620);
	font-weight: 650;
}

.mobile-nav__link.is-current-nav-link::after {
	position: absolute;
	right: 0;
	bottom: 0.65rem;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0.5;
}

/* Prevent body scroll when drawer is open */
html.has-mobile-nav-open {
	overflow: hidden;
}

/* Mobile nav language switcher */
.mobile-nav__lang {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-nav__lang-link {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #555;
	text-decoration: none;
}

.mobile-nav__lang-link.is-active {
	color: var(--wp--preset--color--primary-dark, #1E4620);
	border-bottom: 2px solid currentColor;
}

.mobile-nav__lang-link.no-translation {
	opacity: 0.35;
}

/* The desktop switcher rule (.site-header .wp-block-group a[hreflang]) forces
   white on every hreflang link in the header — which also hit these mobile
   drawer links, rendering them white-on-white (invisible) on the white drawer.
   Higher-specificity override so the burger-menu language switcher stays
   readable. Desktop switcher is untouched. */
.site-header .mobile-nav__drawer .mobile-nav__lang .mobile-nav__lang-link {
	color: var(--wp--preset--color--text, #2D2D2D) !important;
}
.site-header .mobile-nav__drawer .mobile-nav__lang .mobile-nav__lang-link.is-active {
	color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Hide lang switcher and search when mobile nav drawer is open */
html.has-modal-open .trahus-lang-switcher,
html.has-modal-open .wp-block-agoodsite-fse-search-autocomplete,
.nav-mega.is-open ~ .trahus-lang-switcher,
.nav-mega.is-open ~ .wp-block-agoodsite-fse-search-autocomplete {
	display: none !important;
}

html.has-modal-open :is(
	[id*="agoodbug" i],
	[class*="agoodbug" i],
	[id*="agood-bug" i],
	[class*="agood-bug" i],
	iframe[src*="agoodbug" i],
	iframe[src*="agood-bug" i]
) {
	z-index: 100200 !important;
}

/* AGoodBug's default orange (#ff6b35) with white text is only ~2.8:1.
   The public feedback trigger must meet the same AA contrast as the site. */
.agoodbug-button.agoodbug-button--tab-side,
.agoodbug-modal__submit {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	color: var(--wp--preset--color--surface, #fff) !important;
}

/* ==========================================================================
   Lightbox — white theme override
   ========================================================================== */
.masonry-modal__backdrop {
	background: #f5f5f3 !important;
}

.masonry-modal__container {
	background: #f5f5f3 !important;
}

.masonry-modal__media {
	background: #f5f5f3;
	position: relative;
}

/* Keep the full-size image visually continuous with its gallery thumbnail. */
.masonry-modal__media :is(.masonry-modal__image, .masonry-modal__video) {
	border-radius: 4px;
}

.masonry-modal__sidebar {
	background: #f5f5f3 !important;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	border-left-color: rgba(0, 0, 0, 0.06) !important;
	justify-content: flex-start !important;
	min-height: 0;
	max-height: 100dvh;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

.masonry-modal__sidebar-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	gap: 0;
	padding-top: clamp(0.2rem, 1vh, 0.65rem);
	padding-bottom: clamp(1.1rem, 3vh, 2.2rem);
}

/* Mobile text-zone caption (GoodBlocks __sidebar-caption) — dark on the
   light theme so it stays legible against #f5f5f3. */
.masonry-modal__sidebar-caption {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal.trahus-lightbox-editor-mode .masonry-modal__sidebar {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	padding-top: clamp(1.2rem, 3vh, 2.2rem) !important;
}

@media (min-width: 769px) and (max-width: 1180px) {
	.masonry-modal__media {
		flex: 1 1 auto !important;
		padding-left: clamp(1.5rem, 4vw, 3.5rem) !important;
		padding-right: clamp(1.5rem, 4vw, 3.5rem) !important;
	}

	.masonry-modal__sidebar {
		flex: 0 0 clamp(20rem, 38vw, 24rem) !important;
		padding-left: clamp(2rem, 4vw, 3rem) !important;
		padding-right: clamp(1.25rem, 3vw, 2rem) !important;
	}
}

.masonry-modal__sidebar .agoodsite-lb-editor__toolbar {
	position: static !important;
	top: auto !important;
	z-index: auto;
	width: fit-content;
	max-width: 100%;
	align-self: flex-end;
	background: rgba(255, 255, 255, 0.68);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	margin: 0 0 0.85rem auto;
	padding: 0.18rem 0.28rem 0.18rem 0.7rem;
	box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.05);
}

.masonry-modal__sidebar .agoodsite-lb-editor {
	padding-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.masonry-modal__sidebar .agoodsite-lb-editor,
.masonry-modal__sidebar .agoodsite-lb-editor label,
.masonry-modal__sidebar .agoodsite-lb-editor input,
.masonry-modal__sidebar .agoodsite-lb-editor textarea,
.masonry-modal__sidebar .agoodsite-lb-editor select {
	font-family: var(--wp--preset--font-family--sans, system-ui);
}

.masonry-modal__sidebar .agoodsite-lb-editor label,
.masonry-modal__sidebar .agoodsite-lb-editor h3,
.masonry-modal__sidebar .agoodsite-lb-editor .components-base-control__label {
	color: var(--wp--preset--color--secondary, #796A4F);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.15;
	text-transform: uppercase;
}

.masonry-modal__sidebar .agoodsite-lb-editor input[type="text"],
.masonry-modal__sidebar .agoodsite-lb-editor input:not([type]),
.masonry-modal__sidebar .agoodsite-lb-editor textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--wp--preset--color--text, #1a1a1a);
	font-size: 0.82rem;
	line-height: 1.35;
}

.masonry-modal__title {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	margin: 0 0 0.75rem !important;
	font-size: clamp(1.55rem, 2.1vw, 2.05rem) !important;
	line-height: 1.08 !important;
}

.masonry-modal__excerpt {
	color: var(--wp--preset--color--text-muted, #666) !important;
	display: block;
	margin: 0 !important;
	font-size: 0.88rem !important;
	line-height: 1.42 !important;
}

.masonry-modal__tags .portfolio-meta__pill {
	background: rgba(0, 0, 0, 0.04) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
	color: var(--wp--preset--color--text-muted, #555) !important;
}

.masonry-modal__tags .portfolio-meta__pill:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal__read-more {
	color: var(--wp--preset--color--text-muted, #888) !important;
}

.masonry-modal__read-more:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal__caption {
	color: var(--wp--preset--color--text-muted, #666) !important;
}

.masonry-modal__meta {
	color: var(--wp--preset--color--text-muted, #666) !important;
}

.masonry-modal__counter {
	color: rgba(0, 0, 0, 0.3) !important;
}

.masonry-modal__nav {
	color: rgba(0, 0, 0, 0.35) !important;
	transition: color 0.2s, transform 0.2s;
}

@media (min-width: 769px) {
	.masonry-modal__nav--next {
		right: calc(clamp(20rem, 25vw, 24rem) + 1rem) !important;
	}
}

.masonry-modal__nav:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

/* Pulse hint on next arrow at first open */
.masonry-modal__nav.trahus-nav-pulse {
	animation: trahus-nav-pulse 0.8s ease-in-out 3;
}

@keyframes trahus-nav-pulse {
	0%, 100% { transform: translateX(0); opacity: 0.35; }
	50% { transform: translateX(6px); opacity: 1; }
}

/* Keyboard shortcut tooltip */
.trahus-lightbox-keytip {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 6px;
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 100;
}

.trahus-lightbox-keytip.is-visible {
	opacity: 1;
}

.trahus-lightbox-keytip__key {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	padding: 0.1em 0.4em;
	font-size: 0.85em;
	min-width: 1.4em;
	text-align: center;
}

.masonry-modal__close {
	color: rgba(0, 0, 0, 0.35) !important;
}

.masonry-modal__close:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.trahus-lightbox-theme-toggle {
	position: absolute;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 100002;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 3.45rem;
	height: 1.8rem;
	padding: 0.18rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--primary-dark, #2E3D24);
	cursor: pointer;
	box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.08);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.trahus-lightbox-theme-toggle::before {
	content: "";
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.34rem;
	height: 1.34rem;
	border-radius: 50%;
	background: currentColor;
	transition: transform 0.2s ease;
}

.trahus-lightbox-theme-toggle.is-dark::before {
	transform: translateX(1.62rem);
}

.trahus-lightbox-theme-toggle__sun,
.trahus-lightbox-theme-toggle__moon {
	position: relative;
	z-index: 1;
	width: 1.34rem;
	height: 1.34rem;
	border-radius: 50%;
}

.trahus-lightbox-theme-toggle__sun::before {
	content: "";
	position: absolute;
	inset: 0.37rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-shadow:
		0 -0.36rem 0 -0.29rem currentColor,
		0 0.36rem 0 -0.29rem currentColor,
		0.36rem 0 0 -0.29rem currentColor,
		-0.36rem 0 0 -0.29rem currentColor;
}

.trahus-lightbox-theme-toggle__moon::before {
	content: "";
	position: absolute;
	inset: 0.32rem;
	border-radius: 50%;
	box-shadow: inset -0.28rem 0 0 currentColor;
}

.trahus-lightbox-theme-toggle:not(.is-dark) .trahus-lightbox-theme-toggle__sun,
.trahus-lightbox-theme-toggle.is-dark .trahus-lightbox-theme-toggle__moon {
	color: #fff;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__backdrop,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__container,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__media,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__sidebar {
	background: #050505 !important;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__sidebar {
	color: rgba(255, 255, 255, 0.88) !important;
	border-left-color: rgba(255, 255, 255, 0.08) !important;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__title,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-caption p,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people__name {
	color: rgba(255, 255, 255, 0.92) !important;
}

.masonry-modal.trahus-lightbox-theme-dark:not(.trahus-lightbox-editor-mode) .masonry-modal__sidebar .masonry-modal__title {
	color: rgba(255, 255, 255, 0.92) !important;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__excerpt,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__caption,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__meta,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-share__status,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people__role {
	color: rgba(255, 255, 255, 0.58) !important;
}

.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-terms,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people-editor,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-share,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-caption {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people h3,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-terms h3,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people-editor h3,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-caption h3 {
	color: rgba(244, 239, 227, 0.72);
}

.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-terms__term,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people__person,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-share__button {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.035);
	color: rgba(255, 255, 255, 0.78);
}

.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-terms__term:hover,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-people__person:hover,
.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-share__button:hover {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.075);
	color: #fff;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar {
	background: #050505 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	border-left-color: rgba(255, 255, 255, 0.08) !important;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .masonry-modal__title,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__option,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__name {
	color: rgba(255, 255, 255, 0.92) !important;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor__toolbar {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.86);
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor p,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__count,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__status,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__save,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-editor-status {
	color: rgba(255, 255, 255, 0.62) !important;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor label,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor h3,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor .components-base-control__label,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor h3 {
	color: rgba(244, 239, 227, 0.72) !important;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor input[type="text"],
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor input:not([type]),
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor textarea {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.9);
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor input[type="text"]:focus,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor input:not([type]):focus,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor textarea:focus {
	border-color: rgba(244, 239, 227, 0.42);
	box-shadow: 0 0 0 1px rgba(244, 239, 227, 0.18);
	outline: none;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .masonry-modal__tags .portfolio-meta__pill,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .agoodsite-lb-editor .portfolio-meta__pill {
	border-color: rgba(255, 255, 255, 0.14) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-media-editor,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor,
.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__list {
	border-color: rgba(255, 255, 255, 0.1);
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__list {
	background: rgba(255, 255, 255, 0.035);
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-people-editor__option:hover {
	background: rgba(255, 255, 255, 0.065);
}

.masonry-modal.trahus-lightbox-theme-dark.trahus-lightbox-editor-mode .masonry-modal__sidebar .trahus-lightbox-editor-button {
	border-color: rgba(244, 239, 227, 0.18);
	background: var(--wp--preset--color--primary-dark, #1E4620);
	color: #fff;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__counter,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__nav,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__close {
	color: rgba(255, 255, 255, 0.48) !important;
}

.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__nav:hover,
.masonry-modal.trahus-lightbox-theme-dark .masonry-modal__close:hover {
	color: rgba(255, 255, 255, 0.9) !important;
}

.masonry-modal.trahus-lightbox-theme-dark .trahus-lightbox-theme-toggle {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: #f4efe3;
	box-shadow: none;
}

.masonry-modal.trahus-lightbox-theme-dark:not(.trahus-lightbox-editor-mode) .masonry-modal__sidebar .agoodsite-lb-editor__toolbar {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 768px) {
	/* Lightbox mobile: layout is owned by GoodBlocks' two-zone base (image
	   zone with object-fit:contain + a content-driven text zone below). Trähus
	   keeps ONLY its light theme + editor-panel styling here. The old layout
	   overrides — a scrolling position:fixed container with
	   -webkit-overflow-scrolling:touch, 55dvh image caps, and display:block on
	   all metadata — were removed so the base's two-zone design shows through
	   (and to drop the momentum-scroll layer). Do NOT reintroduce a
	   position:fixed/high-z-index __backdrop override: it stacked the opaque
	   backdrop over the image and produced a blank lightbox on iOS/WebKit. */

	/* Light-theme divider between the image zone and the text zone. */
	.masonry-modal__sidebar {
		border-top-color: rgba(0, 0, 0, 0.08) !important;
	}

	/* Trähus stores the image caption in __excerpt (not __caption). The
	   GoodBlocks base hides __excerpt on mobile, so re-show it here — this is
	   what carries the caption in Trähus's text zone. */
	.masonry-modal__excerpt {
		display: block !important;
	}

	/* Hide Trähus's taxonomy + people meta on mobile — the clean text zone is
	   caption + Dela bild only. (The project link is currently hidden by
	   Trähus JS; revealing it and tucking this meta behind a pull-up sheet is
	   a separate task.) */
	.trahus-lightbox-terms,
	.trahus-lightbox-people {
		display: none !important;
	}

	/* Editor panel (Trähus-specific) — keep its mobile spacing. */
	.masonry-modal.trahus-lightbox-editor-mode .masonry-modal__sidebar {
		padding-top: clamp(3rem, 7vh, 4rem) !important;
	}

	.masonry-modal__sidebar .agoodsite-lb-editor__toolbar {
		top: auto !important;
		margin-top: 0;
	}

	.masonry-modal__close {
		position: fixed !important;
		top: env(safe-area-inset-top, 0.5rem) !important;
		right: 0.5rem !important;
		z-index: 100001 !important;
	}

	.trahus-lightbox-theme-toggle {
		position: fixed;
		right: 1rem;
		bottom: calc(env(safe-area-inset-bottom, 0rem) + 1rem);
	}
}

/* ==========================================================================
   Search Autocomplete — complete child theme override
   Clean white box with shadow enclosing input + close + results.
   ========================================================================== */

/* --- Override search-focus color variable to neutral --- */
.search-autocomplete {
	--search-focus: rgba(0, 0, 0, 0.2) !important;
}

/* --- Kill ALL inherited outlines/focus styles inside search --- */
.search-autocomplete *:focus,
.search-autocomplete *:focus-visible,
.search-autocomplete *:focus-within {
	outline: none !important;
	box-shadow: none !important;
}

/* --- The overlay form: unified white box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__form {
	background: #fff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden;
	column-gap: 0 !important;
	z-index: 1005 !important;
}

/* --- Input field: borderless inside the white box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__field,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus-within,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus-visible {
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	background: transparent !important;
	height: 56px;
	border-radius: 0 !important;
	outline: none !important;
}

/* Kill green border on the input itself */
.search-autocomplete--expandable.is-expanded .search-autocomplete__input,
.search-autocomplete--expandable.is-expanded .search-autocomplete__input:focus,
.search-autocomplete--expandable.is-expanded input[type="search"]:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --- Search icon: hide in expanded state --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__field-icon {
	display: none !important;
}

/* --- Input text: ALWAYS dark, visible, full-width --- */
.search-autocomplete__input,
.search-autocomplete input[type="search"] {
	color: #111 !important;
	caret-color: #111 !important;
	-webkit-text-fill-color: #111 !important;
	font-family: var(--wp--preset--font-family--sans, system-ui) !important;
	font-size: 1.05rem !important;
}

/* Override nav-mega CSS that starts input at opacity:0/width:0.
   In expandable mode the container gets .is-expanded, not the input. */
.search-autocomplete--expandable.is-expanded .search-autocomplete__input {
	opacity: 1 !important;
	width: 100% !important;
	padding: 0 var(--wp--preset--spacing--md, 1.5rem) !important;
}

.search-autocomplete__input::placeholder {
	color: #999 !important;
	-webkit-text-fill-color: #999 !important;
}

/* --- Close button: flush inside the box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__close {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: #999 !important;
	transition: color 0.15s;
}

.search-autocomplete--expandable.is-expanded .search-autocomplete__close:hover {
	color: #111 !important;
}

/* --- Divider between input and close --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__close::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: rgba(0, 0, 0, 0.08);
}

/* --- Results: inside the box, below the input --- */
.search-autocomplete--expandable .search-autocomplete__results {
	position: relative !important;
	top: auto !important;
	grid-column: 1 / -1;
	width: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	background: #fff !important;
	max-height: min(55vh, 480px) !important;
	/* Override nav-mega compiled CSS that hides results via opacity/visibility.
	   Parent theme JS uses [hidden] attr to hide — we rely on that instead. */
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.search-autocomplete--expandable .search-autocomplete__results[hidden] {
	display: none !important;
}

/* --- Result items --- */
.search-autocomplete__result-link {
	color: #111 !important;
}

.search-autocomplete__result-link:hover,
.search-autocomplete__result.is-selected .search-autocomplete__result-link {
	background: #f8f6f3 !important;
}

.search-autocomplete__type {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #888 !important;
	border-radius: 4px !important;
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif) !important;
	font-size: 0.65rem !important;
	padding: 0.15em 0.5em !important;
	letter-spacing: 0.04em;
}

/* Hide tags/terms in autocomplete results — keep it clean */
.search-autocomplete__tags,
.search-autocomplete__terms {
	display: none !important;
}

.search-autocomplete__view-all {
	color: var(--wp--preset--color--primary) !important;
}

/* --- Hide the in-field clear button — the close button is enough --- */
.search-autocomplete__clear {
	display: none !important;
}

/* --- Backdrop: dark semi-transparent overlay on body ---
   Note: NO backdrop-filter blur — the backdrop is on document.body, and the
   search form is inside the header which has its own stacking context (transform).
   Blur would affect the search form too since it can't be z-indexed above. */
.search-autocomplete--expandable .search-autocomplete__backdrop {
	background: rgba(0, 0, 0, 0.65) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ==========================================================================
   Hero — Shared base styles
   ========================================================================== */
.trahus-hero {
	width: 100%;
}

.trahus-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 500;
	line-height: 1.12;
	margin: 0;
	color: inherit;
}

.trahus-hero__subtitle {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 0.5rem 0;
}

/* Hero ingress — short description below title, above meta */
.trahus-hero__ingress {
	font-family: var(--wp--preset--font-family--body, Georgia, serif);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.9;
	margin: 0.75rem 0 0.5rem 0;
	max-width: 600px;
}

/* ==========================================================================
   Hero — Projekt variant: 2/3 color + 1/3 image
   Text left-edge aligned with content grid via padding-left.
   Image extends to right viewport edge.
   ========================================================================== */
.trahus-hero--projekt .trahus-hero__inner {
	display: grid !important;
	/* Image left edge aligns with sidebar left edge in 1200px 2/3+1/3 layout.
	   At 1440px: 720 + 233 − 27 ≈ 926px ≈ sidebar left edge. */
	grid-template-columns: calc(50vw + 233px - var(--wp--preset--spacing--xl, 2.5rem) * 2 / 3) 1fr !important;
	align-items: stretch !important;
	gap: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: max(380px, 55vh);
}

.trahus-hero--projekt.trahus-hero--split-half .trahus-hero__inner {
	grid-template-columns: 50% 50% !important;
	min-height: clamp(40rem, 70vh, 44rem);
}

.trahus-hero--projekt .trahus-hero__text {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	background: var(--trahus-hero-bg);
	padding: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px) var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--2xl, 5rem) max(calc(50vw - 600px), 1.5rem);
}

.trahus-hero--projekt.trahus-hero--split-half .trahus-hero__text {
	padding-right: clamp(2rem, 4vw, 4rem);
}

.trahus-hero--projekt .trahus-hero__text-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
}

.trahus-hero__text--has-rings {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.trahus-hero__text--has-rings::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--trahus-hero-bg);
}

.trahus-hero__text--has-rings > :not(.trahus-hero__plate-rings) {
	position: relative;
	z-index: 3;
}

.trahus-hero__plate-rings {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: multiply;
	opacity: 0.82;
}

.trahus-hero__plate-rings--centered { background-size: cover; background-position: center; }
.trahus-hero__plate-rings--corner   { background-size: cover; background-position: 30% 20%; }
.trahus-hero__plate-rings--soft     { background-size: cover; background-position: 62% center; opacity: 0.34; }

.trahus-hero__plate-rings--natural {
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
}

.trahus-hero__text--rings-natural {
	color: var(--wp--preset--color--surface, #fff);
}

.trahus-hero__text--rings-natural::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.18)),
		rgba(0, 0, 0, 0.12);
}

.trahus-hero--projekt .trahus-hero__meta {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 400;
	/* Removed opacity: 0.85 — reduces effective contrast below WCAG AA 4.5:1
	   when the hero background is the secondary color (#886E52). */
}

.trahus-hero--projekt .trahus-hero__meta-sep {
	margin: 0 0.5em;
	opacity: 0.5;
}

.trahus-hero--projekt .trahus-hero__image {
	position: relative;
	overflow: hidden;
}

.trahus-hero--projekt .trahus-hero__image > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Safer default for people in cropped project images; saved media focal points override via inline style. */
	object-position: center 38%;
}

/* Year-ring overlay — ring texture blended onto the photo */
.trahus-hero__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.trahus-hero__rings img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	mix-blend-mode: overlay;
}

/* Full-hero year-ring overlay (scope = hero) — covers entire hero */
.trahus-hero__rings--hero {
	z-index: 1;
}

/* ==========================================================================
   Hero — Bakgrund variant: full-bleed background image with gradient
   ========================================================================== */
.trahus-hero--bakgrund {
	position: relative;
	overflow: hidden;
}

.trahus-hero__bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.trahus-hero__bg-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bildspel — multiple stacked .trahus-hero__bg-image elements with cross-fade animation.
   Per-instance keyframes are emitted inline by patterns/hero-page.php since timing depends
   on slide count. Container needs overflow:hidden so Ken Burns scale doesn't bleed. */
.trahus-hero--bildspel {
	position: relative;
	overflow: hidden;
}

.trahus-hero--bildspel .trahus-hero__bg-image {
	transform-origin: center center;
}

.trahus-hero__bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
}

.trahus-hero--bakgrund .trahus-hero__rings--hero {
	z-index: 2;
}

.trahus-hero--bakgrund .trahus-hero__inner {
	position: relative;
	z-index: 3;
	display: flex !important;
	grid-template-columns: none !important;
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--trahus-container-padding))), var(--trahus-container-max));
	max-width: var(--trahus-container-max);
	margin-right: auto;
	margin-left: auto;
	min-height: max(380px, 50vh);
	align-items: flex-end !important;
	padding-top: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px);
	padding-bottom: var(--wp--preset--spacing--2xl, 5rem);
	padding-right: 0;
	padding-left: 0;
}

/* Startsidan får en mer uttrycksfull rubrik, men delar exakt samma vänsterkant
   som hero- och innehållscontainern i resten av temat. */
body.home .trahus-hero--bakgrund .trahus-hero__inner,
body.front-page .trahus-hero--bakgrund .trahus-hero__inner {
	padding-right: 0;
	padding-left: 0;
}

body.home .trahus-hero--bakgrund .trahus-hero__title,
body.front-page .trahus-hero--bakgrund .trahus-hero__title {
	/* Full containerbredd — lika luft höger som vänster (tidigare 12ch). */
	max-width: 100%;
	font-size: clamp(3.25rem, 5.6vw, 6.25rem);
	line-height: 1.02;
}

/* ==========================================================================
   Hero — Left-aligned inner (for taxonomy/projekt archives)
   ========================================================================== */
/* Left-aligned hero text — padding-based centering instead of max-width
   so the text edge aligns with the 1200px logo container and content. */
.trahus-hero__inner--left {
	max-width: none;
	justify-content: flex-start;
	text-align: left;
	padding-left: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
	padding-right: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
}

/* ==========================================================================
   Hero — Archive/taxonomy variant (centered, optional circle image)
   ========================================================================== */
.trahus-hero:not(.trahus-hero--projekt) .trahus-hero__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl, 3rem);
	width: min(calc(100% - (2 * var(--wp--preset--spacing--md, 1.5rem))), var(--wp--style--global--content-size, 1200px));
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-right: auto;
	margin-left: auto;
	padding: var(--wp--preset--spacing--2xl, 5rem) 0;
}

/* Extra top padding when header overlaps the hero */
.has-hero-header .trahus-hero--archive .trahus-hero__inner {
	padding-top: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px);
}

/* --- Circle image (default) --- */
.trahus-hero--archive .trahus-hero__image--cirkel {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: 50%;
	overflow: hidden;
}

/* --- Square image --- */
.trahus-hero--archive .trahus-hero__image--kvadrat {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: var(--wp--custom--radius--md, 8px);
	overflow: hidden;
}

/* --- Year-ring image (same as projekt hero) --- */
.trahus-hero--archive .trahus-hero__image--arsringar {
	position: relative;
	flex: 0 0 auto;
	width: clamp(200px, 25vw, 340px);
	height: clamp(200px, 25vw, 340px);
	overflow: hidden;
	border-radius: 50%;
}

.trahus-hero--archive .trahus-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback for unclassed images */
.trahus-hero--archive .trahus-hero__image:not([class*="--"]) {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: 50%;
	overflow: hidden;
}

.trahus-hero__inner--centered {
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--md, 1.5rem);
}

.trahus-hero__text {
	flex: 1;
	min-width: 0;
}

.trahus-hero__text--centered {
	flex: none;
	max-width: 720px;
}

.trahus-hero__text--centered .trahus-hero__subtitle {
	margin: 0.75rem 0 0 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--wp--preset--font-size--md, 1rem);
}

.trahus-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	margin-bottom: 0.75rem;
}

.trahus-hero__meta-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7em;
	margin-right: 0.15em;
}

.trahus-hero__meta-sep {
	margin: 0 0.4em;
	opacity: 0.5;
}

.trahus-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 1rem;
}

.trahus-hero__pill {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: opacity 0.2s;
}

.trahus-hero__pill:hover {
	opacity: 0.8;
}

@media (max-width: 768px) {

	/* ── Projekt hero — stacked layout on mobile ─────────────────────── */

	.trahus-hero--projekt .trahus-hero__inner {
		grid-template-columns: 1fr !important;
		min-height: auto;
	}

	.trahus-hero--projekt.trahus-hero--split-half .trahus-hero__inner {
		grid-template-columns: 1fr !important;
	}

	/* 4:3 image fills full width — consistent ratio regardless of content length.
	   Header overlaps the top portion (same as desktop). */
	.trahus-hero--projekt .trahus-hero__image {
		order: -1;
		aspect-ratio: 4 / 3;
		min-height: unset;
		max-height: unset;
	}

	/* Text area sits below image. Top/bottom padding is fluid.
	   Left/right align with the root content grid (same as logo and body text). */
	.trahus-hero--projekt .trahus-hero__text {
		padding: clamp(1.25rem, 4vw, 2rem)
		         var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem))
		         clamp(1.25rem, 4vw, 2rem);
		align-items: flex-start;
	}

	/* ── Archive / generic hero ───────────────────────────────────────── */

	.trahus-hero__inner {
		flex-direction: column;
		text-align: center;
		/* Use root padding so hero text aligns with logo and body text */
		padding: var(--wp--preset--spacing--xl, 2.5rem)
		         var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem));
	}

	.trahus-hero--archive .trahus-hero__image--cirkel,
	.trahus-hero--archive .trahus-hero__image--kvadrat,
	.trahus-hero--archive .trahus-hero__image--arsringar {
		width: 140px;
		height: 140px;
		order: -1;
	}

	.trahus-hero__subtitle {
		margin: 0 0 0.25rem 0;
	}

	.trahus-hero__pills {
		justify-content: center;
	}

	.trahus-hero__meta {
		justify-content: center;
	}

	/* Bakgrund hero mobile — image fills viewport, text overlays bottom. */
	.trahus-hero--bakgrund .trahus-hero__inner {
		min-height: max(240px, 40vh);
		max-height: 60vh;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		padding-top: calc(var(--header-height, 70px) + 1rem);
		padding-bottom: var(--wp--preset--spacing--lg, 1.5rem);
	}

	.trahus-hero--bakgrund .trahus-hero__title {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
	}

	.trahus-hero--bakgrund .trahus-hero__ingress {
		font-size: var(--wp--preset--font-size--sm, 0.875rem);
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Left-aligned stays left on mobile — use root padding for consistent alignment */
	.trahus-hero__inner--left {
		text-align: left;
		padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem));
		padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--md, 1rem));
	}

	.trahus-hero__inner--left .trahus-hero__meta {
		justify-content: flex-start;
	}
}

/* Hide stray masonry-query empty message rendered at body level */
body > .masonry-query__empty {
	display: none !important;
}

/* ==========================================================================
   Projekt Layout — three-column (content + meta + team)
   ========================================================================== */

/* Desktop: team column sticky alongside meta */
.projekt-layout__team {
	position: relative;
}

.projekt-layout__team .projekt-team-inline {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
}

@media (max-width: 1023px) {
	.projekt-layout__columns.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.projekt-layout__content {
		flex-basis: 100% !important;
	}

	/* Meta and team side by side on tablet */
	.projekt-layout__sidebar,
	.projekt-layout__team {
		flex-basis: 48% !important;
	}
}

@media (max-width: 600px) {
	.projekt-layout__sidebar,
	.projekt-layout__team {
		flex-basis: 100% !important;
	}
}

/* --- Inline team list (project sidebar) --- */
.projekt-team-inline {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
}

.projekt-team-inline__member {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	padding: 0.4rem 0;
	transition: opacity 0.15s;
}

.projekt-team-inline__member:hover {
	opacity: 0.75;
}

/* Porträtten är tecknade i 3:4 och ska visas hela. En cirkelmask med
   object-fit: cover beskar bort mössor, hörselkåpor och axlar — och gjorde
   varje person till ett runt ansikte i stället för en teckning. Ingen radie,
   ingen beskärning; pappret är rent vitt och multiply nedan låter sidans yta
   lysa igenom det, så rutan har samma färg som bakgrunden. */
.projekt-team-inline__avatar {
	width: 38px;
	aspect-ratio: 3 / 4;
	border-radius: 0;
	overflow: hidden;
	flex-shrink: 0;
	/* Sidans yta, inte transparent. multiply nedan gör vitt papper osynligt mot
	   backdropen — men om någon förälder råkar skapa en stackningskontext
	   isoleras blandningen och backdropen blir tom, och då slår pappret igenom
	   som en vit ruta. Med ytan satt här blir resultatet detsamma i båda
	   fallen: vitt × sidfärg = sidfärg. */
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.projekt-team-inline__avatar img,
.projekt-team-inline__avatar svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Illustrated portraits carry a pure-white paper surface; multiply lets the
 * underlying card or page background show through it seamlessly. */
.projekt-team-inline__avatar img[src*="style-guide"],
.trahus-user-avatar--illustration {
	mix-blend-mode: multiply;
}

.projekt-team-inline__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.projekt-team-inline__name {
	font-size: 0.8rem;
	font-weight: 400;
	color: #1a1a1a;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.projekt-team-inline__role {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted, #595959);
	line-height: 1.3;
}

/* --- Faktaspalt (sidebar) --- */
.projekt-sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
	font-family: var(--wp--preset--font-family--sans);
}

.projekt-sidebar__section {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
}

.projekt-sidebar__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.projekt-sidebar__label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #888);
	margin: 0 0 0.5rem 0;
}

.projekt-sidebar__dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.75rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.projekt-sidebar__dl dt {
	color: var(--wp--preset--color--text-muted, #888);
	font-size: 0.75rem;
	font-weight: 500;
}

.projekt-sidebar__dl dd {
	margin: 0;
	font-weight: 500;
}

.projekt-sidebar__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.projekt-sidebar__term {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	color: var(--wp--preset--color--text-muted, #666);
	text-decoration: none;
	font-size: 0.7rem;
	font-weight: 500;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.projekt-sidebar__term:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	background: rgba(0, 0, 0, 0.02);
}

.projekt-sidebar__term--child {
	border-style: dashed;
	font-size: 0.65rem;
}

/* Tjänster — hierarchical layout */
.projekt-sidebar__tjanst-group {
	margin-bottom: 0.6em;
}
.projekt-sidebar__tjanst-group:last-child {
	margin-bottom: 0;
}
.projekt-sidebar__tjanst-parent {
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 0.15em;
	line-height: 1.3;
}
.projekt-sidebar__tjanst-parent a {
	color: inherit;
	text-decoration: none;
}
.projekt-sidebar__tjanst-parent a:hover {
	color: var(--wp--preset--color--primary);
}
.projekt-sidebar__tjanst-parent span {
	color: var(--wp--preset--color--text-muted, #666);
}
.projekt-sidebar__tjanst-children {
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--text-muted, #666);
}
.projekt-sidebar__tjanst-children a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.projekt-sidebar__tjanst-children a:hover {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Gallery Lightbox — EXIF metadata in sidebar
   ========================================================================== */
.trahus-lightbox-meta {
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-muted, #666);
	letter-spacing: 0.02em;
	line-height: 1.6;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--md, 1rem);
}

/* ==========================================================================
   Projekt Content — "Läs mer" collapsible for long descriptions
   ========================================================================== */
.projekt-content-wrap.is-collapsed .wp-block-post-content {
	max-height: 640px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.projekt-content-wrap .trahus-read-more-btn {
	display: none;
	margin: 1rem auto 0;
	padding: 0.5em 1.5em;
	background: var(--wp--preset--color--surface-alt, #f5f5f3);
	color: var(--wp--preset--color--text, #111);
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.projekt-content-wrap .trahus-read-more-btn:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

.projekt-content-wrap.is-collapsed .trahus-read-more-btn {
	display: block;
}

/* ==========================================================================
   Offerings Grid — 4 cols desktop, 2 cols tablet/mobile
   ========================================================================== */
.trahus-home-offerings {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md, 1.5rem);
	align-items: stretch;
}

body.home .trahus-home-offerings.alignwide,
body.front-page .trahus-home-offerings.alignwide {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size, 1200px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--wp--preset--spacing--lg, 2rem) !important;
	padding-right: var(--wp--preset--spacing--lg, 2rem) !important;
}

.trahus-home-offerings__intro {
	grid-column: 1 / -1;
	margin-left: 0 !important;
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.trahus-home-offerings__intro > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Homepage offerings overview — all content remains ordinary Gutenberg blocks. */
body.home,
body.front-page {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-home-offerings--overview {
	display: block;
}

.trahus-home-offerings--overview .trahus-home-offerings__overview {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
	gap: 0;
	align-items: stretch;
	background: var(--wp--preset--color--surface, #fff);
}

.trahus-home-offerings__overview-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 31rem;
	max-width: none;
	padding: clamp(1.5rem, 3vw, 3.5rem) !important;
	background: var(--wp--preset--color--surface, #fff);
}

.trahus-home-offerings__eyebrow {
	margin: 0 0 1rem !important;
	color: var(--wp--preset--color--secondary, #796a4f);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 650;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
}

.trahus-home-offerings__overview-copy h2 {
	/* 13ch bröt rubriken efter två ord trots att kolumnen var dubbelt så bred.
	   17ch håller kvar en kort displaymätta men låter "Allt för gamla" stå
	   ihop; kolumnen är smalare än så i mobil, där max-width ändå ger vika. */
	max-width: 17ch;
	margin: 0 !important;
	font-size: clamp(2.45rem, 4.8vw, 4.5rem) !important;
	line-height: 1.07;
	letter-spacing: 0;
}

.trahus-home-offerings__overview-copy > p:not(.trahus-home-offerings__eyebrow) {
	max-width: 40rem;
	margin: 1.15rem 0 0 !important;
	color: var(--wp--preset--color--text-muted, #5f605a);
	line-height: 1.65;
}

.trahus-home-offerings__overview-copy .wp-block-buttons {
	margin-top: 2rem !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	width: auto !important;
	align-self: flex-start;
	justify-content: flex-start !important;
}

.trahus-home-offerings__overview-copy .wp-block-button {
	margin-right: auto !important;
	margin-left: 0 !important;
}

.trahus-home-offerings__overview-nav {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
	border-left: 1px solid rgba(46, 61, 36, 0.16);
}

.trahus-home-offerings__overview-nav h3 {
	margin: 0 !important;
	font-size: clamp(1.65rem, 2.5vw, 2.35rem) !important;
	line-height: 1.1;
}

.trahus-home-offerings__overview-links {
	display: grid;
	margin: 1.5rem 0 0 !important;
	padding: 0 !important;
	border-top: 1px solid rgba(46, 61, 36, 0.2);
	list-style: none;
}

.trahus-home-offerings__overview-links li {
	margin: 0 !important;
	border-bottom: 1px solid rgba(46, 61, 36, 0.2);
}

.trahus-home-offerings__overview-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
}

.trahus-home-offerings__overview-links a::after {
	flex: 0 0 auto;
	color: var(--wp--preset--color--secondary, #796a4f);
	content: "→";
	font-size: 1.1em;
}

.trahus-home-offerings__overview-links a:hover {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.trahus-home-offerings__overview-links a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #4a5d3a);
	outline-offset: 3px;
}

.trahus-home-offerings__row.wp-block-columns {
	display: contents !important;
}

.trahus-home-offerings__row.wp-block-columns > .wp-block-column {
	display: flex;
	min-width: 0;
}

.trahus-offering-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	border: 1px solid rgba(46, 61, 36, 0.1);
	background: var(--wp--preset--color--surface, #fff);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.trahus-offering-card.has-background {
	padding: 0 !important;
}

.trahus-offering-card:hover {
	transform: translateY(-3px);
	border-color: rgba(46, 61, 36, 0.18);
	box-shadow: 0 18px 40px rgba(46, 61, 36, 0.1);
}

.trahus-offering-card__image {
	width: 100%;
	margin: 0 !important;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-offering-card--featured .trahus-offering-card__image {
	aspect-ratio: 4 / 3;
}

.trahus-offering-card__image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.trahus-offering-card:hover .trahus-offering-card__image img {
	transform: scale(1.035);
}

.trahus-offering-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-height: clamp(12rem, 15vw, 14rem);
	padding: clamp(1.1rem, 1.8vw, 1.5rem) !important;
	gap: var(--wp--preset--spacing--xs, 0.5rem) !important;
}

.trahus-offering-card--featured .trahus-offering-card__body {
	min-height: clamp(12rem, 15vw, 14rem);
}

.trahus-offering-card--featured .trahus-offering-card__body h3 {
	font-size: var(--wp--preset--font-size--lg) !important;
}

.trahus-offering-card__body > * {
	margin: 0 !important;
}

.trahus-offering-card__body .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--xs, 0.5rem);
}

.trahus-offering-card .wp-block-button.is-style-text .wp-block-button__link {
	padding: 0;
	background: transparent !important;
	color: var(--wp--preset--color--primary-dark, #2e3d24) !important;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 500;
	text-decoration: none;
}

.trahus-offering-card .wp-block-button.is-style-text .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.4em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--trahus-arrow-icon) no-repeat center / contain;
	mask: var(--trahus-arrow-icon) no-repeat center / contain;
	transition: transform 0.2s ease;
}

.trahus-offering-card .wp-block-button.is-style-text .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.trahus-home-offerings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trahus-home-offerings--overview .trahus-home-offerings__overview {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.trahus-home-offerings__overview-copy {
		min-height: auto;
	}

	.trahus-home-offerings__overview-nav {
		border-top: 1px solid rgba(46, 61, 36, 0.16);
		border-left: 0;
	}

	.trahus-home-offerings__row.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.trahus-home-offerings__row.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--md, 1.5rem) / 2) !important;
		flex-grow: 0 !important;
	}

	.offerings-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.offerings-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--md, 1.5rem) / 2) !important;
		flex-grow: 0 !important;
	}
}

@media (max-width: 640px) {
	.trahus-home-offerings {
		grid-template-columns: minmax(0, 1fr);
		padding-top: var(--wp--preset--spacing--xl, 3rem) !important;
		padding-bottom: var(--wp--preset--spacing--xl, 3rem) !important;
	}

	.trahus-home-offerings__overview-nav {
		padding: 1.5rem !important;
	}

	.trahus-home-offerings__row.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.trahus-offering-card__body,
	.trahus-offering-card--featured .trahus-offering-card__body {
		min-height: auto;
	}
}

/* ==========================================================================
   Project object cards — equal cards that link to detail pages
   ========================================================================== */
.trahus-project-card-section {
	width: 100%;
}

.trahus-project-card-section__header {
	max-width: 760px;
	margin: 0 0 var(--wp--preset--spacing--xl, 3rem);
}

.trahus-project-card-section--related .trahus-project-card-section__header,
.trahus-project-card-section--member .trahus-project-card-section__header {
	max-width: none;
	text-align: center;
}

.trahus-project-card-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 2rem);
	line-height: 1.08;
}

.trahus-project-card-section__intro,
.trahus-project-card-section__empty {
	margin: var(--wp--preset--spacing--xs, 0.5rem) 0 0;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-project-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg, 2rem);
	align-items: stretch;
}

.trahus-project-card {
	display: flex;
	min-width: 0;
	min-height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(46, 61, 36, 0.1);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.trahus-project-card:hover {
	transform: translateY(-3px);
	border-color: rgba(46, 61, 36, 0.18);
	box-shadow: 0 18px 40px rgba(46, 61, 36, 0.1);
}

.trahus-project-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.trahus-project-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-project-card__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	/* Safer default for people in cropped project images; saved media focal points override via inline style. */
	object-position: center 38%;
	border-radius: 6px 6px 0 0;
	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trahus-project-card:hover .trahus-project-card__image {
	transform: scale(1.035);
}

.trahus-project-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-height: 0;
	padding: clamp(0.9rem, 1.3vw, 1.15rem) clamp(1rem, 1.6vw, 1.35rem);
}

.trahus-project-card__kicker {
	margin-bottom: 0.45rem;
	color: var(--wp--preset--color--text-muted, #595959);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.trahus-project-card__title {
	color: var(--wp--preset--color--text, #2d2d2d);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	font-weight: 500;
	line-height: 1.12;
}

.trahus-project-card__meta {
	margin-top: 0.65rem;
	padding-top: 0;
	color: var(--wp--preset--color--text-muted, #595959);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
}

@media (max-width: 900px) {
	.trahus-project-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.trahus-project-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.trahus-project-filter {
		gap: 0.4rem;
	}
}

/* ==========================================================================
   Offerings Page
   ========================================================================== */
.trahus-offerings-page-main {
	padding-top: 0 !important;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.wp-site-blocks > main.wp-block-group:has(> .trahus-offerings-page-hero:first-child),
.wp-site-blocks > main.wp-block-group:has(> .trahus-hero:first-child),
.wp-site-blocks > main.wp-block-group:has(> .hero-advanced:first-child) {
	padding-top: 0 !important;
}

.trahus-offerings-page-main .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.trahus-offerings-page-main section {
	box-sizing: border-box;
}

.trahus-offerings-page-hero {
	background: var(--wp--preset--color--primary-dark, #2e3d24);
	color: #fff;
}

.trahus-offerings-page-hero__inner {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--wp--preset--spacing--lg, 2rem))), 1200px) !important;
	max-width: 1200px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.trahus-offerings-page-hero__eyebrow,
.trahus-offerings-page-item__eyebrow {
	margin: 0 0 1rem;
	color: currentColor;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 650;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
}

.trahus-offerings-page-hero h1 {
	max-width: 920px;
	margin: 0;
	color: currentColor;
	font-size: clamp(2.4rem, 5vw, 4.9rem);
	line-height: 1.06;
	letter-spacing: 0;
}

.trahus-offerings-page-hero p:not(.trahus-offerings-page-hero__eyebrow) {
	max-width: 720px;
	margin: 1.5rem 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.55;
}

.trahus-offerings-page-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(3rem, 6vw, 5rem) 0;
	border-bottom: 1px solid rgba(46, 61, 36, 0.16);
}

.trahus-offerings-page-overview__intro h2 {
	max-width: 720px;
	margin: 0;
	font-size: clamp(2rem, 3.6vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.trahus-offerings-page-overview__intro p {
	max-width: 680px;
	margin: 1.25rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	line-height: 1.6;
}

.trahus-offerings-page-nav {
	display: flex;
	flex-direction: column;
	align-self: start;
	gap: 0;
	border-top: 1px solid rgba(46, 61, 36, 0.18);
}

.trahus-offerings-page-nav .wp-block-button,
.trahus-offerings-page-nav .wp-block-button__link {
	width: 100%;
}

.trahus-offerings-page-nav a,
.trahus-offerings-page-nav .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0.9rem 0;
	border: 0;
	border-bottom: 1px solid rgba(46, 61, 36, 0.18);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-weight: 500;
	text-decoration: none;
}

.trahus-offerings-page-nav a::after,
.trahus-offerings-page-nav .wp-block-button__link::after {
	content: "↓";
	flex: 0 0 auto;
	margin-left: 1rem;
	color: rgba(46, 61, 36, 0.55);
}

.trahus-offerings-page-list {
	padding: clamp(1rem, 2vw, 2rem) 0 clamp(4rem, 8vw, 7rem);
}

.trahus-offerings-page-item {
	display: grid;
	grid-template-columns: minmax(18rem, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	border-bottom: 1px solid rgba(46, 61, 36, 0.14);
}

.trahus-offerings-page-item.is-reversed .trahus-offerings-page-item__media {
	order: 2;
}

.trahus-offerings-page-item__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-offerings-page-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trahus-offerings-page-item__content {
	max-width: 620px;
}

.trahus-offerings-page-item__eyebrow {
	color: var(--wp--preset--color--secondary, #8a6f45);
}

.trahus-offerings-page-item h2 {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.trahus-offerings-page-item h2 a {
	color: inherit;
	text-decoration: none;
}

.trahus-offerings-page-item h2 a:hover,
.trahus-offerings-page-item h2 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.trahus-offerings-page-item__content > p:not(.trahus-offerings-page-item__eyebrow) {
	margin: 1.1rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.65;
}

.trahus-offerings-page-item__links {
	columns: 2;
	column-gap: 1.8rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.trahus-offerings-page-item__links li {
	break-inside: avoid;
	margin: 0 0 0.7rem;
}

.trahus-offerings-page-item__links a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

.trahus-offerings-page-item__links a::before {
	content: "";
	flex: 0 0 0.45rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary, #8a6f45);
	transform: translateY(-0.08rem);
}

.trahus-offerings-page-item__cta,
.trahus-offerings-page-item__cta .wp-block-button__link {
	display: inline-flex;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-weight: 600;
	text-decoration: none;
}

.trahus-offerings-page-item__cta {
	margin-top: 1.8rem;
}

.trahus-offerings-page-item__cta::after,
.trahus-offerings-page-item__cta .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.4em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--trahus-arrow-icon) no-repeat center / contain;
	mask: var(--trahus-arrow-icon) no-repeat center / contain;
	transition: transform 0.2s ease;
}

.trahus-offerings-page-item__cta:hover::after,
.trahus-offerings-page-item__cta .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.trahus-offerings-page-process {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-offerings-page-process__inner {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--wp--preset--spacing--lg, 2rem))), 1200px) !important;
	max-width: 1200px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.trahus-offerings-page-process h2 {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.trahus-offerings-page-process ol {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: offerings-process;
}

.trahus-offerings-page-process li {
	position: relative;
	padding: 1rem 0 1rem 3.4rem;
	border-bottom: 1px solid rgba(46, 61, 36, 0.16);
	color: var(--wp--preset--color--text-muted, #5f605a);
	line-height: 1.6;
	counter-increment: offerings-process;
}

.trahus-offerings-page-process li::before {
	position: absolute;
	top: 1rem;
	left: 0;
	color: var(--wp--preset--color--secondary, #8a6f45);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-weight: 600;
	content: counter(offerings-process, decimal-leading-zero);
}

.trahus-offerings-page-process strong {
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-weight: 600;
}

/* The offer page is a compact service hub: editorial guidance on the left,
   complete service navigation in a persistent right-hand sidebar. */
.trahus-offerings-page-hub {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--wp--preset--spacing--lg, 2rem))), 1200px) !important;
	max-width: 1200px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
	gap: clamp(3rem, 8vw, 9rem);
	padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.trahus-offerings-page-hub__article {
	max-width: 44rem;
}

.trahus-offerings-page-hub__article .trahus-offerings-page-hero__eyebrow {
	color: var(--wp--preset--color--secondary, #796a4f);
}

.trahus-offerings-page-hub__article h2 {
	max-width: 42rem;
	margin: 0;
	font-size: clamp(2.25rem, 4vw, 4.25rem);
	line-height: 1.07;
	letter-spacing: 0;
}

.trahus-offerings-page-hub__article > p {
	max-width: 40rem;
	margin: 1.35rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	line-height: 1.65;
}

.trahus-offerings-page-hub__steps {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(46, 61, 36, 0.18);
}

.trahus-offerings-page-hub__steps h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	font-weight: 650;
	letter-spacing: 0.02em;
}

.trahus-offerings-page-hub__steps ul {
	display: grid;
	gap: 0.9rem;
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
}

.trahus-offerings-page-hub__steps li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--wp--preset--color--text-muted, #5f605a);
	line-height: 1.55;
}

.trahus-offerings-page-hub__steps li::before {
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--secondary, #796a4f);
	content: "—";
}

.trahus-offerings-page-hub__steps a {
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-weight: 600;
}

.trahus-offerings-page-hub__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.trahus-offerings-page-sidebar {
	position: sticky;
	top: 1.5rem;
	align-self: start;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-offerings-page-sidebar__eyebrow {
	margin: 0 0 0.65rem;
	color: var(--wp--preset--color--secondary, #796a4f);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 650;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
}

.trahus-offerings-page-sidebar h2 {
	margin: 0;
	font-size: clamp(1.7rem, 2.4vw, 2.35rem);
	line-height: 1.1;
}

.trahus-offerings-page-sidebar__nav {
	margin-top: 1.5rem;
	border-top: 1px solid rgba(46, 61, 36, 0.2);
}

.trahus-offerings-page-sidebar__group {
	border-bottom: 1px solid rgba(46, 61, 36, 0.2);
}

.trahus-offerings-page-sidebar__group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.4rem;
	cursor: pointer;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	font-weight: 650;
	line-height: 1.3;
	list-style: none;
}

.trahus-offerings-page-sidebar__group summary::-webkit-details-marker {
	display: none;
}

.trahus-offerings-page-sidebar__group summary::after {
	flex: 0 0 auto;
	margin-left: 1rem;
	color: var(--wp--preset--color--secondary, #796a4f);
	content: "+";
	font-size: 1.35rem;
	font-weight: 400;
}

.trahus-offerings-page-sidebar__group[open] summary::after {
	content: "–";
}

.trahus-offerings-page-sidebar__group summary:focus-visible,
.trahus-offerings-page-sidebar a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #4a5d3a);
	outline-offset: 3px;
}

.trahus-offerings-page-sidebar__group ul {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0 0 0.9rem;
	list-style: none;
}

.trahus-offerings-page-sidebar__group li {
	margin: 0;
}

.trahus-offerings-page-sidebar__group li a,
.trahus-offerings-page-sidebar__all {
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-family: var(--wp--preset--font-family--sans, system-ui);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	line-height: 1.4;
	text-decoration: none;
}

.trahus-offerings-page-sidebar__group li a:hover,
.trahus-offerings-page-sidebar__all:hover {
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.trahus-offerings-page-sidebar__all {
	display: inline-flex;
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-weight: 650;
}

.trahus-offerings-page-sidebar__all::after {
	margin-left: 0.45em;
	content: "→";
}

@media (max-width: 900px) {
	.trahus-offerings-page-overview,
	.trahus-offerings-page-item,
	.trahus-offerings-page-process__inner {
		grid-template-columns: 1fr;
	}

	.trahus-offerings-page-item.is-reversed .trahus-offerings-page-item__media {
		order: 0;
	}

	.trahus-offerings-page-nav {
		width: 100%;
	}

	.trahus-offerings-page-hub {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.trahus-offerings-page-sidebar {
		position: static;
		max-width: none;
	}
}

@media (max-width: 640px) {
	.trahus-offerings-page-hero h1,
	.trahus-offerings-page-overview__intro h2,
	.trahus-offerings-page-item h2,
	.trahus-offerings-page-process h2 {
		overflow-wrap: anywhere;
	}

	.trahus-offerings-page-item {
		padding: 2.5rem 0;
	}

	.trahus-offerings-page-item__links {
		columns: 1;
	}

	.trahus-offerings-page-process li {
		padding-left: 2.6rem;
	}
}

/* ==========================================================================
   Nyheter (Blog) — News Grid
   ========================================================================== */
body.blog,
body.category {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

body.blog .wp-site-blocks,
body.category .wp-site-blocks {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

.trahus-news-archive-section {
	background: var(--wp--preset--color--surface-alt, #f4efe3) !important;
}

.trahus-filter,
.trahus-news-filter,
.trahus-project-filter {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 0.7rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-bottom: var(--wp--preset--spacing--md, 1.5rem);
	border-bottom: 1px solid rgba(46, 61, 36, 0.12);
}

.trahus-filter__label,
.trahus-news-filter__label,
.trahus-project-filter__label {
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-muted, #595959);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.trahus-filter__list,
.trahus-news-filter__list,
.trahus-project-filter__list {
	display: flex;
	width: fit-content;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.22rem;
	min-width: 0;
	padding: 0.22rem;
	border: 1px solid rgba(46, 61, 36, 0.11);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.34);
}

.trahus-filter__link,
.trahus-news-filter__link,
.trahus-project-filter__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 1.95rem;
	padding: 0.36rem 0.68rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--text, #2d2d2d);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.8rem;
	font-weight: 560;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.trahus-filter__link:hover,
.trahus-filter__link:focus-visible,
.trahus-news-filter__link:hover,
.trahus-news-filter__link:focus-visible,
.trahus-project-filter__link:hover,
.trahus-project-filter__link:focus-visible {
	border-color: rgba(46, 61, 36, 0.16);
	background: rgba(255, 255, 255, 0.64);
	color: var(--wp--preset--color--primary-dark, #2e3d24);
}

.trahus-filter__link.is-active,
.trahus-news-filter__link.is-active,
.trahus-project-filter__link.is-active {
	border-color: var(--wp--preset--color--primary-dark, #2e3d24);
	background: var(--wp--preset--color--primary-dark, #2e3d24);
	color: var(--wp--preset--color--surface, #fff);
}

.trahus-news-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--lg, 2rem) !important;
	align-items: stretch;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.trahus-news-grid > .wp-block-post {
	display: flex;
	min-width: 0;
}

.trahus-news-grid .trahus-news-card {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	padding: 0 !important;
	gap: 0 !important;
	overflow: hidden;
	border: 1px solid rgba(46, 61, 36, 0.1);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff) !important;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.trahus-news-grid .trahus-news-card:hover {
	transform: translateY(-3px);
	border-color: rgba(46, 61, 36, 0.18);
	background: var(--wp--preset--color--surface, #fff) !important;
	box-shadow: 0 18px 40px rgba(46, 61, 36, 0.1);
}

/* Homepage news cards should never depend on an intersection callback to be
   readable; archive cards retain the site's standard reveal behaviour. */
body.home .trahus-news-grid .trahus-news-card.trahus-animate,
body.front-page .trahus-news-grid .trahus-news-card.trahus-animate {
	opacity: 1 !important;
	transform: none !important;
}

.trahus-news-grid .wp-block-post-featured-image {
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: 4 / 3 !important;
	background: var(--wp--preset--color--surface-alt, #f5f5f3);
	border-radius: 6px 6px 0 0;
	margin: 0 !important;
	width: 100%;
}

.trahus-news-grid .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.trahus-news-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 6px 6px 0 0;
	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trahus-news-grid .trahus-news-card__body {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	padding: clamp(0.9rem, 1.3vw, 1.15rem) clamp(1rem, 1.6vw, 1.35rem) !important;
	background: var(--wp--preset--color--surface, #fff);
	gap: 0 !important;
}

/* Shared card anatomy: title and supporting copy first, compact metadata last. */
.trahus-news-grid .trahus-news-card__body > .wp-block-group:first-child {
	order: 3;
	margin-top: 0.65rem;
	gap: var(--wp--preset--spacing--xs, 0.5rem) !important;
}

.trahus-news-grid .trahus-news-card__body > .wp-block-post-title {
	order: 1;
	font-size: var(--wp--preset--font-size--lg, 1.5rem) !important;
	font-weight: 500;
	line-height: 1.12 !important;
}

.trahus-news-grid .trahus-news-card__body > .wp-block-post-excerpt {
	order: 2;
	margin-top: 0.65rem;
}

.trahus-news-grid .trahus-news-card:hover .wp-block-post-featured-image img {
	transform: scale(1.035);
}

/* Title link — no underline, darken on hover */
.trahus-news-grid .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--text, #2D2D2D);
	transition: color 0.2s ease;
}
.trahus-news-grid .trahus-news-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

.trahus-news-grid .wp-block-post-title {
	margin: 0 !important;
	overflow-wrap: anywhere;
}

.trahus-news-grid .wp-block-post-excerpt {
	margin: 0;
}

.trahus-news-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Category pill — uppercase label above title */
.trahus-news-grid .wp-block-post-terms a {
	text-decoration: none;
}

@media (max-width: 780px) {
	.trahus-filter,
	.trahus-news-filter {
		align-items: flex-start;
		flex-direction: column;
	}

	.trahus-filter__list,
	.trahus-news-filter__list {
		width: 100%;
		border-radius: 1rem;
	}
}

@media (max-width: 900px) {
	.trahus-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.trahus-news-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ==========================================================================
   Single Post — Article Layout
   ========================================================================== */

/* ==========================================================================
   Article Sidebar — projekt-style meta sections
   ========================================================================== */

/* Sidebar meta block — sticky on scroll */
.trahus-article-sidebar .trahus-article-meta {
	position: sticky;
	top: calc(var(--header-height, 70px) + var(--wp--preset--spacing--lg, 2rem));
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	line-height: 1.45;
	/* Ingen kortyta: modulen står direkt på sidan. Ram, radie, skugga och en
	   ljusare bakgrund gjorde en liten faktaruta till ett tungt objekt bredvid
	   ingressen. Ett tunt vertikalt streck till vänster håller ihop innehållet
	   i stället — samma grepp som sidonavigationen under Erbjudande. */
	padding: 0.15rem 0 0.15rem clamp(1.1rem, 2vw, 1.75rem) !important;
	border: 0;
	border-left: 1px solid rgba(46, 61, 36, 0.16);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Section dividers — match projekt sidebar */
.trahus-article-meta__section {
	/* Vertikalstrecket binder ihop sektionerna, så de vågräta avdelarna blir
	   dubbel inramning. Luft skiljer dem åt i stället. */
	padding-block: 0 !important;
	margin: 0 0 1.35rem !important;
	border-bottom: 0;
	gap: 0.42rem !important;
}

.trahus-article-meta__section:first-child {
	padding-top: 0 !important;
}

.trahus-article-meta__section:last-child {
	border-bottom: none;
	margin-bottom: 0 !important;
}

/* Section labels — match projekt-sidebar__label */
.trahus-article-meta__label {
	margin: 0 !important;
	color: color-mix(in srgb, var(--wp--preset--color--text-muted, #595959) 78%, var(--wp--preset--color--primary-dark, #2e3d24));
	font-size: 0.61rem !important;
	font-weight: 680;
	line-height: 1.2;
	letter-spacing: 0.09em !important;
}

/* Author block */
.trahus-article-meta .wp-block-post-author {
	gap: 0.8rem;
	/* Teckningen är hög och smal; centrerat namn hamnade mitt emot hakan.
	   Flex-start lägger namnet i linje med ansiktet. */
	align-items: flex-start;
	margin: 0;
}

.trahus-article-meta .wp-block-post-author__avatar {
	flex: 0 0 auto;
	margin: 0 !important;
}

/* A local profile image is the canonical author portrait on Trähus. Hide
   WordPress/Gravatar's generic silhouette when no such image is configured. */
.trahus-article-meta .wp-block-post-author__avatar:not(:has(.trahus-user-avatar)) {
	display: none;
}

.trahus-article-meta .wp-block-post-author__avatar img {
	display: block;
	/* Teckningarna är 3:4 och ska visas hela. cover i en kvadrat kapade mössa
	   och axlar; contain behåller kompositionen. Ytan sätts explicit så att
	   multiply ger sidans färg även om blandningen skulle isoleras. */
	width: 64px;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
	mix-blend-mode: multiply;
}

.trahus-user-avatar {
	object-fit: contain;
	border-radius: 0;
}

.trahus-article-meta .wp-block-post-author__name {
	color: var(--wp--preset--color--text, #2d2d2d);
	font-weight: 650;
	font-size: 0.95rem;
	line-height: 1.25;
}

.trahus-article-meta .wp-block-post-author__name a,
.trahus-article-meta .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

.trahus-article-meta .wp-block-post-author__name a:hover,
.trahus-article-meta .wp-block-post-date a:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

.trahus-article-meta .wp-block-post-author__bio {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	color: var(--wp--preset--color--text-muted, #595959);
	margin-top: 0.25rem;
}

.trahus-article-meta .wp-block-post-date,
.trahus-article-meta__date {
	margin: 0;
	color: var(--wp--preset--color--text, #2d2d2d);
	font-size: 0.9rem !important;
	font-weight: 560;
	line-height: 1.35;
}

/* Category/tag links */
.trahus-article-meta .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--text, #2d2d2d) !important;
}

.trahus-article-meta .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620) !important;
	text-decoration: none;
}

/* Taxonomy pills — match projekt sidebar */
.trahus-article-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.32rem;
	margin: 0;
}

.trahus-article-pills a {
	display: inline-flex;
	align-items: center;
	min-height: 1.48rem;
	padding: 0.14rem 0.48rem;
	background: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(46, 61, 36, 0.1);
	border-radius: 4px;
	color: var(--wp--preset--color--text, #2d2d2d) !important;
	text-decoration: none !important;
	font-size: 0.71rem;
	font-weight: 590;
	line-height: 1.15;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.trahus-article-pills--categories a {
	background: color-mix(in srgb, var(--wp--preset--color--surface, #fff) 82%, var(--wp--preset--color--surface-alt, #f4efe3));
}

.trahus-article-pills .wp-block-post-terms__separator,
.trahus-article-meta .wp-block-post-terms__separator {
	display: none;
}

.trahus-article-pills a:hover {
	background: var(--wp--preset--color--primary, #2C5F2D);
	border-color: var(--wp--preset--color--primary, #2C5F2D);
	color: #fff !important;
}

/* ==========================================================================
   News Cards — full-width images, no card padding
   ========================================================================== */

.trahus-news-card {
	border-radius: 6px !important;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.trahus-news-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.trahus-news-card .wp-block-post-featured-image {
	margin: 0 !important;
}

.trahus-news-card .wp-block-post-featured-image img {
	width: 100%;
	display: block;
}

/* Mobile: stack sidebar below content */
@media (max-width: 781px) {
	.trahus-article-layout {
		flex-direction: column !important;
	}
	.trahus-article-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
	.trahus-article-sidebar .trahus-article-meta {
		position: static;
		padding: var(--wp--preset--spacing--md, 1.5rem) !important;
		margin-top: var(--wp--preset--spacing--lg, 2rem);
		border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
	}
}

/* ==========================================================================
   News–Project Linking
   ========================================================================== */

/* --- Projekt badge on single post (above content) --- */
.trahus-projekt-badge {
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-projekt-badge__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 0.75rem);
	padding: var(--wp--preset--spacing--sm, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--surface-alt, #f5f2ed);
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.trahus-projekt-badge__link:hover {
	background: #ece8e0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trahus-projekt-badge__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
}

.trahus-projekt-badge__label {
	display: block;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--2xs, 0.7rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-projekt-badge__title {
	display: block;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

/* --- External source link --- */
.trahus-extern-source {
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-extern-source__link {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	text-decoration: none;
}

.trahus-extern-source__link:hover {
	color: var(--wp--preset--color--text, #2D2D2D);
}

.trahus-extern-source__link strong {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

/* --- "Nyheter" section on single-projekt --- */
.trahus-projekt-news {
	margin-top: var(--wp--preset--spacing--2xl, 4rem);
	padding-top: var(--wp--preset--spacing--xl, 3rem);
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

.trahus-projekt-news__heading {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-projekt-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--md, 1.5rem);
}

.trahus-projekt-news__card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease;
}

.trahus-projekt-news__card-link:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.trahus-projekt-news__card-image {
	overflow: hidden;
}

.trahus-projekt-news__card-image img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.trahus-projekt-news__card-link:hover .trahus-projekt-news__card-image img {
	transform: scale(1.03);
}

.trahus-projekt-news__card-body {
	padding: var(--wp--preset--spacing--sm, 0.75rem) 0;
}

.trahus-projekt-news__date {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-projekt-news__card-title {
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--xs, 0.5rem) 0;
	color: var(--wp--preset--color--text, #2D2D2D);
}

.trahus-projekt-news__card-link:hover .trahus-projekt-news__card-title {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

.trahus-projekt-news__excerpt {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0;
}

/* ==========================================================================
   Footer — mobile compact layout
   ========================================================================== */

@media (max-width: 768px) {
	/* Reduce top padding (was var(--spacing--section) ~80px) */
	footer.wp-block-template-part > .wp-block-group.alignfull,
	.wp-block-template-part[data-area="footer"] > .wp-block-group.alignfull {
		padding-top: var(--wp--preset--spacing--xl, 3rem) !important;
	}

	/* Smaller logo */
	footer .wp-block-site-logo,
	.wp-block-template-part[data-area="footer"] .wp-block-site-logo {
		margin-bottom: var(--wp--preset--spacing--md, 1.5rem) !important;
	}

	footer .wp-block-site-logo img,
	.wp-block-template-part[data-area="footer"] .wp-block-site-logo img {
		width: 140px !important;
		height: auto !important;
	}

	/* Stack columns tighter */
	footer .wp-block-columns,
	.wp-block-template-part[data-area="footer"] .wp-block-columns {
		gap: var(--wp--preset--spacing--lg, 1.5rem) !important;
	}

	/* Center-align all footer content on mobile */
	footer .wp-block-column,
	.wp-block-template-part[data-area="footer"] .wp-block-column {
		text-align: center;
	}

	/* Center navigation links */
	footer .wp-block-navigation .wp-block-navigation__container,
	.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation__container {
		align-items: center !important;
	}

	.trahus-footer-instagram {
		justify-content: center !important;
		text-align: center;
	}

	.trahus-footer-instagram__actions {
		justify-content: center !important;
		width: 100%;
	}

	/* Reduce heading/section gap */
	footer .wp-block-heading,
	.wp-block-template-part[data-area="footer"] .wp-block-heading {
		margin-bottom: var(--wp--preset--spacing--xs, 0.5rem) !important;
		font-size: 0.65rem !important;
	}

	/* Separator less margin */
	footer .wp-block-separator,
	.wp-block-template-part[data-area="footer"] .wp-block-separator {
		margin-top: var(--wp--preset--spacing--lg, 1.5rem) !important;
	}
}

/* ==========================================================================
   Style Guide — normal page layout with in-content TOC
   ========================================================================== */

/* Restore Trähus warm Papper — parent's style-guide.css resets to generic #f0f0f0. */
body.page-style-guide:not(.sg-dark) {
	--wp--preset--color--surface-alt: #F4EFE3;
}

/* Parent theme injects a separate style-guide topbar and right drawer. Trähus uses the
   ordinary site header plus the in-content TOC below. */
body.page-style-guide .styleguide-topbar,
body.page-style-guide .styleguide-toc,
body.page-style-guide .styleguide-backdrop {
	display: none !important;
}

body.page-style-guide,
body.page-style-guide .wp-site-blocks {
	margin-right: 0 !important;
}

body.page-style-guide .wp-site-blocks {
	--wp--style--block-gap: 0;
	gap: 0 !important;
	padding-top: 0 !important;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

body.page-style-guide .trahus-hero,
body.page-style-guide .trahus-hero + *,
body.page-style-guide main,
body.page-style-guide .wp-block-post-content,
body.page-style-guide .wp-block-post-content > :first-child,
body.page-style-guide .trahus-style-guide-toc {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

body.page-style-guide main,
body.page-style-guide .wp-block-post-content {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

body.page-style-guide .trahus-hero--bakgrund .trahus-hero__inner {
	padding-left: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
	padding-right: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
}

body.page-style-guide .trahus-hero__title {
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	line-height: 1.2;
}

body.page-style-guide h2[id] {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
}

.trahus-style-guide-toc {
	background: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid rgba(46, 61, 36, 0.14);
	padding: clamp(3rem, 5vw, 5rem) var(--wp--preset--spacing--md);
}

.trahus-style-guide-toc__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	gap: clamp(2rem, 5vw, 5rem);
	max-width: 1200px;
	margin: 0 auto;
}

.trahus-style-guide-toc__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.trahus-style-guide-toc__header h2 {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.trahus-style-guide-toc__header p:last-child {
	max-width: 34rem;
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
}

body.page-style-guide .trahus-hero__subtitle {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
}

.trahus-style-guide-toc__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trahus-style-guide-toc__list a {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	min-height: 2.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid rgba(46, 61, 36, 0.18);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.25;
	text-decoration: none;
}

.trahus-style-guide-toc__list a:hover,
.trahus-style-guide-toc__list a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.trahus-style-guide-toc__list span {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
}

@media (max-width: 900px) {
	.trahus-style-guide-toc__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.trahus-style-guide-toc__list {
		grid-template-columns: 1fr;
	}
}

/* Front page post content is intentionally block-driven. Let direct alignfull
   sections break out of the constrained post-content wrapper and main gutter. */
body.home main.wp-block-group.alignfull > .wp-block-post-content,
body.front-page main.wp-block-group.alignfull > .wp-block-post-content {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.home main.wp-block-group.alignfull > .wp-block-post-content > .alignfull,
body.front-page main.wp-block-group.alignfull > .wp-block-post-content > .alignfull {
	width: calc(100% + (2 * var(--wp--preset--spacing--md))) !important;
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--preset--spacing--md)) !important;
	margin-right: calc(-1 * var(--wp--preset--spacing--md)) !important;
}

.editor-styles-wrapper .wp-block-post-content > .alignfull,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block.alignfull {
	width: 100% !important;
	max-width: none !important;
}

/* Block Showcase — parent theme injects this via the_content filter as raw HTML.
   No WP block layout wraps it, so it renders full-width with no padding.
   Apply the same constrained layout the pattern sections use. */
body.page-style-guide .block-showcase {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

body.page-style-guide .trahus-sg-surface-rule p {
	margin: 0;
}

body.page-style-guide .trahus-contact-form-panel,
body.page-style-guide .trahus-contact-direct,
body.page-style-guide .trahus-contact-address,
body.page-style-guide .trahus-contact-people-link {
	background: var(--wp--preset--color--surface, #fff) !important;
}

body.page-style-guide .trahus-sg-local-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	margin-top: var(--wp--preset--spacing--lg, 2rem);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid rgba(46, 61, 36, 0.12);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

body.page-style-guide .trahus-sg-local-layout__content {
	min-width: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
}

body.page-style-guide .trahus-sg-local-layout__eyebrow,
body.page-style-guide .trahus-sg-local-nav__title {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--secondary, #886e52);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

body.page-style-guide .trahus-sg-local-layout__content h4 {
	max-width: 42rem;
	margin: 0;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-size: var(--wp--preset--font-size--2-xl, 2.25rem);
	line-height: 1.05;
	letter-spacing: 0;
}

body.page-style-guide .trahus-sg-local-layout__content p:not(.trahus-sg-local-layout__eyebrow) {
	max-width: 44rem;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.65;
}

body.page-style-guide .trahus-sg-local-layout__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md, 1.5rem);
	margin-top: var(--wp--preset--spacing--lg, 2rem);
	padding-top: var(--wp--preset--spacing--lg, 2rem);
	border-top: 1px solid rgba(46, 61, 36, 0.14);
}

body.page-style-guide .trahus-sg-local-layout__facts div {
	min-width: 0;
}

body.page-style-guide .trahus-sg-local-layout__facts strong {
	display: block;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	font-weight: 500;
	line-height: 1.2;
}

body.page-style-guide .trahus-sg-local-layout__facts span {
	display: block;
	margin-top: 0.45rem;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	line-height: 1.55;
}

body.page-style-guide .trahus-sg-local-layout__nav {
	position: sticky;
	top: calc(var(--header-height, 80px) + var(--wp--preset--spacing--md, 1.5rem));
	min-width: 0;
	padding: clamp(1rem, 2vw, 1.25rem);
	border: 1px solid rgba(46, 61, 36, 0.12);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
}

body.page-style-guide .trahus-sg-local-nav {
	display: grid;
	gap: 0;
}

body.page-style-guide .trahus-sg-local-nav a,
body.page-style-guide .trahus-sg-local-nav summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.72rem 0;
	border-top: 1px solid rgba(46, 61, 36, 0.13);
	color: var(--wp--preset--color--text, #2d2d2d);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
}

body.page-style-guide .trahus-sg-local-nav a:hover,
body.page-style-guide .trahus-sg-local-nav a:focus-visible,
body.page-style-guide .trahus-sg-local-nav summary:hover,
body.page-style-guide .trahus-sg-local-nav summary:focus-visible {
	color: var(--wp--preset--color--primary-dark, #2e3d24);
}

body.page-style-guide .trahus-sg-local-nav a.is-current {
	padding-left: 0.75rem;
	border-left: 2px solid var(--wp--preset--color--primary-dark, #2e3d24);
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-weight: 600;
}

body.page-style-guide .trahus-sg-local-nav details {
	margin: 0;
}

body.page-style-guide .trahus-sg-local-nav summary {
	list-style: none;
}

body.page-style-guide .trahus-sg-local-nav summary::-webkit-details-marker {
	display: none;
}

body.page-style-guide .trahus-sg-local-nav summary::after {
	flex: 0 0 auto;
	margin-left: 0.75rem;
	color: var(--wp--preset--color--secondary, #886e52);
	content: "+";
}

body.page-style-guide .trahus-sg-local-nav details[open] summary::after {
	content: "-";
}

body.page-style-guide .trahus-sg-local-nav details div {
	display: grid;
	padding: 0 0 0.7rem 1rem;
	border-left: 1px solid rgba(46, 61, 36, 0.14);
}

body.page-style-guide .trahus-sg-local-nav details div a {
	min-height: 2.2rem;
	padding: 0.45rem 0;
	border-top: 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 500;
}

@media (max-width: 900px) {
	body.page-style-guide .trahus-sg-local-layout {
		grid-template-columns: 1fr;
	}

	body.page-style-guide .trahus-sg-local-layout__nav {
		position: static;
	}
}

@media (max-width: 640px) {
	body.page-style-guide .trahus-sg-local-layout {
		padding: var(--wp--preset--spacing--sm, 1rem);
	}

	body.page-style-guide .trahus-sg-local-layout__content,
	body.page-style-guide .trahus-sg-local-layout__nav {
		padding: var(--wp--preset--spacing--md, 1.5rem);
	}

	body.page-style-guide .trahus-sg-local-layout__facts {
		grid-template-columns: 1fr;
	}
}

body.page-style-guide .trahus-portrait-study {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

body.page-style-guide .trahus-portrait-study__card {
	margin: 0;
	border: 1px solid rgba(46, 61, 36, 0.12);
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 18px 42px rgba(45, 45, 45, 0.055);
}

body.page-style-guide .trahus-portrait-study__new-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

body.page-style-guide .trahus-portrait-study__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--secondary, #796a4f);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.page-style-guide .trahus-portrait-study__new-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

body.page-style-guide .trahus-portrait-study__batch {
	grid-column: 1 / -1;
	display: grid;
	gap: 1rem;
	margin-top: clamp(1rem, 2vw, 1.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid rgba(46, 61, 36, 0.16);
}

body.page-style-guide .trahus-portrait-study__batch-heading {
	max-width: 44rem;
}

body.page-style-guide .trahus-portrait-study__batch-heading p:not(.trahus-portrait-study__eyebrow) {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--text-muted, #6f6a5f);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.55;
}

body.page-style-guide .trahus-portrait-study__batch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

body.page-style-guide .trahus-portrait-study__media {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: #f2f2ef;
}

body.page-style-guide .trahus-portrait-study__media--white {
	background: #fff;
}

body.page-style-guide .trahus-portrait-study__media--paper {
	background: var(--wp--preset--color--surface-alt, #F4EFE3);
}

body.page-style-guide .trahus-portrait-study__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.page-style-guide .trahus-portrait-study__card figcaption {
	margin: 0;
	padding: 0.85rem 1rem 1rem;
	border-top: 1px solid rgba(46, 61, 36, 0.1);
	color: var(--wp--preset--color--text-muted, #6f6a5f);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* The approved portrait masters use this exact paper tone. Keeping the
 * caption on the same surface lets each card read as one illustration. */
body.page-style-guide .trahus-portrait-study__batch-card {
	background: #f1ede1;
}

body.page-style-guide .trahus-portrait-study__batch-card .trahus-portrait-study__media--paper {
	background: #f1ede1;
}

/* Multiply is a no-op over the white cards and blends the normalized
 * white-paper masters into the tinted card surfaces. */
body.page-style-guide .trahus-portrait-study__media img {
	mix-blend-mode: multiply;
}

body.page-style-guide .trahus-portrait-study__batch-card figcaption {
	padding: 1rem 1.125rem 1.125rem;
	border-top: 0;
	background: #f1ede1;
	color: var(--wp--preset--color--secondary, #796a4f);
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

@media (max-width: 860px) {
	body.page-style-guide .trahus-portrait-study {
		grid-template-columns: 1fr;
	}

	body.page-style-guide .trahus-portrait-study__new-cards {
		grid-template-columns: 1fr;
	}

	body.page-style-guide .trahus-portrait-study__batch-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.page-style-guide .trahus-portrait-study__batch-grid {
		grid-template-columns: 1fr;
	}
}

body.page-style-guide .trahus-teamlist-study {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

body.page-style-guide .trahus-teamlist-study__option {
	padding: clamp(1rem, 2vw, 1.35rem);
	border: 1px solid rgba(46, 61, 36, 0.12);
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt, #F4EFE3) 58%, #fff);
}

body.page-style-guide .trahus-teamlist-study__option h3 {
	margin: 0 0 1rem !important;
	font-size: var(--wp--preset--font-size--md, 1rem) !important;
	line-height: 1.25 !important;
}

body.page-style-guide .trahus-teamlist {
	max-width: 19rem;
	margin-inline: auto;
	padding: 1rem;
	background: var(--wp--preset--color--surface, #fff);
}

body.page-style-guide .trahus-teamlist__label {
	margin: 0 0 0.85rem !important;
	color: var(--wp--preset--color--text, #1a1a1a);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

body.page-style-guide .trahus-teamlist__person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	text-decoration: none;
}

body.page-style-guide .trahus-teamlist__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.8rem;
	height: 2.8rem;
	overflow: hidden;
	border-radius: 50%;
	background: #dfe3dc;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

body.page-style-guide .trahus-teamlist__avatar--paper {
	background: var(--wp--preset--color--surface-alt, #F4EFE3);
}

body.page-style-guide .trahus-teamlist__avatar--initials {
	background: var(--wp--preset--color--secondary, #796A4F);
}

body.page-style-guide .trahus-teamlist__avatar--portrait {
	width: 2.7rem;
	height: 3.4rem;
	border-radius: 0;
	overflow: visible;
	background: #fff;
}

body.page-style-guide .trahus-teamlist__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-style-guide .trahus-teamlist__avatar--portrait img {
	object-fit: contain;
}

body.page-style-guide .trahus-teamlist__avatar--paper img {
	object-fit: contain;
	padding: 0.2rem;
}

body.page-style-guide .trahus-teamlist__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 0.08rem;
}

body.page-style-guide .trahus-teamlist__body strong {
	display: block;
	overflow: hidden;
	color: var(--wp--preset--color--text, #1a1a1a);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: 0.96rem;
	font-weight: 500;
	line-height: 1.12;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.page-style-guide .trahus-teamlist__body span {
	display: block;
	color: var(--wp--preset--color--text-muted, #6f6a5f);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.72rem;
	line-height: 1.16;
}

body.page-style-guide .trahus-teamlist--compact {
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(45, 45, 45, 0.055);
}

body.page-style-guide .trahus-teamlist--compact .trahus-teamlist__person + .trahus-teamlist__person {
	margin-top: 0.75rem;
}

body.page-style-guide .trahus-teamlist--editorial {
	padding-inline: 0;
	background: transparent;
}

body.page-style-guide .trahus-teamlist--editorial .trahus-teamlist__label {
	padding-inline: 0.2rem;
}

body.page-style-guide .trahus-teamlist--editorial .trahus-teamlist__person {
	padding: 0.85rem 0.2rem;
	border-top: 1px solid rgba(46, 61, 36, 0.14);
}

body.page-style-guide .trahus-teamlist--editorial .trahus-teamlist__avatar {
	order: 2;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: auto;
}

body.page-style-guide .trahus-teamlist--editorial .trahus-teamlist__person--no-portrait {
	padding-left: 0.2rem;
}

body.page-style-guide .trahus-teamlist--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	padding: 0;
	background: transparent;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__label {
	grid-column: 1 / -1;
	margin-bottom: 0.1rem !important;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__person {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.65rem;
	min-height: 10.75rem;
	padding: 0.8rem;
	border: 1px solid rgba(46, 61, 36, 0.12);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 10px 24px rgba(45, 45, 45, 0.04);
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__avatar {
	margin-bottom: 0;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__avatar--portrait {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__avatar--portrait img {
	object-fit: contain;
	object-position: center center;
	transform: translateY(-6%);
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__avatar--initials {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	background: var(--wp--preset--color--secondary, #796A4F);
	font-size: 0.88rem;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__body {
	width: 100%;
}

body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__body strong {
	white-space: normal;
}

@media (max-width: 980px) {
	body.page-style-guide .trahus-teamlist-study {
		grid-template-columns: 1fr;
	}
}

/* Masonry Grid in style guide — block renders with alignfull negative margins by default.
   Cancel them so the grid stays within the section container (no clipping). */
body.page-style-guide .wp-block-goodblocks-masonry-query {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 8px;
	overflow: hidden;
}

/* Parent-theme block showcase: mosaic demo cards need stronger contrast than
   the generic demo CSS provides, especially on detailed project imagery. */
body.page-style-guide .block-showcase .mosaic-grid {
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(46, 61, 36, 0.08);
}

body.page-style-guide .block-showcase .mosaic-grid__tile {
	overflow: hidden;
	background: #1a1a1a;
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none;
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.78) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__image,
body.page-style-guide .block-showcase .mosaic-grid__tile .tile__image img {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__image img {
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-style-guide .block-showcase .mosaic-grid__tile:hover .tile__image img {
	transform: scale(1.035);
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(0.9rem, 2vw, 1.35rem);
	color: #fff !important;
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__title,
body.page-style-guide .block-showcase .mosaic-grid__tile .tile__excerpt {
	max-width: 26rem;
	margin: 0 !important;
	color: #fff !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__title {
	display: -webkit-box !important;
	overflow: hidden !important;
	max-height: calc(1.05em * 3);
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3 !important;
	font-size: clamp(1.05rem, 1.7vw, 1.6rem) !important;
	line-height: 1.05 !important;
}

body.page-style-guide .block-showcase .mosaic-grid__tile .tile__excerpt {
	display: -webkit-box !important;
	margin-top: 0.55rem !important;
	overflow: hidden !important;
	max-height: calc(1.4em * 2);
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	font-size: clamp(0.78rem, 1vw, 0.95rem) !important;
	line-height: 1.4 !important;
}

body.page-style-guide .block-showcase .mosaic-grid__tile:not(.tile-md) .tile__excerpt {
	display: none !important;
}

body.page-style-guide .block-showcase .mosaic-grid__tile.tile-tall .tile__title {
	font-size: clamp(0.95rem, 1.35vw, 1.15rem) !important;
	max-height: calc(1.05em * 4);
	-webkit-line-clamp: 4 !important;
}

body.page-style-guide {
	--trahus-sg-card-radius: 6px;
	--trahus-sg-card-shadow: 0 18px 42px rgba(46, 61, 36, 0.1);
	--trahus-sg-table-border: color-mix(in srgb, var(--wp--preset--color--secondary, #796a4f) 46%, transparent);
}

body.page-style-guide img:not(.custom-logo):not(.wp-smiley),
body.page-style-guide picture,
body.page-style-guide figure,
body.page-style-guide .wp-block-image,
body.page-style-guide .wp-block-cover,
body.page-style-guide .wp-block-table,
body.page-style-guide .wp-block-group.has-background:not(.alignfull),
body.page-style-guide .trahus-contact-form-panel,
body.page-style-guide .trahus-contact-direct,
body.page-style-guide .trahus-contact-address,
body.page-style-guide .trahus-contact-people-link,
body.page-style-guide .trahus-sg-local-layout,
body.page-style-guide .trahus-sg-local-layout__content,
body.page-style-guide .trahus-sg-local-layout__nav,
body.page-style-guide .trahus-portrait-study__card,
body.page-style-guide .trahus-portrait-study__media,
body.page-style-guide .trahus-teamlist-study__option,
body.page-style-guide .trahus-teamlist--compact,
body.page-style-guide .trahus-teamlist--grid .trahus-teamlist__person,
body.page-style-guide .wp-block-goodblocks-masonry-query,
body.page-style-guide .block-showcase .mosaic-grid,
body.page-style-guide .trahus-sg-radius-spec,
body.page-style-guide .trahus-sg-service-card,
body.page-style-guide .trahus-sg-person-card,
body.page-style-guide .trahus-sg-mosaic__item,
body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card,
body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card__media,
body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card__media img {
	border-radius: var(--trahus-sg-card-radius) !important;
}

body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card {
	overflow: hidden;
}

body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card__media,
body.page-style-guide .trahus-project-card-section--style-guide .trahus-project-card__media img {
	border-radius: var(--trahus-sg-card-radius) var(--trahus-sg-card-radius) 0 0 !important;
}

body.page-style-guide .trahus-sg-card-direction {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: end;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(46, 61, 36, 0.14);
}

body.page-style-guide .trahus-sg-card-direction__intro {
	max-width: 760px;
}

body.page-style-guide .trahus-sg-card-direction__eyebrow,
body.page-style-guide .trahus-sg-card-proposal__label {
	margin: 0 0 0.55rem;
	color: var(--wp--preset--color--secondary, #8a6f45);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

body.page-style-guide .trahus-sg-card-direction h3,
body.page-style-guide .trahus-sg-card-proposal__header h3 {
	margin: 0;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-size: var(--wp--preset--font-size--2-xl, 2.25rem);
	line-height: 1.04;
	letter-spacing: 0;
}

body.page-style-guide .trahus-sg-card-direction p:not(.trahus-sg-card-direction__eyebrow),
body.page-style-guide .trahus-sg-card-proposal__header p:not(.trahus-sg-card-proposal__label) {
	max-width: 660px;
	margin: 0.9rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.65;
}

body.page-style-guide .trahus-sg-radius-spec {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	overflow: hidden;
	border: 1px solid rgba(46, 61, 36, 0.14);
	border-radius: var(--trahus-sg-card-radius);
	background: var(--wp--preset--color--surface, #fff);
}

body.page-style-guide .trahus-sg-radius-spec div {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding: 1rem;
}

body.page-style-guide .trahus-sg-radius-spec div + div {
	border-left: 1px solid rgba(46, 61, 36, 0.14);
}

body.page-style-guide .trahus-sg-radius-spec strong {
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: var(--wp--preset--font-size--xl, 1.75rem);
	font-weight: 500;
	line-height: 1;
}

body.page-style-guide .trahus-sg-radius-spec span {
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	line-height: 1.35;
}

body.page-style-guide .trahus-sg-card-proposals {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	margin-top: clamp(3rem, 6vw, 5rem);
}

body.page-style-guide .trahus-sg-card-proposal__header {
	max-width: 760px;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

body.page-style-guide .trahus-sg-service-grid,
body.page-style-guide .trahus-sg-person-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg, 2rem);
	align-items: stretch;
}

body.page-style-guide .trahus-sg-service-card,
body.page-style-guide .trahus-sg-person-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(46, 61, 36, 0.1);
	border-radius: var(--trahus-sg-card-radius);
	background: var(--wp--preset--color--surface, #fff);
	transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.page-style-guide .trahus-sg-service-card:hover,
body.page-style-guide .trahus-sg-person-card:hover {
	transform: translateY(-3px);
	border-color: rgba(46, 61, 36, 0.2);
	box-shadow: var(--trahus-sg-card-shadow);
}

body.page-style-guide .trahus-sg-service-card a {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	color: inherit;
	text-decoration: none;
}

body.page-style-guide .trahus-sg-service-card figure,
body.page-style-guide .trahus-sg-person-card figure {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface-alt, #f4efe3);
}

body.page-style-guide .trahus-sg-service-card figure {
	aspect-ratio: 4 / 3;
}

body.page-style-guide .trahus-sg-service-card img,
body.page-style-guide .trahus-sg-mosaic__item img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-style-guide .trahus-sg-service-card:hover img,
body.page-style-guide .trahus-sg-mosaic__item:hover img {
	transform: scale(1.035);
}

body.page-style-guide .trahus-sg-service-card__body,
body.page-style-guide .trahus-sg-person-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

body.page-style-guide .trahus-sg-service-card__body {
	min-height: clamp(12rem, 15vw, 14rem);
}

body.page-style-guide .trahus-sg-service-card h4,
body.page-style-guide .trahus-sg-person-card h4 {
	margin: 0;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	line-height: 1.12;
	letter-spacing: 0;
}

body.page-style-guide .trahus-sg-service-card p,
body.page-style-guide .trahus-sg-person-card p {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--text-muted, #5f605a);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	line-height: 1.55;
}

body.page-style-guide .trahus-sg-service-card span {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--sm, 0.75rem);
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 600;
}

body.page-style-guide .trahus-sg-service-card span::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.4em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--trahus-arrow-icon) no-repeat center / contain;
	mask: var(--trahus-arrow-icon) no-repeat center / contain;
	transition: transform 0.2s ease;
}

body.page-style-guide .trahus-sg-person-card figure {
	display: flex;
	align-items: end;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 1rem 1rem 0;
}

body.page-style-guide .trahus-sg-person-card img {
	display: block;
	width: auto;
	max-width: 72%;
	height: 100% !important;
	object-fit: contain;
	object-position: bottom center;
}

body.page-style-guide .trahus-sg-person-card a {
	margin-top: 1rem;
	color: var(--wp--preset--color--primary-dark, #2e3d24);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 500;
	overflow-wrap: anywhere;
	text-decoration: none;
}

body.page-style-guide .trahus-sg-mosaic {
	display: grid;
	grid-auto-flow: dense;
	grid-auto-rows: minmax(9rem, 14vw);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

body.page-style-guide .trahus-sg-mosaic__item {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--trahus-sg-card-radius);
	background: var(--wp--preset--color--primary-dark, #2e3d24);
}

body.page-style-guide .trahus-sg-mosaic__item--large {
	grid-column: span 2;
	grid-row: span 2;
}

body.page-style-guide .trahus-sg-mosaic__item--wide {
	grid-column: span 2;
}

body.page-style-guide .trahus-sg-mosaic__item::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.58) 100%);
	content: "";
}

body.page-style-guide .trahus-sg-mosaic__item figcaption {
	position: absolute;
	right: 1rem;
	bottom: 0.85rem;
	left: 1rem;
	z-index: 1;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 980px) {
	body.page-style-guide .trahus-sg-card-direction {
		grid-template-columns: 1fr;
	}

	body.page-style-guide .trahus-sg-service-grid,
	body.page-style-guide .trahus-sg-person-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.page-style-guide .trahus-sg-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(10rem, 28vw);
	}
}

@media (max-width: 640px) {
	body.page-style-guide .trahus-sg-radius-spec,
	body.page-style-guide .trahus-sg-service-grid,
	body.page-style-guide .trahus-sg-person-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.page-style-guide .trahus-sg-radius-spec div + div {
		border-top: 1px solid rgba(46, 61, 36, 0.14);
		border-left: 0;
	}

	body.page-style-guide .trahus-sg-mosaic {
		grid-auto-rows: minmax(11rem, 55vw);
		grid-template-columns: minmax(0, 1fr);
	}

	body.page-style-guide .trahus-sg-mosaic__item--large,
	body.page-style-guide .trahus-sg-mosaic__item--wide {
		grid-column: auto;
		grid-row: auto;
	}
}

body.page-style-guide .wp-block-table {
	box-sizing: border-box;
	display: block;
	max-width: min(1200px, calc(100vw - (2 * var(--wp--preset--spacing--md, 1.5rem)))) !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow-x: auto;
	border-radius: 6px;
	border: 1px solid var(--trahus-sg-table-border);
	background: var(--wp--preset--color--surface, #fff);
}

body.page-style-guide .wp-block-table table {
	width: 100%;
	min-width: 0;
	border-color: var(--trahus-sg-table-border);
	table-layout: auto;
}

body.page-style-guide .wp-block-table th,
body.page-style-guide .wp-block-table td {
	border-color: var(--trahus-sg-table-border);
	overflow-wrap: anywhere;
}

/* Style guide component previews need to demonstrate the real UI with enough
   breathing room, independent of parent theme demo defaults. */
body.page-style-guide .wp-block-separator {
	border: 0 !important;
	height: 1px !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	opacity: 1 !important;
	background-color: var(--wp--preset--color--border, #d8d2c4) !important;
}

body.page-style-guide .wp-block-separator.has-primary-background-color {
	height: 2px !important;
	background-color: var(--wp--preset--color--primary, #4a5d3a) !important;
}

body.page-style-guide .wp-block-separator.has-border-background-color {
	background-color: var(--wp--preset--color--border, #d8d2c4) !important;
}

/* ==========================================================================
   Reusable Trähus content patterns
   ========================================================================== */

.trahus-stats-strip {
	padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.75rem) !important;
}

.trahus-stats-strip .wp-block-columns {
	align-items: stretch !important;
	gap: clamp(1.25rem, 3vw, 3rem) !important;
	margin-bottom: 0 !important;
}

.trahus-stats-strip .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.45rem;
	min-height: 6.75rem;
}

.trahus-stats-strip h3,
.trahus-stats-strip p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.05;
}

.trahus-contact-cta {
	padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem) !important;
}

.trahus-contact-cta > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 780px;
}

.trahus-contact-cta .wp-block-heading {
	font-size: var(--wp--preset--font-size--xl, 2rem);
}

.trahus-contact-cta .wp-block-buttons {
	justify-content: center;
	margin-bottom: 0 !important;
	padding-bottom: 0.15rem;
}

.trahus-contact-cta .wp-block-button__link {
	min-height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 640px) {
	.trahus-stats-strip .wp-block-columns {
		gap: 1.5rem !important;
	}

	.trahus-stats-strip .wp-block-column {
		min-height: auto;
	}
}

/* ==========================================================================
   Årsringshero — style guide-komponent (3 varianter)
   Färgplatta med årsringar ton-i-ton (utfallande) + vit text till vänster,
   foto på högra halvan. Klassnamnen är namnspacade (.trahus-ringhero) så de
   inte krockar med parentens/temats generiska .hero-klasser. Ringtexturen
   sätts som inline background-image i markupen; här styrs bara storlek/läge.
   ========================================================================== */
.trahus-ringhero-study > * + * {
	margin-top: var(--wp--preset--spacing--xl, 2.5rem);
}

.trahus-ringhero-label {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
}
.trahus-ringhero-label__num {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	color: var(--wp--preset--color--secondary, #796A4F);
}
.trahus-ringhero-label__name { font-weight: 650; letter-spacing: -0.01em; }
.trahus-ringhero-label__note {
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-ringhero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 50px -22px rgba(46, 61, 36, 0.45), 0 0 0 1px rgba(46, 61, 36, 0.06);
}

.trahus-ringhero__plate {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(2rem, 4vw, 3.25rem);
	isolation: isolate;
}
.trahus-ringhero__plate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: inherit;
}
.trahus-ringhero__plate--center { justify-content: center; }
.trahus-ringhero__plate--kromoxid { background: var(--wp--preset--color--primary-dark, #2E3D24); }
.trahus-ringhero__plate--green    { background: var(--wp--preset--color--primary, #4A5D3A); }
.trahus-ringhero__plate--umbra    { background: var(--wp--preset--color--hero-rust, #6B4A2E); }
.trahus-ringhero__plate--secondary { background: var(--wp--preset--color--secondary, #796A4F); }
.trahus-ringhero__plate--sage     { background: var(--wp--preset--color--hero-sage, #6B7A4F); }
.trahus-ringhero__plate--accent   { background: var(--wp--preset--color--accent, #8A9672); }
.trahus-ringhero__plate--jarnoxid { background: var(--wp--preset--color--hero-jarnoxid, #7A5A3E); }
.trahus-ringhero__plate--paper    { background: var(--wp--preset--color--surface-alt, #F4EFE3); }
.trahus-ringhero__plate--white    { background: var(--wp--preset--color--surface, #fff); }
.trahus-ringhero__plate--black    { background: var(--wp--preset--color--black, #1A1A1A); }
.trahus-ringhero__plate--natural  { background: #1f241d; }
.trahus-ringhero__plate--natural::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.18)),
		rgba(0, 0, 0, 0.12);
}

/* Utfallande årsringar, ton-i-ton. Cover ger minsta möjliga skala som ändå
   täcker kant-till-kant; varianterna ändrar bara position/opacitet. */
.trahus-ringhero__rings {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: multiply;
}
.trahus-ringhero__rings--centered { background-size: cover; background-position: center; opacity: 0.55; }
.trahus-ringhero__rings--corner   { background-size: cover; background-position: 30% 20%; opacity: 0.58; }
.trahus-ringhero__rings--soft     { background-size: cover; background-position: 62% center; opacity: 0.34; }
.trahus-ringhero__plate--natural .trahus-ringhero__rings {
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
}

.trahus-ringhero__content { position: relative; z-index: 3; color: #fff; }
.trahus-ringhero__kicker {
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 0.85rem;
	color: rgba(255, 255, 255, 0.82);
}
.trahus-ringhero__rule {
	width: 46px;
	height: 2px;
	background: rgba(255, 255, 255, 0.6);
	margin: 0 0 1.4rem;
	border: 0;
}
.trahus-ringhero__title {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-weight: 500;
	font-size: clamp(1.8rem, 3.4vw, 2.9rem);
	line-height: 1.13;
	margin: 0;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: #fff;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18);
}
.trahus-ringhero__lead {
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	margin: 1.1rem 0 0;
	max-width: 34ch;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}
.trahus-ringhero__plate--light .trahus-ringhero__content,
.trahus-ringhero__plate--light .trahus-ringhero__title {
	color: var(--wp--preset--color--text, #2D2D2D);
}
.trahus-ringhero__plate--light .trahus-ringhero__kicker {
	color: rgba(45, 45, 45, 0.7);
}
.trahus-ringhero__plate--light .trahus-ringhero__rule {
	background: rgba(45, 45, 45, 0.45);
}
.trahus-ringhero__plate--light .trahus-ringhero__lead {
	color: rgba(45, 45, 45, 0.82);
}
.trahus-ringhero__plate--light .trahus-ringhero__title {
	text-shadow: none;
}
.trahus-ringhero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 3px;
	transition: border-color 0.2s;
}
.trahus-ringhero__cta:hover { border-color: #fff; }

.trahus-ringhero__photo { position: relative; overflow: hidden; background: #ddd6c7; }
.trahus-ringhero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.trahus-ringhero:hover .trahus-ringhero__photo img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.trahus-ringhero__photo img { transition: none; }
	.trahus-ringhero:hover .trahus-ringhero__photo img { transform: none; }
}

@media (max-width: 720px) {
	.trahus-ringhero { grid-template-columns: 1fr; }
	.trahus-ringhero__plate { min-height: 320px; }
	.trahus-ringhero__photo { min-height: 240px; }
}

/* Projektgrid på startsidan (ersätter det tidigare masonry-lightbox-galleriet).
   Ger sektionen egen vertikal rytm bland startsidans övriga block. */
.trahus-project-card-section--home {
	margin-block: var(--wp--preset--spacing--xl, 3rem);
}

/* Gutenberg-managed long-form copy on individual service archives. */
.trahus-service-content {
	background: var(--wp--preset--color--surface-alt, #f4efe3);
	padding: clamp(2.5rem, 6vw, 5.5rem) var(--trahus-container-padding, clamp(1.25rem, 4vw, 3rem));
}

.trahus-service-content__inner {
	max-width: 760px;
	margin-inline: auto;
}

.trahus-service-content__inner > :first-child { margin-top: 0; }
.trahus-service-content__inner > :last-child { margin-bottom: 0; }

.trahus-service-content__inner h2 {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.trahus-service-content__inner h3 {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Keep portrait before/after comparisons fully visible on shorter desktop
   viewports. JavaScript supplies the block's own width/height ratio so the
   rule works for 2:3, 3:4, 4:5 and other portrait formats without cropping. */
@media (min-width: 782px) {
	.wp-block-goodblocks-image-compare.has-aspect-ratio.is-trahus-portrait-compare {
		max-width: min(
			100%,
			calc((100svh - clamp(6rem, 12svh, 9rem)) * var(--trahus-image-compare-ratio))
		);
		margin-inline: auto !important;
	}
}

/* Minimal, language-aware before/after labels. Keep the text readable over
   both light and dark photos without reintroducing a background plate. */
.wp-block-goodblocks-image-compare .image-compare__label {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

/* Sidfoten på mobil: centrera allt enhetligt när kolumnerna staplas
   (blandad vänster-/mittjustering ser taggig ut i staplat läge). */
@media (max-width: 781px) {
	.trahus-footer .wp-block-column {
		text-align: center;
	}

	/* .is-vertical krävs för att vinna över WP:s genererade
	   layout-regel (align-items: flex-start) på nav-blocket. */
	.trahus-footer .wp-block-navigation.is-vertical,
	.trahus-footer .wp-block-navigation .wp-block-navigation__container {
		align-items: center;
		justify-content: center;
		margin-inline: auto;
	}
}

/* Två containerbredder, alla skärmar: normal (rotens gutter) och
   utfallande. Nästlade constrained-grupper med has-global-padding
   dubblar annars guttern (rot + grupp) och skapar en tredje, smalare
   bredd — då linjerar inte ingress och moduler med hero och projekt.
   !important krävs: paddingen är inline-style i blockmarkupen.
   Endast horisontellt — vertikal rytm behålls. */
main .is-layout-constrained .has-global-padding:not(.has-background) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Alignwide-grupper med egen inline-padding (t.ex. erbjudande-modulens
   wrapper) saknar has-global-padding-klassen men följer samma regel. */
main .entry-content > .wp-block-group.alignwide:not(.has-background) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Vita kort målar bakgrunden inline (ingen has-background-klass) och
   behöver eget inre ljusrum — specificiteten matchar sweepen ovan och
   vinner på ordning. */
main .is-layout-constrained .has-global-padding.trahus-home-offerings__overview {
	padding: var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--lg, 2rem) !important;
}

@media (max-width: 781px) {
	main .is-layout-constrained .has-global-padding.trahus-home-offerings__overview {
		padding: var(--wp--preset--spacing--lg, 2rem) var(--wp--preset--spacing--md, 1.25rem) !important;
	}
}

/* Språkvalet i mobilmenyn ska inte vara fetstilt — aktivt språk
   markeras redan med understrykning. */
.mobile-nav__lang-link {
	font-weight: 400;
}

/* Lika mycket luft under ingressen som över den (28 px-symmetri):
   ingressens egen padding-bottom bär hela avståndet till vita ytan. */
main .wp-block-group.alignwide:has(.trahus-home-offerings__overview) {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Kolumnen till höger om skiljelinjen behöver eget ljusrum — den bar
   tidigare rotens gutter via has-global-padding, som tvåbreddsregeln
   ovan nollställer. */
main .is-layout-constrained .has-global-padding.trahus-home-offerings__overview-nav {
	padding-left: var(--wp--preset--spacing--lg, 2rem) !important;
}

/* --- Tjänstesidans lokala navigation (Erbjudande-trädet) --------------- */

.trahus-service-content__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: clamp(2rem, 5vw, 4.5rem);
	max-width: 1200px;
	margin-inline: auto;
	align-items: start;
}

/* Innehållskolumnen centrerades tidigare i full bredd; i tvåkolumns-
   layouten ska den fylla sin kolumn. */
.trahus-service-content__layout > .trahus-service-content__inner {
	max-width: 760px;
	margin-inline: 0;
}

.trahus-service-tree {
	position: sticky;
	top: calc(var(--wp--preset--spacing--lg, 2rem) + 80px);
}

.trahus-service-tree__branch {
	margin: 0 0 0.35rem;
	padding: 0;
	list-style: none;
}

.trahus-service-tree__summary {
	cursor: pointer;
	list-style: none;
	padding: 0.4rem 0 0.4rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--text, #1a1a1a);
	border-left: 2px solid transparent;
	transition: color 0.15s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.trahus-service-tree__summary::-webkit-details-marker {
	display: none;
}

/* Chevron som roterar när grenen öppnas. */
.trahus-service-tree__summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
	opacity: 0.55;
	flex: none;
}

details[open] > .trahus-service-tree__summary::after {
	transform: rotate(45deg);
}

.trahus-service-tree__summary:hover,
details[open] > .trahus-service-tree__summary {
	color: var(--wp--preset--color--primary, #2C5F2D);
}

.trahus-service-tree__children {
	margin: 0 0 0.5rem;
	padding-left: 0.75rem;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.trahus-service-tree .trahus-sidebar-nav__item a {
	font-size: 0.85rem;
}

@media (max-width: 1023px) {
	.trahus-service-content__layout {
		grid-template-columns: 1fr;
	}

	.trahus-service-content__layout > .trahus-service-content__inner {
		max-width: 760px;
		margin-inline: auto;
	}

	.trahus-service-tree {
		position: static;
		max-width: 760px;
		margin-inline: auto;
		padding-top: var(--wp--preset--spacing--md, 1rem);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
}