/* ==========================================================================
   [wayvo-about-story-team] — see shortcodes/wayvoAboutStoryTeam.php for the
   design and how to replace the placeholder photos.

   --wvast-u is rendered px per laptop px (100cqw / 1440, 0.5 -> 1.333);
   outer padding 40 -> 80 from 1440 to 1920, as the other new sections.

   Vendor fights: h2 / h3 / p / ul / li / img rules at (0,2,1)+, over
   Elementor's and the kit's (0,1,1); `.elementor img { height: auto }` is
   why the image rule carries two classes.
   ========================================================================== */

.wv-ast-wrap {
	container-type: inline-size;
	/* Capped at the content width, centred on the page; the background is
	   painted past it below. See --wv-content-max in tokens.css. */
	width: min(100vw, var(--wv-content-max, 1440px));
	margin-left: calc(50% - min(50vw, var(--wv-content-max, 1440px) / 2));
}

.wv-ast {
	--wvast-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvast-pad: min(80px, max(calc(40 * var(--wvast-u)), calc(100cqw / 12 - 80px)));

	display: flex;
	flex-direction: column;
	/* Each panel's own 40 padding in the design, met in the middle. */
	gap: calc(2 * var(--wvast-pad));
	box-sizing: border-box;
	padding: var(--wvast-pad);
	background-color: var(--wv-grey-200, #f5f5f5);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wv-grey-200, #f5f5f5), var(--wv-grey-200, #f5f5f5)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-ast__panel {
	box-sizing: border-box;
	padding: calc(40 * var(--wvast-u));
	border-radius: calc(8 * var(--wvast-u));
	background-color: var(--wv-white, #ffffff);
}

/* "It started with a / gift card": 446 wide at 56px. "Team" the same. */
.wv-ast h2.wv-ast__title {
	max-width: 8em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvast-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ── The story ───────────────────────────────────────────────────────────── */
.wv-ast__panel--story {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvast-u));
	padding-right: calc(160 * var(--wvast-u));
}

.wv-ast__story {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--wvast-u));
}

.wv-ast p.wv-ast__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvast-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Show more (Paul, 2026-10-23) ────────────────────────────────────────────
   Folded: paragraphs 1-3 in full (to "What started as a better gift..."),
   two lines of the 4th fading out, the rest hidden. Phones fold one
   paragraph earlier (below). The script adds .is-open. */
.wv-ast__story--fold:not(.is-open) > p.wv-ast__text:nth-child(n+5) {
	display: none;
}

.wv-ast__story--fold:not(.is-open) > p.wv-ast__text:nth-child(4) {
	max-height: 2.8em; /* two lines at 1.4 */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.wv-ast .wv-ast__more {
	align-self: flex-start;
	margin-top: calc(8 * var(--wvast-u));
}

/* ── The team ────────────────────────────────────────────────────────────── */
.wv-ast__panel--team {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: calc(20 * var(--wvast-u));
}

.wv-ast ul.wv-ast__people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(20 * var(--wvast-u));
	flex: none;
	width: calc(630 * var(--wvast-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-ast li.wv-ast__person {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--wvast-u));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-ast li.wv-ast__person::before,
.wv-ast li.wv-ast__person::marker {
	content: none;
}

.wv-ast__photo {
	position: relative;
	aspect-ratio: 305 / 357.66;
	overflow: hidden;
	border-radius: calc(8 * var(--wvast-u));
	background-color: var(--wv-grey-300, #e5e5e5);
}

.wv-ast .wv-ast__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 30%;
}

.wv-ast__about {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--wvast-u));
}

/* Name in ink, role under it in grey, one heading. */
.wv-ast h3.wv-ast__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(22px, calc(40 * var(--wvast-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-ast__role {
	display: block;
	color: var(--wv-grey-500, #8d8b8b);
}

.wv-ast p.wv-ast__bio {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(14px, calc(18 * var(--wvast-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* Straight above [wayvo-gift-better] / [wayvo-about-ender] on the same grey:
   no bottom padding here, and that section's top padding (wayvo-gift-better.css)
   becomes its panels' 20 gap, so the story panel sits as far above the pair as
   the pair sit apart (Paul, 2026-10-24). Read off the Elementor markup. */
.elementor-element:has(.wv-ast-wrap):has(+ .elementor-element .wv-gb-wrap) .wv-ast {
	padding-bottom: 0;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. "Team" above the two people,
   who stay side by side. */
@media (max-width: 767px) {

	.wv-ast {
		--wvast-pad: 20px;
		gap: 20px;
	}

	.wv-ast__panel {
		padding: 24px;
		border-radius: 8px;
	}

	.wv-ast__panel--story {
		gap: 16px;
		padding-right: 24px;
	}

	.wv-ast__story {
		gap: 12px;
	}

	.wv-ast h2.wv-ast__title {
		font-size: 32px;
		line-height: 1.05;
	}

	.wv-ast p.wv-ast__text {
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-ast__panel--team {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.wv-ast ul.wv-ast__people {
		gap: 12px;
		width: auto;
	}

	.wv-ast li.wv-ast__person {
		gap: 12px;
	}

	.wv-ast__photo {
		border-radius: 6px;
	}

	.wv-ast__about {
		gap: 8px;
	}

	.wv-ast h3.wv-ast__name {
		font-size: 20px;
		line-height: 1.05;
	}

	.wv-ast p.wv-ast__bio {
		font-size: 14px;
		letter-spacing: -0.01em;
	}
}

/* ── Phones: no copy under 15px (Paul, 2026-10-21) ───────────────────────────
   The same size as the phone buttons (tokens.css). max() so anything already
   bigger keeps its size; same selectors as above, later, so they win. */
@media (max-width: 767px) {

	.wv-ast p.wv-ast__bio {
		font-size: 15px;
	}
}

/* ── Phones: fold one paragraph earlier (Paul, 2026-10-23) ───────────────────
   Paragraphs 1-2 in full (to "So he decided to create one..."), the 3rd
   fading out, the rest hidden. Undoes the laptop fold of the 4th first. */
@media (max-width: 767px) {

	.wv-ast__story--fold:not(.is-open) > p.wv-ast__text:nth-child(4) {
		display: none;
	}

	.wv-ast__story--fold:not(.is-open) > p.wv-ast__text:nth-child(3) {
		max-height: 2.8em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	}

	.wv-ast .wv-ast__more {
		margin-top: 0;
	}
}