/* ============================================================
   Section 5 — Trust Values | desktop: #4005:8632 | tablet: #4005:8752
   ============================================================ */

.r14-track .trust-values {
	/* padding-top 0: section phía trên đã có padding-bottom, không cộng thêm khoảng trên */
	padding: 0 var(--var-20) var(--var-140);
	display: flex;
	justify-content: space-between;
	background-color: var(--color-2nd-bg);
}

.r14-track .trust-values__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.r14-track .trust-values__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--var-40);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.r14-track .trust-values__heading-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--var-28);
	width: 100%;
}

.r14-track .trust-values__title-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.r14-track .trust-values__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.15em;
	text-align: center;
	color: var(--color-1st-fg);
	margin: 0;
}

.r14-track .trust-values__stats {
	display: flex;
	align-items: center;
	gap: var(--var-80);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.r14-track .trust-values__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--var-12);
	padding: var(--var-24) 0;
	flex: 1 1 0%;
}

.r14-track .trust-values__stat-value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h2);
	line-height: 1.15em;
	text-align: center;
	color: var(--color-1st-fg);
}

.r14-track .trust-values__stat-label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4em;
	text-align: center;
	color: var(--color-1st-fg);
}

.r14-track .trust-values__media {
	position: relative;
	width: calc(100% + var(--var-20) * 2);
	margin-inline: calc(-1 * var(--var-20));
	margin-top: var(--var-80);
}

.r14-track .trust-values__bg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 842;
	object-fit: cover;
}

.r14-track .trust-values__bg--laptop {
	display: none;
}

.r14-track .trust-values__bg--tablet {
	display: none;
}

.r14-track .trust-values__bg--mobile {
	display: none;
}

/* derived: Figma places this row absolute (y offset over the photo); reproduced here as an
   absolutely-positioned block pinned to the media's bottom edge so the cards' bottom always
   lines up with the photo's bottom regardless of how tall the card content grows */
.r14-track .trust-values__cards {
	display: flex;
	justify-content: center;
	gap: var(--var-40);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.r14-track .trust-values__cards-row {
	display: contents;
}

.r14-track .trust-values__card {
	display: flex;
	flex-direction: column;
	gap: var(--var-20);
	flex: 1 1 0%;
}

.r14-track .trust-values__card-icon-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--var-60);
	height: var(--var-60);
	background-color: var(--color-2nd-bg);
	border-radius: 50%;
}

.r14-track .trust-values__card-icon {
	width: var(--var-32);
	height: var(--var-32);
}

.r14-track .trust-values__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
}

.r14-track .trust-values__card-text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--var-16);
}

.r14-track .trust-values__card-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h6);
	line-height: 1.15em;
	text-align: left;
	color: var(--color-1st-fg);
	margin: 0;
}

.r14-track .trust-values__card-desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4em;
	text-align: left;
	color: var(--color-2nd-fg);
	margin: 0;
}

/* ============================================================
   Laptop (max-width: 1400px, above the 1024px tablet breakpoint) — traced vs #4005:8678:
   1) graphic image: distinct fixed 1336x840 asset (not a crop of the desktop 1920x842 photo)
   2) cards: 2x2 grid (same row/column structure as tablet) instead of desktop's single row of 4
   ============================================================ */
@media (max-width: 1400px) {
	.r14-track .trust-values__bg--desktop {
		display: none;
	}

	.r14-track .trust-values__bg--laptop {
		display: block;
		aspect-ratio: 1336 / 840;
	}

	.r14-track .trust-values__cards {
		flex-direction: column;
	}

	.r14-track .trust-values__cards-row {
		display: flex;
		gap: var(--var-40);
	}
}

/* ============================================================
   Tablet — traced tabletDiffs vs #4005:8752:
   1) trust-values row: absolute overlay (desktop) -> normal flow, 2x2 grid (tablet)
   2) content-wrapper (stats): fixed width 1400 (desktop) -> fill/stretch (tablet)
   3) graphic image: fixed 1920x842 (desktop) -> fill-width x 500 fixed height (tablet), separate asset
   4) content-wrapper SLOT gains an explicit gap: 40px (matches .trust-values__inner having no gap on desktop
      because desktop separates via absolute overlap; tablet needs the gap for normal flow)
   ============================================================ */
@media (max-width: 1024px) {
	.r14-track .trust-values {
		padding-block: 0 var(--var-72);
	}

	.r14-track .trust-values__inner {
		gap: var(--var-40);
	}

.r14-track .trust-values__title {
		max-width: 320px;
	}

	.r14-track .trust-values__stats {
		max-width: 100%;
	}

	.r14-track .trust-values__bg--desktop {
		display: none;
	}

	.r14-track .trust-values__bg--laptop {
		display: none;
	}

	.r14-track .trust-values__bg--tablet {
		display: block;
		aspect-ratio: auto;
		height: 500px; /* hard_code: 500px, no token match (figma dimensions.height: 500 fixed, tablet) */
	}

	.r14-track .trust-values__media {
		margin-top: 0;
	}

	.r14-track .trust-values__cards {
		flex-direction: column;
		max-width: 100%;
		padding-inline: var(--var-20);
		margin-top: var(--var-40);
		position: static;
	}

	.r14-track .trust-values__cards-row {
		display: flex;
		gap: var(--var-40);
	}
}

/* ============================================================
   Mobile — traced mobileDiffs vs #4005:8794 (section-wrapper, device=mobile) / #4005:8524 (trust-values, device=mobile):
   1) stats row: horizontal row w/ gap 80 (tablet) -> stacked column, no row gap, spacing carried by each
      stat item's own 24px vertical padding (mobile "hero/support-features" frame has no gap set)
   2) graphic image: fill-width x 500 fixed height (tablet) -> fill-width x 470 fixed-ratio, separate asset
   3) cards: 2x2 grid via cards-row (tablet) -> single column, cards-row direction column (mobile
      trust-values component is one column with gap 40 all the way down, no 2-up rows)
   ============================================================ */
@media (max-width: 768px) {
	.r14-track .trust-values__stats {
		flex-direction: column;
		gap: 0;
	}

	.r14-track .trust-values__bg--tablet {
		display: none;
	}

	.r14-track .trust-values__bg--mobile {
		display: block;
		aspect-ratio: 390 / 470;
		height: auto;
	}

	.r14-track .trust-values__cards-row {
		flex-direction: column;
	}
}