/* ==========================================================================
   Homepage products
   Block: .home-products
   ========================================================================== */

.home-products {
	padding-block: var(--space-10) var(--space-11);
	color: var(--color-on-dark);
	background: var(--color-primary);
}

.home-products__header {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.home-products__title {
	margin: 0;
	font-family: var(--font-display); /* Sora */
	font-size: var(--font-size-5xl); /* 48px */
	font-weight: var(--font-weight-medium); /* 500 */
	font-style: normal;
	letter-spacing: 0;
	line-height: 4.0375rem; /* 64.6px */
	vertical-align: middle;
}

.home-products__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.home-products__intro {
	margin: 0;
	color: rgb(255 255 255 / 0.9);
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
}

.home-products__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.home-products__nav {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.home-products__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-on-dark);
	cursor: pointer;
	opacity: 0.45;
	transition: opacity var(--transition-fast);
}

.home-products__arrow:last-child,
.home-products__arrow:hover,
.home-products__arrow:focus-visible {
	opacity: 1;
}

.home-products__arrow svg {
	display: block;
}

.home-products__viewport {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.home-products__viewport::-webkit-scrollbar {
	display: none;
}

.home-products__card {
	display: grid;
	flex: 0 0 min(67.5rem, 88%); /* ~1080px */
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 1rem; /* 16px */
	background: var(--color-surface);
	color: var(--color-text);
}

.home-products__card-copy {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
}

.home-products__name {
	margin: 0 0 var(--space-2);
	font-family: var(--font-grotesk);
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.06125em;
	line-height: 1;
	text-transform: uppercase;
}

.home-products__tagline {
	margin: 0 0 var(--space-3);
	font-weight: var(--font-weight-semibold);
}

.home-products__card-copy p {
	font-size: var(--font-size-sm);
}

.home-products__inputs-label {
	margin: var(--space-4) 0 var(--space-2);
	font-weight: var(--font-weight-semibold);
}

.home-products__inputs {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem; /* 20px */
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.home-products__input {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	min-width: 3.5rem;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	text-align: center;
}

.home-products__input img {
	display: block;
	width: 3rem; /* 48px */
	height: 3rem;
}

.home-products__card-media {
	min-height: 14rem;
	background: var(--color-navy);
}

.home-products__card-media img {
	width: 100%;
	height: 100%;
	min-height: 14rem;
	object-fit: cover;
}

.home-products__cta.button--sm {
	align-self: flex-start;
	gap: 0.75rem; /* 12px */
	margin-top: auto;
	padding: 0.25rem 0.25rem 0.25rem 1.5rem; /* 4px 4px 4px 24px */
	min-height: 3.25rem; /* 52px */
	border-width: 1.5px;
	border-color: var(--color-primary);
	background-color: var(--color-surface);
	font-family: var(--font-sans); /* Inter */
	font-size: var(--font-size-sm); /* 14px */
	font-style: normal;
	font-weight: var(--font-weight-medium); /* 500 */
	letter-spacing: 0;
	line-height: 1.171875rem; /* 18.75px */
	text-align: center;
	text-transform: none;
	vertical-align: middle;
	color: var(--color-text);
}

.home-products__cta.button--sm:hover {
	border-color: var(--color-primary);
	background-color: var(--color-surface);
	filter: brightness(0.98);
}

.home-products__cta .button__icon {
	width: 2.75rem; /* 44px */
	height: 2.75rem;
	flex-shrink: 0;
	background: var(--color-primary);
	color: var(--color-on-dark);
}

.home-products__cta .button__icon svg {
	display: block;
	width: 0.9375rem; /* 15px */
	height: 0.9375rem;
}

@media (min-width: 64rem) {
	.home-products__header {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: var(--space-8);
	}

	.home-products__aside {
		padding-top: var(--space-1);
		width: 100%;
	}

	.home-products__card {
		grid-template-columns: minmax(17.5rem, 22.5rem) minmax(0, 1fr);
		flex-basis: min(67.5625rem, 85%); /* 1081px */
		height: 27.5rem; /* 440px */
		min-height: 27.5rem;
	}

	.home-products__card-copy {
		padding: 1.75rem 1rem 1.5rem 1.75rem;
	}

	.home-products__card-media {
		margin: 0.9375rem 0.9375rem 0.9375rem 0;
		overflow: hidden;
		border-radius: 0.625rem; /* 10px */
		min-height: 0;
		background: transparent;
	}

	.home-products__card-media img {
		min-height: 0;
		height: 100%;
		border-radius: 0.625rem;
	}
}