/*
 * Section: the services in detail (the "jl-offers" group).
 *
 * A small label, then one block per service ("jl-offer"), divided by
 * hairlines. On wide screens each block is split five to seven: on the left
 * the number, a line-drawn icon and the service's name, which stay in place
 * below the floating header while the right side scrolls past; on the right
 * a lead paragraph, label and value rows and an arrow pill. On tablets and
 * phones the name sits beside the icon and the details follow underneath.
 *
 * Every service is a Group with its own HTML anchor (the jump links at the
 * top of the page point to it). Its icon is a Custom HTML block with an
 * inline SVG; its number comes from the stylesheet, so services can be added
 * or removed. Each row is a Group holding two Paragraphs: label and value.
 *
 * Colours, fonts and edge spacing come from the theme. The section must not
 * clip its overflow, or the left side would stop staying in place. The
 * reveal and the line-drawing only run once the script is running.
 */

.jl-offers.jl-offers {
	--of-pad: 48px;
	--of-gap: 24px;
	--of-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	margin-block: 0;
	padding: 56px var(--of-pad) 24px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	counter-reset: jl-offer;
}

/* WordPress spaces out a Group's children; every part here sets its own spacing. */
.jl-offers.jl-offers > *,
.jl-offers .jl-offer > *,
.jl-offers .jl-offer__head > *,
.jl-offers .jl-offer__body > *,
.jl-offers .jl-offer__facts > *,
.jl-offers .jl-offer__row > * {
	margin-block: 0;
}

.jl-offers > .jl-tag {
	margin-bottom: 56px;
}

/* ---------- One service ---------- */

.jl-offers .jl-offer {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 28px var(--of-gap);
	align-items: start;
	padding: 56px 0 120px;
	border-top: 1px solid var(--jl-line);
	counter-increment: jl-offer;
	scroll-margin-top: var(--jl-header-h);
}

/* Number, icon and name: stay in place just below the floating header. */
.jl-offers .jl-offer__head {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--jl-header-h) + 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.jl-offers .jl-offer__head::before {
	content: "0" counter(jl-offer, decimal-leading-zero);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

/* The icon: an SVG on the site, the Custom HTML block's preview in the editor. */
.jl-offers .jl-offer__head > svg,
.jl-offers .jl-offer__head > .wp-block-html {
	display: block;
	width: 84px;
	height: 70px;
	margin-top: 48px;
	color: inherit;
}

.jl-offers .jl-offer__head h2 {
	max-width: 440px;
	margin-top: 44px;
	font-size: 2.5rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

/* Lead, rows and button. */
.jl-offers .jl-offer__body {
	max-width: 660px;
}

.jl-offers .jl-offer__lead {
	max-width: 440px;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.jl-offers .jl-offer__facts {
	margin-top: 56px;
}

.jl-offers .jl-offer__row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	column-gap: var(--of-gap);
	padding: 15px 0 16px;
	border-top: 1px solid var(--jl-line);
	font-size: 1rem;
	line-height: 1.5;
}

.jl-offers .jl-offer__row > :first-child {
	color: var(--wp--preset--color--accent-4);
}

.jl-offers .jl-offer__body > .wp-block-buttons {
	margin-top: 48px;
}

/* ---------- Motion (front only, once the script is running) ---------- */

.jl-js .jl-offers > .jl-tag,
.jl-js .jl-offers .jl-offer__head::before,
.jl-js .jl-offers .jl-offer__head > *,
.jl-js .jl-offers .jl-offer__body > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--of-ease) var(--d, 0ms), transform 0.9s var(--of-ease) var(--d, 0ms);
}

.jl-js .jl-offers > .jl-tag.is-in,
.jl-js .jl-offers .jl-offer__head.is-in::before,
.jl-js .jl-offers .jl-offer__head.is-in > *,
.jl-js .jl-offers .jl-offer__body.is-in > * {
	opacity: 1;
	transform: none;
}

.jl-offers .jl-offer__head > :nth-child(1),
.jl-offers .jl-offer__body > :nth-child(1) {
	--d: 100ms;
}

.jl-offers .jl-offer__head > :nth-child(2),
.jl-offers .jl-offer__body > :nth-child(2) {
	--d: 200ms;
}

.jl-offers .jl-offer__body > :nth-child(n + 3) {
	--d: 300ms;
}

/* The script marks each stroked shape with "dr" so the icon can draw itself in. */
@keyframes jl-offer-draw {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.jl-js .jl-offers .dr {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.jl-js .jl-offers .jl-offer__head.is-in .dr {
	animation: jl-offer-draw 1.6s cubic-bezier(0.6, 0, 0.2, 1) forwards;
	animation-delay: calc(350ms + var(--n, 0) * 120ms);
}

/* ---------- Tablet: one column, the name beside the icon ---------- */
@media (max-width: 1099px) {
	.jl-offers.jl-offers {
		--of-pad: 40px;
		--of-gap: 20px;
		padding-top: 0;
	}

	.jl-offers > .jl-tag {
		margin-bottom: 40px;
	}

	.jl-offers .jl-offer {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 40px 0 96px;
	}

	.jl-offers .jl-offer__head {
		position: static;
		display: grid;
		grid-template-areas: "num icon" "title icon";
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 24px;
		align-items: end;
	}

	.jl-offers .jl-offer__head::before {
		grid-area: num;
	}

	.jl-offers .jl-offer__head > svg,
	.jl-offers .jl-offer__head > .wp-block-html {
		grid-area: icon;
		width: 72px;
		height: 60px;
		margin: 0 0 4px;
	}

	.jl-offers .jl-offer__head h2 {
		grid-area: title;
		max-width: 520px;
		margin-top: 20px;
		font-size: 2.25rem;
	}

	.jl-offers .jl-offer__lead {
		max-width: 520px;
	}

	.jl-offers .jl-offer__facts {
		margin-top: 40px;
	}

	.jl-offers .jl-offer__body > .wp-block-buttons {
		margin-top: 40px;
	}
}

/* ---------- Mobile: labels above their values, the button across ---------- */
@media (max-width: 699px) {
	.jl-offers.jl-offers {
		--of-pad: 24px;
		--of-gap: 12px;
		padding-top: 16px;
	}

	.jl-offers > .jl-tag {
		margin-bottom: 28px;
	}

	.jl-offers .jl-offer {
		gap: 28px;
		padding: 32px 0 72px;
	}

	.jl-offers .jl-offer__head > svg,
	.jl-offers .jl-offer__head > .wp-block-html {
		width: 56px;
		height: 47px;
	}

	.jl-offers .jl-offer__head h2 {
		margin-top: 16px;
		font-size: 1.875rem;
	}

	.jl-offers .jl-offer__lead {
		font-size: 1.0625rem;
		line-height: 1.4;
	}

	.jl-offers .jl-offer__facts {
		margin-top: 32px;
	}

	.jl-offers .jl-offer__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2px;
		padding: 12px 0 13px;
	}

	.jl-offers .jl-offer__row > :first-child {
		font-size: 0.875rem;
	}

	.jl-offers .jl-offer__body > .wp-block-buttons {
		margin-top: 32px;
	}

	.jl-offers .jl-offer .wp-block-button {
		width: 100%;
	}

	.jl-offers .jl-offer .jl-pill.jl-pill .wp-block-button__link {
		display: flex;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
	}
}

/* Set by the script if it could not prepare the section: everything shows at rest. */
.jl-offers.is-plain > .jl-tag,
.jl-offers.is-plain .jl-offer__head::before,
.jl-offers.is-plain .jl-offer__head > *,
.jl-offers.is-plain .jl-offer__body > * {
	opacity: 1 !important;
	transform: none !important;
}

.jl-offers.is-plain .dr {
	stroke-dashoffset: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.jl-js .jl-offers > .jl-tag,
	.jl-js .jl-offers .jl-offer__head::before,
	.jl-js .jl-offers .jl-offer__head > *,
	.jl-js .jl-offers .jl-offer__body > * {
		opacity: 1;
		transform: none;
	}

	.jl-js .jl-offers .dr {
		stroke-dashoffset: 0;
		animation: none;
	}

	.jl-offers.jl-offers *,
	.jl-offers.jl-offers *::before {
		transition: none !important;
	}
}