/* IcaruZen Portfolio Filter — theme mode
   The grid, cards and hover states all come from the floka stylesheet.
   This file only styles the filter bar, which the theme layout doesn't ship,
   plus the fallback rules used when isotope isn't available. */

.izp-theme-grid {
	--izp-gutter: 30px;
	--izp-btn-radius: 25px;
	--izp-font-display: "Marcellus", serif;
	--izp-accent: #253D8C;
	--izp-border: #253D8C;
}

.izp-theme-grid .izp-filter {
	display: flex;
	justify-content: center;
	margin: 0 0 clamp(28px, 3.5vw, 50px);
}

.izp-theme-grid .izp-filter.izp-align-left {
	justify-content: flex-start;
}

.izp-theme-grid .izp-filter.izp-align-right {
	justify-content: flex-end;
}

.izp-theme-grid .izp-filter .pxl--filter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 11px 24px;
	font-family: var(--izp-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--izp-accent);
	background: transparent;
	border: 1px solid var(--izp-border);
	border-radius: var(--izp-btn-radius);
	cursor: pointer;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease,
		background-color 0.25s ease;
}

.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item::after,
.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item::before {
	content: none;
}

.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item:hover,
.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item:focus-visible {
	opacity: 1;
	color: #fff;
	background: var(--izp-accent);
	border-color: var(--izp-accent);
}

.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item:focus-visible {
	outline: 2px solid var(--izp-accent);
	outline-offset: 3px;
}

.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item.active {
	opacity: 1;
	color: #fff;
	background: var(--izp-accent);
	border-color: var(--izp-accent);
}

/* Spacing. Isotope positions items by their outer box, so the gap is padding
   on each item with a matching negative margin on the row. */
.izp-theme-grid .pxl-grid-inner {
	margin-right: calc(var(--izp-gutter) / -2);
	margin-left: calc(var(--izp-gutter) / -2);
	margin-bottom: calc(var(--izp-gutter) * -1);
}

.izp-theme-grid .pxl-grid-item {
	padding-right: calc(var(--izp-gutter) / 2);
	padding-left: calc(var(--izp-gutter) / 2);
	margin-bottom: var(--izp-gutter);
}

.izp-theme-grid .pxl-post--inner {
	margin-bottom: 0;
}

/* Card titles pick up the same display face as the pills. */
.izp-theme-grid .pxl-post--title {
	font-family: var(--izp-font-display);
}

@media (max-width: 600px) {
	.izp-theme-grid .izp-filter {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.izp-theme-grid .izp-filter::-webkit-scrollbar {
		display: none;
	}

	.izp-theme-grid .izp-filter .pxl--filter-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		justify-content: safe center;
	}

	.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item {
		padding: 9px 18px;
		font-size: 15px;
	}
}

/* Load more (All Projects tab only) */
.izp-theme-grid .izp-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(30px, 3.5vw, 52px);
}

.izp-theme-grid .izp-more[hidden] {
	display: none;
}

.izp-theme-grid .izp-more__btn {
	padding: 14px 36px;
	font-family: var(--izp-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--izp-accent);
	background: transparent;
	border: 1px solid var(--izp-border);
	border-radius: var(--izp-btn-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.izp-theme-grid .izp-more__btn:hover,
.izp-theme-grid .izp-more__btn:focus-visible {
	color: #fff;
	background: var(--izp-accent);
	border-color: var(--izp-accent);
}

/* Items past the batch limit on the "All Projects" tab. Isotope hides these
   natively through its own filter function; this rule only matters for the
   no-JS-masonry fallback path. */
.izp-theme-grid .pxl-grid-item.izp-batch-hide {
	display: none !important;
}

/* Fallback: only applied when the theme's isotope never initialised. */
.izp-theme-grid.izp-fallback .grid-sizer {
	display: none;
}

.izp-theme-grid.izp-fallback .pxl-grid-item.izp-hide {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.izp-theme-grid .izp-filter .pxl--filter-inner .filter-item {
		transition: none;
	}
}