/**
 * NT Projektai – homepage "NT projektai – Titulinis" widget.
 *
 * The project cards themselves come from nt-projects.css (same card as the
 * /projektai/ listing); this file only lays out the section around them.
 * Every value below is a default that the widget's Style controls override
 * through the custom properties.
 */

.nt-home-projects {
	--nthp-width: 1300px;
	--nthp-pad-y: 100px;
	--nthp-pad-x: 20px;
	--nthp-header-gap: 56px;
	--nthp-gap: 32px;
	--nthp-cols: 3;
	--nthp-align: center;
	--nthp-justify: center;
	--nthp-inline: auto;
	--nthp-btn-bg: #1f5d48;
	--nthp-btn-color: #fff;
	--nthp-btn-bg-hover: #164535;
	--nthp-btn-color-hover: #fff;
	--nthp-btn-radius: 999px;
	--nthp-btn-gap: 56px;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: var(--nthp-pad-y) var(--nthp-pad-x);
	background-color: #fff;
}

.nt-home-projects__inner {
	width: 100%;
	max-width: var(--nthp-width);
	margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.nt-home-projects__header {
	margin: 0 0 var(--nthp-header-gap);
	text-align: var(--nthp-align);
}

.nt-home-projects .nt-home-projects__eyebrow {
	margin: 0 0 16px;
	padding: 0;
	color: #1f5d48;
	font-family: var(--ntp-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
}

.nt-home-projects .nt-home-projects__title {
	max-width: 820px;
	margin: 0 var(--nthp-inline) 18px;
	padding: 0;
	color: #26292a;
	font-family: var(--ntp-font-heading);
	font-size: clamp(34px, 3.4vw, 48px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: none;
}

.nt-home-projects .nt-home-projects__text {
	max-width: 620px;
	margin: 0 var(--nthp-inline);
	padding: 0;
	color: #595c5d;
	font-family: var(--ntp-font-body);
	font-size: 17px;
	line-height: 1.65;
}

/* ------------------------------------------------------------------ */
/* Cards: always centred, so one or two published projects stay balanced */
/* ------------------------------------------------------------------ */

.nt-home-projects__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--nthp-gap) + 16px) var(--nthp-gap);
}

.nt-home-projects__grid > .nt-project-card {
	flex: 0 0 calc((100% - (var(--nthp-cols) - 1) * var(--nthp-gap)) / var(--nthp-cols));
	max-width: calc((100% - (var(--nthp-cols) - 1) * var(--nthp-gap)) / var(--nthp-cols));
}

/* ------------------------------------------------------------------ */
/* Button                                                              */
/* ------------------------------------------------------------------ */

.nt-home-projects__actions {
	display: flex;
	justify-content: var(--nthp-justify);
	margin-top: var(--nthp-btn-gap);
}

.nt-home-projects .nt-home-projects__button,
.nt-home-projects .nt-home-projects__button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--nthp-btn-radius);
	background-color: var(--nthp-btn-bg);
	color: var(--nthp-btn-color);
	font-family: var(--ntp-font-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition:
		background-color var(--ntp-duration) var(--ntp-ease),
		color var(--ntp-duration) var(--ntp-ease);
}

.nt-home-projects .nt-home-projects__button:hover,
.nt-home-projects .nt-home-projects__button:focus-visible {
	background-color: var(--nthp-btn-bg-hover);
	color: var(--nthp-btn-color-hover);
	text-decoration: none;
}

.nt-home-projects .nt-home-projects__button:focus-visible {
	outline: 2px solid var(--nthp-btn-bg);
	outline-offset: 3px;
}

.nt-home-projects__button-arrow {
	display: block;
	flex: 0 0 auto;
	transition: transform var(--ntp-duration) var(--ntp-ease);
}

.nt-home-projects__button:hover .nt-home-projects__button-arrow,
.nt-home-projects__button:focus-visible .nt-home-projects__button-arrow {
	transform: translateX(3px);
}

/* Editor-only selection hint. */
.nt-home-projects .nt-home-projects__notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px dashed #c9b98f;
	border-radius: 10px;
	background: #fbf8f1;
	color: #5b4e2e;
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

/* ------------------------------------------------------------------ */
/* Responsive (Elementor breakpoints)                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.nt-home-projects {
		--nthp-pad-y: 72px;
		--nthp-pad-x: 32px;
		--nthp-header-gap: 44px;
		--nthp-gap: 24px;
		--nthp-cols: 2;
		--nthp-btn-gap: 44px;
	}
}

@media (max-width: 767px) {
	.nt-home-projects {
		--nthp-pad-y: 56px;
		--nthp-pad-x: 20px;
		--nthp-header-gap: 36px;
		--nthp-cols: 1;
		--nthp-btn-gap: 40px;
	}

	.nt-home-projects .nt-home-projects__eyebrow {
		margin-bottom: 12px;
		font-size: 13px;
	}

	.nt-home-projects .nt-home-projects__title {
		font-size: 32px;
	}

	.nt-home-projects .nt-home-projects__text {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nt-home-projects .nt-home-projects__button,
	.nt-home-projects__button-arrow {
		transition: none;
	}

	.nt-home-projects__button:hover .nt-home-projects__button-arrow,
	.nt-home-projects__button:focus-visible .nt-home-projects__button-arrow {
		transform: none;
	}
}