/**
 * Block 4 - DLS Home: Customer Perspective (DLS-142)
 *
 * Rules are the template's own (Homepage.html r61), generated and scoped under
 * `.dls-persp`. Variables come from ss-brand-tokens.css.
 */

/* ---- wrapper (the template's shared `.sect` rules) ---- */
.dls-persp {
	box-sizing: border-box;
	padding-inline: max(var(--pad), calc((100% - var(--content)) / 2));
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--para);
}
.dls-persp *, .dls-persp *::before, .dls-persp *::after { box-sizing: border-box; }
.dls-persp .persp__item { quotes: none; }

.dls-persp {
	background: var(--white);
	padding-block: var(--s-xxl);
	display: flex;
	flex-direction: column;
	gap: var(--s-md);
	position: relative;
}
.dls-persp .persp__eyebrow {
	display: none;
}
.dls-persp .persp__track {
	position: relative;
	display: grid;
	overflow-x: clip; /* the quotes slide sideways inside the track */
}
/* Slide, not fade: the active quote sits at 0; the next one waits on the right (data-pos unset), the one that just left
   waits on the left (data-pos="prev"). ss-customer-perspective.js sets those and the arrows / auto-advance both slide the
   same way (forward = to the left). [data-snap] puts a quote at its start side without animating. */
.dls-persp .persp__item {
	grid-area: 1/1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-md);
	transform: translate3d(100%, 0, 0);
	visibility: hidden;
	transition: transform 1s var(--ease), visibility 0s linear 1s;
}
.dls-persp .persp__item[data-pos="prev"] {
	transform: translate3d(-100%, 0, 0);
}
.dls-persp .persp__item[data-active="true"] {
	transform: translate3d(0, 0, 0);
	visibility: visible;
	transition: transform 1s var(--ease), visibility 0s;
}
.dls-persp .persp__item[data-snap] {
	transition: none;
}
.dls-persp .persp__txt {
	font-size: var(--fs-xxl);
	line-height: var(--lh-xxl);
	color: var(--discovery-purple);
	max-width: 1080px;
}
.dls-persp .persp__by {
	font-size: var(--fs-xxs);
	line-height: var(--lh-xxs);
	color: var(--heading-2);
}
.dls-persp .persp__ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-lg);
	align-self: stretch;
	margin-top: var(--s-md);
}
.dls-persp .persp__arrows {
	display: flex;
	gap: var(--s-xs);
}
.dls-persp .persp__nav {
	width: 36px;
	height: 36px;
	padding: 0;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--discovery-purple);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .25s var(--ease), border-color .25s var(--ease);
}
.dls-persp .persp__nav svg {
	width: 22px;
	height: 22px;
	display: block;
}
.dls-persp .persp__nav svg g rect {
	display: none;
}
.dls-persp .persp__nav svg path {
	fill: var(--discovery-purple);
	transition: fill .25s var(--ease);
}
.dls-persp .persp__nav:hover {
	background: var(--orange);
	border-color: var(--orange);
}
.dls-persp .persp__nav:hover svg path {
	fill: var(--white);
}
.dls-persp .persp__nav--prev svg {
	transform: scaleX(-1);
}
.dls-persp .persp__nav:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

@media (max-width:900px) {
	.dls-persp .persp__txt {
		font-size: var(--fs-lg);
		line-height: var(--lh-lg);
	}
	.dls-persp .persp__ctrl {
		align-self: stretch;
	}
	.dls-persp {
		padding-block: var(--s-xl);
	}
	.dls-persp .persp__txt {
		font-size: var(--fs-lg);
		line-height: var(--lh-lg);
	}
	.dls-persp .persp__ctrl {
		align-self: stretch;
	}
}

@media (prefers-reduced-motion:reduce) {
	.dls-persp .persp__item {
		transition: none;
	}
}

/* template r58: tablet (561-900px) section padding 30 -> 48 */
@media (min-width: 561px) and (max-width: 900px) {
	.dls-persp {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* quote and attribution are rich text now (a <div> / <footer> holding the editor's own paragraphs) */
.dls-persp .persp__txt p, .dls-persp .persp__by p { margin: 0; font: inherit; color: inherit; }
.dls-persp .persp__txt p + p { margin-top: var(--s-xs); }
.dls-persp .persp__by p + p { margin-top: var(--s-xxs); }
.dls-persp .persp__txt strong, .dls-persp .persp__txt b, .dls-persp .persp__by strong, .dls-persp .persp__by b { font-weight: 700; }
.dls-persp .persp__txt a, .dls-persp .persp__by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-persp .persp__txt a:hover, .dls-persp .persp__by a:hover { color: var(--orange); }