/* Webbler Posts – image cards with a blur fade, or classic cards.
 * Values come from CSS variables set on the widget by its style controls;
 * every var() has a fallback so the widget also looks right without them. */

.wposts-wrap {
	width: 100%;
}

.wposts {
	display: grid;
	grid-template-columns: repeat(var(--wpost-cols, 3), minmax(0, 1fr));
	gap: var(--wpost-gap, 24px);
}

.wposts:empty {
	display: none;
}

.wposts__empty {
	margin: 0;
	padding: 32px 0;
	color: var(--wpost-muted, #55606a);
	text-align: center;
}

.wposts__empty[hidden] {
	display: none;
}

/* ---------- Card (shared) ---------- */
.wpost {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--wpost-r, var(--wel-r-md, 24px));
	isolation: isolate;
}

/* The title link covers the whole card. It takes every text setting from
 * the title, so site-wide link styles (Site Settings → Typography → Links)
 * can't override the title size or font. */
.wpost .wpost__link {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	word-spacing: inherit;
}

/* Keep the title's own color in every link state – site-wide link colors
 * (fx. Site Settings → Link hover = white) must not change it. */
.wposts-wrap .wpost .wpost__link:link,
.wposts-wrap .wpost .wpost__link:visited,
.wposts-wrap .wpost .wpost__link:hover,
.wposts-wrap .wpost .wpost__link:focus,
.wposts-wrap .wpost .wpost__link:active {
	color: inherit;
}

.wpost .wpost__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
}

.wpost .wpost__link:focus,
.wpost .wpost__link:focus-visible {
	outline: none;
}

/* The ring around the card only shows for keyboard users (Tab), not
 * after a mouse click or a tap. */

.wpost:has(:focus-visible) {
	outline: 3px solid var(--wpost-accent, #163e35);
	outline-offset: 3px;
}

.wpost__media {
	position: relative;
	overflow: hidden;
	background: var(--wpost-noimg, #163e35);
}

.wpost__media img,
.wpost .wpost__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wel-can-hover .wposts-zoom-yes .wpost:hover .wpost__img {
	transform: scale(1.06);
}

/* No image: brand color with a soft pattern */
.wpost--noimg .wpost__media {
	background-color: var(--wpost-noimg, #163e35);
	background-image:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 45%),
		radial-gradient(circle at 85% 70%, rgba(107, 203, 194, 0.35) 0, rgba(107, 203, 194, 0) 50%);
}

.wpost__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--wpost-pad, 28px);
}

.wpost__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-top: -2px;
	font-size: 14px;
	line-height: 1.4;
}

.wpost__dot {
	opacity: 0.6;
}

/* Low specificity on purpose, so Elementor's Typography settings always win */
.wpost__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: break-word;
	hyphens: auto;
}

.wpost__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
	-webkit-line-clamp: var(--wpost-lines, 3);
	-webkit-box-orient: vertical;
}

/* "Læs mere →" – plain text that turns into a button on hover */
.wpost__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 12px 0;
	border-radius: var(--wel-r-pill, 999px);
	color: var(--wpost-more, currentColor);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	isolation: isolate;
	transition:
		padding 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
		color 250ms ease;
}

.wpost__more::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--wpost-btn-bg, #163e35);
	opacity: 0;
	transform: scale(0.85);
	transition:
		opacity 250ms ease,
		transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wpost__arrow {
	flex-shrink: 0;
	font-size: 1.15em;
	transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Image darkens a little on hover */
.wpost__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0b1f1a;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.wel-can-hover .wpost:hover .wpost__media::after,
.wel-can-hover .wpost:has(:focus-visible) .wpost__media::after {
	opacity: var(--wpost-dim, 35%);
}

.wel-can-hover .wpost:hover .wpost__more,
.wel-can-hover .wpost:has(:focus-visible) .wpost__more {
	padding: 12px 22px;
	color: var(--wpost-btn-text, #ffffff);
}

.wel-can-hover .wpost:hover .wpost__more::before,
.wel-can-hover .wpost:has(:focus-visible) .wpost__more::before {
	opacity: 1;
	transform: none;
}

/* Image cards: the cut short text (ending in "…") glides open on hover
 * and back. The JS sets the exact height; "is-open" lifts the 3-line cut. */
.wel-can-hover .wposts-full-yes .wpost--overlay .wpost__excerpt {
	max-height: calc(var(--wpost-lines, 3) * 1.5em);
	max-height: calc(var(--wpost-lines, 3) * 1lh);
	transition: max-height var(--wpost-text-speed, 600ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wel-can-hover .wposts-full-yes .wpost--overlay .wpost__excerpt.is-open {
	display: block;
	-webkit-line-clamp: unset;
}

/* Round arrow in the top right corner – only on computers with a mouse */
.wpost__corner {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--wpost-corner-size, 48px);
	height: var(--wpost-corner-size, 48px);
	border-radius: 50%;
	background: var(--wpost-corner-bg, #ffffff);
	color: var(--wpost-corner-color, #163e35);
	font-size: calc(var(--wpost-corner-size, 48px) * 0.42);
	box-shadow: 0 6px 20px rgba(16, 25, 33, 0.18);
	opacity: 0;
	transform: translate(-8px, 8px) scale(0.8);
	pointer-events: none;
	transition:
		opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wpost__corner svg {
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wel-can-hover .wpost__corner {
	display: inline-flex;
}

.wel-can-hover .wpost:hover .wpost__corner,
.wel-can-hover .wpost:has(:focus-visible) .wpost__corner {
	opacity: 1;
	transform: none;
}

.wel-can-hover .wpost:hover .wpost__corner svg {
	transform: translate(1px, -1px);
}

/* ---------- Image card ---------- */
.wpost--overlay {
	justify-content: flex-end;
	aspect-ratio: var(--wpost-ratio, 4 / 5);
	color: var(--wpost-on-image, #ffffff);
	background: var(--wpost-noimg, #163e35);
}

.wpost--overlay .wpost__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

/* Soft blur that fades in towards the bottom */
.wpost__blur {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	height: var(--wpost-shade-h, 65%);
	-webkit-backdrop-filter: blur(var(--wpost-blur, 14px));
	backdrop-filter: blur(var(--wpost-blur, 14px));
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
	mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
	pointer-events: none;
}

/* Color fade for readable text */
.wpost__shade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: var(--wpost-shade-h, 65%);
	background: linear-gradient(to top, var(--wpost-shade, #163e35) 0%, transparent 100%);
	opacity: var(--wpost-shade-o, 90%);
	pointer-events: none;
}

.wpost--overlay .wpost__title,
.wpost--overlay .wpost__excerpt,
.wpost--overlay .wpost__info {
	color: var(--wpost-on-image, #ffffff);
}

.wpost--overlay .wpost__excerpt {
	opacity: 0.88;
}

.wpost--overlay .wpost__info {
	opacity: 0.75;
}

.wpost--overlay .wpost__more {
	color: var(--wpost-more, var(--wpost-on-image, #ffffff));
}

.wpost--overlay .wpost__more::before {
	background: var(--wpost-btn-bg, #ffffff);
}

.wel-can-hover .wpost--overlay:hover .wpost__more,
.wel-can-hover .wpost--overlay:has(:focus-visible) .wpost__more {
	color: var(--wpost-btn-text, #163e35);
}

/* Big first post: two columns wide, same row height */
.wpost--featured {
	grid-column: span 2;
}

.wpost--overlay.wpost--featured {
	aspect-ratio: auto;
	height: 100%;
	min-height: 420px;
}

/* ---------- Classic card ---------- */
.wpost--classic {
	background: var(--wpost-bg, #eff8f6);
	color: var(--wpost-text, #101921);
}

.wpost--classic .wpost__media {
	flex-shrink: 0;
	aspect-ratio: var(--wpost-img-ratio, 16 / 10);
}

.wpost--classic .wpost__body {
	flex: 1 1 auto;
}

.wpost--classic .wpost__info {
	color: var(--wpost-muted, #55606a);
}

/* Classic: the link always sits at the bottom of the card */
.wpost--classic .wpost__more {
	margin-top: auto;
	color: var(--wpost-more, var(--wpost-accent, #163e35));
}

.wpost--classic.wpost--featured .wpost__media {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: 240px;
}

/* ---------- Job card (Webbler Jobs) ---------- */
.wposts-wrap--job .wposts {
	grid-template-columns: repeat(var(--wpost-cols, 1), minmax(0, 1fr));
	gap: var(--wpost-gap, 16px);
}

.wpost.wjob {
	flex-direction: row;
	align-items: center;
	gap: 40px;
	padding: 24px 64px;
	border: var(--wjob-bw, 2px) solid var(--wjob-border, rgba(107, 203, 194, 0.55));
	border-radius: var(--wpost-r, var(--wel-r-md, 24px));
	background: var(--wjob-bg, #ffffff);
	color: var(--wjob-text, #163e35);
	transition:
		border-color 250ms ease,
		background-color 250ms ease,
		box-shadow 300ms ease,
		transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wjob__logo {
	flex: 0 0 var(--wjob-logo-w, 150px);
	max-width: var(--wjob-logo-w, 150px);
	line-height: 0;
}

.wjob__logo img,
.wjob .wjob__logo-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}

.wjob__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wjob-title-gap, 10px);
	min-width: 0;
}

.wjob__title {
	color: var(--wjob-text, #163e35);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
}

.wjob__rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wjob__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
}

.wjob__label {
	color: var(--wjob-text, #163e35);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
}

.wjob__value,
.wjob__date {
	color: var(--wjob-text, #163e35);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

.wjob__deadline {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	text-align: right;
}

.wjob__more {
	display: none;
}

/* Right-side fields (fx. deadline): name above value */
.wjob__side-item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.wjob__side-item + .wjob__side-item {
	margin-top: 10px;
}

/* "Only the title" is clickable */
.wjob--link-title .wpost__link::after {
	content: none;
}

.wjob--link-title .wpost__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wjob--link-title .wpost__link:focus-visible {
	outline: 2px solid var(--wjob-text, #163e35);
	outline-offset: 2px;
}

.wjob__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Arrow at the right edge, slides in on hover */
.wjob__go {
	position: absolute;
	top: 50%;
	right: 22px;
	display: none;
	color: var(--wjob-text, #163e35);
	font-size: 22px;
	line-height: 0;
	opacity: 0;
	transform: translate(-8px, -50%);
	transition:
		opacity 250ms ease,
		transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wel-can-hover .wjobs-arrow-yes .wjob__go {
	display: block;
}

.wel-can-hover .wpost.wjob--link-card:hover,
.wel-can-hover .wpost.wjob--link-card:has(:focus-visible) {
	border-color: var(--wjob-hover-border, #6bcbc2);
	background: var(--wjob-hover-bg, var(--wjob-bg, #ffffff));
	box-shadow: 0 12px 32px rgba(22, 62, 53, 0.08);
	transform: translateY(-2px);
}

.wel-can-hover .wpost.wjob--link-card:hover .wjob__go,
.wel-can-hover .wpost.wjob--link-card:has(:focus-visible) .wjob__go {
	opacity: 1;
	transform: translate(0, -50%);
}

.wpost.wjob:has(:focus-visible) {
	outline: none;
}

/* Stacked on small screens */
@media (max-width: 767px) {
	.wpost.wjob {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}

	.wjob__logo {
		flex-basis: auto;
		width: min(var(--wjob-logo-w, 150px), 120px);
	}

	.wjob__deadline {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		text-align: left;
	}

	.wjob__side-item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
	}

	.wjob__side-item + .wjob__side-item {
		margin-top: 0;
	}
}

@media (max-width: 1024px) {
	.wjobs-stack-tablet .wpost.wjob {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.wjobs-stack-tablet .wjob__deadline {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		text-align: left;
	}

	.wjobs-stack-tablet .wjob__side-item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
	}
}

/* ---------- Filter buttons ---------- */
.wposts__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.wposts-wrap .wposts__chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border: 1px solid var(--wpost-line, #d6e0de);
	border-radius: var(--wel-r-pill, 999px);
	color: var(--wpost-text, #101921);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.wposts-wrap .wposts__chip:hover {
	border-color: var(--wpost-accent, #163e35);
	color: var(--wpost-text, #101921);
}

.wposts-wrap .wposts__chip.is-active {
	border-color: var(--wpost-accent, #163e35);
	background: var(--wpost-accent, #163e35);
	color: var(--wpost-accent-text, #ffffff);
}

.wposts-wrap .wposts__chip:focus-visible,
.wposts-wrap .wposts__page:focus-visible,
.wposts-wrap .wposts__more:focus-visible {
	outline: 2px solid var(--wpost-accent, #163e35);
	outline-offset: 2px;
}

/* ---------- Page numbers / load more ---------- */
.wposts__paging {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 40px;
}

.wposts__paging[hidden] {
	display: none;
}

.wposts-wrap .wposts__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wpost-line, #d6e0de);
	border-radius: var(--wel-r-pill, 999px);
	color: var(--wpost-text, #101921);
	font-size: 16px;
	text-decoration: none;
}

.wposts-wrap .wposts__page:hover {
	border-color: var(--wpost-accent, #163e35);
	color: var(--wpost-text, #101921);
}

.wposts-wrap .wposts__page.is-current {
	border-color: var(--wpost-accent, #163e35);
	background: var(--wpost-accent, #163e35);
	color: var(--wpost-accent-text, #ffffff);
}

.wposts__gap {
	padding: 0 4px;
	color: var(--wpost-muted, #55606a);
}

.wposts-wrap .wposts__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--wel-r-pill, 999px);
	background: var(--wpost-accent, #163e35);
	color: var(--wpost-accent-text, #ffffff);
	font: inherit;
	font-size: 18px;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.wposts-wrap .wposts__more:hover {
	opacity: 0.9;
}

.wposts__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: wposts-spin 700ms linear infinite;
}

.wposts-wrap.is-loading .wposts__spinner {
	display: inline-block;
}

.wposts-wrap.is-loading .wposts__more {
	cursor: progress;
}

.wposts-wrap.is-filtering .wposts {
	opacity: 0.4;
	transition: opacity 150ms ease;
}

@keyframes wposts-spin {
	to { transform: rotate(360deg); }
}

/* New cards from "Load more" fade in */
.wpost.is-new {
	animation: wposts-in 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes wposts-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.wpost--featured {
		grid-column: auto;
	}

	.wpost--overlay.wpost--featured {
		height: auto;
		min-height: 0;
		aspect-ratio: var(--wpost-ratio, 4 / 5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpost *,
	.wpost.is-new {
		transition: none !important;
		animation: none !important;
	}
}