/*
 * Urban Motion activewear landing page (/activewear/).
 *
 * Loaded on that page only (inc/activewear.php). Every rule is namespaced to
 * .urban-motion-page, so nothing here can change another page. It builds on the
 * theme's tokens and base rules and only sets what this page needs.
 *
 * Layout in short:
 * - Below 900px the hero text sits ABOVE the picture, so it can never cover the
 *   model. From 900px up the text sits on the dark left side of the picture.
 * - The product grid is one column on phones and two columns from 640px up.
 *
 * Headings in this page state their color themselves. The legacy Additional
 * CSS and the Elementor kit both carry broad heading rules with !important that
 * turn headings white, which is what made the collection heading disappear on
 * the white background in the Elementor draft. Both are kept off this page (see
 * urban_swimwear_is_native_storefront()), and the !important on the heading
 * colors below is a second, deliberate guard, limited to this page.
 */

/* ---------- Font (self hosted, Latin subset, variable 500 to 700) ---------- */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/montserrat-latin-wght.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Page ---------- */

.urban-motion-page {
	--um-black: #111111;
	--um-white: #ffffff;
	--um-gold: #c6a35b;
	--um-ink: #0d0d0d;
	--um-media-bg: #f4f3f0;
	--um-font: 'Montserrat', var(--urban-font-family);

	background: var(--um-white);
	color: var(--um-black);
	font-family: var(--um-font);
}

/* ---------- Hero ---------- */

.urban-motion-page__hero {
	display: flex;
	flex-direction: column;
	background: var(--um-ink);
	color: var(--um-white);
	overflow: hidden;
}

/* Phones and tablets: text first, then the picture. */
.urban-motion-page__hero-inner {
	order: 1;
	padding: 2.5rem 1.25rem 2rem;
}

.urban-motion-page__hero-media {
	order: 2;
}

/* Cropped to 16:9 and anchored to the right, which always keeps the model and
   the color lineup in view and only trims the empty dark side. */
.urban-motion-page__hero-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 100% 30%;
}

.urban-motion-page .urban-motion-page__title {
	margin: 0 0 0.75rem;
	color: var(--um-white);
	font-family: var(--um-font);
	font-size: clamp(1.875rem, 9.2vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.05;
}

.urban-motion-page .urban-motion-page__tagline {
	margin: 0 0 1.75rem;
	color: var(--um-white);
	font-family: var(--um-font);
	font-size: clamp(0.9375rem, 3.8vw, 1.25rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.urban-motion-page .urban-motion-page__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 3rem;
	padding: 0 2rem;
	border: 0;
	border-radius: 2px;
	background: var(--um-gold);
	color: var(--um-black);
	font-family: var(--um-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.urban-motion-page .urban-motion-page__cta:hover {
	background: var(--um-white);
	color: var(--um-black);
	text-decoration: none;
}

.urban-motion-page .urban-motion-page__cta:focus,
.urban-motion-page .urban-motion-page__cta:focus-visible {
	outline: 3px solid var(--um-white);
	outline-offset: 3px;
}

.urban-motion-page .urban-motion-page__cta:focus:not(:focus-visible) {
	outline: 0;
}

@media (min-width: 900px) {
	/* Desktop: the picture is the background and the text sits on its dark side.
	   The height follows the picture's own proportions (about 620px at 1440px
	   wide), so nothing is cropped sideways, and only the very large screens
	   crop a little from the bottom. */
	.urban-motion-page__hero {
		position: relative;
		isolation: isolate;
		flex-direction: row;
		align-items: center;
		min-height: min(43vw, 720px);
	}

	.urban-motion-page__hero-media {
		position: absolute;
		inset: 0;
		order: 0;
		z-index: -1;
	}

	.urban-motion-page__hero-image {
		height: 100%;
		aspect-ratio: auto;
		object-position: 100% 20%;
	}

	.urban-motion-page__hero-inner {
		order: 0;
		width: 100%;
		padding: 3rem clamp(2rem, 4.45vw, 4rem);
	}

	/* The headline is sized in vw, so on one line it always ends at about 45% of
	   the width, well inside the dark side of the picture (the model starts at
	   about 51%). */
	.urban-motion-page .urban-motion-page__title {
		font-size: clamp(2.5rem, 4.45vw, 4rem);
		white-space: nowrap;
	}

	.urban-motion-page .urban-motion-page__tagline {
		font-size: clamp(1rem, 1.53vw, 1.375rem);
	}
}

/* ---------- Collection ---------- */

.urban-motion-page__collection {
	padding: 3rem 1.25rem 3.5rem;
	background: var(--um-white);
	/* The header stays at the top of the screen, so the anchor stops below it. */
	scroll-margin-top: var(--urban-header-height-mobile);
}

.urban-motion-page__collection-inner {
	max-width: 1312px;
	margin: 0 auto;
}

.urban-motion-page .urban-motion-page__collection-title {
	margin: 0 0 2rem;
	/* Deliberate !important: see the note at the top of this file. */
	color: #111111 !important;
	font-family: var(--um-font);
	font-size: clamp(1.5rem, 6.4vw, 2.375rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.urban-motion-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.urban-motion-page__empty {
	margin: 0;
	color: var(--um-black);
	text-align: center;
}

@media (min-width: 640px) {
	.urban-motion-page__collection {
		padding: 3.5rem 2rem 4rem;
	}

	.urban-motion-page__collection-title {
		margin-bottom: 2.5rem;
	}

	.urban-motion-page__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.5rem, 3.3vw, 3rem);
	}
}

@media (min-width: 900px) {
	.urban-motion-page__collection {
		padding: 4.5rem 4rem;
		scroll-margin-top: var(--urban-header-height);
	}

	.urban-motion-page .urban-motion-page__collection-title {
		font-size: clamp(1.75rem, 2.64vw, 2.375rem);
		margin-bottom: 3rem;
	}
}

/* ---------- Product card ---------- */

.urban-motion-page__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: center;
}

.urban-motion-page__card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--um-media-bg);
}

.urban-motion-page__card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.urban-motion-page__card-image--placeholder {
	background: var(--um-media-bg);
}

.urban-motion-page__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.375rem 0.75rem;
	background: var(--um-black);
	color: var(--um-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.urban-motion-page__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	padding-top: 1.5rem;
}

.urban-motion-page .urban-motion-page__card-title {
	margin: 0;
	/* Deliberate !important: see the note at the top of this file. */
	color: #111111 !important;
	font-family: var(--um-font);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.urban-motion-page .urban-motion-page__card-price {
	margin: 0;
	color: var(--um-black);
	font-size: 1.125rem;
	font-weight: 600;
}

.urban-motion-page .urban-motion-page__card-colors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin: 0;
	color: #555555;
	font-size: 0.8125rem;
	font-weight: 500;
}

.urban-motion-page__swatches {
	display: inline-flex;
	gap: 0.375rem;
}

.urban-motion-page__swatch {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--um-swatch);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Pushes the button to the bottom, so both cards line up even when one has
   more lines above it. */
.urban-motion-page__card-actions {
	width: 100%;
	margin-top: auto;
	padding-top: 0.75rem;
}

.urban-motion-page .urban-motion-page__card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 2.5rem;
	border: 0;
	border-radius: 2px;
	background: var(--um-black);
	color: var(--um-white);
	font-family: var(--um-font);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.urban-motion-page .urban-motion-page__card-cta:hover {
	background: var(--um-gold);
	color: var(--um-black);
	text-decoration: none;
}

.urban-motion-page .urban-motion-page__card-cta:focus,
.urban-motion-page .urban-motion-page__card-cta:focus-visible {
	outline: 3px solid var(--um-black);
	outline-offset: 3px;
}

.urban-motion-page .urban-motion-page__card-cta:focus:not(:focus-visible) {
	outline: 0;
}

@media (hover: hover) {
	.urban-motion-page__card-media:hover .urban-motion-page__card-image {
		transform: scale(1.03);
	}
}

@media (max-width: 639px) {
	.urban-motion-page .urban-motion-page__card-cta {
		display: flex;
		width: 100%;
	}
}

/*
 * Leggings-only framing fix: its source photo fills far more of its own
 * square frame than the other five collection photos (about 91% of frame
 * height vs. 64-75% for the rest), which reads as noticeably more "zoomed
 * in" beside the Sports Bra in desktop row 1. The photo itself is already a
 * 1:1 square matching the 632x632 card container, so object-fit can't add
 * margin on its own (there's no aspect-ratio mismatch for it to crop).
 * Scaling the image down slightly, centered within its own already-cropped
 * frame, reveals more of the card media background on every side, visually
 * matching the other five without touching the shared container, the
 * product page's own gallery (a completely different template), or any
 * other card. Chosen scale (0.77) brings its ~91% garment fill down to
 * roughly 70%, the middle of the other five products' range.
 */
.urban-motion-page__card[data-product-id="934"] .urban-motion-page__card-image {
	transform: scale(0.77);
}

@media (hover: hover) {
	.urban-motion-page__card[data-product-id="934"] .urban-motion-page__card-media:hover .urban-motion-page__card-image {
		/* Same 1.03 hover zoom as every other card, compounded onto the 0.77
		   base so the hover effect still feels identical in proportion. */
		transform: scale(0.7931);
	}
}

@media (prefers-reduced-motion: reduce) {
	.urban-motion-page__card-image,
	.urban-motion-page .urban-motion-page__cta,
	.urban-motion-page .urban-motion-page__card-cta {
		transition: none;
	}

	.urban-motion-page__card-media:hover .urban-motion-page__card-image {
		transform: none;
	}

	/* The Leggings scale-down above is a static framing fix, not motion, so
	   it stays in place even with the hover animation disabled. */
	.urban-motion-page__card[data-product-id="934"] .urban-motion-page__card-media:hover .urban-motion-page__card-image {
		transform: scale(0.77);
	}
}

/*
 * At the narrowest phone width, the Biker Shorts caption ("Black, Pink,
 * Plum Purple, Navy Blue") is the only one of the six long enough to wrap
 * onto a second line, making that one card 24px taller than the rest.
 * Reserving two lines' worth of height for every card's caption row (not
 * just Biker Shorts) keeps all six cards equal height here without hard-
 * coding a product-specific height. Scoped tightly below the 390px width
 * where every caption already fits on one line, so no extra space is added
 * at 390px, tablet or desktop. 45px is the measured real two-line height at
 * this font size (a single line measures ~20.8px), not a guessed em value.
 */
@media (max-width: 374px) {
	.urban-motion-page .urban-motion-page__card-colors {
		min-height: 45px;
	}
}