/* Technology — horizontal slider of equipment cards. */

.technology { padding-inline: 0; }

.technology__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	max-width: var(--container);
	margin: 0 auto 40px;
	padding: 0 var(--gutter-mobile);
}

.technology__head .section__title { max-width: 631px; }

.technology__arrows {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.icon-btn--square {
	width: 48px;
	height: 48px;
	flex-basis: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-neutral-6);
}

.icon-btn--square img { width: 11px; height: 14.667px; }

.technology__track {
	display: flex;
	gap: 30px;
	padding: 0 var(--gutter-mobile);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * Without this the mandatory snap pulls the first card flush to the
	 * scrollport edge, swallowing the left gutter and pushing the slides out
	 * of alignment with the section headline.
	 */
	scroll-padding-inline: var(--gutter-mobile);
	scrollbar-width: none;
}

.technology__track::-webkit-scrollbar { display: none; }

.tech-card {
	display: flex;
	align-items: center;
	gap: 33px;
	width: 100%;
	flex: 0 0 min(100%, 655px);
	padding: 15px 15px 15px 30px;
	scroll-snap-align: start;
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.tech-card__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 15px 0;
	min-width: 0;
}

.tech-card__title {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--h6-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.38px;
}

.tech-card__desc {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: -0.32px;
}

.tech-card__image {
	width: 40%;
	max-width: 261px;
	flex-shrink: 0;
	aspect-ratio: 261 / 252;
	object-fit: cover;
	border: 1px solid #eaedf3;
	border-radius: 16px;
	background: var(--color-white);
}

@media (min-width: 768px) {
	.technology__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.tech-card__text { width: 316px; flex-shrink: 0; }
	.tech-card__image { width: 261px; }
}

@media (min-width: 1024px) {
	/* Same stacking trap as cases: the head owns the gutter, so it needs the
	 * full 1440 box, not the 1340 inner container. */
	.technology__head {
		max-width: calc(var(--container) + var(--gutter) * 2);
		padding-inline: var(--gutter);
		margin-bottom: 60px;
	}

	/*
	 * Two cards per view, no third peeking in. Figma lets the track run to the
	 * frame edge (a ~50px sliver of card three shows at 1440), but two whole
	 * cards read better, so the track is capped to the container and each card
	 * takes half of it minus the gap. At 1440 that lands on the Figma 655px.
	 */
	.technology__track {
		max-width: calc(var(--container) + var(--gutter) * 2);
		margin-inline: auto;
		scroll-padding-inline: var(--gutter);
	}

	.tech-card { flex-basis: calc((100% - 30px) / 2); }
}

/* Phones: arrows under the track, as in the reviews slider. */
@media (max-width: 767px) {
	.technology { display: flex; flex-direction: column; }
	.technology__head { display: contents; }
	.technology__head .section__title {
		order: 1;
		margin-bottom: 40px;
		padding-inline: var(--gutter-mobile);
	}
	.technology__track { order: 2; }
	.technology__arrows {
		order: 3;
		justify-content: center;
		margin-top: 30px;
	}
}