/* MX-Home CMS – post cards and the single post layout.
   Colours use the Elementor kit globals when present, with the design-system values as fallback. */
:root {
	--mx-ink: var(--e-global-color-primary, #1c1a17);
	--mx-muted: var(--e-global-color-text, #5c574f);
	--mx-earth: var(--e-global-color-secondary, #6b5c3b);
	--mx-ember: var(--e-global-color-accent, #b3441a);
	--mx-green: var(--e-global-color-qnwgrn7, #22733a);
	--mx-green-hover: var(--e-global-color-qnwgrn8, #1c5a2f);
	--mx-surface-subtle: var(--e-global-color-248b029, #f7f5f1);
	--mx-inverse: var(--e-global-color-qnwinvs, #241f15);
	--mx-on-inverse: var(--e-global-color-qnwoinv, #f3efe8);
	--mx-border: var(--e-global-color-e9c5ff0, #e3ddd3);
	--mx-display: "Plus Jakarta Sans", sans-serif;
	--mx-text: "Schibsted Grotesk", sans-serif;
}

.mx-eyebrow {
	margin: 0 0 12px;
	font: 500 16px/1.5 var(--mx-display);
	letter-spacing: 0.15px;
	text-transform: uppercase;
	color: var(--mx-earth);
}
.mx-eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------- cards */
.mx-posts {
	display: grid;
	grid-template-columns: repeat(var(--mx-cols, 3), minmax(0, 1fr));
	gap: 60px 40px;
}
@media (max-width: 1024px) {
	.mx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.mx-posts { grid-template-columns: 1fr; gap: 40px; }
}
.mx-post-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mx-post-card__image {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mx-surface-subtle);
	margin-bottom: 10px;
}
.mx-posts .mx-post-card__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 0;
	transition: transform 0.5s ease;
}
.mx-post-card:hover .mx-post-card__image img {
	transform: scale(1.04);
}
.mx-post-card__meta {
	margin: 0;
	font: 500 14px/1.5 var(--mx-display);
	letter-spacing: 0.15px;
	text-transform: uppercase;
	color: var(--mx-earth);
}
.mx-post-card__title {
	margin: 0;
	font: 500 24px/1.35 var(--mx-display);
	letter-spacing: -0.025em;
}
.mx-posts .mx-post-card__title a {
	color: var(--mx-ink) !important;
	text-decoration: none !important;
}
.mx-posts .mx-post-card__title a:hover {
	color: var(--mx-green) !important;
}
.mx-post-card__excerpt {
	margin: 0;
	color: var(--mx-muted);
	font: 400 17px/1.6 var(--mx-text);
}
.mx-posts .mx-post-card__more,
.mx-single .mx-link-arrow {
	color: var(--mx-green) !important;
	text-decoration: none !important;
}
.mx-posts .mx-post-card__more:hover,
.mx-single .mx-link-arrow:hover {
	color: var(--mx-green-hover) !important;
}
.mx-post-card__more,
.mx-link-arrow {
	align-self: flex-start;
	margin-top: 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid currentColor;
	color: var(--mx-green);
	font: 600 17px/1 var(--mx-display);
	text-decoration: none;
}
.mx-post-card__more::after,
.mx-link-arrow::after {
	content: "→";
	margin-left: 10px;
}
.mx-post-card__more:hover,
.mx-link-arrow:hover {
	color: var(--mx-green-hover);
	border-bottom-color: var(--mx-ember);
}
.mx-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 60px;
}
.mx-pagination .page-numbers {
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid var(--mx-border);
	color: var(--mx-ink);
	text-align: center;
	text-decoration: none;
	font: 600 16px/1.5 var(--mx-display);
}
.mx-pagination .page-numbers.current,
.mx-pagination .page-numbers:hover {
	background: var(--mx-green);
	border-color: var(--mx-green);
	color: #fff;
}
.mx-posts-empty {
	color: var(--mx-muted);
}

/* ---------------------------------------------------------------- single */
.mx-single {
	font: 400 18px/1.65 var(--mx-text);
	color: var(--mx-ink);
}
/* Reading layout header (white): chips, title, date, lead. Top padding clears the fixed site header. */
.mx-single__head {
	padding: clamp(130px, 14vw, 180px) 4% clamp(40px, 5vw, 64px);
	background: #fff;
}
.mx-single__head-inner {
	max-width: 1080px;
	margin: 0 auto;
}
.mx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}
.mx-single .mx-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid var(--mx-green);
	border-radius: 999px;
	background: var(--mx-green);
	color: #fff !important;
	font: 600 13px/1.2 var(--mx-display);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none !important;
}
.mx-single a.mx-chip:hover {
	background: var(--mx-green-hover);
	border-color: var(--mx-green-hover);
}
.mx-single .mx-chip--soft {
	border-color: var(--mx-border);
	background: var(--mx-surface-subtle);
	color: var(--mx-earth) !important;
}
/* The Elementor kit colours headings site-wide; set the title explicitly. */
.mx-single .mx-single__head .mx-single__title {
	max-width: 1080px;
	margin: 0;
	color: var(--mx-ink) !important;
	font: 500 clamp(36px, 5vw, 64px) / 1.12 var(--mx-display);
	letter-spacing: -0.04em;
}
.mx-single .mx-single__date {
	margin: 20px 0 0;
	color: var(--mx-muted) !important;
	font: 400 17px/1.5 var(--mx-text);
}
.mx-single .mx-single__lead {
	max-width: 760px;
	margin: 24px 0 0;
	color: var(--mx-muted) !important;
	font: 400 clamp(18px, 1.7vw, 22px) / 1.55 var(--mx-text);
}

/* Featured photo: full width, at its own proportions, no bars. */
.mx-single__feature {
	margin: 0;
	background: var(--mx-surface-subtle);
}
.mx-single .mx-single__feature img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 auto;
	border-radius: 0;
}
/* A portrait featured photo would be taller than the screen: cap it and centre it (marked by single.php). */
.mx-single .mx-single__feature img.is-portrait {
	width: auto !important;
	max-width: 100% !important;
	max-height: 88vh;
}

.mx-single__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 100px 20px 120px;
}
.mx-single__body > * {
	margin-top: 0;
	margin-bottom: 24px;
}
.mx-single__body h2 {
	margin-top: 56px;
	font: 500 clamp(28px, 3vw, 40px) / 1.2 var(--mx-display);
	letter-spacing: -0.035em;
	color: var(--mx-ink);
}
.mx-single__body h3 {
	margin-top: 40px;
	font: 500 24px/1.4 var(--mx-display);
	letter-spacing: -0.025em;
	color: var(--mx-ink);
}
.mx-single__body a {
	color: var(--mx-green);
}
.mx-single__body img {
	border-radius: 0;
}
.mx-single__body ul {
	list-style: none;
	padding-left: 0;
}
.mx-single__body ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
}
.mx-single__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 8px;
	background: var(--mx-ember);
}
/* Project facts list: a hairline between rows. */
.mx-single__body .mx-facts li {
	padding: 12px 0 12px 22px;
	margin: 0;
	border-bottom: 1px solid var(--mx-border);
}
.mx-single__body .mx-facts li::before {
	top: 1.35em;
}
/* Photos keep their own shape: scaled to the width, never cropped. */
.mx-single__body img {
	max-width: 100%;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}
.mx-single__body .alignwide {
	width: min(1280px, 100vw - 40px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Galleries: one photo per row, full width (core's cropped grid is overridden). */
.mx-single__body .wp-block-gallery.has-nested-images {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	margin: 40px 0 56px !important;
}
.mx-single__body .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important;
	max-width: 1440px;
	margin: 0 auto !important;
	flex: none !important;
	aspect-ratio: auto !important;
}
.mx-single__body .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	flex: none !important;
}
.mx-single__body .wp-block-gallery figure.wp-block-image figcaption {
	position: static !important;
	padding: 10px 0 0 !important;
	background: none !important;
	color: inherit !important;
	text-align: left;
}
/* Portrait photos (marked by single.php): as tall as the screen, centred. */
.mx-single__body img.is-portrait,
.mx-single__body .wp-block-gallery.has-nested-images figure.wp-block-image img.is-portrait {
	width: auto !important;
	max-height: 90vh;
	margin-left: auto;
	margin-right: auto;
}

/* Project galleries sit in a dark band that runs edge to edge. */
.mx-single--project .mx-single__body .wp-block-gallery.has-nested-images {
	box-sizing: border-box;
	width: 100vw !important;
	max-width: none !important;
	margin: 48px 0 56px calc(50% - 50vw) !important;
	padding: clamp(24px, 5vw, 80px) clamp(16px, 4vw, 64px) !important;
	background: var(--mx-inverse);
	gap: clamp(16px, 2vw, 32px) !important;
}
.mx-single--project .wp-block-gallery figure.wp-block-image figcaption {
	color: var(--mx-on-inverse) !important;
}

.mx-single__cta {
	padding: 100px 4%;
	background: var(--mx-inverse);
	color: var(--mx-on-inverse);
}
.mx-single__cta-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.mx-single__cta .mx-eyebrow {
	color: #ffe0d2;
}
.mx-single .mx-single__cta h2 {
	max-width: 760px;
	margin: 0 0 16px;
	color: #fff !important;
	font: 500 clamp(32px, 4vw, 58px) / 1.1 var(--mx-display);
	letter-spacing: -0.04em;
}
.mx-single .mx-single__cta p {
	max-width: 640px;
	color: var(--mx-on-inverse) !important;
}
.mx-single__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}
/* Buttons on the dark band. !important: the Elementor kit paints every link green. */
.mx-single a.mx-btn {
	color: #fff !important;
	text-decoration: none !important;
}
.mx-single a.mx-btn:hover {
	color: #fff !important;
}
.mx-single a.mx-btn--outline {
	border-color: rgba(255, 255, 255, 0.6) !important;
	color: #fff !important;
}
.mx-single a.mx-btn--outline:hover {
	background: #fff !important;
	color: var(--mx-ink) !important;
}
.mx-btn {
	display: inline-block;
	padding: 18px 36px;
	background: var(--mx-green);
	color: #fff;
	font: 600 17px/1 var(--mx-display);
	text-decoration: none;
}
.mx-btn:hover {
	background: var(--mx-green-hover);
	color: #fff;
}
.mx-btn--outline {
	background: transparent;
	border: 1px solid currentColor;
	color: #fff;
}
.mx-btn--outline:hover {
	background: #fff;
	color: var(--mx-ink);
}

.mx-single__related {
	padding: 100px 4% 120px;
	background: var(--mx-surface-subtle);
}
.mx-single__related-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.mx-single__related .mx-posts {
	margin: 20px 0 48px;
}

:where(.mx-posts, .mx-single) a:focus-visible {
	outline: 2px solid var(--mx-green);
	outline-offset: 2px;
}

/* Full-width bands use 100vw; never let them add a sideways scrollbar. */
.mx-single {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- project gallery
   Built by single.php from the post's Gallery block: thumbnails left, large photo right. */
.mx-gallery {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: start;
	width: 100vw;
	margin: 48px 0 56px calc(50% - 50vw);
	padding: clamp(32px, 5vw, 80px) max(4vw, calc((100vw - 1440px) / 2));
	background: var(--mx-inverse);
	outline: none;
}
.mx-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 10px;
}
/* Thumbnails keep each photo's own shape (no crop, no bars); the selected one is fully lit. */
.mx-gallery__thumb {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.25s ease;
}
.mx-gallery__thumb:hover,
.mx-gallery__thumb:focus-visible {
	opacity: 0.85;
}
.mx-gallery__thumb.is-active {
	opacity: 1;
}
.mx-single__body .mx-gallery__thumb img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: none;
	margin: 0;
	object-fit: initial !important;
}
.mx-gallery__viewer {
	position: sticky;
	top: 110px;
	margin: 0;
}
/* The large photo is sized by the photo itself: full column width for landscape,
   at most 80% of the screen height for portrait, never larger than the file. */
.mx-gallery__stage {
	display: flex;
	justify-content: center;
}
.mx-single__body .mx-gallery__stage img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 80vh;
	margin: 0;
	object-fit: initial !important;
}
.mx-gallery__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	color: var(--mx-on-inverse);
	font: 600 15px/1 var(--mx-display);
	letter-spacing: 0.4px;
}
.mx-gallery__nav {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: 500 18px/1 var(--mx-display);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.mx-gallery__nav:hover,
.mx-gallery__nav:focus-visible {
	background: #fff;
	color: var(--mx-ink);
}
.mx-gallery :focus-visible {
	outline: 2px solid #ffe0d2;
	outline-offset: 2px;
}
@media (max-width: 1024px) {
	.mx-gallery {
		grid-template-columns: 1fr;
	}
	.mx-gallery__viewer {
		position: static;
		order: -1;
	}
}
@media (max-width: 480px) {
	.mx-gallery__grid {
		gap: 6px;
	}
}

/* ---------------------------------------------------------------- project tiles ([mx_posts style="tiles"]) */
.mx-posts--tiles {
	gap: 16px;
}
.mx-posts .mx-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mx-surface-subtle);
	color: #fff !important;
	text-decoration: none !important;
}
.mx-posts .mx-tile img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 0;
	transition: transform 0.6s ease;
}
.mx-tile__veil {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: rgba(34, 115, 58, 0.62);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.mx-tile__type {
	font: 600 13px/1.2 var(--mx-display);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.mx-tile__name {
	margin: 0;
	color: #fff !important;
	font: 500 clamp(20px, 1.9vw, 28px) / 1.25 var(--mx-display);
	letter-spacing: -0.025em;
}
.mx-tile:hover .mx-tile__veil,
.mx-tile:focus-visible .mx-tile__veil {
	opacity: 1;
}
.mx-tile:hover img,
.mx-tile:focus-visible img {
	transform: scale(1.04);
}
.mx-posts .mx-tile:focus-visible {
	outline: 2px solid var(--mx-green);
	outline-offset: 3px;
}
/* Touch screens have no hover: keep the name visible on a band at the bottom. */
@media (hover: none) {
	.mx-tile__veil {
		top: auto;
		opacity: 1;
		padding: 14px 16px;
		align-items: flex-start;
		text-align: left;
	}
	.mx-tile__name {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------- Elementor button arrows (site-wide)
   Elementor gives every button "fill: #fff"; the kit's button style changes only the text colour.
   ElementsKit arrows rendered as SVG use fill, so on light sections the arrow stayed white.
   Make the arrow follow the label colour – normal, hover and focus. */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon svg * {
	fill: currentColor;
}

/* Second button on white (404 page): green outline. */
.mx-single a.mx-btn--line {
	background: transparent;
	border: 1px solid var(--mx-green);
	color: var(--mx-green) !important;
}
.mx-single a.mx-btn--line:hover {
	background: var(--mx-green);
	color: #fff !important;
}
.mx-single--404 .mx-single__head {
	padding-bottom: clamp(64px, 8vw, 120px);
}