/* Pixel-measured against amazon-design-refs/sections/shared-wins-trophies.png
   (1719x3370 reference): section bg #0578FF (the sitewide established accent
   blue, confirmed as an exact match here, not a new color), card #D9D9D9,
   shelf #AEAEAE, trophy silhouette color #0F141A (the sitewide dark bg
   color). Two decorative dark diagonal wedges at the top and bottom of the
   section are a simplified clip-path approximation of the reference's more
   detailed custom shape — a reasonable estimate of a decorative background
   flourish, not a pixel-exact vector trace (same caveat class as corner
   radii elsewhere in this project). Card: two "shelf" rows (3 trophies then
   4, left-aligned with a gap, matching the reference exactly) inside one
   card, plus a small partner-lockup line below. */

.rds-trophies.frames {
	/* Compound selector (not just .rds-trophies), same defensive pattern
	   used for Hero/Journey Cards elsewhere in this plugin: WordPress
	   prints this block's own <style> in <head> BEFORE base.css's <link>,
	   so on a specificity tie alone base.css would win a cascade fight —
	   the extra `.frames` in the selector guarantees this rule's own
	   background always wins regardless of load order, so the section
	   never unexpectedly renders on anything but its own blue (2026-08-06,
	   direct request: "ensure this section always on the blue background"). */
	position: relative;
	width: 100%;
	background: #0578ff;
	padding: clamp(3rem, 15vw, 17.5rem) clamp(1.5rem, 4vw, 3.5rem);
	box-sizing: border-box;
	overflow: hidden;
	padding-bottom: 7vw;
}

/*
.rds-trophies::before,
.rds-trophies::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	background: #0f141a;
	z-index: 0;
	pointer-events: none;
}

.rds-trophies::before {
	top: 0;
	height: 15%;
	clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}
*/

.rds-trophies::after {
	bottom: 0;
	height: 9%;
	clip-path: polygon(0 8%, 89% 10%, 92% 100%, 0 100%);
}

/* User-supplied clip-art wedge, moved here from Last Mile Land (2026-08-11,
   "lets move the clip art to this section .frames rds-trophies"). Unlike
   that section, `.rds-trophies.frames` has `overflow: hidden` (2026-08-06,
   "ensure this section always on the blue background"), so the wedge can't
   bleed past this section's own box the way it did against Presenter
   Interruption — pulled mostly above the section instead (`top: 0`,
   `translateY(-45%)`), so only its lower, narrower point remains visible
   inside the section, reading as a dark accent descending from the top
   edge into the section's own blue background. Same `z-index: 0` as the
   existing `::after` wedge above, so real heading/card content
   (`z-index: 1`) always stays on top of it. */
.rds-trophies__clip-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(-84%);
	z-index: 0;
	pointer-events: none;
}

.rds-trophies__heading,
.rds-trophies__card {
	position: relative;
	z-index: 1;
}

.rds-trophies__heading {
	max-width: min(52rem, calc(100% - 2rem));
	/* Bottom margin moved to `.rds-trophies__hint` below (2026-08-14, "add
	   (Click each trophy to explore)") — the hint now owns the larger gap
	   before the card, matching Case Studies' own heading/hint pattern. */
	margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
}

/* Hint text added (2026-08-14, "add (Click each trophy to explore)"),
   reusing Case Studies' own established heading/hint pattern
   (`.rds-case-studies .rds-case-studies__hint.body-copy`) rather than a new
   one-off — same compound selector for the same load-order specificity fix
   (`.body-copy`'s base.css rule loses to this block's own `<style>`, which
   WordPress prints in `<head>` before base.css's `<link>`, unless beaten
   with a more specific selector). */
.rds-trophies .rds-trophies__hint.body-copy {
	position: relative;
	z-index: 1;
	max-width: min(52rem, calc(100% - 2rem));
	margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: clamp(0.875rem, 2.2vw, 6rem);
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
}

.rds-trophies__card {
	width: min(100%, 74.5rem);
	max-width: 74.5rem;
	margin: 0 auto;
	background: #d9d9d9;
	border-radius: clamp(2rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3.4vw, 2.75rem);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.rds-trophies__shelf {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	background: #aeaeae;
	border-radius: clamp(1.5rem, 3.6vw, 3rem);
	min-height: clamp(8.75rem, 21vw, 18rem);
	padding: clamp(1.25rem, 3vw, 2.75rem) clamp(1.5rem, 3.3vw, 3rem);
	box-sizing: border-box;
}

.rds-trophies__shelf + .rds-trophies__shelf {
	margin-top: clamp(2rem, 5vw, 3.75rem);
}

.rds-trophies__shelf--top {
	justify-content: space-between;
}

.rds-trophies__shelf--bottom {
	justify-content: space-between;
}

.rds-trophies__slot {
	flex: 0 0 auto;
	width: clamp(5rem, 13vw, 9.25rem);
	color: #0f141a;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform 160ms ease;
	appearance: none;
}

.rds-trophies__slot:hover,
.rds-trophies__slot:focus-visible {
	transform: translateY(-0.2rem);
}

.rds-trophies__slot:focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: 0.25rem;
	border-radius: 0.25rem;
}

.rds-trophies__slot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
}

.rds-trophies__slot--spacer {
	visibility: hidden;
	pointer-events: none;
}

.rds-trophies .rds-trophies__slot--spacer-text.body-copy {
	align-self: center;
	margin: 0;
	color: #0f141a;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	cursor: default;
	min-width: 16%;
	transition: opacity 180ms ease;
}

.rds-trophies__slot--spacer-text:hover,
.rds-trophies__slot--spacer-text:focus-visible {
	opacity: 1;
}

p.rds-trophies__slot.rds-trophies__slot--spacer-text.body-copy:hover {
	opacity: 1;
}

.rds-trophies__icon {
    display: block;
    width: 100%;
    max-width: 201px;
    height: auto;
    top: -1px;
    position: relative;
    scale: 1.7;
}

.rds-trophies__partner {
	display: block;
	margin: clamp(1.5rem, 3vw, 3.25rem) auto 0;
	width: clamp(10rem, 22vw, 22rem);
	height: auto;
}

@media ( max-width: 700px ) {
	.rds-trophies {
		padding: 2.75rem 1.5rem 1.625rem;
	}

	.rds-trophies::before,
	.rds-trophies::after {
		display: none;
	}

	.rds-trophies__heading {
		max-width: 31rem;
		margin-bottom: 0.75rem;
	}

	.rds-trophies .rds-trophies__hint.body-copy {
		max-width: 31rem;
		margin-bottom: 2rem;
	}

	.rds-trophies__card {
		border-radius: 2.5rem;
		padding: 1.5rem 1.125rem 2rem;
	}

	.rds-trophies__shelf {
		min-height: 9.75rem;
		padding: 1.375rem 1.125rem 1rem;
		border-radius: 1.75rem;
		gap: 0.75rem;
	}

	.rds-trophies__shelf + .rds-trophies__shelf {
		margin-top: 2.875rem;
	}

	.rds-trophies__slot {
		width: clamp(3rem, 14vw, 3.5rem);
	}

	.rds-trophies__icon {
		position: static;
		scale: 1.25;
	}

	.rds-trophies__partner {
		margin-top: 1.375rem;
		width: 12.25rem;
	}
}

.rds-trophies__overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	/* grid-template-columns: minmax(0, 1fr) auto; */
	/* grid-template-rows: auto 1fr auto; */
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
	padding: clamp(3rem, 7.45vw, 6.25rem);
	box-sizing: border-box;
	    background: rgb(37 44 50 / 98%);
	/* background: #252c32; */
	/* Matched to `.rds-trophies__card`'s own border-radius (was
	   clamp(3rem,7.45vw,6.25rem) — a bigger radius than the card's
	   clamp(2rem,5vw,4rem) despite the overlay sharing the card's exact
	   bounding box via inset:0. A bigger-radius child inside a
	   smaller-radius parent still gets clipped correctly by the parent's
	   overflow:hidden, but the two curves don't line up — the visible
	   result was a gap at each corner where the section's own blue showed
	   through instead of the overlay reaching flush with the card's edge.
	   Matching the radius exactly closes that gap regardless of the exact
	   paint-order mechanics, since both shapes now trace the identical
	   curve. */
	border-radius: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
	color: #ffffff;
	padding-right: 180px;
}

.rds-trophies__overlay[hidden] {
	display: none;
}

.rds-trophies__overlay-copy {
	align-self: start;
	/* max-width: min(54rem, calc(100% - 7rem)); */
	/* margin-top: clamp(0.5rem, 3vw, 3.125rem); */
}

.rds-trophies__overlay-media {
	    display: flex;
    /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
    gap: 138px;
    margin-top: 50px;
    margin-bottom: 50px;
   
}

.rds-trophies__overlay-media:empty {
	display: none;
}

.rds-trophies__overlay-media img {
	display: block;
	width: 100%;
	/* aspect-ratio: 16 / 9; */
	object-fit: cover;
	/* border: 0.125rem solid #0578ff; */
	border-radius:20px;
	/* background: #0f141a; */
}

.rds-trophies__overlay-media--single {
	grid-template-columns: minmax(0, 1fr);
	width: min(100%, 52rem);
}

.rds-trophies__overlay-media--pair {
grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr);
    align-items: center;
    width: min(100%, 39rem);
}

/* Logo icon (first image of the "pair" variant, e.g. the Ignite Tier 1
   logomark) is a near-square vector mark, not a 16:9 photo — the shared
   `.rds-trophies__overlay-media img` rule's `width:100%`/`aspect-ratio:16/9`
   was stretching it into a cropped, oversized shape that overflowed its
   dark rounded container (2026-08-14, "fix this overflow. vector icon image
   should be max 201px. just for that image on the left"). Scoped to only
   the first image so the second (screenshot grid) image is unaffected. */
.rds-trophies__overlay-media--pair img:first-child {
	width: auto;
	max-width: 201px;
	aspect-ratio: auto;
	object-fit: contain;
	background: transparent;
}

.rds-trophies__overlay-media--multi {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	    width: min(100%, 52rem);
}

/* Compound selector so this reliably beats base.css's later-loaded
   `.rds-sub-header { margin: 0 }` at tied specificity (2026-08-06, confirmed
   directly — margin-top computed to 0px with a single-class selector). */
/* 2026-08-14, "trophy overlay, text only, ensure it matches" — the caption
   was rendering via `.sub-header` (64px/400), reading as a near-duplicate
   of the 80px/700 title instead of the reference's clearly smaller,
   lighter parenthetical note. Swapped to the shared `.body-copy` class
   (this plugin's normalized caption/body scale) with the compound selector
   needed to beat `.body-copy`'s own later-loaded base.css default, same
   convention used everywhere else in this plugin. */
.rds-trophies .rds-trophies__overlay-body.body-copy {
	margin-top: clamp(0.75rem, 2vw, 1.5rem);
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	line-height: 1.35;
}

.rds-trophies__overlay-close {
	position: relative;
	justify-self: end;
	width: clamp(3rem, 6vw, 4.5rem);
	height: clamp(3rem, 6vw, 4.5rem);
	padding: 0;
	border: 0;
	color: #ffffff;
	background: transparent;
	cursor: pointer;
	    position: absolute;
    top: 38px;
    right: 47px;
}

.rds-trophies__overlay-close-icon {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

.rds-trophies__overlay-close-icon::before,
.rds-trophies__overlay-close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0.35rem;
	border-radius: 999px;
	background: currentColor;
	transform-origin: center;
}

.rds-trophies__overlay-close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.rds-trophies__overlay-close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.rds-trophies__overlay-close:focus-visible {
	outline: none;
}


@media ( max-width: 700px ) {
	.rds-trophies__overlay {
		padding: 3.0625rem;
		/* Matched to `.rds-trophies__card`'s own mobile radius (2.5rem, set
		   above) — same corner-gap fix as the desktop rule, just also
		   applied at this breakpoint since the card's radius changes here
		   too and the two need to stay equal, not a fixed ratio. */
		border-radius: 2.5rem;
	}

	.rds-trophies__overlay-copy {
		max-width: 100%;
	}

	.rds-trophies__overlay-media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.rds-trophies__overlay-media--single,
	.rds-trophies__overlay-media--pair,
	.rds-trophies__overlay-media--multi {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.rds-trophies__overlay-copy .rds-trophies__overlay-body {
		margin-top: 1.5rem;
	}

	.rds-trophies__overlay-close {
		width: 4.75rem;
		height: 4.875rem;
	}
}

p.rds-trophies__overlay-title.rds-section-header {
    font-size: 80px!important;
}
