/*
 * Phase 4 — homepage sections. Only loaded on the front page (see
 * inc/enqueue.php). Mobile-first: base rules target the smallest
 * viewport, min-width queries layer on enhancements. Builds entirely on
 * Phase 2/3 tokens and primitives (.urban-container, .urban-grid,
 * .urban-btn, .urban-form/.urban-field/.urban-input, --urban-* custom
 * properties) rather than duplicating them.
 */

/* ---------- Shared section heading (home-only for now; promote to
   components.css if a later phase reuses it elsewhere) ---------- */

.urban-section__heading {
	font-size: var(--urban-text-h2-size);
	font-weight: var(--urban-text-h2-weight);
	letter-spacing: var(--urban-text-h2-tracking);
	line-height: var(--urban-text-h2-leading);
	color: var(--urban-black);
	margin: 0 0 var(--urban-space-5);
}

.urban-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--urban-space-4);
	margin-bottom: var(--urban-space-5);
}

.urban-section__header .urban-section__heading {
	margin-bottom: 0;
}

.urban-link {
	color: var(--urban-black);
	font-size: var(--urban-text-small-size);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.urban-link:hover {
	color: var(--urban-gold);
}

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

.urban-hero-section {
	background-color: var(--urban-black);
	color: var(--urban-white);
}

.urban-hero-section__inner {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--urban-space-6);
	padding-top: var(--urban-space-7);
	padding-bottom: var(--urban-space-7);
}

.urban-hero-section__copy {
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-4);
	text-align: center;
}

.urban-hero-section__eyebrow {
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	color: var(--urban-gold);
	margin: 0;
}

.urban-hero-section__headline {
	/* base.css's own h1-h6 rule sets color directly on the element, which
	   always wins over inheriting .urban-hero-section's white -- a rule
	   targeting the element itself outranks pure inheritance regardless of
	   which has higher specificity. Needs an explicit value here too. */
	color: inherit;
	font-size: var(--urban-text-hero-size);
	font-weight: var(--urban-text-hero-weight);
	letter-spacing: var(--urban-text-hero-tracking);
	line-height: var(--urban-text-hero-leading);
	margin: 0;
	text-transform: uppercase;
}

.urban-hero-section__sub {
	font-size: var(--urban-text-body-size);
	color: rgba(255, 255, 255, 0.78);
	max-width: 34rem;
	margin: 0 auto;
}

.urban-hero-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--urban-space-3);
	justify-content: center;
}

/* .urban-btn--outline-black (components.css) is black-on-transparent --
   correct on the light sections it's meant for, invisible against this
   section's own black background. A second gold button here would also
   violate the "gold is a restrained accent, not two competing CTAs" brief,
   so this scopes a white outline to the hero specifically rather than
   adding a new general-purpose button variant only one place would use. */
/* Screen 1 review: both hero CTAs read slightly small beside the large
   headline. Scoped to the hero only (not components.css's shared .urban-btn)
   so every other button on the site keeps its existing size. */
.urban-hero-section__actions .urban-btn {
	min-height: calc(var(--urban-btn-height) + var(--urban-space-2));
	padding: 0 var(--urban-space-7);
}

.urban-hero-section__actions .urban-btn--outline-black {
	border-color: var(--urban-white);
	color: var(--urban-white);
}

.urban-hero-section__actions .urban-btn--outline-black:hover {
	background-color: var(--urban-white);
	color: var(--urban-black);
}

.urban-hero-section__media {
	width: 100%;
}

/* aspect-ratio (not the old max-height: 60vh) sizes this: it holds the box to
   the same shape before and after the image loads, so nothing shifts, and the
   crop stays the same regardless of the viewport's height. 4:3 was chosen (see
   the source photo's own note above) because the couple sit across roughly
   the right half of a 16:9 frame: a narrower box crops in on them without
   cropping either face or their swimwear/outfit, while a wider one would show
   little more than sky and pool on the left. object-position keeps the couple
   and enough of the skyline in frame; measured against the actual photo, not
   guessed. */
.urban-hero-section__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 78% 30%;
	display: block;
}

@media (min-width: 940px) {
	.urban-hero-section__inner {
		flex-direction: row;
		align-items: center;
		padding-top: var(--urban-space-9);
		padding-bottom: var(--urban-space-9);
	}

	.urban-hero-section__copy {
		flex: 1 1 48%;
		text-align: left;
	}

	/* A little tighter than the shared --urban-text-hero-tracking (-0.01em):
	   at every desktop width, "STREET READY." needs about 6-9% more room than
	   the copy column (below) was giving it, which is what pushed it onto a
	   third line as "STREET" / "READY.". Column width plus this tracking
	   together close that gap with margin at 1920, 1440, 1366, 1280 and
	   1024px (measured directly against the rendered page, not estimated).
	   Font-size is untouched, so the headline keeps its full size and
	   weight -- only the letter-spacing and column width changed. */
	.urban-hero-section__headline {
		letter-spacing: -0.03em;
	}

	.urban-hero-section__headline-emphasis {
		white-space: nowrap;
	}

	.urban-hero-section__sub {
		margin: 0;
	}

	.urban-hero-section__actions {
		justify-content: flex-start;
	}

	/* Wider than the old 42% portrait panel: this photo is landscape, and the
	   old width/height:100% pairing effectively ignored its own aspect-ratio,
	   letting the row's height (driven by the copy column's own text) decide
	   the crop instead. A fixed ratio at a fixed width crops the same way
	   regardless of how long the copy text is. */
	.urban-hero-section__media {
		flex: 1 1 52%;
	}

	.urban-hero-section__image {
		object-position: 85% 30%;
	}
}

/* ---------- Trust strip (Screen 1 review addition) ---------- */

.urban-trust-strip {
	background-color: var(--urban-white);
	border-bottom: 1px solid var(--urban-border);
}

.urban-trust-strip__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--urban-space-2);
	padding-top: var(--urban-space-4);
	padding-bottom: var(--urban-space-4);
	text-align: center;
}

.urban-trust-strip__item {
	font-size: var(--urban-text-small-size);
	letter-spacing: 0.02em;
	color: var(--urban-text);
}

a.urban-trust-strip__item--link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.urban-trust-strip__item--link:hover {
	color: var(--urban-gold);
}

@media (min-width: 768px) {
	.urban-trust-strip__inner {
		flex-direction: row;
		justify-content: center;
		gap: var(--urban-space-6);
	}

	.urban-trust-strip__item:not(:last-child)::after {
		content: '';
		display: inline-block;
		width: 1px;
		height: 0.75em;
		margin-left: var(--urban-space-6);
		background-color: var(--urban-border);
		vertical-align: middle;
	}
}

/* ---------- Shop by category ---------- */

/* Measured directly: this section had no padding override of its own, so its
   bottom padding was the shared .urban-section default (96px at 1024px and
   up, 64px below that), and New Arrivals' own top padding (see that section
   further down) was the same shared default on its side too -- 0px margin
   and 0px gap between the two section boxes, so the full 192px/128px of
   visible space was those two defaults stacking. The New Arrivals-to-Urban
   Motion transition below it reads as tighter but not crowded at 64px
   desktop / 40px tablet / 32px mobile (New Arrivals' own bottom padding,
   with Urban Motion contributing 0 on its side); to feel consistent with
   that without making either section flush against the other, this section's
   bottom and New Arrivals' top are each reduced to half of those same
   target numbers, so the two together add up to the same total. Only this
   section's own bottom edge is touched here; its top edge (the gap under
   the hero trust strip) is untouched. */
.urban-category-section {
	padding-bottom: var(--urban-space-4); /* 16px, mobile -- was 64px */
}

@media (min-width: 768px) {
	.urban-category-section {
		padding-bottom: 1.25rem; /* 20px, tablet -- was 64px */
	}
}

@media (min-width: 1024px) {
	.urban-category-section {
		padding-bottom: var(--urban-space-6); /* 32px, desktop -- was 96px */
	}
}

.urban-category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--urban-space-3);
}

.urban-category-card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--urban-ratio-product);
	background-color: var(--urban-surface-alt);
	color: var(--urban-white);
}

.urban-category-card__media {
	display: block;
	width: 100%;
	height: 100%;
}

/* Both source photos are portrait with the head close to the top edge and
   the product (bikini/pants, palm-print shorts) in the lower half. 3:4
   crops off part of the image height; anchoring at 12% keeps a little
   headroom while trimming mostly floor. A wider ratio (tried 4:5) cuts the
   men's shorts off, so the card keeps the shared product-card ratio. */
.urban-category-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	display: block;
	transition: transform 0.5s ease;
}

.urban-category-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--urban-space-2);
	padding: var(--urban-space-6) var(--urban-space-3) var(--urban-space-3);
	background: linear-gradient(to top, rgba(17, 17, 17, 0.88), rgba(17, 17, 17, 0.45) 55%, rgba(17, 17, 17, 0));
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Decorative cue that the whole card is a link; empty alt text keeps it out
   of the accessible name ("Women", not "Women right arrow"). */
.urban-category-card__label::after {
	content: '\2192' / '';
	color: var(--urban-gold);
	transition: transform 0.2s ease;
}

/* The shared focus ring sits outside the element and would be clipped by the
   card's overflow: hidden, so it is drawn inside the card instead. */
.urban-category-card:focus-visible {
	outline: 3px solid var(--urban-gold);
	outline-offset: -6px;
}

@media (hover: hover) {
	.urban-category-card:hover .urban-category-card__image {
		transform: scale(1.03);
	}

	.urban-category-card:hover .urban-category-card__label::after {
		transform: translateX(4px);
	}
}

@media (min-width: 768px) {
	.urban-category-grid {
		gap: var(--urban-space-5);
	}

	.urban-category-card__label {
		padding: var(--urban-space-7) var(--urban-space-5) var(--urban-space-5);
		font-size: var(--urban-text-h3-size);
	}
}

/* ---------- New Arrivals ---------- */

/* Everything here is scoped to .urban-new-arrivals: the product card and
   .urban-grid are shared with other sections and pages, which keep their
   current look. */

/* Two cards per row until there is room for four, so the four products never
   split into 3 + 1 (the shared grid switches to 3 columns at 768px). */
.urban-new-arrivals .urban-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
	.urban-new-arrivals .urban-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* The whole card is a link, so the global gold underline showed under every
   name and price. Cards have no underline; hover and focus underline the name. */
.urban-new-arrivals .urban-product-card {
	text-decoration: none;
}

.urban-new-arrivals .urban-product-card__image {
	transition: transform 0.5s ease;
}

.urban-new-arrivals .urban-product-card__name {
	text-decoration: underline transparent 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s ease;
}

/* Media clips the zoomed image (overflow: hidden) and underline colour does
   not affect layout, so nothing moves on hover. */
@media (hover: hover) {
	.urban-new-arrivals .urban-product-card:hover .urban-product-card__image {
		transform: scale(1.03);
	}

	.urban-new-arrivals .urban-product-card:hover .urban-product-card__name {
		text-decoration-color: var(--urban-gold);
	}
}

/* The shared focus ring is gold, about 2.2:1 on this light background. Cards
   here use black (about 18:1). Both :focus and :focus-visible are set so the
   fallback rule in accessibility.css cannot bring the gold ring back. */
.urban-new-arrivals .urban-product-card:focus,
.urban-new-arrivals .urban-product-card:focus-visible {
	outline: 3px solid var(--urban-black);
	outline-offset: 4px;
}

.urban-new-arrivals .urban-product-card:focus-visible .urban-product-card__name {
	text-decoration-color: var(--urban-gold);
}

/* Signature Print Halter Top's card only (template-parts/home/new-arrivals.php
   passes this class for that one product): its image, sw2.jpg, has a thin,
   near-black band baked into its own top edge. It is a landscape photo shown
   in this card's portrait (3:4) frame, so object-fit: cover uses its full
   height with no vertical room to crop into, and the band stays fully
   visible. A small, centered zoom trims an equal sliver off all four edges,
   comfortably clearing the roughly 0.7% of the image's height the band
   occupies -- imperceptible at this size, and it leaves the card's own
   dimensions, crop framing and the other three cards untouched. */
.urban-new-arrivals .urban-product-card__media--crop-top .urban-product-card__image {
	transform: scale(1.03);
}

/* Every other New Arrivals card starts at scale(1) and hovers to scale(1.03).
   This card already starts at 1.03, so its own hover target is bumped by the
   same +0.03 the other cards use, rather than hover doing nothing here. */
@media (hover: hover) {
	.urban-new-arrivals .urban-product-card:hover .urban-product-card__media--crop-top .urban-product-card__image {
		transform: scale(1.06);
	}
}

/* The gap above the Urban Motion banner directly below this section was, at
   every width, entirely this section's own padding-bottom from the shared
   .urban-section rule (96px at 1024px and up, 64px below it) -- confirmed by
   measuring both sections directly: the banner itself has no top padding or
   margin of its own, so none of the visible space came from there. Only
   padding-bottom is overridden here, to the same shared .urban-section rule
   other sections still use at its original size. */
.urban-new-arrivals {
	padding-bottom: var(--urban-space-6); /* 32px, mobile */
}

@media (min-width: 768px) {
	.urban-new-arrivals {
		padding-bottom: 2.5rem; /* 40px, tablet */
	}
}

@media (min-width: 1024px) {
	.urban-new-arrivals {
		padding-bottom: var(--urban-space-8); /* 64px, desktop -- was 96px (--urban-space-9) */
	}
}

/* The gap above THIS section, under Shop by Category, was also the shared
   .urban-section default on both sides (see the measurement note on
   .urban-category-section above). Reduced here on this section's own top
   edge only, to the other half of the same target total described there;
   Shop by Category's own top edge, and this section's own bottom edge
   (above), are untouched. */
.urban-new-arrivals {
	padding-top: var(--urban-space-4); /* 16px, mobile -- was 64px */
}

@media (min-width: 768px) {
	.urban-new-arrivals {
		padding-top: 1.25rem; /* 20px, tablet -- was 64px */
	}
}

@media (min-width: 1024px) {
	.urban-new-arrivals {
		padding-top: var(--urban-space-6); /* 32px, desktop -- was 96px */
	}
}

/* ---------- Urban Motion (campaign banner) ---------- */
/* This section only ever links out to /activewear/, it does not list
   products, so nothing here queries WooCommerce. It reuses the exact same
   photo /activewear/ uses (template-parts/activewear/hero.php), but every
   rule below is its own -- .urban-motion-page* (assets/css/activewear.css)
   loads only on that page, is never loaded here, and is never referenced
   below, so this section and that page cannot affect one another. Below
   1024px the text sits above the photo in the section's own black
   background, same reasoning as the main hero above it: the model is never
   covered. From 1024px the photo fills the banner and the text sits on its
   dark left side. */

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

.urban-motion-banner__inner {
	padding: var(--urban-space-7) 0;
	text-align: center;
}

.urban-motion-banner__media {
	order: 2;
}

.urban-motion-banner__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 100% 30%;
}

.urban-motion-banner__copy {
	max-width: 36rem;
	margin: 0 auto;
}

.urban-motion-banner__title {
	margin: 0 0 var(--urban-space-3);
	color: var(--urban-white);
	font-size: clamp(1.75rem, 6vw, 2.75rem);
	font-weight: var(--urban-text-h1-weight);
	letter-spacing: var(--urban-text-h1-tracking);
	line-height: 1.1;
}

.urban-motion-banner__tagline {
	margin: 0 0 var(--urban-space-5);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--urban-text-body-size);
	letter-spacing: 0.03em;
}

@media (min-width: 1024px) {
	.urban-motion-banner {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		min-height: min(34vw, 520px);
	}

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

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

	.urban-motion-banner__inner {
		width: 100%;
		padding: var(--urban-space-8) clamp(2rem, 4.45vw, 4rem);
		text-align: left;
	}

	.urban-motion-banner__copy {
		max-width: 26rem;
		margin: 0;
	}

	.urban-motion-banner__title {
		font-size: clamp(2rem, 3.2vw, 3rem);
		white-space: nowrap;
	}
}

/* ---------- Why Urban ---------- */

.urban-why-section__inner {
	text-align: center;
}

.urban-why-section__tagline {
	font-size: var(--urban-text-h3-size);
	font-weight: 700;
	color: var(--urban-gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--urban-space-5);
}

/* This section's own bottom padding was reduced from the shared .urban-section
   default (96px at 1024px and up, 64px below that) to close a stacked-padding
   gap against the lower Trust section that used to sit directly below it. That
   Trust section has since been removed as a duplicate of the trust strip below
   the hero (see PROJECT_STATE.md), so this section now flows straight into
   Stay in the Loop -- this reduced value stays, it reads as a normal,
   comfortable section gap on its own and was re-measured after that removal.
   Only this section's own bottom edge was ever touched; its top edge is
   untouched, so spacing above Why Urban is unaffected. */
.urban-why-section {
	padding-bottom: var(--urban-space-6); /* 32px, mobile and tablet -- was 64px */
}

@media (min-width: 1024px) {
	.urban-why-section {
		padding-bottom: var(--urban-space-7); /* 48px, desktop -- was 96px */
	}
}

.urban-why-section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--urban-space-6);
	max-width: 40rem;
	margin: 0 auto;
}

.urban-why-section__item-title {
	margin: 0 0 var(--urban-space-2);
	font-size: var(--urban-text-h3-size);
	font-weight: var(--urban-text-h3-weight);
	letter-spacing: var(--urban-text-h3-tracking);
	line-height: var(--urban-text-h3-leading);
	color: var(--urban-black);
}

.urban-why-section__item-copy {
	margin: 0;
	font-size: var(--urban-text-body-size);
	color: var(--urban-text-muted);
}

@media (min-width: 768px) {
	.urban-why-section__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--urban-space-7);
		max-width: none;
	}
}

/* ---------- Email capture ---------- */

/* This section's own content (heading, one line of copy, a single-row form)
   is short, but it was still using the shared .urban-section default padding
   on both edges -- 96px top AND bottom at 1024px and up, 64px both ways
   below that. Measured directly at the time: this section sat flush against
   the lower Trust section above it and Final CTA below it (0px gap either
   side), so all of the excess vertical height was this section's own
   padding, not a gap between sections. Reduced here, on both of this
   section's own edges, to the same tighter values used for Why Urban. Trust
   and Final CTA have both since been removed as redundant (see
   PROJECT_STATE.md); this section now sits directly below Why Urban and
   directly above the footer, and this same reduced padding still reads as a
   normal, comfortable gap on both sides. */
.urban-email-section {
	background-color: var(--urban-surface-alt);
	padding-top: var(--urban-space-6); /* 32px, mobile and tablet -- was 64px */
	padding-bottom: var(--urban-space-6); /* 32px, mobile and tablet -- was 64px */
}

@media (min-width: 1024px) {
	.urban-email-section {
		padding-top: var(--urban-space-7); /* 48px, desktop -- was 96px */
		padding-bottom: var(--urban-space-7); /* 48px, desktop -- was 96px */
	}
}

.urban-email-section__inner {
	max-width: 32rem;
	margin: 0 auto;
	text-align: center;
}

.urban-email-section__inner .urban-form {
	margin-top: var(--urban-space-5);
}

.urban-email-capture {
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-3);
	align-items: stretch;
}

@media (min-width: 480px) {
	.urban-email-capture {
		flex-direction: row;
		align-items: flex-start;
	}

	.urban-email-capture .urban-field {
		flex: 1 1 auto;
	}
}

/* The Sign up button's markup (urban-btn urban-btn--outline-gold) comes from
   urban-commerce's Email_Capture class, a plugin outside this theme, so its
   class name is left as-is rather than editing that file. This reuses the
   exact same design tokens as the .urban-btn--gold treatment used elsewhere
   on the homepage (e.g. the Urban Motion banner CTA) -- solid gold fill,
   black text -- scoped to just this form instead of a second, independent
   button style. */
.urban-email-capture .urban-btn--outline-gold {
	background-color: var(--urban-gold);
	border-color: var(--urban-gold);
	color: var(--urban-black);
}

.urban-email-capture .urban-btn--outline-gold:hover {
	background-color: transparent;
	color: var(--urban-gold);
}