/* NordicTrend — content-block widgets.
 * Styles the six reusable Elementor blocks (marquee, logos, video+text,
 * image+text, before/after, scrolling before/after) plus the shared block
 * background utilities. Tokens only — never hardcoded colours. Motion is quiet,
 * no bounce; every auto-animation is switched off under reduced-motion.
 */

/* ============================================================ block shell + bg utilities */
.nt-bg--linen    { background: var(--linen); }
.nt-bg--white    { background: var(--paper); }
.nt-bg--pine-050 { background: var(--pine-050); }
.nt-bg--pine-900 { background: var(--pine-900); }

/* Dark block: invert text + soften muted/border tones so copy stays legible. */
.nt-bg--pine-900 .nt-block,
.nt-bg--pine-900 .nt-block :where(h1, h2, h3, h4, h5, p, span, figcaption, a) {
	color: var(--ink-inv);
}

.nt-block {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ============================================================ shared marquee mechanics */
@keyframes nt-marquee-25 {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

@keyframes nt-marquee-50 {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================ 1. scrolling text — .nt-mq */
.nt-mq {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.nt-mq__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: nt-marquee-25 var(--nt-mq-speed, 28s) linear infinite;
}

.nt-mq__item {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--text-strong);
	padding-inline: var(--space-3);
}

.nt-mq__sep {
	color: var(--brand);
	font-size: var(--text-md);
	line-height: 1;
}

/* ============================================================ 2. logo carousel — .nt-logos */
.nt-logos {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nt-logos__track {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	will-change: transform;
	animation: nt-marquee-50 var(--nt-logos-speed, 30s) linear infinite;
}

.nt-logos__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.nt-logos__item img {
	height: var(--nt-logos-h, 40px);
	width: auto;
	object-fit: contain;
}

.nt-logos.is-grayscale .nt-logos__item img {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}

.nt-logos.is-grayscale .nt-logos__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* ============================================================ 3 + 4. split rows — .nt-vt / .nt-it */
.nt-vt,
.nt-it {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
}

/* Flip column order so the media sits on the right. */
.nt-vt.is-right .nt-vt__media,
.nt-it.is-right .nt-it__media {
	order: 2;
}

.nt-vt__media,
.nt-it__media {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--surface-sunken);
}

.nt-vt__media img,
.nt-vt__video,
.nt-it__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-vt__eyebrow,
.nt-it__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 12px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--text-muted);
}

.nt-vt__title,
.nt-it__title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	margin-bottom: var(--space-4);
}

.nt-vt__body,
.nt-it__body {
	color: var(--text-body);
	font-size: var(--text-md);
	line-height: var(--lh-relaxed);
}

.nt-vt__body > * + *,
.nt-it__body > * + * {
	margin-top: var(--space-3);
}

.nt-vt__btn,
.nt-it__btn {
	display: inline-block;
	margin-top: var(--space-5);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: var(--on-brand);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background var(--dur-base) var(--ease-standard);
}

.nt-vt__btn:hover,
.nt-it__btn:hover {
	background: var(--brand-hover);
	text-decoration: none;
}

/* On dark blocks keep the button readable. */
.nt-bg--pine-900 .nt-vt__btn,
.nt-bg--pine-900 .nt-it__btn {
	background: var(--paper);
	color: var(--ink);
}

@media (max-width: 820px) {
	.nt-vt,
	.nt-it {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.nt-vt.is-right .nt-vt__media,
	.nt-it.is-right .nt-it__media {
		order: 0;
	}

	.nt-vt__title,
	.nt-it__title {
		font-size: var(--text-xl);
	}
}

/* ============================================================ 5. before/after slider — .nt-ba */
.nt-ba {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	user-select: none;
	touch-action: pan-y;
	line-height: 0;
}

.nt-ba {
	--nt-ba-pos: 50%;
}

/* "before" is the base layer; it sets the block's intrinsic height. */
.nt-ba__before {
	position: relative;
	width: 100%;
}

.nt-ba__before img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/*
 * "after" overlays the full block but is clipped from the left edge to the
 * handle position. The inner image is pinned to the block's full width so it
 * stays registered with the "before" image while the wrapper width changes.
 */
.nt-ba__after {
	position: absolute;
	inset: 0;
	width: var(--nt-ba-pos);
	overflow: hidden;
}

/*
 * The inner img is sized to the whole .nt-ba block (100% of the positioned
 * ancestor via inset:0 on a same-size box), so clipping the wrapper width
 * never rescales it — it just reveals more or less of the same frame.
 */
.nt-ba__after img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	pointer-events: none;
}

.nt-ba__label {
	position: absolute;
	bottom: var(--space-4);
	z-index: 3;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: rgba(27, 26, 23, 0.62);
	color: var(--ink-inv);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-normal);
	backdrop-filter: blur(4px);
}

.nt-ba__label--before { right: var(--space-4); }
.nt-ba__label--after  { left:  var(--space-4); }

.nt-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--nt-ba-pos, 50%);
	z-index: 4;
	width: 2px;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	border: none;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	cursor: ew-resize;
}

.nt-ba__handle:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.nt-ba__grabber {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
	background: var(--paper);
	box-shadow: var(--shadow-md);
}

/* Twin chevrons inside the grabber. */
.nt-ba__grabber::before,
.nt-ba__grabber::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	border: 2px solid var(--brand);
	border-width: 2px 2px 0 0;
}

.nt-ba__grabber::before {
	left: 11px;
	transform: translateY(-50%) rotate(-135deg);
}

.nt-ba__grabber::after {
	right: 11px;
	transform: translateY(-50%) rotate(45deg);
}

/* ============================================================ 6. scrolling before/after — .nt-bas */
.nt-bas {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.nt-bas__track {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-6);
	will-change: transform;
	animation: nt-marquee-50 var(--nt-bas-speed, 32s) linear infinite;
}

.nt-bas__item {
	flex: 0 0 auto;
	width: 320px;
	margin: 0;
}

.nt-bas__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--surface-sunken);
}

.nt-bas__half {
	position: relative;
	line-height: 0;
}

.nt-bas__half img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.nt-bas__tag {
	position: absolute;
	bottom: var(--space-2);
	left: var(--space-2);
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: rgba(27, 26, 23, 0.62);
	color: var(--ink-inv);
	font-size: 11px;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-normal);
}

.nt-bas__caption {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	color: var(--text-body);
}

/* ============================================================ reduced motion: freeze every auto-marquee */
@media (prefers-reduced-motion: reduce) {
	.nt-mq__track,
	.nt-logos__track,
	.nt-bas__track {
		animation: none;
		transform: none;
	}

	/* Let frozen rows scroll manually instead of clipping content. */
	.nt-mq,
	.nt-logos,
	.nt-bas {
		overflow-x: auto;
	}
}