/* Reference: user-provided Figma screenshots (2026-08-02), saved to
   amazon-design-refs/sections-v2/sustainability-1.png and sustainability-2.png
   — this section was missing from the original amazon-design-refs/ hand-crop
   set (see design.md Decision 13). Real copy transcribed directly from the
   screenshots (9-item objectives list, 5 ESG categories + 10 sub-items,
   EcoVadis "Committed" badge text). User confirmed (2026-08-02): build the
   radial diagram as a real CSS diagram, not a placeholder image.

   Wheel geometry: 5 categories evenly spaced (72° apart, matching the
   reference's near-pentagon arrangement), each with 2 sub-items at ±25°
   from its own angle and a larger radius — a clean, maintainable symmetric
   approximation of the reference's real (slightly human-placed) positions,
   not a pixel-trace. Uses the standard CSS "rotate, translate out, rotate
   back" technique (per-item --rds-wheel-angle custom property, set by
   render.php from each category's index) so every label stays upright
   regardless of its position around the circle. */

.rds-sustainability {
	position: relative;
	width: 100%;
	background: #0c0a14;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (max-width: 900px) {
	.rds-sustainability {
		grid-template-columns: 1fr;
	}
}

.rds-sustainability__ethos-heading {
	margin: 0 0 1rem;
	color: #9d77e9;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.rds-sustainability__ethos-intro {
	margin: 0 0 1.25rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	font-size: clamp(0.9rem, 1.3vw, 1rem);
	line-height: 1.5;
	max-width: 32rem;
}

.rds-sustainability__objectives-label {
	margin: 0 0 0.75rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(0.9rem, 1.3vw, 1rem);
}

.rds-sustainability__objectives {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	font-size: clamp(0.85rem, 1.2vw, 0.95rem);
	line-height: 1.6;
}

.rds-sustainability__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background: #f2ede4;
	border: 3px solid #4caf7d;
	text-align: center;
	padding: 0.5rem;
	box-sizing: border-box;
}

.rds-sustainability__badge-committed {
	color: #8a6d3b;
	font-weight: 700;
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rds-sustainability__badge-name {
	color: #1a1a2e;
	font-weight: 700;
	font-size: 1.1rem;
	font-family: "Ember Modern Display", sans-serif;
}

.rds-sustainability__badge-rating {
	color: #555;
	font-size: 0.55rem;
}

.rds-sustainability__badge-date {
	color: #1a1a2e;
	font-weight: 700;
	font-size: 0.6rem;
}

.rds-sustainability__wheel {
	position: relative;
	width: 100%;
	max-width: 34rem;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	container-type: size;
}

.rds-sustainability__wheel-ring {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	border: 1px solid rgba(157, 119, 233, 0.35);
}

.rds-sustainability__wheel-ring::before {
	content: "";
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	border: 1px solid rgba(157, 119, 233, 0.2);
}

.rds-sustainability__wheel-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42%;
	aspect-ratio: 1;
	clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
	background: linear-gradient(135deg, #c76bd8 0%, #7c4de0 50%, #4a2fb0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 40px rgba(157, 119, 233, 0.5);
}

.rds-sustainability__wheel-center span {
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(0.75rem, 1.4vw, 1rem);
	text-align: center;
	max-width: 55%;
	transform: translateY(18%);
}

.rds-sustainability__wheel-item {
	/* Positioned via the standard "rotate, translate out along Y using
	   container-relative cqh units, rotate back" technique — cqh (not %,
	   which is relative to the item's OWN tiny height, not the wheel's
	   radius; using plain % here was a real bug, verified via screenshot:
	   every label collapsed near the center instead of spreading around the
	   circle) keeps every label upright regardless of its angle, and scales
	   correctly with the wheel's own size since .rds-sustainability__wheel
	   is a size container (container-type: size). */
	position: absolute;
	top: 50%;
	left: 50%;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	text-align: center;
	white-space: nowrap;
	font-size: clamp(0.65rem, 1.1vw, 0.85rem);
}

.rds-sustainability__wheel-item--category {
	font-weight: 700;
	background: rgba(10, 8, 20, 0.85);
	border-radius: 0.5rem;
	padding: 0.35rem 0.75rem;
	transform: translate(-50%, -50%) rotate(var(--rds-wheel-angle)) translateY(-30cqh)
		rotate(calc(-1 * var(--rds-wheel-angle)));
}

.rds-sustainability__wheel-item--sub {
	font-weight: 400;
	transform: translate(-50%, -50%) rotate(var(--rds-wheel-angle)) translateY(-44cqh)
		rotate(calc(-1 * var(--rds-wheel-angle)));
}