/**
 * Homepage "Featured Work" portfolio section styles.
 *
 * Tiles are structural placeholders for future project photography — the
 * image slot is a plain bordered panel with a centered label, never a
 * generated image, so it reads honestly as "space reserved" rather than
 * as real client work.
 */

.u3ds-portfolio {
	position: relative;
	background-color: var(--wp--preset--color--bg-primary);
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--4-xl);
	padding-bottom: var(--wp--preset--spacing--4-xl);
	border-top: 1px solid var(--wp--preset--color--border);
}

.u3ds-portfolio__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--2-xl);
	margin-bottom: var(--wp--preset--spacing--2-xl);
}

.u3ds-portfolio__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 var(--wp--preset--spacing--l);
}

.u3ds-portfolio__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.u3ds-portfolio__headline {
	margin: 0;
}

.u3ds-portfolio__link {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.u3ds-portfolio__link span {
	display: inline-block;
	transition: transform 200ms ease;
}

.u3ds-portfolio__link:hover span,
.u3ds-portfolio__link:focus-visible span {
	transform: translateX(4px);
}

.u3ds-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: minmax(150px, auto);
	gap: var(--wp--preset--spacing--l);
}

.u3ds-portfolio__tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.u3ds-portfolio__tile--large {
	grid-column: span 3;
	grid-row: span 2;
}

.u3ds-portfolio__tile--wide {
	grid-column: span 3;
}

.u3ds-portfolio__tile--bottom {
	grid-column: span 3;
}

/* These tiles previously inherited the grid's implicit ~150px row
   height (span 1, no aspect-ratio), stretching their native 4:3 product
   photography (Bird Whistle Figurine, Fairy House Pen Holder, Wavy
   Lattice Pen Holder — all confirmed 768x576 source files) into a
   ~3.9:1 sliver and cropping most of each product off the top/bottom.
   Locking the slot to the photos' actual 4:3 ratio removes that crop
   entirely. Wide sits in row 1 alongside the large tile (which spans
   rows 1-2), so giving it real height also gives Large's own row-driven
   height more room — harmless since Large now uses object-fit: contain
   above, which never crops regardless of the box it's given. */
@media (min-width: 1025px) {
	.u3ds-portfolio__tile--wide .u3ds-portfolio__slot,
	.u3ds-portfolio__tile--bottom .u3ds-portfolio__slot {
		flex: none;
		aspect-ratio: 4 / 3;
	}
}

.u3ds-portfolio__slot {
	position: relative;
	flex: 1;
	min-height: 150px;
	background-color: var(--wp--preset--color--bg-secondary);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--surface);
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--m);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.u3ds-portfolio__tile:hover .u3ds-portfolio__slot,
.u3ds-portfolio__tile:focus-visible .u3ds-portfolio__slot {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--sm);
}

.u3ds-portfolio__slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

/* Large tile only, desktop: the source photo (Virgin Mary Statue, 4:5
   portrait) sits inside a landscape-ish grid cell. object-fit: cover at
   that mismatched ratio was cropping into the top of the statue's head —
   unacceptable for the primary featured product. object-fit: contain
   guarantees the complete statue is always visible regardless of the
   cell's ratio, letterboxed by the slot's own background color; combined
   with the inset below it reads as a deliberately matted photograph
   rather than an accidental gap. Width/height must be set explicitly
   alongside inset: an absolutely positioned *replaced* element (img)
   with width/height:auto ignores inset entirely and renders at its
   intrinsic size instead of stretching to fit it. */
@media (min-width: 1025px) {
	.u3ds-portfolio__tile--large .u3ds-portfolio__slot img {
		inset: var(--wp--preset--spacing--m);
		width: calc(100% - (var(--wp--preset--spacing--m) * 2));
		height: calc(100% - (var(--wp--preset--spacing--m) * 2));
		object-fit: contain;
	}
}

.u3ds-portfolio__tile:hover .u3ds-portfolio__slot img,
.u3ds-portfolio__tile:focus-visible .u3ds-portfolio__slot img {
	transform: scale(1.04);
}

/* Large/wide featured tiles only: homepage-interactions.js nudges these two
   custom properties on pointermove (desktop, pointer:fine only) for a
   restrained parallax-lite shift layered on top of the same hover scale
   above. Default 0px, so with no JS this is identical to the base hover
   behavior — small tiles are never touched. */
.u3ds-portfolio__tile--large:hover .u3ds-portfolio__slot img,
.u3ds-portfolio__tile--large:focus-visible .u3ds-portfolio__slot img,
.u3ds-portfolio__tile--wide:hover .u3ds-portfolio__slot img,
.u3ds-portfolio__tile--wide:focus-visible .u3ds-portfolio__slot img {
	transform: scale(1.04) translate(var(--u3ds-pf-x, 0px), var(--u3ds-pf-y, 0px));
}

.u3ds-portfolio__category {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--wp--preset--spacing--2-xs);
}

.u3ds-portfolio__category::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.u3ds-portfolio__title {
	margin: 0 0 var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

@media (max-width: 1024px) {
	.u3ds-portfolio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.u3ds-portfolio__tile--large {
		grid-column: span 2;
		grid-row: span 1;
	}

	.u3ds-portfolio__tile--wide,
	.u3ds-portfolio__tile--bottom {
		grid-column: span 1;
		grid-row: span 1;
	}

	.u3ds-portfolio__tile--large .u3ds-portfolio__slot {
		aspect-ratio: 16 / 9;
	}

	.u3ds-portfolio__slot {
		aspect-ratio: 1 / 1;
		flex: none;
	}
}

@media (max-width: 781px) {
	.u3ds-portfolio {
		padding-top: var(--wp--preset--spacing--3-xl);
		padding-bottom: var(--wp--preset--spacing--3-xl);
	}

	.u3ds-portfolio__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--m);
	}

	/* Horizontal touch-scroll carousel — replaces the desktop bento grid
	   entirely at this width. Bled to the true viewport edge (canceling
	   the theme's root padding via negative margins) so the next card can
	   visibly peek past the section's normal text margin; an 8px left
	   inset is restored as a soft alignment cue without eating into the
	   peek amount — at 88vw cards + 16px gap this yields a ~21-25px peek
	   across 375-412px viewports (checked against the theme's root
	   padding token, clamp(1.5rem, 4vw, 4rem), which resolves to a flat
	   24px across that whole range). */
	.u3ds-portfolio__grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x;
		gap: 16px;
		margin-left: calc(-1 * var(--wp--style--root--padding-left));
		margin-right: calc(-1 * var(--wp--style--root--padding-right));
		padding: 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) 8px;
		scrollbar-width: none;
	}

	.u3ds-portfolio__grid::-webkit-scrollbar {
		display: none;
	}

	.u3ds-portfolio__tile {
		flex: 0 0 88vw;
		width: 88vw;
		scroll-snap-align: start;
	}

	/* Photography-aware per-product treatment: no ratio is forced across
	   the whole set. The base rule below (4:3) covers the wide tile
	   (Bird Whistle) and the two bottom tiles (Fairy House, Wavy Lattice)
	   — all three are genuinely 4:3 source photos, confirmed by reading
	   the actual files, so this crops nothing. Virgin Mary (portrait) and
	   the three small keychain/vase tiles (square) get their own
	   overrides below. */
	.u3ds-portfolio__slot {
		flex: none;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.u3ds-portfolio__slot img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Virgin Mary Statue: true 4:5 portrait. object-fit: contain
	   guarantees the complete statue (head to base) is always visible,
	   letterboxed by the slot's own background — never cropped to fill
	   the card. */
	.u3ds-portfolio__tile--large .u3ds-portfolio__slot {
		aspect-ratio: 4 / 5;
	}

	.u3ds-portfolio__tile--large .u3ds-portfolio__slot img {
		object-fit: contain;
	}

	/* Soccer Ball Keychain, Whistle Keychain, Butterfly Vase — compact,
	   center-framed products; a square crop comfortably contains each
	   complete product (checked against the source photography). */
	.u3ds-portfolio__tile--square .u3ds-portfolio__slot {
		aspect-ratio: 1 / 1;
	}

	/* Larger, higher-contrast type so the card reads as a featured
	   portfolio piece rather than a thumbnail caption — category stays a
	   deliberately small uppercase tag, title steps up clearly above it. */
	.u3ds-portfolio__category {
		font-size: 0.75rem;
		margin-bottom: var(--wp--preset--spacing--xs);
	}

	.u3ds-portfolio__title {
		font-size: clamp(1.125rem, 4.5vw, 1.25rem);
	}

	/* Minimal scroll-progress indicator, standing in for a native
	   scrollbar — driven by homepage-interactions.js reading the rail's
	   own scroll position, never an autoplaying/looping animation. */
	.u3ds-portfolio__progress {
		display: block;
		height: 2px;
		margin-top: var(--wp--preset--spacing--m);
		background-color: var(--wp--preset--color--border);
		border-radius: 999px;
		overflow: hidden;
	}

	.u3ds-portfolio__progress-fill {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 100ms linear;
	}
}

.u3ds-portfolio__progress {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.u3ds-portfolio__slot,
	.u3ds-portfolio__slot img,
	.u3ds-portfolio__link span,
	.u3ds-portfolio__progress-fill {
		transition: none;
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.u3ds-portfolio__grid {
		scroll-behavior: auto;
	}
}