/**
 * DMEC Our National Partners — site-wide marquee
 * Issue #118 / Figma 871:30376
 *
 * Continuous-scroll, no-pause marquee of national partners. Two copies
 * of the partner list live in the DOM (`dmec-partners__track`); the
 * track wrapper translates by -50% over the duration so the loop is
 * visually seamless.
 *
 * `prefers-reduced-motion: reduce` halts the animation entirely and
 * presents the partners as a static wrapped grid (WCAG 2.3.3).
 */

/* ===================================================================
   Section shell
   ================================================================= */

.dmec-partners {
	/* Flush against the preceding section (CTA band). No extra margin
	 * needed — each component handles its own internal padding. */
	margin-top: 0;
	clear: both;
	background: #f4f6fa; /* Neutral/cold/100 */
	/* BugZap #43/#50: 80px rhythm above the heading at every
	   content → partners seam. */
	padding: 80px 120px 40px;
	overflow: hidden; /* clip the marquee at the viewport edges */
	box-sizing: border-box;
}

.dmec-partners__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.dmec-partners__heading {
	margin: 0;
	font-family: 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #2b2b2b; /* Neutral/warm/900 */
	max-width: 700px;
	text-align: center;
}

/* ===================================================================
   Marquee viewport + track
   ================================================================= */

/*
 * Viewport: full row width, hides overflow horizontally. The track
 * wrapper holds both copies of the list inline-flex so total width is
 * 200% of one set; the keyframe translates by -50% to cycle.
 *
 * `--dmec-partners-duration` is the time for ONE full set to scroll
 * past. Tunable per stakeholder feedback (issue #118 open question).
 */
.dmec-partners__marquee {
	--dmec-partners-duration: 120s; /* BugZap: halved scroll speed (was 60s) */
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 60px,
		#000 calc(100% - 60px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 60px,
		#000 calc(100% - 60px),
		transparent 100%
	);
}

.dmec-partners__track {
	flex-shrink: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	padding: 0;
	margin: 0 16px 0 0; /* gap between the two duplicated lists */
	list-style: none;
	animation: dmec-partners-marquee var(--dmec-partners-duration) linear infinite;
	will-change: transform;
}

@keyframes dmec-partners-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - 16px)); }
}

/*
 * The keyframe translates each track by 100% + the right-margin gap
 * so the second track's first tile lands exactly where the first
 * track's first tile started — seamless loop.
 */

.dmec-partners__item {
	margin: 0;
	flex-shrink: 0;
}

/* ===================================================================
   Tile
   ================================================================= */

.dmec-partner-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	border-radius: 4px; /* outline ring corner */
}

.dmec-partner-tile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 90px;
	padding: 24px 48px;
	background: #ffffff;
	border: 1px solid #efe9e6; /* Neutral/warm/200 */
	border-radius: 4px;
	box-shadow: 0 0 16px rgba(18, 44, 86, 0.16);
	box-sizing: border-box;
}

.dmec-partner-tile__media img {
	max-width: 80px;
	max-height: 42px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.dmec-partner-tile__level {
	font-family: 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.32;
	letter-spacing: 0.04em;
	color: #535252; /* Neutral/warm/700 */
	text-transform: uppercase;
}

/* Hover: subtle lift + stronger shadow */
.dmec-partner-tile:hover .dmec-partner-tile__media {
	border-color: #c0c4cf; /* Neutral/cold/400 */
	box-shadow: 0 4px 24px rgba(18, 44, 86, 0.22);
}

/* Focus-visible: canonical 4px Tertiary/500 ring per redesign convention */
.dmec-partner-tile:focus-visible {
	outline: 4px solid #cb45cc;
	outline-offset: 2px;
}

/* ===================================================================
   "See all partners" CTA
   ================================================================= */

.dmec-partners__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 12px 24px;
	border: 1px solid #356ebd; /* Primary/600 */
	border-radius: 4px;
	background: transparent;
	color: #2455a6 !important; /* Primary/700 */
	font-family: 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.32;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

/* BugZap #20: :visited was grouped with :hover, so anyone who had
   already visited the partners page saw the hover fill at rest.
   Visited now matches the default; only a real hover tints. */
.dmec-partners__cta:visited {
	background: transparent;
	color: #2455a6 !important;
	text-decoration: none;
}

.dmec-partners__cta:hover {
	/* Figma button/basic Outlined Hovered (119:4085): white surface,
	   2px Primary/500 ring; inset ring keeps geometry stable. */
	background: #ffffff;
	border-color: #508dff;
	box-shadow: inset 0 0 0 1px #508dff;
	color: #2455a6 !important;
	text-decoration: none;
}

.dmec-partners__cta:focus-visible {
	outline: 4px solid #cb45cc;
	outline-offset: 2px;
}

/* ===================================================================
   Reduced-motion fallback (WCAG 2.3.3)
   Halts the marquee entirely and presents partners as a static wrapped
   grid. The duplicated track is hidden so partners are not announced
   twice.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
	.dmec-partners__marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.dmec-partners__track {
		animation: none !important;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
	}

	.dmec-partners__track[aria-hidden="true"] {
		display: none;
	}
}

/* ===================================================================
   Print: hide
   ================================================================= */

@media print {
	.dmec-partners {
		display: none !important;
	}
}

/* ===================================================================
   Mobile (TBD with design — initial proposal: tighter padding +
   smaller tiles, marquee unchanged)
   ================================================================= */

@media (max-width: 820px) {
	.dmec-partners {
		padding: 40px 16px 32px;
	}

	.dmec-partners__heading {
		font-size: 24px;
	}

	.dmec-partner-tile__media {
		width: 144px;
		height: 76px;
		padding: 16px 32px;
	}

	.dmec-partner-tile__media img {
		max-width: 64px;
		max-height: 32px;
	}

	.dmec-partners__inner {
		gap: 28px;
	}
}