/**
 * Polish layer, module "services" (docs.ia/build/polish-design.md §16.2,
 * design §8.5, §14.6, §15.1). Quick navigation (script 6.3), timeline
 * states, sum sequence (script 6.2), reading line, sequence formats (R10),
 * sum grid, sum text. Also the services-list row (design §13 R1): not a
 * card, so no lift or shadow, but it shares the image-zoom and title-line
 * treatment of the cards module for its own .precoin-service-row scope.
 * Needs the base module (tokens). Its active marker draw (part 2, below)
 * needs the reveal module's script 6.5 to have set pathLength="1" on the
 * timeline icon's shapes; with reveal disabled the marker does not draw.
 */

/* Steps toggle (design §8.1) shares the ghost-tint pattern with the
   downloads finder's own buttons and the cookie buttons (cookie module). */
.precoin-steps-toggle {
	transition-property: background-color, color, border-color, box-shadow, translate, scale, background-size;
	transition-duration: var(--precoin-t-2);
	transition-timing-function: var(--precoin-ease-out);
}
@media (hover: hover) {
	.precoin-steps-toggle:hover {
		box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
		transition-duration: var(--precoin-t-1);
	}
}
.precoin-steps-toggle:focus-visible {
	box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
	transition-duration: var(--precoin-t-1);
}
.precoin-steps-toggle:active {
	scale: .98;
	transition-duration: var(--precoin-t-press);
}

/* §8.5 Timeline and sum track. */
.precoin-timeline-icon {
	transition: background-color var(--precoin-t-2) var(--precoin-ease-in-out), border-color var(--precoin-t-2) var(--precoin-ease-in-out);
}
.precoin-timeline-step:not(:last-child)::before {
	transition: background-color var(--precoin-t-3);
}
.precoin-timeline-photos > .precoin-timeline-photo {
	transition-timing-function: var(--precoin-ease-out);
}
.precoin-step h4 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Service row (R1): not a card. Hover only zooms the image; title/arrow
   lines are the shared rules the row's :hover also triggers. */
.precoin-service-row .wp-block-post-featured-image {
	overflow: clip;
}
.precoin-service-row .wp-block-post-featured-image img {
	transition: scale var(--precoin-t-3) var(--precoin-ease-out);
}
@media (hover: hover) {
	.precoin-service-row:hover .wp-block-post-featured-image img {
		scale: 1.02;
	}
}
.precoin-service-row:focus-within .wp-block-post-featured-image img {
	scale: 1.02;
}

/* R2: title line, same treatment as the cards module's card titles. */
.precoin-service-row .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 max(1px, .06em);
	transition: background-size var(--precoin-t-2) var(--precoin-ease-out);
}
@media (hover: hover) {
	.precoin-service-row:hover .wp-block-post-title a {
		background-size: 100% max(1px, .06em);
		transition-duration: var(--precoin-t-1);
	}
}
.precoin-service-row:focus-within .wp-block-post-title a {
	background-size: 100% max(1px, .06em);
	transition-duration: var(--precoin-t-1);
}

/* Arrow: the service row's own read-more arrow (the controls module has the
   generic a:hover rule for every other arrow). */
@media (hover: hover) {
	.precoin-service-row:hover .wp-block-read-more .precoin-arrow {
		translate: 4px 0;
	}
}
.precoin-service-row:focus-within .wp-block-read-more .precoin-arrow {
	translate: 4px 0;
}

/* Owner review 3: from 1100px a sum is a grid, not a carousel. The factors are
   in rows and the result is one wide card below them. The track does not
   overflow, so assets/js/steps-carousel.js does not advance and hides its
   button. Below 1100px the baseline carousel stays. */
@media (min-width: 1100px) {
	.precoin-steps.precoin-steps--sum {
		--precoin-sum-n: 4;
		display: grid;
		grid-template-columns: repeat(var(--precoin-sum-n), minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
	/* Column count from the count of cards (factors plus the result). */
	.precoin-steps--sum:has(> .precoin-step:nth-child(3):last-child) { --precoin-sum-n: 2; }
	.precoin-steps--sum:has(> .precoin-step:nth-child(4):last-child) { --precoin-sum-n: 3; }
	.precoin-steps--sum:has(> .precoin-step:nth-child(6):last-child) { --precoin-sum-n: 5; }
	.precoin-steps--sum:has(> .precoin-step:nth-child(7):last-child) { --precoin-sum-n: 3; }
	.precoin-steps.precoin-steps--sum > .precoin-step {
		min-width: 0;
	}
	.precoin-steps.precoin-steps--sum > .precoin-step h4 {
		hyphens: manual;
		text-wrap: balance;
		text-align: center;
	}
	.precoin-steps.precoin-steps--sum > .precoin-step--result {
		grid-column: 1 / -1;
		min-height: 140px;
	}
	@media (max-width: 1279px) {
		/* Five factors in one row are too narrow below 1280px: rows of three. */
		.precoin-steps--sum:has(> .precoin-step:nth-child(6):last-child) { --precoin-sum-n: 3; }
		.precoin-steps--sum:has(> .precoin-step:nth-child(6):last-child) > .precoin-step:nth-child(3n):not(:last-child)::after { content: none; }
	}
	/* No operator at the end of a row: the next factor is in the next row. */
	.precoin-steps--sum:has(> .precoin-step:nth-child(7):last-child) > .precoin-step:nth-child(3n):not(:last-child)::after,
	.precoin-steps--sum:has(> .precoin-step:nth-child(8)) > .precoin-step:nth-child(4n):not(:last-child)::after,
	.precoin-steps.precoin-steps--sum > .precoin-step.precoin-step--to-result:not(:last-child)::after {
		content: none;
	}
	/* The equals sign sits on the upper edge of the result, at the centre. */
	.precoin-steps.precoin-steps--sum > .precoin-step--result::before {
		content: "";
		position: absolute;
		top: calc(var(--steps-gap) / -2);
		left: 50%;
		translate: -50% -50%;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
		box-shadow: 0 0 0 4px var(--wp--preset--color--background-alt);
		z-index: 2;
	}
}

/* R10 (owner reviews 2 and 3): three formats for a sequence, by position
   among the timelines of a service page: 1 and 4 timeline (baseline), 2 and 5
   photo strip, 3 and 6 step bar. From 1280px only: below that width a column
   of a sequence with 6 steps is too narrow for a title of 22px, and each
   sequence is the baseline timeline. Each step is a subgrid, so the markers,
   labels, titles and texts align across the columns. Part 1 (layout), so the
   first paint is final. */
@supports selector(:nth-child(1 of .a)) and (grid-template-rows: subgrid) {
	@media (min-width: 1280px) {
		.single-servicio .wp-block-post-content > :nth-child(3n + 2 of :has(.precoin-timeline)) .precoin-timeline,
		.single-servicio .wp-block-post-content > :nth-child(3n of :has(.precoin-timeline)) .precoin-timeline {
			--precoin-n: 3;
			--precoin-gap: var(--wp--preset--spacing--xl);
			display: grid;
			grid-template-columns: repeat(var(--precoin-n), minmax(0, 1fr));
			gap: 0 var(--precoin-gap);
			&:has(.precoin-timeline-step:nth-child(4)) { --precoin-n: 4; }
			&:has(.precoin-timeline-step:nth-child(5)) { --precoin-n: 5; }
			&:has(.precoin-timeline-step:nth-child(6)) { --precoin-n: 6; --precoin-gap: var(--wp--preset--spacing--lg); }
			& .precoin-timeline-aside,
			& .precoin-timeline-photos,
			& .precoin-timeline-steps {
				display: contents;
			}
			/* The count of the aside has no meaning in a row. */
			& .precoin-timeline-aside > p {
				display: none;
			}
			& .precoin-timeline-aside > .wp-block-group:first-child {
				grid-column: 1 / -1;
				grid-row: 1;
				margin: 0 0 var(--wp--preset--spacing--xl);
			}
			& .precoin-timeline-step {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: subgrid;
				gap: 0;
				padding: 0;
				margin: 0;
				min-width: 0;
			}
			& .precoin-timeline-step > * {
				grid-column: 1;
				min-width: 0;
				margin: 0;
			}
			& .precoin-timeline-step > .precoin-timeline-icon {
				grid-row: 1;
				/* The scroll states of steps-timeline.js have no meaning in a row. */
				background: var(--wp--preset--color--background-alt);
				border-color: var(--wp--preset--color--line);
			}
			/* !important: the baseline rule for the icon of the active marker has
			   !important, because it must beat the has-accent-color utility. */
			& .precoin-timeline-step.is-active .precoin-timeline-icon svg {
				color: var(--wp--preset--color--accent) !important;
			}
			& .precoin-timeline-step > p:first-of-type {
				grid-row: 2;
				margin-top: var(--wp--preset--spacing--md);
			}
			& .precoin-timeline-step > h4 {
				grid-row: 3;
				margin-top: var(--wp--preset--spacing--2-xs);
				/* pretty, not balance: in a narrow column balance leaves one short word alone on a line. */
				text-wrap: pretty;
				hyphens: manual;
				overflow-wrap: break-word;
			}
			& .precoin-timeline-step > p:last-of-type {
				grid-row: 4;
				margin-top: var(--wp--preset--spacing--xs);
			}
		}

		/* Photo strip: positions 2 and 5. Each column is a photograph above its step. */
		.single-servicio .wp-block-post-content > :nth-child(3n + 2 of :has(.precoin-timeline)) .precoin-timeline {
			& .precoin-timeline-photo {
				grid-area: auto;
				grid-row: 2;
				max-width: none;
				opacity: 1;
			}
			& .precoin-timeline-step {
				grid-row: 3 / span 4;
			}
			& .precoin-timeline-step::before {
				content: none;
			}
			/* The marker sits on the lower edge of its photograph. translate, not
			   margin: the baseline margin of the marker has !important. */
			& .precoin-timeline-step > .precoin-timeline-icon {
				width: 44px;
				height: 44px;
				position: relative;
				z-index: 1;
				translate: var(--wp--preset--spacing--md) -22px;
				background: var(--wp--preset--color--background);
			}
			& .precoin-timeline-step > p:first-of-type {
				margin-top: 0;
			}
		}

		/* Step bar: positions 3 and 6. No photographs, one rail through the markers. */
		.single-servicio .wp-block-post-content > :nth-child(3n of :has(.precoin-timeline)) .precoin-timeline {
			& .precoin-timeline-photos {
				display: none;
			}
			& .precoin-timeline-step {
				grid-row: 2 / span 4;
			}
			& .precoin-timeline-step:not(:last-child)::before {
				content: "";
				position: absolute;
				top: 27px;
				bottom: auto;
				left: 56px;
				right: calc(-1 * var(--precoin-gap));
				width: auto;
				height: 2px;
				background: var(--wp--preset--color--line);
			}
		}
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* Active marker draw, one time. Needs the reveal module's script 6.5 to
	   have set pathLength="1" on the icon's shapes. */
	.precoin-timeline-step.is-active .precoin-timeline-icon svg[fill="none"] [pathLength] {
		stroke-dasharray: 1;
		animation: precoin-draw var(--precoin-t-pen) var(--precoin-ease-out) both;
	}
	@keyframes precoin-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

	/* Reading line (design §9, single-servicio's second signature moment). */
	@supports (animation-timeline: scroll()) {
		.single-servicio header.wp-block-template-part::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 2px;
			background: var(--wp--preset--color--accent);
			transform-origin: left;
			scale: 0 1;
			animation: precoin-reading-line linear both;
			animation-timeline: scroll(root);
		}
		@keyframes precoin-reading-line { to { scale: 1 1; } }
	}

	/* Sum sequence, driven by assets/js/polish.js §6.2. */
	.precoin-seq > .precoin-step {
		opacity: 0;
		translate: 0 var(--precoin-shift-2);
		&::after { scale: 0; }
		&.precoin-step--result::before { scale: 0; }
	}
	.precoin-seq-in > .precoin-step--result::before {
		scale: 1;
		transition: scale var(--precoin-t-3) var(--precoin-ease-out) 900ms;
	}
	.precoin-seq-in > .precoin-step {
		opacity: 1;
		translate: none;
		transition: opacity var(--precoin-t-3) var(--precoin-ease-out), translate var(--precoin-t-3) var(--precoin-ease-out);
		&::after {
			scale: 1;
			transition: scale var(--precoin-t-3) var(--precoin-ease-out);
		}
		&:last-child { transition-duration: var(--precoin-t-4); }
		&:nth-child(1) { transition-delay: 0ms; &::after { transition-delay: 120ms; } }
		&:nth-child(2) { transition-delay: 160ms; &::after { transition-delay: 280ms; } }
		&:nth-child(3) { transition-delay: 320ms; &::after { transition-delay: 440ms; } }
		&:nth-child(4) { transition-delay: 480ms; &::after { transition-delay: 600ms; } }
		&:nth-child(5) { transition-delay: 640ms; &::after { transition-delay: 760ms; } }
		&:nth-child(6) { transition-delay: 800ms; &::after { transition-delay: 920ms; } }
		&:nth-child(7) { transition-delay: 960ms; &::after { transition-delay: 1080ms; } }
		&:nth-child(8) { transition-delay: 1120ms; &::after { transition-delay: 1240ms; } }
	}

	/* R10: in the photo strip the photographs rise as the steps do. */
	@supports (animation-timeline: view()) and selector(:nth-child(1 of .a)) and (grid-template-rows: subgrid) {
		@media (min-width: 1280px) {
			.single-servicio .wp-block-post-content > :nth-child(3n + 2 of :has(.precoin-timeline)) .precoin-timeline .precoin-timeline-photo {
				animation: precoin-timeline-rise linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 35%;
			}
		}
	}
}