/**
 * About page (templates/page-about.html) — styles scoped to .wow-about-page
 * so nothing here can leak onto/collide with the rest of the site. Loaded
 * conditionally (see functions.php, is_page('about')) — never sitewide.
 *
 * Same structural conventions as the PRO trade page (assets/css/pro-page.css)
 * — full-bleed hero under the floating header, 50/50 split sections, a
 * scroll-reveal helper — reusing the theme's existing design tokens
 * (theme.json color/font presets) rather than redeclaring its own.
 */

.wow-about-page {
	--wow-about-line: #e8e4dd;
}

.wow-about-page * {
	box-sizing: border-box;
}

.wow-about-page img {
	max-width: 100%;
	display: block;
}

/* ── Opening — the photographers' own portraits, not a generic hero photo.
     This page is deliberately led with the collage (a straightforward 3×3
     CSS grid — 8 real portraits + one highlight cell in the exact center,
     same 3-photos/photo-panel-photo/3-photos shape as the site's original
     About page) rather than a full-bleed background image, since the brief
     here is specifically "About should be about the photographers making
     this possible." No body.wow-has-hero floating-header treatment on this
     page as a result — the header sits in normal flow above the grid. ── */
.wow-about-collage {
	padding: 56px 32px 0;
	background: #fff;
}

.wow-about-collage__head {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}

.wow-about-collage__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 16px;
}

.wow-about-collage__title {
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
	margin: 0;
	color: var(--wp--preset--color--black);
}

.wow-about-collage__grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.wow-about-collage__photo {
	position: relative;
	aspect-ratio: 16 / 7;
	background-size: cover;
	background-position: top center;
	overflow: hidden;
}

/* 6 photos + 1 highlight = 7 cells in a 3-column grid, so the last row on
   desktop only has one item (this one) instead of three — centered here
   rather than left it sitting flush-left with two empty cells beside it. */
.wow-about-collage__photo:last-child {
	grid-column: 2;
}

.wow-about-collage__highlight {
	aspect-ratio: 16 / 7;
	background: var(--wp--preset--color--accent);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.wow-about-collage__highlight-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 14px;
}

.wow-about-collage__highlight-title {
	font-size: clamp(11px, 1.1vw, 14px);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

/* ── Signatures strip — replaces the old scrolling name ticker with the
     photographers' own signatures (real SVGs supplied directly), a quieter
     and more "handmade" way to say "real people made this". ── */
.wow-about-signatures {
	padding: 44px 0 56px;
}

.wow-about-signatures__viewport {
	max-width: 1100px;
	margin: 0 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.wow-about-signatures__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 56px;
	animation: wow-about-signatures-scroll 32s linear infinite;
}

.wow-about-signatures__img {
	height: 40px;
	width: auto;
	max-width: 140px;
	flex-shrink: 0;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.wow-about-signatures__img:hover {
	opacity: 1;
	filter: grayscale(0);
}

@keyframes wow-about-signatures-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wow-about-signatures__track {
		animation: none;
	}
}

/* ── Founder — contained (not full-bleed), rounded photo on the left,
     same 50/50 split spirit as the PRO page's split sections but sitting
     inside a centered max-width column instead of spanning edge to edge. ── */
.wow-about-founder {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 32px 110px;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 56px;
	align-items: center;
}

.wow-about-founder__media {
	position: relative;
	background: #000 url('https://wheelsonwalls.shop/wp-content/uploads/2026/07/LKE5037-4_5.webp') top center / cover no-repeat;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	overflow: hidden;
}

.wow-about-founder__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wow-about-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 18px;
}

.wow-about-founder__title {
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;
	margin: 0 0 24px;
	color: var(--wp--preset--color--black);
}

.wow-about-founder__body p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--grey);
	max-width: 500px;
	margin: 0 0 20px;
}

.wow-about-founder__body strong {
	font-weight: 700;
	color: var(--wp--preset--color--black);
}

.wow-about-founder__body a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}

.wow-about-founder__body a:hover,
.wow-about-founder__body a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ── Trust stats strip ── */
.wow-about-trust {
	padding: 64px 32px;
	background: var(--wp--preset--color--off-white);
}

.wow-about-trust__grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.wow-about-trust__stat {
	padding: 0 12px;
}

.wow-about-trust__num {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 10px;
}

.wow-about-trust__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--grey);
	margin: 0;
}

.wow-about-trust__sub {
	font-size: 12px;
	font-weight: 300;
	color: var(--wp--preset--color--grey);
	margin: 6px 0 0;
}

/* ── Meet the Photographers ── */
.wow-about-team {
	padding: 110px 32px;
	background: #fff;
}

.wow-about-team__head {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}

.wow-about-team__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 0 0 18px;
	color: var(--wp--preset--color--black);
}

.wow-about-team__desc {
	font-size: 16px;
	font-weight: 300;
	color: var(--wp--preset--color--grey);
	margin: 0;
}

.wow-about-team__grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px 24px;
}

.wow-about-team__card {
	display: flex;
	flex-direction: column;
}

.wow-about-team__photo {
	position: relative;
	height: 220px;
	border-radius: 10px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	margin: 0 0 16px;
}

.wow-about-team__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}

.wow-about-team__name {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--black);
	margin: 0 0 8px;
}

.wow-about-team__bio {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
	margin: 0 0 12px;
	flex-grow: 1;
}

.wow-about-team__link {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.wow-about-team__link:hover,
.wow-about-team__link:focus-visible {
	text-decoration: underline;
}

.wow-about-team__foot {
	max-width: 1280px;
	margin: 48px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--wow-about-line);
	text-align: center;
	font-size: 13px;
	font-weight: 300;
	color: var(--wp--preset--color--grey);
}

.wow-about-team__foot a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	text-decoration: underline;
}

/* ── Craftsmanship — 50/50 split, reversed ── */
.wow-about-craft {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 82vh;
	direction: rtl;
}

.wow-about-craft > * {
	direction: ltr;
}

.wow-about-craft__media {
	background-size: cover;
	background-position: center;
	min-height: 360px;
	background-image: url('https://america-1406b.kxcdn.com/wp-content/uploads/2024/09/WheelsOnWalls-1.jpg');
}

.wow-about-craft__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px 80px;
	background: var(--wp--preset--color--off-white);
}

.wow-about-craft__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;
	margin: 0 0 24px;
	color: var(--wp--preset--color--black);
}

.wow-about-craft__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wow-about-craft__list li {
	display: flex;
	gap: 14px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
}

.wow-about-craft__list strong {
	font-weight: 700;
	color: var(--wp--preset--color--black);
}

/* ── Closing CTA ── */
.wow-about-cta {
	padding: 120px 32px;
	text-align: center;
	background: var(--wp--preset--color--black);
	color: #fff;
}

.wow-about-cta__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 18px;
}

.wow-about-cta__title {
	font-size: clamp(28px, 3.6vw, 48px);
	font-weight: 700;
	letter-spacing: -1px;
	max-width: 720px;
	margin: 0 auto 24px;
}

.wow-about-cta__desc {
	font-size: 16px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
	max-width: 480px;
	margin: 0 auto 40px;
}

.wow-about-cta__ctas {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.wow-about-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wow-about-btn--light {
	background: #fff;
	color: var(--wp--preset--color--text);
}

.wow-about-btn--light:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
	transform: translateY(-2px);
}

.wow-about-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.wow-about-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

/* ── Scroll reveal ── */
.wow-about-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.wow-about-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
	.wow-about-team__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.wow-about-trust__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	.wow-about-founder {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 24px 24px 72px;
	}

	.wow-about-founder__media {
		aspect-ratio: 3 / 2;
	}

	.wow-about-craft {
		grid-template-columns: 1fr;
		direction: ltr;
	}

	.wow-about-craft__media {
		min-height: 280px;
	}

	.wow-about-craft__text {
		padding: 56px 28px;
	}

	.wow-about-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.wow-about-signatures__track {
		gap: 40px;
	}

	.wow-about-signatures__img {
		height: 32px;
		max-width: 110px;
	}
}

/* ── Mobile collage restructure — the desktop 3×3-ish grid (3 photos /
   photo + highlight + photo / 1 photo) squeezes every cell, highlight
   included, into a thin 16:7 strip once each column is only ~1/3 of a phone
   screen — the highlight's own paragraph of text became close to
   unreadable at that size. Restructured to 3 photos / full-width text
   band / 3 photos, matching the requested reference layout: the highlight
   is pulled up to right after the 3rd photo via `order` (grid items honor
   it for auto-placement same as flex items do) rather than reordering the
   HTML, so the DOM/desktop layout stay untouched — nth-child here just
   means "the Nth direct child of the grid" (6 photos + 1 highlight = 7
   total). */
@media (max-width: 700px) {
	.wow-about-collage__grid > *:nth-child(1) {
		order: 1;
	}

	.wow-about-collage__grid > *:nth-child(2) {
		order: 2;
	}

	.wow-about-collage__grid > *:nth-child(3) {
		order: 3;
	}

	.wow-about-collage__highlight {
		order: 4;
		grid-column: 1 / -1;
		aspect-ratio: auto;
		padding: 28px 20px;
	}

	.wow-about-collage__grid > *:nth-child(4) {
		order: 5;
	}

	.wow-about-collage__grid > *:nth-child(6) {
		order: 6;
	}

	.wow-about-collage__grid > *:nth-child(7) {
		order: 7;
	}

	/* Squarer crop instead of the desktop's wide 16:7 strip — reads as an
	   actual portrait at 1/3 of a phone's width instead of a thin sliver. */
	.wow-about-collage__photo {
		aspect-ratio: 1 / 1;
	}

	/* Cancels the desktop-only centering trick on the last photo
	   (:last-child { grid-column: 2 } further up) — on mobile, with `order`
	   above landing it as the 3rd photo in row 3, it needs to fall back to
	   auto-placement like every other photo, not stay pinned to column 2. */
	.wow-about-collage__photo:last-child {
		grid-column: auto;
	}

	.wow-about-collage__highlight-title {
		font-size: 15px;
	}
}

@media (max-width: 560px) {
	.wow-about-team__grid {
		grid-template-columns: 1fr;
	}

	.wow-about-collage {
		padding: 40px 16px 0;
	}

	.wow-about-collage__grid {
		gap: 3px;
	}

	.wow-about-founder {
		padding: 16px 16px 56px;
	}
}