/* =============================================================
 * SECTION POLICIES CIRCLE — tokenized to design contract.
 * Card chứa 4 policy items grid, mỗi item có circle icon
 * (Setago orange) + title + description.
 *
 * Section-local var:
 *   --pc-card-radius — 32px (24px ở mobile <576) là intentional
 *   luxe curvature ngoài --radius-* scale (xl=16, pill=999).
 * ============================================================= */

.section_policies_circle {
	--pc-card-radius: 32px;

	padding: var(--section-py-sm) 0;
}

.section_policies_circle .spc__card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	padding: var(--space-7) var(--space-6);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--pc-card-radius);
	background: var(--color-bg-surface);
}

.section_policies_circle .spc__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section_policies_circle .spc__icon {
	width: 130px;
	height: 130px;
	border-radius: var(--radius-circle);
	background: var(--setago-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-6);
	overflow: hidden;
}
.section_policies_circle .spc__icon img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.section_policies_circle .spc__title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-neutral-900);
	line-height: var(--line-height-snug);
}

.section_policies_circle .spc__desc {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	line-height: var(--line-height-normal);
	font-weight: var(--font-weight-regular);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.section_policies_circle .spc__card {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
		padding: var(--space-6) var(--space-5);
	}
	.section_policies_circle .spc__icon {
		width: 110px;
		height: 110px;
		margin-bottom: var(--space-5);
	}
	.section_policies_circle .spc__icon img {
		width: 56px;
		height: 56px;
	}
}

@media (max-width: 575px) {
	.section_policies_circle {
		--pc-card-radius: 24px;
	}
	.section_policies_circle .spc__card {
		grid-template-columns: 1fr;
		gap: var(--space-5);
		padding: var(--space-5) var(--space-4);
	}
}