/* GardLand product category landing page. */
.gardland-category-landing {
	--gardland-forest: #123f2b;
	--gardland-green: #4f7f3a;
	--gardland-green-dark: #3c672b;
	background: #fff;
	padding: clamp(18px, 2.2vw, 34px) clamp(12px, 2vw, 32px) clamp(48px, 6vw, 88px);
}

.gardland-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.25vw, 20px);
	width: min(1500px, 100%);
	margin-inline: auto;
}

.gardland-category-card {
	position: relative;
	isolation: isolate;
	min-height: clamp(250px, 20vw, 330px);
	overflow: hidden;
	background: #f5f7f5;
	border: 1px solid #edf0ed;
	border-radius: 15px;
	box-shadow: 0 8px 24px rgba(18, 63, 43, .055);
}

.gardland-category-card__image,
.gardland-category-card__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gardland-category-card__image {
	z-index: -2;
	object-fit: cover;
	object-position: center;
	transition: transform .35s ease;
}

.gardland-category-card__shade {
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, .99) 0%,
		rgba(255, 255, 255, .97) 28%,
		rgba(255, 255, 255, .82) 44%,
		rgba(255, 255, 255, .2) 66%,
		rgba(255, 255, 255, 0) 78%
	);
}

.gardland-category-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 54%;
	min-height: inherit;
	padding: clamp(24px, 2.4vw, 40px);
}

.gardland-category-card__title {
	margin: 0 0 18px;
	color: var(--gardland-forest);
	font-family: inherit;
	font-size: clamp(20px, 1.55vw, 27px);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.gardland-category-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	min-height: 42px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--gardland-green);
	box-shadow: 0 6px 16px rgba(79, 127, 58, .2);
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gardland-category-card__button:hover,
.gardland-category-card__button:focus {
	background: var(--gardland-green-dark);
	box-shadow: 0 8px 20px rgba(60, 103, 43, .28);
	color: #fff !important;
	transform: translateY(-1px);
}

.gardland-category-card__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--gardland-forest);
}

.gardland-category-card:hover .gardland-category-card__image {
	transform: scale(1.025);
}

@media (max-width: 1099px) {
	.gardland-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gardland-category-card {
		min-height: clamp(250px, 32vw, 320px);
	}
}

@media (max-width: 679px) {
	.gardland-category-landing {
		padding-inline: 10px;
	}

	.gardland-category-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.gardland-category-card {
		min-height: 245px;
		border-radius: 12px;
	}

	.gardland-category-card__shade {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, .99) 0%,
			rgba(255, 255, 255, .96) 36%,
			rgba(255, 255, 255, .58) 58%,
			rgba(255, 255, 255, 0) 82%
		);
	}

	.gardland-category-card__content {
		width: 62%;
		padding: 24px;
	}

	.gardland-category-card__title {
		margin-bottom: 14px;
		font-size: clamp(19px, 5.2vw, 23px);
	}

	.gardland-category-card__button {
		min-height: 40px;
		padding-inline: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gardland-category-card__image,
	.gardland-category-card__button {
		transition: none;
	}
}