/* ==========================================================================
   uiux.pics — Mobbin-style homepage
   ========================================================================== */

/* ── App grid ────────────────────────────────────────────────────────────── */

.uiux-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

/* ── App card ────────────────────────────────────────────────────────────── */

.uiux-card {
	background: transparent;
	border: none;
	overflow: hidden;
	/* Remove WP default post margins */
	margin: 0 !important;
}

.uiux-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0;
	text-decoration: none !important;
	color: inherit;
	box-sizing: border-box;
}

/* ── Screenshot strip (legacy grid) ──────────────────────────────────────── */

.uiux-card__screenshots {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 25px;
	flex: 1;
}

/* No screenshots? Don't leave an empty gap */
.uiux-card__link:not(:has(.uiux-card__screenshots)) {
	gap: 0;
}

/* See All cell — same dimensions as screenshot, part of card link */
.uiux-card__see-all {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8e8e8;
}

.uiux-card__see-all-text {
	font-family: var(--wp--preset--font-family--onest, inherit);
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
	position: relative;
	z-index: 2;
}

/* ── Strip layout (full-width posts, horizontal screenshot row) ─────────── */

.uiux-home--strip .uiux-grid {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.uiux-card--strip {
	width: 100%;
}

.uiux-card--strip .uiux-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.uiux-card--strip .uiux-card__header-bar {
	display: inline-flex;
	max-width: 100%;
	align-self: flex-start;
}

.uiux-card--strip .uiux-card__header-link {
	text-decoration: none !important;
	color: inherit;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.uiux-card__strip-wrap {
	position: relative;
	width: 100%;
}

.uiux-card__strip {
	width: 100%;
	overflow: visible;
}

/* ── Strip scroll arrows (mouse/desktop devices only) ────────────────────── */

/*
 * Edge fades — the cut-off screenshot dissolves into the page background
 * under each arrow. Anchored to the viewport edge (the strip bleeds one
 * --uiux-layout-padding-inline past the wrapper on scrollable viewports).
 */
.uiux-card__strip-wrap::before,
.uiux-card__strip-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6rem;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s;
}

.uiux-card__strip-wrap::before {
	left: calc( -1 * var( --uiux-layout-padding-inline ) );
	background: linear-gradient( to right, var( --uiux-bg, #fff ) 0%, transparent 100% );
}

.uiux-card__strip-wrap::after {
	right: calc( -1 * var( --uiux-layout-padding-inline ) );
	background: linear-gradient( to left, var( --uiux-bg, #fff ) 0%, transparent 100% );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.uiux-card__strip-wrap.has-prev::before,
	.uiux-card__strip-wrap.has-next::after {
		opacity: 1;
		visibility: visible;
	}
}

.uiux-strip__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #000;
	color: #fff;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, background 0.15s ease, visibility 0.15s;
}

/*
 * The wrapper's edges sit exactly one --uiux-layout-padding-inline in from
 * the viewport edge, so left/right 0 lines the arrows up with the nav padding.
 */
.uiux-strip__arrow--prev {
	left: 0;
}

.uiux-strip__arrow--next {
	right: 0;
}

/* Only ever show on devices with a mouse — touch users swipe the row */
@media ( hover: hover ) and ( pointer: fine ) {
	.uiux-strip__arrow.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.uiux-strip__arrow.is-visible:hover {
		background: #262626;
	}
}

.uiux-card__strip-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: clamp( 0.75rem, 1.5vw, 1.5rem );
	width: 100%;
}

.uiux-card--strip .pic-preview {
	flex: 1 1 0;
	min-width: 0;
	width: 0;
}

.uiux-card--strip .uiux-card__see-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--pic-preview-bg, #f0f0f0);
	text-decoration: none !important;
	color: inherit;
	flex: 1 1 0;
	min-width: 0;
	width: 0;
	overflow: hidden;
}

.uiux-card__see-more-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}

.uiux-card__see-more-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	filter: blur(20px);
	transform: scale(1.08);
}

.uiux-card__see-more-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
}

.uiux-card__see-more-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp( 2rem, 20%, 2.75rem );
	min-width: 2rem;
	aspect-ratio: 520 / 1024;
	padding: 0;
	background: #000;
	color: #fff;
	font-family: var(--wp--preset--font-family--onest, inherit);
	font-size: clamp( 0.6875rem, 1.15vw, 0.8125rem );
	font-weight: 700;
	line-height: 1;
	border-radius: 0.4rem;
	flex-shrink: 0;
}

.uiux-card__see-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	border: 2px solid #000;
	border-radius: 999px;
	background: transparent;
	font-family: var(--wp--preset--font-family--onest, inherit);
	font-size: clamp( 0.75rem, 1.1vw, 0.875rem );
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	max-width: calc( 100% - 1rem );
	transition: background 0.15s ease;
}

.uiux-card--strip .uiux-card__see-more .uiux-card__see-more-arrow {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	max-width: 0.75rem;
	max-height: 0.75rem;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
}

.uiux-card__see-more-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0.85) 100%
	);
	transition: opacity 0.2s ease;
}

.uiux-card--strip .uiux-card__see-more:hover .uiux-card__see-more-bg::after {
	opacity: 0.75;
}

/* Tablet / mobile: swipeable horizontal scroll, bleed past page padding */
@media ( max-width: 1024px ) {
	.uiux-home--strip .uiux-grid,
	.uiux-card--strip,
	.uiux-card--strip .uiux-card__body {
		overflow: visible;
	}

	.uiux-card__strip {
		margin-inline: calc( -1 * var( --uiux-layout-padding-inline ) );
		width: calc( 100% + 2 * var( --uiux-layout-padding-inline ) );
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var( --uiux-layout-padding-inline );
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		box-sizing: border-box;
		padding-inline-start: var( --uiux-layout-padding-inline );
	}

	.uiux-card__strip::-webkit-scrollbar {
		display: none;
	}

	.uiux-card__strip-track {
		width: max-content;
		min-width: 100%;
		padding-inline-end: var( --uiux-layout-padding-inline );
	}

	.uiux-card--strip .pic-preview,
	.uiux-card--strip .uiux-card__see-more {
		flex: 0 0 auto;
		width: clamp( 140px, 38vw, 220px );
		min-width: auto;
		scroll-snap-align: start;
	}
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.uiux-pagination {
	margin-top: 3.5rem;
	display: flex;
	justify-content: center;
}

.uiux-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.uiux-pagination .page-numbers li {
	list-style: none;
}

.uiux-pagination .page-numbers a,
.uiux-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.75rem;
	border-radius: 8px;
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #cccccc;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	line-height: 1;
}

.uiux-pagination .page-numbers a:hover {
	background: #2a2a2a;
	border-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.uiux-pagination .page-numbers .current {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
	font-weight: 600;
}

/* ── Progressive scroll sentinel & loader ───────────────────────────────── */

#uiux-scroll-sentinel {
	height: 1px;
	margin-top: 3rem;
	visibility: hidden;
	pointer-events: none;
}

.uiux-scroll-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 0 3rem;
}

.uiux-scroll-loader[hidden] {
	display: none;
}

.uiux-scroll-loader__spinner {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	animation: uiux-scroll-spin 0.7s linear infinite;
}

@keyframes uiux-scroll-spin {
	to { transform: rotate(360deg); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.uiux-empty {
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	padding: 4rem 0;
	font-size: 1rem;
}

/* ── Carousel layout (alternate home design) ─────────────────────────────── */

.uiux-home--carousel .uiux-grid {
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.5rem;
}

.uiux-card--carousel .uiux-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.uiux-card__header-link {
	text-decoration: none !important;
	color: inherit;
	display: block;
	width: 100%;
}

.uiux-card__carousel {
	position: relative;
	width: 100%;
	/* aspect-ratio: 9 / 16; */
	padding: 1.2rem 0;
	background: #8989890f;
	border-radius: 2.2rem;
	/* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Image fills 50% of the container width, centered */
.uiux-card__carousel-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	/* Reserve space before JS runs so there is no layout shift */
	aspect-ratio: 473 / 1024;
	position: relative;
	text-decoration: none !important;
}

/* ── Slide-based system (mirrors modal architecture) ─────────────────────── */

/* Container that fills carousel-inner; slides stack inside it */
.uiux-card__slides {
	width: 100%;
	height: 100%;
	position: relative;
}

/* Each slide is hidden by default, shown when active */
.uiux-card__slide {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.uiux-card__slide.is-active {
	display: flex;
}

.uiux-card__slide.is-entering-left {
	animation: uiux-card-slide-left 0.22s ease forwards;
}

.uiux-card__slide.is-entering-right {
	animation: uiux-card-slide-right 0.22s ease forwards;
}

@keyframes uiux-card-slide-left {
	from { opacity: 0; transform: translateX(-25px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes uiux-card-slide-right {
	from { opacity: 0; transform: translateX(25px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Blurred thumbnail — clipped by overflow:hidden so blur never bleeds out */
.uiux-card__slide-thumb {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--uiux-screenshot-radius, clamp(20px, 1.65vw, 30px));
}

.uiux-card__slide-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(20px);
}

/* Full-resolution image — fades in over the blurred placeholder */
.uiux-card__slide-img {
	width: 100%;
	height: 100%;
	/* object-fit: contain; */
	object-position: top center;
	display: block;
	border-radius: var(--uiux-screenshot-radius, clamp(20px, 1.65vw, 30px));
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.uiux-card__slide-img.is-loaded {
	opacity: 1;
}

/* Loading spinner */
.uiux-card__slide-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
}

.uiux-card__slide-loader::after {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: uiux-card-spin 0.75s linear infinite;
}

@keyframes uiux-card-spin {
	to { transform: rotate(360deg); }
}

.uiux-card__slide-img.is-loaded ~ .uiux-card__slide-loader {
	display: none;
}

/* Arrows — hidden by default, shown on carousel hover */
.uiux-card__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #333;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.uiux-card__carousel:hover .uiux-card__arrow {
	opacity: 1;
	pointer-events: auto;
}

.uiux-card__arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.uiux-card__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 1;
	pointer-events: auto;
}

.uiux-card__arrow--prev {
	left: 0.625rem;
}

.uiux-card__arrow--next {
	right: 0.625rem;
}

/* Hide arrows at boundary or when only one image */
.uiux-card__arrow.is-hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}

@media ( max-width: 900px ) {
	.uiux-home--carousel .uiux-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.uiux-home--carousel .uiux-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	.uiux-grid {
		gap: 0.625rem;
	}

	.uiux-home--strip .uiux-grid {
		gap: 2rem;
	}

	.uiux-card__link {
		flex-direction: column;
		gap: 0.75rem;
	}

	.uiux-card__screenshots {
		gap: 8px;
	}
}