/**
 * TruNorth Slider — shared front-end and editor styles.
 *
 * Every themeable value is a custom property so the block's inline style can
 * override it, and so unset colors fall through to the theme's own presets.
 */

.tns-slider {
	--tns-slide-w: 440px;
	--tns-gap: -32px;
	--tns-img-h: 230px;
	--tns-card-radius: 4px;
	--tns-btn-radius: 4px;
	--tns-heading-size: 30px;
	--tns-rate-size: 28px;
	--tns-desc-size: 17px;
	--tns-btn-size: 17px;

	position: relative;
	max-width: 100%;
}

/* ---------------------------------------------------------------- track */

/*
 * Positioned so it is always part of the slides' offset chain — the centring
 * maths measures against it.
 */
.tns-viewport {
	position: relative;
	overflow: hidden;
	padding-block: 24px;
}

.tns-track {
	display: flex;
	align-items: center;
	gap: var(--tns-gap);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.tns-slide {
	flex: 0 0 var(--tns-slide-w);
	width: var(--tns-slide-w);
	max-width: 86vw;
	transition:
		opacity 0.45s ease,
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	opacity: 0.55;
	transform: scale(0.93);
	filter: saturate(0.35);
}

.tns-slide.is-active {
	position: relative;
	z-index: 2;
	opacity: 1;
	transform: scale(1);
	filter: none;
}

/*
 * Copies of the slide list sit either side of the real one so the carousel can
 * keep rotating without ever showing a gap. They are decorative: hidden from
 * assistive tech and out of the tab order.
 */
.tns-slide--clone {
	user-select: none;
	-webkit-user-select: none;
}

.tns-media--empty {
	min-height: var(--tns-img-h);
	background: rgba(0, 0, 0, 0.07);
}

/* ----------------------------------------------------------------- card */

.tns-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--tns-card-bg, var(--wp--preset--color--base, #fff));
	border-radius: var(--tns-card-radius);
	transition: box-shadow 0.45s ease;
}

.tns-slide.is-active .tns-card {
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.tns-media {
	overflow: hidden;
	line-height: 0;
}

.tns-image {
	display: block;
	width: 100%;
	height: var(--tns-img-h);
	object-fit: cover;
}

.tns-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 30px 34px;
}

.tns-heading {
	width: 100%;
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--tns-heading-color, var(--wp--preset--color--primary, #14508f));
	font-size: var(--tns-heading-size);
	font-weight: 700;
	line-height: 1.15;
}

.tns-rate {
	margin: 0 0 14px;
	color: var(--tns-rate-color, #8c8c8c);
	font-size: var(--tns-rate-size);
	font-weight: 400;
	line-height: 1.2;
}

.tns-desc {
	margin: 0 0 26px;
	color: var(--tns-desc-color, #4a4442);
	font-size: var(--tns-desc-size);
	line-height: 1.55;
}

.tns-actions {
	margin-top: auto;
}

/*
 * The button is a plain <a>, so a theme's global link styles land on it with
 * the same weight as a single class. These selectors are deliberately more
 * specific than that, and cover every link state, so the chosen button colors
 * always win — not just on hover.
 */
.tns-slider .tns-card .tns-button,
.tns-slider .tns-card a.tns-button:link,
.tns-slider .tns-card a.tns-button:visited {
	display: inline-block;
	padding: 16px 30px;
	border: 0;
	border-radius: var(--tns-btn-radius);
	background: var(--tns-btn-bg, var(--wp--preset--color--primary, #14508f));
	color: var(--tns-btn-color, #fff);
	font-size: var(--tns-btn-size);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		filter 0.2s ease;
}

/*
 * With no hover colors chosen the default is a brightness lift on the same
 * colors; choosing either one sets --tns-btn-hover-filter to none so the
 * chosen color is exactly what shows.
 */
.tns-slider .tns-card .tns-button:hover,
.tns-slider .tns-card .tns-button:focus,
.tns-slider .tns-card .tns-button:focus-visible,
.tns-slider .tns-card .tns-button:active,
.tns-slider .tns-card a.tns-button:hover,
.tns-slider .tns-card a.tns-button:focus {
	background: var(
		--tns-btn-bg-hover,
		var(--tns-btn-bg, var(--wp--preset--color--primary, #14508f))
	);
	color: var(--tns-btn-color-hover, var(--tns-btn-color, #fff));
	filter: var(--tns-btn-hover-filter, brightness(1.15));
	text-decoration: none;
}

.tns-slider .tns-card .tns-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ----------------------------------------------------------- navigation */

.tns-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 8px;
}

.tns-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--tns-nav-color, var(--wp--preset--color--primary, #14508f));
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.tns-arrow:hover {
	opacity: 0.7;
}

.tns-arrow[disabled] {
	cursor: default;
	opacity: 0.3;
}

.tns-arrow svg {
	width: 24px;
	height: 24px;
}

.tns-dots {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tns-dot {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 2px solid var(--tns-nav-color, var(--wp--preset--color--primary, #14508f));
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tns-dot.is-active {
	background: var(--tns-nav-color, var(--wp--preset--color--primary, #14508f));
}

.tns-arrow:focus-visible,
.tns-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* -------------------------------------------------- motion & responsive */

@media (prefers-reduced-motion: reduce) {
	.tns-track,
	.tns-slide,
	.tns-card {
		transition: none;
	}
}

@media (max-width: 600px) {
	.tns-slider {
		--tns-gap: 12px;
	}

	.tns-slide {
		max-width: 84vw;
	}

	.tns-body {
		padding: 22px 22px 26px;
	}
}