/* Block Thông điệp (Figma "About us" – Frame 2147231121, "What drives us") */

.block-quotes {
	isolation: isolate;
}

/* Mỗi từ một dòng, căn giữa phía sau các card. */
.block-quotes__decor {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: min-content;
	color: #e3e3e3;
	white-space: normal;
	opacity: 1;
	transform: translate(-50%, -50%);
}

.block-quotes__figure {
	padding-inline: clamp(0px, 5vw, 92px);
}

.block-quotes__list {
	display: grid;
	gap: clamp(40px, 4vw, 72px) 24px;
	margin: 0;
}

@media (min-width: 1024px) {
	.block-quotes__list {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
		row-gap: clamp(64px, 6vw, 120px);
	}

	.quote-card:nth-child(4n + 1) { grid-column: 1 / span 5; }
	.quote-card:nth-child(4n + 2) { grid-column: 8 / span 5; margin-top: clamp(32px, 4.4vw, 84px); }
	.quote-card:nth-child(4n + 3) { grid-column: 2 / span 5; }
	.quote-card:nth-child(4n + 4) { grid-column: 7 / span 5; margin-top: clamp(40px, 6.7vw, 128px); }
}

/* Nền #E9E1D8 mờ 70% như Figma (feedback vòng 3): chữ nền "What drives us" phía sau nhìn xuyên qua card. */
.quote-card {
	--quote-size: clamp(28px, 2.08vw, 40px); /* bề ngang dấu ngoặc (Figma 40 × 35) */
	position: relative;
	padding: clamp(20px, 1.67vw, 32px) clamp(24px, 2.08vw, 40px);
	border-radius: var(--radius-md);
	background: rgb(233 225 216 / 0.7);
	font-size: clamp(15px, 0.94vw, 18px);
	line-height: 1.5;
	color: var(--color-text);
}

/* Dấu ngoặc kép (hình vector trong Figma, không phụ thuộc font): nằm trên cùng lớp với chữ, không bị nền card che / làm mờ.
   Mở: cách mép trái 20, nhô lên 19 trên mép trên; đóng: cách mép phải 15, thò xuống 19 dưới mép dưới. */
.quote-card::before,
.quote-card::after {
	content: "";
	position: absolute;
	width: var(--quote-size);
	aspect-ratio: 40 / 35;
	background: #9a9a9a;
	-webkit-mask: var(--quote-glyph) center / contain no-repeat;
	mask: var(--quote-glyph) center / contain no-repeat;
}

.quote-card::before {
	--quote-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 35'%3E%3Cpath d='M0 20.15 9.38 0h7.85l-6.46 18.46h5.54v16.31H0zm22.77 0L32.15 0H40l-6.46 18.46h5.54v16.31H22.77z'/%3E%3C/svg%3E");
	top: calc(var(--quote-size) * -0.475);
	left: calc(var(--quote-size) * 0.5);
}

.quote-card::after {
	--quote-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 35'%3E%3Cpath d='M40 14.62 30.62 34.77h-7.85l6.46-18.46h-5.54V0H40zm-22.77 0L7.85 34.77H0l6.46-18.46H.92V0h16.31z'/%3E%3C/svg%3E");
	right: calc(var(--quote-size) * 0.375);
	bottom: calc(var(--quote-size) * -0.475);
}

.block-quotes__author {
	margin-top: clamp(48px, 4vw, 80px);
	font-family: var(--font-display);
	font-size: clamp(16px, 1.15vw, 22px);
	font-weight: 600;
}

.block-quotes__author::before,
.block-quotes__author::after {
	content: "_";
	margin-inline: 0.3em;
}

.block-quotes__author a {
	text-decoration: none;
}

.block-quotes__author a:hover {
	text-decoration: underline;
}

/* Mobile / tablet (feedback vòng 4): chữ nền "What drives us" nằm trên (1 dòng, không đè sau card), các card xếp dọc,
   so le trái / phải như Figma mobile. */
@media (max-width: 1023px) {
	.block-quotes__decor {
		position: static;
		width: auto;
		margin-bottom: 32px;
		font-size: min(7.6vw, 64px);
		line-height: 1.1;
		text-align: center;
		white-space: normal; /* bản VI dài hơn: xuống dòng */
		text-wrap: balance;
		transform: none;
	}

	.block-quotes__list {
		gap: 40px;
	}

	.quote-card:nth-child(odd) {
		margin-right: 12%;
	}

	.quote-card:nth-child(even) {
		margin-left: 12%;
	}
}