/* =========================================================================
   Voley PLT — About page
   Hero · story split · skill meters · values
   Primitives (.voley-btn, .voley-pill, .voley-eyebrow …) live in base.css.
   ========================================================================= */

/* Hero --------------------------------------------------------------------
   Deliberately a copy of the blog hero rather than a shared import: every
   block owns its stylesheet, so the About page never has to pull in the blog
   filter toolbar just to get a banner. Keep the two in step if either moves. */
.voley-ahero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 50vh;
	background: var(--v-ink-2);
	color: var(--v-white);
	overflow: hidden;
}

.voley-ahero__bg {
	position: absolute;
	inset: 0;
}

.voley-root .voley-ahero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 38%;
}

.voley-ahero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(96deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.46) 40%, rgba(0, 0, 0, 0.08) 78%),
		linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 46%);
}

/* The overlay header floats on top, so reserve its height here. */
.voley-ahero__inner {
	position: relative;
	z-index: 1;
	padding-top: calc(var(--v-header-h) + 44px);
	padding-bottom: 54px;
}

.voley-ahero__eyebrow {
	margin-bottom: 14px;
	font-size: var(--v-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

/* Double-scoped so it wins over a theme's h1 colour on the dark photo. */
.voley-root.voley-root .voley-ahero__title {
	max-width: 18ch;
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h1);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.004em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Story split ------------------------------------------------------------- */
/* Photo on the left, copy on the right. The heading still comes first in the
   markup for screen readers — only the placement is swapped. */
.voley-astory {
	display: grid;
	grid-template-columns: 1.06fr 1fr;
	gap: 86px;
	align-items: stretch;
	/* Extra air under the hero before the page starts talking. */
	padding-top: calc(var(--v-section) * 1.4);
}

.voley-astory__visual {
	grid-column: 1;
	grid-row: 1;
}

.voley-astory__body {
	grid-column: 2;
	grid-row: 1;
}

/* The copy fills its column — capping it left a visible gap against the
   right edge of the container. */
.voley-root.voley-root .voley-astory__title {
	margin-bottom: 22px;
	text-wrap: balance;
}

.voley-astory__text {
	max-width: none;
	margin-bottom: 30px;
	line-height: 1.75;
}

.voley-astory__cta {
	margin-bottom: 48px;
}

/* Gallery thumbnails ------------------------------------------------------
   Each one is a labelled chapter of the gallery, not just a picture: number,
   name, and a rule underneath that doubles as the autoplay timer. Inactive
   columns sit back dimmed and desaturated; the active one comes forward. */
.voley-astory__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.voley-athumb {
	position: relative;
	display: grid;
	gap: 12px;
	width: 100%;
	padding-bottom: 12px;
	text-align: left;
	border-bottom: 1px solid var(--v-line);
}

.voley-athumb__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--v-r-card);
	background: var(--v-grey-100);
}

.voley-root .voley-athumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	filter: saturate(0.6);
	transition: transform 0.6s var(--v-ease), opacity 0.35s var(--v-ease), filter 0.35s var(--v-ease);
}

.voley-root .voley-athumb:hover img {
	opacity: 0.82;
	filter: none;
	transform: scale(1.06);
}

.voley-root .voley-athumb.is-active img {
	opacity: 1;
	filter: none;
}

/* Caption ----------------------------------------------------------------- */
.voley-athumb__meta {
	display: flex;
	align-items: baseline;
	gap: 9px;
	min-width: 0;
}

.voley-athumb__num {
	flex: none;
	font-family: var(--v-font-display);
	font-size: var(--v-fs-xs);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--v-grey-300);
	font-variant-numeric: tabular-nums;
	transition: color 0.35s var(--v-ease);
}

.voley-athumb__label {
	overflow: hidden;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--v-grey-500);
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.35s var(--v-ease);
}

.voley-athumb.is-active .voley-athumb__num {
	color: var(--v-accent);
}

.voley-athumb.is-active .voley-athumb__label {
	color: var(--v-ink);
}

/* Timer bar — sits on the caption rule. While autoplay runs, about.js writes
   the scale every frame off the same clock that advances the slide, so the bar
   is never out of step and freezes in place when playback pauses. */
.voley-athumb__bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--v-accent);
}

/* No autoplay (no JS, interval 0, reduced motion): the rule under the active
   column stays solid, so it still reads as the selected one. */
.voley-athumb.is-active .voley-athumb__bar {
	transform: scaleX(1);
}

/* Slide counter over the photo -------------------------------------------- */
.voley-astory__index {
	position: absolute;
	left: 22px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 16px;
	border-radius: var(--v-r-pill);
	background: rgba(17, 18, 19, 0.58);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.72);
	font-variant-numeric: tabular-nums;
}

.voley-astory__index b {
	font-weight: 800;
	color: var(--v-accent);
}

/* Gallery stage -----------------------------------------------------------
   Stretches to the height of the copy column, so the photo's top and bottom
   edges line up with the heading and the thumbnail row. */
.voley-astory__visual {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--v-grey-100);
}

.voley-astory__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s var(--v-ease), transform 1.2s var(--v-ease);
	transform: scale(1.03);
}

.voley-astory__slide.is-active {
	opacity: 1;
	transform: none;
	z-index: 1;
}

.voley-root .voley-astory__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Without JavaScript nothing toggles, so the first slide simply stays put. */
.voley-root:not(.js) .voley-astory__slide {
	transition: none;
	transform: none;
}

/* Autoplay never starts here, so the bar carries no motion — it stays on as a
   plain marker for the selected column. Only the slide's drift is dropped. */
@media (prefers-reduced-motion: reduce) {
	.voley-astory__slide {
		transform: none;
	}
}

/* Skill & technique --------------------------------------------------------
   Same boxed two-column layout as the story split above it, so every section
   on the page shares one container width. */
.voley-askill {
	display: grid;
	grid-template-columns: 1fr 1.06fr;
	align-items: center;
	gap: 64px;
}

.voley-askill__body {
	max-width: 460px;
}

.voley-askill__body .voley-h2 {
	margin-bottom: 16px;
}

.voley-askill__text {
	max-width: 44ch;
	margin-bottom: 34px;
	font-size: var(--v-fs-sm);
	line-height: 1.7;
}

.voley-askill__cta {
	margin-top: 36px;
}

.voley-askill__media {
	aspect-ratio: 4 / 3.1;
	overflow: hidden;
	border-radius: var(--v-r-card);
	background: var(--v-grey-100);
}

.voley-root .voley-askill__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Meters ------------------------------------------------------------------ */
.voley-meters {
	display: grid;
	gap: 22px;
}

.voley-meter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 9px;
}

.voley-meter__label {
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--v-ink);
}

.voley-meter__value {
	font-size: var(--v-fs-sm);
	font-weight: 700;
	color: var(--v-grey-600);
	font-variant-numeric: tabular-nums;
}

.voley-meter__track {
	height: 8px;
	border-radius: var(--v-r-pill);
	background: var(--v-grey-150);
	overflow: hidden;
}

/* Width is written by about.js every frame while the bar counts up, off the
   same clock as the percentage, so bar and number can never disagree. Without
   JS the bars simply render at their final width. */
.voley-meter__fill {
	position: relative;
	display: block;
	width: var(--v-meter, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--v-accent-ink), var(--v-accent) 62%);
}

/* A soft head of light that rides the end of the bar while it fills. */
.voley-meter__fill::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translate(45%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(246, 137, 30, 0.75), rgba(246, 137, 30, 0) 68%);
	opacity: 0;
	transition: opacity 0.45s var(--v-ease);
}

.voley-meter.is-filling .voley-meter__fill::after {
	opacity: 1;
}

.voley-meter__value {
	transition: color 0.45s var(--v-ease);
}

.voley-meter.is-filling .voley-meter__value {
	color: var(--v-accent);
}

/* Numbers are set by script mid-count, so hold the column steady. */
.voley-root.js .voley-meter__value {
	min-width: 4ch;
	text-align: right;
}

@media (prefers-reduced-motion: reduce) {
	.voley-meter__fill::after {
		display: none;
	}
}

/* Values ------------------------------------------------------------------ */
.voley-avalues {
	padding-block: var(--v-section);
	background: var(--v-grey-50);
	border-top: 1px solid var(--v-line-soft);
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-avalues__head {
	max-width: 600px;
	margin: 0 auto 38px;
	text-align: center;
}

.voley-avalues__head .voley-h2 {
	margin-bottom: 12px;
}

.voley-avalues__head .voley-sub {
	max-width: none;
}

.voley-avalues__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--v-gap);
}

.voley-value {
	padding: 30px 28px 32px;
	border: 1px solid var(--v-line-soft);
	border-radius: var(--v-r-card);
	background: var(--v-white);
	transition: transform 0.35s var(--v-ease), box-shadow 0.35s var(--v-ease);
}

.voley-value:hover {
	transform: translateY(-3px);
	box-shadow: var(--v-shadow);
}

.voley-value__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	border-radius: var(--v-r-sm);
	background: var(--v-accent-soft);
	color: var(--v-accent);
}

.voley-root.voley-root .voley-value__title {
	margin-bottom: 10px;
	color: var(--v-ink);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h3);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.voley-value__text {
	font-size: var(--v-fs-sm);
	line-height: 1.65;
	color: var(--v-grey-600);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
	.voley-astory {
		gap: 44px;
	}

	.voley-askill {
		gap: 44px;
	}
}

@media (max-width: 1000px) {
	.voley-astory {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	/* One column: drop the desktop placement so the two blocks simply stack. */
	.voley-astory__visual,
	.voley-astory__body {
		grid-column: 1;
		grid-row: auto;
	}

	/* Photo leads on a phone, the way it does on desktop. */
	.voley-astory__visual {
		order: -1;
		min-height: 0;
		aspect-ratio: 3 / 2;
	}

	.voley-askill {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.voley-askill__body {
		max-width: none;
	}

	.voley-askill__media {
		aspect-ratio: 3 / 2;
	}

	.voley-avalues__grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	.voley-astory__cta {
		margin-bottom: 34px;
	}

	.voley-astory__thumbs {
		gap: 10px;
	}

	.voley-ahero__inner {
		padding-bottom: 40px;
	}
}