/* NDA Student Spotlights — front end. Every value is a CSS variable set from Student Stories → Appearance. */
.nda-ss {
	--nda-font: Poppins, sans-serif;
	--nda-heading-color: #151f6d;
	--nda-grad-from: #0d6b9f;
	--nda-grad-to: #151f6d;
	--nda-heading-size: 32px;
	--nda-heading-size-m: 26px;
	--nda-intro-color: #404041;
	--nda-intro-size: 16px;
	--nda-intro-w: 820px;
	--nda-section-bg: transparent;
	--nda-heading-gap: 30px;
	--nda-head-gap: 48px;
	--nda-pad-top: 0px;
	--nda-pad-bottom: 0px;
	--nda-card-w: 460px;
	--nda-card-w-m: 310px;
	--nda-gap: 28px;
	--nda-card-pad: 22px;
	--nda-card-radius: 14px;
	--nda-card-bg: #f6f8f8;
	--nda-card-hover-bg: #ffffff;
	--nda-card-border: #e4e8ea;
	--nda-img-size: 56px;
	--nda-img-radius: 50%;
	--nda-ring-w: 1px;
	--nda-ring-gap: 2px;
	--nda-ring-color: #e4e8ea;
	--nda-quote-color: #404041;
	--nda-quote-size: 14px;
	--nda-quote-lines: 4;
	--nda-mark-color: #0d6b9f;
	--nda-name-color: #151f6d;
	--nda-name-size: 16px;
	--nda-title-color: #6b6f7b;
	--nda-title-size: 14px;
	--nda-link-color: #151f6d;
	--nda-link-hover: #0d6b9f;
	--nda-link-size: 13px;
	--nda-link-gap: 12px;
	--nda-cta-bg: #151f6d;
	--nda-cta-color: #ffffff;
	--nda-cta-hover-bg: #a21010;
	--nda-cta-hover-color: #ffffff;
	--nda-cta-size: 15px;
	--nda-cta-radius: 60px;
	--nda-cta-gap: 40px;
	--nda-duration: 120s;

	display: block;
	font-family: var(--nda-font);
	color: var(--nda-quote-color);
	background: var(--nda-section-bg);
	padding: var(--nda-pad-top) 0 var(--nda-pad-bottom);
	overflow: hidden;
}
.nda-ss *, .nda-ss *::before, .nda-ss *::after { box-sizing: border-box; }

/* Heading */
.nda-ss .nda-ss__head { max-width: max(1140px, calc(var(--nda-intro-w) + 32px)); margin: 0 auto max(0px, calc(var(--nda-head-gap) - 8px)); padding: 0 16px; text-align: center; } /* -8px: the card row's own top padding (room for the hover lift) */
.nda-ss--no-header .nda-ss__head { display: none; }
/* Heading box starts flush with the top, like the site's other section headings.
   The 4px bottom padding keeps gradient descenders from being clipped. */
.nda-ss .nda-ss__heading {
	margin: 0 0 max(0px, calc(var(--nda-heading-gap) - 4px)); padding: 0 0 4px;
	font-family: inherit; font-size: var(--nda-heading-size); font-weight: 600; line-height: 1.3;
	color: var(--nda-heading-color);
}
.nda-ss--grad .nda-ss__heading {
	display: inline-block;
	background-image: linear-gradient(90deg, var(--nda-grad-from), var(--nda-grad-to));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.nda-ss .nda-ss__head:not(:has(.nda-ss__intro)) .nda-ss__heading { margin-bottom: 0; }
.nda-ss .nda-ss__intro {
	margin: 0 auto; max-width: var(--nda-intro-w);
	font-family: inherit; font-size: var(--nda-intro-size); line-height: 1.7; color: var(--nda-intro-color);
}

/* Marquee. Without JavaScript it is a plain swipeable row. */
.nda-ss .nda-ss__viewport { position: relative; overflow-x: auto; }
.nda-ss.is-ready .nda-ss__viewport { overflow: hidden; }
.nda-ss.is-ready:not(.nda-ss--no-fade) .nda-ss__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.nda-ss .nda-ss__track {
	display: flex; gap: var(--nda-gap);
	width: max-content; margin: 0; padding: 8px 0 14px; list-style: none;
}
.nda-ss.is-ready .nda-ss__track { animation: nda-ss-scroll var(--nda-duration) linear infinite; }
.nda-ss:not(.nda-ss--no-pause) .nda-ss__viewport:hover .nda-ss__track,
.nda-ss .nda-ss__viewport:focus-within .nda-ss__track { animation-play-state: paused; }
@keyframes nda-ss-scroll { to { transform: translateX(calc(-50% - var(--nda-gap) / 2)); } }

/* Card */
.nda-ss .nda-ss__card {
	position: relative; flex: 0 0 auto;
	width: var(--nda-card-w); margin: 0;
	display: flex; flex-direction: column; gap: 16px;
	padding: calc(var(--nda-card-pad) - 2px) var(--nda-card-pad);
	background: var(--nda-card-bg);
	border: 1px solid transparent; border-radius: var(--nda-card-radius);
	transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.nda-ss .nda-ss__card::before { content: none; }
.nda-ss .nda-ss__card:hover,
.nda-ss .nda-ss__card:focus-within { background: var(--nda-card-hover-bg); border-color: var(--nda-card-border); }
.nda-ss:not(.nda-ss--no-lift) .nda-ss__card:hover,
.nda-ss:not(.nda-ss--no-lift) .nda-ss__card:focus-within { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(21, 31, 109, .28); }
.nda-ss .nda-ss__card:focus-within { border-color: var(--nda-link-hover); }

/* Quote: fixed number of lines so every card is the same size; "…" where it is cut */
.nda-ss .nda-ss__quote {
	margin: 0;
	font-family: inherit; font-size: var(--nda-quote-size); line-height: 1.6; font-style: italic;
	color: var(--nda-quote-color);
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: var(--nda-quote-lines); line-clamp: var(--nda-quote-lines);
	overflow: hidden;
	height: calc(1.6em * var(--nda-quote-lines));
}
.nda-ss--full-quote .nda-ss__quote { display: block; -webkit-line-clamp: none; line-clamp: none; height: auto; }
.nda-ss--upright .nda-ss__quote { font-style: normal; }
.nda-ss:not(.nda-ss--no-marks) .nda-ss__quote::before { content: "\201C"; color: var(--nda-mark-color); font-weight: 600; }
.nda-ss:not(.nda-ss--no-marks) .nda-ss__quote::after { content: "\201D"; color: var(--nda-mark-color); font-weight: 600; }

/* Person */
.nda-ss .nda-ss__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.nda-ss .nda-ss__meta { min-width: 0; }
.nda-ss .nda-ss__avatar {
	flex: 0 0 var(--nda-img-size);
	display: block; width: var(--nda-img-size); height: var(--nda-img-size); aspect-ratio: 1 / 1;
	border-radius: var(--nda-img-radius); overflow: hidden;
	background: #e9edf0;
	outline: var(--nda-ring-w) solid var(--nda-ring-color); outline-offset: var(--nda-ring-gap);
	margin: calc(var(--nda-ring-w) + var(--nda-ring-gap));
}
.nda-ss--no-ring .nda-ss__avatar { outline: none; margin: 0; }
.nda-ss .nda-ss__avatar img {
	display: block; width: 100% !important; height: 100% !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	border-radius: inherit !important; object-fit: cover; object-position: center top;
}
.nda-ss .nda-ss__avatar--initials {
	display: grid; place-items: center;
	font-size: calc(var(--nda-img-size) * .3); font-weight: 600; color: #fff;
	background: linear-gradient(135deg, var(--nda-grad-from), var(--nda-grad-to));
}
.nda-ss .nda-ss__name {
	margin: 0; font-family: inherit; font-size: var(--nda-name-size); font-weight: 700; line-height: 1.25;
	color: var(--nda-name-color);
}
.nda-ss .nda-ss__title {
	display: block; margin: 3px 0 0;
	font-family: inherit; font-size: var(--nda-title-size); line-height: 1.4;
	color: var(--nda-title-color); text-decoration: none; box-shadow: none;
}
.nda-ss a.nda-ss__title:hover, .nda-ss a.nda-ss__title:focus { color: var(--nda-title-color); text-decoration: none; }
.nda-ss a.nda-ss__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--nda-card-radius); }
.nda-ss a.nda-ss__title:focus-visible { outline: none; }

/* "Read spotlight" — spotlight cards only */
.nda-ss .nda-ss__more {
	display: flex; width: max-content; align-items: center; gap: 4px;
	margin-top: var(--nda-link-gap);
	font-size: var(--nda-link-size); font-weight: 500;
	color: var(--nda-link-color);
	border-bottom: 1px solid transparent;
	transition: border-color .2s, color .2s;
}
.nda-ss .nda-ss__card:hover .nda-ss__more,
.nda-ss .nda-ss__card:focus-within .nda-ss__more { color: var(--nda-link-hover); border-color: currentColor; }
.nda-ss .nda-ss__more svg { width: 11px; height: 11px; transition: transform .2s; }
.nda-ss--no-arrow .nda-ss__more svg { display: none; }
.nda-ss .nda-ss__card:hover .nda-ss__more svg { transform: translateX(2px); }
.nda-ss .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "More Success Stories" button, centred under the cards */
.nda-ss .nda-ss__cta-wrap { display: flex; justify-content: center; margin-top: var(--nda-cta-gap); padding: 0 16px; }
.nda-ss--no-cta .nda-ss__cta-wrap { display: none; }
.nda-ss .nda-ss__cta {
	display: inline-flex; align-items: center; gap: 10px;
	padding: .7em 1.75em;
	font-family: inherit; font-size: var(--nda-cta-size); font-weight: 400; line-height: 1.2;
	color: var(--nda-cta-color); background: var(--nda-cta-bg);
	border: 0; border-radius: var(--nda-cta-radius);
	text-decoration: none; box-shadow: none;
	transition: background-color .3s, color .3s;
}
.nda-ss .nda-ss__cta:hover,
.nda-ss .nda-ss__cta:focus-visible { color: var(--nda-cta-hover-color); background: var(--nda-cta-hover-bg); text-decoration: none; }
.nda-ss .nda-ss__cta:focus-visible { outline: 2px solid var(--nda-cta-hover-bg); outline-offset: 3px; }
.nda-ss .nda-ss__cta-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.nda-ss--no-cta-icon .nda-ss__cta-icon { display: none; }

@media (prefers-reduced-motion: reduce) {
	.nda-ss.is-ready .nda-ss__viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; }
	.nda-ss.is-ready .nda-ss__track { animation: none; padding-inline: 16px; }
	.nda-ss .nda-ss__track [data-clone] { display: none; }
	.nda-ss .nda-ss__card { scroll-snap-align: start; }
}

@media (max-width: 767px) {
	.nda-ss { padding: calc(var(--nda-pad-top) * .7) 0 calc(var(--nda-pad-bottom) * .75); }
	.nda-ss .nda-ss__heading { font-size: var(--nda-heading-size-m); }
	.nda-ss .nda-ss__card { width: var(--nda-card-w-m); padding: calc(var(--nda-card-pad) - 4px); }
}
/* Admin preview "Mobile" button narrows the preview box; mirror the mobile rules there. */
.nda-ss-preview.is-mobile .nda-ss { padding: calc(var(--nda-pad-top) * .7) 0 calc(var(--nda-pad-bottom) * .75); }
.nda-ss-preview.is-mobile .nda-ss .nda-ss__heading { font-size: var(--nda-heading-size-m); }
.nda-ss-preview.is-mobile .nda-ss .nda-ss__card { width: var(--nda-card-w-m); padding: calc(var(--nda-card-pad) - 4px); }