/*
 * Section: about, with text, lists and photos (the "jl-profile" group).
 *
 * Two short paragraphs, two labelled lists and a row of captioned photos, all
 * set in one text size. Built from ordinary blocks: Paragraphs, Headings,
 * Lists and Images with captions.
 *
 * Colours, fonts and edge spacing come from the theme. The line reveal, the
 * drifting photos and the captions that slide in on hover only start once the
 * script is running (html.jl-js), so the editor and visitors without
 * JavaScript see everything at rest, captions included.
 */

.jl-profile.jl-profile {
	--pf-pad: 48px;
	--pf-gap: 24px;
	--pf-frame: 560px;
	--pf-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	margin-block: 0;
	padding: clamp(64px, 10vh, 112px) var(--pf-pad) clamp(96px, 14vh, 150px);
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* WordPress spaces out a Group's children; every part here sets its own spacing. */
.jl-profile.jl-profile > *,
.jl-profile .jl-profile__intro > *,
.jl-profile .jl-profile__info > *,
.jl-profile .jl-profile__group > *,
.jl-profile .jl-profile__gallery > * {
	margin-block: 0;
}

/* Everything shares the section's text size, so the blocks' own sizes are set aside. */
.jl-profile .jl-profile__intro p,
.jl-profile .jl-profile__group h3,
.jl-profile .jl-profile__group li,
.jl-profile .jl-profile__gallery figcaption {
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/* ---------- Intro ---------- */

/* One column of three on wide screens, but never too narrow to read. */
.jl-profile .jl-profile__intro {
	display: grid;
	row-gap: 18px;
	width: max(calc((100% - 2 * var(--pf-gap)) / 3), 27rem);
	max-width: 100%;
}

/* The section's heading is a small label, like the labels of the other sections. */
.jl-profile .jl-profile__tag {
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------- Lists ---------- */

.jl-profile .jl-profile__info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pf-gap);
	margin-top: 96px;
}

.jl-profile .jl-profile__group {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: start;
}

/* List labels read as text, not as headings. */
.jl-profile .jl-profile__group h3 {
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 400;
}

.jl-profile .jl-profile__group ul,
.jl-profile .jl-profile__group ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jl-profile .jl-profile__group li {
	margin: 0;
}

/* ---------- Photos ---------- */

.jl-profile .jl-profile__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pf-gap);
	margin-top: 28px;
}

.jl-profile .jl-profile__gallery figure {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
}

.jl-profile .jl-profile__gallery img {
	display: block;
	width: 100%;
	height: var(--pf-frame);
	max-width: none;
	object-fit: cover;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, var(--wp--preset--color--accent-5));
}

/* While editing, WordPress wraps each image in a box that would otherwise shrink to the image's own size. */
.jl-profile .jl-profile__gallery figure > div {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

/* A photo that has been given a link keeps its full width. */
.jl-profile .jl-profile__gallery figure > a {
	display: block;
}

/*
 * On the site the script puts each image in a frame, 80px shorter than the
 * image, so the image can drift inside it as the page scrolls.
 */
.jl-profile .jl-profile__frame {
	position: relative;
	display: block;
	height: var(--pf-frame);
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, var(--wp--preset--color--accent-5));
}

.jl-profile .jl-profile__frame img {
	position: absolute;
	top: -40px;
	left: 0;
	height: calc(100% + 80px);
	transition: scale 1.6s var(--pf-ease);
	will-change: translate;
}

.jl-profile .jl-profile__gallery figcaption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	color: inherit;
	text-align: left;
}

.jl-profile .jl-profile__gallery figcaption::after {
	content: "+";
	flex: none;
}

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

/* Text waits out of sight until the script has prepared it. */
.jl-js .jl-profile .jl-profile__tag,
.jl-js .jl-profile .jl-profile__intro > p,
.jl-js .jl-profile .jl-profile__info:not(.is-split) li,
.jl-js .jl-profile .jl-profile__group h3 {
	opacity: 0;
}

.jl-js .jl-profile .jl-profile__tag,
.jl-js .jl-profile .jl-profile__group h3 {
	transition: opacity 1s ease var(--d, 0ms);
}

.jl-js .jl-profile .jl-profile__intro > p.is-split,
.jl-js .jl-profile .jl-profile__intro > p.is-done,
.jl-js .jl-profile .jl-profile__intro.is-in .jl-profile__tag,
.jl-js .jl-profile .jl-profile__info.is-in h3 {
	opacity: 1;
}

/*
 * Lines rise out of a mask. The script wraps each word of the paragraphs
 * ("jl-w") and gives the words on one line the same delay, so a line moves as
 * one however the text happens to wrap. List items ("jl-ln") are one line each.
 */
.jl-profile .jl-w {
	display: inline-block;
	margin-bottom: -0.1em;
	padding-bottom: 0.1em;
	overflow: hidden;
	vertical-align: top;
}

.jl-js .jl-profile .jl-profile__info.is-split li {
	overflow: hidden;
}

.jl-profile .jl-w > span,
.jl-profile .jl-ln {
	display: inline-block;
	opacity: 0;
	transform: translateY(105%);
	transition: opacity 1s ease var(--d, 0ms), transform 1s var(--pf-ease) var(--d, 0ms);
}

.jl-profile .jl-ln {
	display: block;
}

.jl-profile .jl-profile__intro.is-in .jl-w > span,
.jl-profile .jl-profile__info.is-in .jl-ln {
	opacity: 1;
	transform: none;
}

/* With a mouse on a wide screen, each caption waits below its photo and slides in on hover. */
@media (min-width: 1100px) and (hover: hover) {
	.jl-js .jl-profile .jl-profile__gallery figure {
		gap: 0;
		overflow: hidden;
	}

	.jl-js .jl-profile .jl-profile__gallery figcaption {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 10px 12px;
		background: var(--wp--preset--color--base);
		transform: translateY(101%);
		transition: transform 0.55s var(--pf-ease);
	}

	.jl-js .jl-profile .jl-profile__gallery figure:hover figcaption,
	.jl-js .jl-profile .jl-profile__gallery figure:focus-within figcaption {
		transform: none;
	}

	.jl-js .jl-profile .jl-profile__gallery figure:hover .jl-profile__frame img {
		scale: 1.06;
	}
}

/* ---------- Tablet: two lists side by side, two photos ---------- */
@media (max-width: 1099px) {
	.jl-profile.jl-profile {
		--pf-pad: 40px;
		--pf-gap: 20px;
		--pf-frame: 460px;
	}

	.jl-profile .jl-profile__intro {
		width: auto;
		max-width: 600px;
	}

	.jl-profile .jl-profile__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 64px;
	}

	.jl-profile .jl-profile__group {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.jl-profile .jl-profile__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 32px;
	}

	/* The text wraps more here, so lines fade in rather than rise. */
	.jl-profile .jl-w > span {
		transform: none;
	}
}

/* A photo with the class "jl-photo--hide-md" is left out on tablets. */
@media (min-width: 700px) and (max-width: 1099px) {
	.jl-profile .jl-profile__gallery .jl-photo--hide-md {
		display: none;
	}
}

/* ---------- Mobile: one column, photos in a row to swipe ---------- */
@media (max-width: 699px) {
	.jl-profile.jl-profile {
		--pf-pad: 24px;
		--pf-gap: 12px;
		--pf-frame: 440px;
		padding-bottom: 72px;
		font-size: 1rem;
	}

	.jl-profile .jl-profile__info {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 48px;
	}

	/* A list with the class "jl-group--hide-sm" is left out on phones. */
	.jl-profile .jl-profile__info .jl-group--hide-sm {
		display: none;
	}

	/* The row reaches both screen edges, and the next photo peeks in. */
	.jl-profile .jl-profile__gallery {
		display: flex;
		margin: 32px calc(-1 * var(--pf-pad)) 0;
		padding: 0 var(--pf-pad);
		overflow-x: auto;
		scroll-padding: 0 var(--pf-pad);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.jl-profile .jl-profile__gallery::-webkit-scrollbar {
		display: none;
	}

	.jl-profile .jl-profile__gallery figure {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.jl-profile .jl-profile__gallery figure:only-child {
		flex-basis: 100%;
	}
}

/* Set by the script if it could not prepare the section: everything shows at rest. */
.jl-profile.is-plain .jl-profile__tag,
.jl-profile.is-plain .jl-profile__intro > p,
.jl-profile.is-plain .jl-profile__info li,
.jl-profile.is-plain .jl-profile__group h3,
.jl-profile.is-plain .jl-w > span,
.jl-profile.is-plain .jl-ln {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.jl-js .jl-profile .jl-profile__tag,
	.jl-js .jl-profile .jl-profile__intro > p,
	.jl-js .jl-profile .jl-profile__info li,
	.jl-js .jl-profile .jl-profile__group h3,
	.jl-profile .jl-w > span,
	.jl-profile .jl-ln {
		opacity: 1 !important;
		transform: none !important;
	}

	.jl-profile .jl-profile__gallery img {
		scale: none !important;
		translate: none !important;
	}

	.jl-profile.jl-profile * {
		transition: none !important;
	}
}