/**
 * Viora Services widget.
 *
 * An index, not a card grid: hairline-separated rows on the 1082 content
 * width, with the display face carrying the service names and the cursor
 * pulling each row's image along with it.
 */

.viora-services {
	--viora-services-accent: var(--viora-color-accent);
	--viora-services-title-size: clamp(1.75rem, 3.06vw, 2.75rem);   /* 44 */
	--viora-services-row-pad: clamp(1.25rem, 2.15vw, 1.94rem);      /* 28 */
	--viora-services-media-w: 260px;

	position: relative;
	padding-block: clamp(3.5rem, 7.64vw, 6.875rem) clamp(3.5rem, 8.33vw, 7.5rem);
	overflow: hidden;
}

.viora-services__inner {
	position: relative;
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

/* -------------------------------------------------- *
 * Head
 * -------------------------------------------------- */

.viora-services__top {
	margin-bottom: clamp(2.5rem, 5.35vw, 4.8rem);
}

/*
 * The masthead reads across the full measure: label over the whole width,
 * then the title against the lead text. Stacked, the title's right-hand half
 * was simply empty.
 */
.viora-services__top .viora-head {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(2rem, 5vw, 4.5rem);
}

.viora-services__top .viora-head__label {
	grid-column: 1 / -1;
}

.viora-services__top .viora-head__title {
	margin-bottom: 0;
}

.viora-services__top .viora-head__text {
	max-width: 42ch;
	/* Sits on the title's baseline block rather than floating at the top of
	   the column. */
	padding-bottom: 0.4em;
}

.viora-services__action {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(1rem, 2vw, 1.5rem);
	white-space: nowrap;
}

/* -------------------------------------------------- *
 * Rows
 * -------------------------------------------------- */

.viora-services__row {
	position: relative;
	display: grid;
	grid-template-columns: clamp(2.5rem, 4.65vw, 4.2rem) minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: baseline;
	column-gap: clamp(1rem, 2.5vw, 2.25rem);
	padding-block: var(--viora-services-row-pad);
	color: inherit;
	text-decoration: none;
}

/*
 * The tint sits behind the row and bleeds past the content width, so a hovered
 * row reads as a full band without the grid having to change.
 */
.viora-services__row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: calc(-1 * var(--viora-layout-container-pad));
	z-index: 0;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--viora-motion-base) var(--viora-motion-easing);
}

.viora-services__row:hover::before,
.viora-services__row:focus-visible::before {
	opacity: 0.035;
}

.viora-services__row > * {
	position: relative;
	z-index: 1;
}

.viora-services__index {
	padding-top: 0.75em;
	transition: color var(--viora-motion-base) var(--viora-motion-easing);
}

.viora-services__row:hover .viora-services__index {
	color: var(--viora-services-accent);
}

.viora-services__title {
	margin: 0;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-services-title-size);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.03em;
	transition: transform var(--viora-motion-slow) var(--viora-motion-easing);
}

.viora-services__row:hover .viora-services__title {
	transform: translateX(clamp(0.5rem, 1.1vw, 1rem));
}

.viora-services__body {
	padding-top: 0.35em;
}

.viora-services__text {
	margin: 0;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: clamp(0.9375rem, 1.11vw, 1rem);
	line-height: 1.643;
}

/*
 * Not pills. Rounded outlined chips were the only such shape on the site and
 * read as something bolted on; set as a run of small caps divided by middots,
 * the capabilities behave like the rest of the secondary type.
 */
.viora-services__tags {
	display: block;
	margin: clamp(0.6rem, 1vw, 0.85rem) 0 0;
	padding: 0;
	list-style: none;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.625rem;
	font-weight: var(--viora-weight-medium);
	line-height: 1.9;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.viora-services__tag {
	display: inline;
}

.viora-services__tag + .viora-services__tag::before {
	content: '·';
	margin: 0 0.55em;
	color: var(--viora-services-accent);
}

/*
 * Set into the service name. At the far right of the row it read as a stray
 * mark with nothing to do with the words it belonged to.
 */
.viora-services__arrow {
	display: inline-block;
	margin-left: 0.4em;
	color: var(--viora-services-accent);
	/* Faint, not absent: hidden until hover the row gives a touch reader no
	   sign it leads anywhere. */
	opacity: 0.35;
	transform: translateX(-0.2rem);
	transition:
		opacity var(--viora-motion-base) var(--viora-motion-easing),
		transform var(--viora-motion-slow) var(--viora-motion-easing);
	vertical-align: 0.12em;
}

.viora-services__arrow-svg {
	display: block;
	width: clamp(1.5rem, 2.08vw, 1.875rem);
	height: 0.875rem;
}

.viora-services__row:hover .viora-services__arrow,
.viora-services__row:focus-visible .viora-services__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* -------------------------------------------------- *
 * Cursor media
 * -------------------------------------------------- */

.viora-services__media-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.viora-services__media {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--viora-services-media-w);
	margin: 0;
	aspect-ratio: 1.28;
	overflow: hidden;
	opacity: 0;
	/* Scale and fade are the widget's; the translate is written by JS on the
	   layer's own custom properties, so the two never overwrite each other. */
	transform:
		translate3d(var(--viora-services-x, 0), var(--viora-services-y, 0), 0)
		translate(-50%, -50%)
		scale(0.86);
	transition:
		opacity var(--viora-motion-base) var(--viora-motion-easing),
		transform var(--viora-motion-slow) var(--viora-motion-easing);
	will-change: transform;
}

.viora-services__media.is-active {
	opacity: 1;
	transform:
		translate3d(var(--viora-services-x, 0), var(--viora-services-y, 0), 0)
		translate(-50%, -50%)
		scale(1);
}

.viora-services__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------- *
 * Reveal
 * -------------------------------------------------- */

.viora-services.is-animated .viora-services__item {
	opacity: 0;
	transform: translateY(26px);
}

.viora-services.is-animated .viora-services__item.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--viora-motion-easing),
		transform 0.9s var(--viora-motion-easing);
}

/* The hairline draws itself in as its row arrives. */
.viora-services.is-animated .viora-services__row-wrap > .viora-hairline {
	transform: scaleX(0);
	transform-origin: left center;
}

.viora-services.is-animated .viora-services__row-wrap.is-in > .viora-hairline {
	transform: none;
	transition: transform 1s var(--viora-motion-easing);
}

/* -------------------------------------------------- *
 * Tablet
 * -------------------------------------------------- */

@media (max-width: 1024px) {
	/* The masthead's two columns squeeze the display title into a narrow
	   measure long before the page itself runs out of room. */
	.viora-services__top .viora-head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1rem, 3vw, 1.5rem);
	}

	.viora-services__top .viora-head__text {
		max-width: 52ch;
		padding-bottom: 0;
	}

	.viora-services__action {
		justify-content: flex-start;
	}

	.viora-services {
		--viora-services-title-size: clamp(1.625rem, 4.2vw, 2.5rem);
		padding-block: clamp(3rem, 6vw, 4.5rem);
	}

	.viora-services__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1.5rem, 3vw, 2rem);
		align-items: start;
	}

	.viora-services__action {
		padding-bottom: 0;
	}

	.viora-services__row {
		grid-template-columns: clamp(2rem, 6vw, 3rem) minmax(0, 1fr) clamp(1.75rem, 4vw, 2.25rem);
		row-gap: clamp(0.75rem, 2vw, 1.25rem);
	}

	.viora-services__title {
		grid-column: 2;
	}

	.viora-services__body {
		grid-column: 2;
		padding-top: 0;
	}

	.viora-services__arrow {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	/* Pointer-follow is a mouse idiom; on touch it would flash and stick. */
	.viora-services__media-layer {
		display: none;
	}
}

/* -------------------------------------------------- *
 * Mobile
 * -------------------------------------------------- */

@media (max-width: 767px) {
	.viora-services {
		--viora-services-title-size: clamp(1.5rem, 7.5vw, 2rem);
		--viora-services-row-pad: 1.25rem;
	}

	.viora-services__row {
		grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
		column-gap: 0.75rem;
	}

	.viora-services__tag {
		font-size: 0.625rem;
		letter-spacing: 0.14em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.viora-services.is-animated .viora-services__item,
	.viora-services.is-animated .viora-services__row-wrap > .viora-hairline {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.viora-services__media {
		display: none;
	}
}