/* Case-specific additions. The owner's theme styles remain the baseline. */
.project-stage--artwork {
	background: #edeae5;
	aspect-ratio: 4/3;
}

.portfolio-project-media:has(.project-stage--artwork) {
	aspect-ratio: 4/3;
}

.portfolio-project-media .project-stage--artwork .project-stage__artwork,
.portfolio-case-opening .project-stage--artwork .project-stage__artwork {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	transform: none;
	filter: none;
}

.portfolio-case-context {
	display: inline-block;
	font-size: 0.65rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 12px;
	border: 1px solid #ffffff30;
	color: #d5d1d0;
	margin-bottom: 20px;
}

.portfolio-case-media.is-artwork {
	grid-column: span 6;
	background: transparent;
	overflow: hidden;
}

.portfolio-case-media.is-artwork-wide {
	grid-column: 1/-1;
	background: transparent;
	overflow: hidden;
}

.portfolio-case-media.is-artwork > a,
.portfolio-case-media.is-artwork-wide > a {
	padding: 0;
	background: #eae6e1;
	display: block;
}

.portfolio-case-media .portfolio-artwork {
	display: block;
	width: 100%;
	height: auto;
	transform: none !important;
	transition: none;
}

.portfolio-case-media.is-artwork figcaption,
.portfolio-case-media.is-artwork-wide figcaption {
	padding: 18px 0;
	background: transparent;
}

.portfolio-case-media-grid {
	align-items: start;
}

.portfolio-case-opening__visual:has(.project-stage--artwork) {
	max-width: 660px;
}

.portfolio-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 38px;
}

.portfolio-filters[hidden] {
	display: none;
}

.portfolio-filters button[aria-pressed="true"] {
	background: #eeeae4;
	color: #17171a;
	border-color: #eeeae4;
}

.portfolio-filters button:focus-visible {
	outline: 2px solid #c12743;
	outline-offset: 4px;
}

.portfolio-filters button[data-filter="website"],
.portfolio-project-card[data-project-kind="website"] {
	--category-accent: #92b6df;
}

.portfolio-filters button[data-filter="mobile"],
.portfolio-project-card[data-project-kind="mobile"] {
	--category-accent: #bca0ee;
}

.portfolio-filters button[data-filter="artwork"],
.portfolio-project-card[data-project-kind="artwork"] {
	--category-accent: #e7af80;
}

.portfolio-filters button {
	font: inherit;
	font-size: 0.8rem;
	border: 1px solid #ffffff35;
	background: transparent;
	color: #bdbdbd;
	padding: 9px 18px;
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition:
		background 0.25s,
		color 0.25s,
		border-color 0.25s;
}

.portfolio-filters button:not([data-filter="all"])::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--category-accent);
}

.portfolio-filters button:not([data-filter="all"])[aria-pressed="true"] {
	background: var(--category-accent);
	border-color: var(--category-accent);
}

.portfolio-filters button[aria-pressed="true"]::before {
	background: currentcolor;
}

.portfolio-filter-count {
	font-size: 0.65rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.portfolio-project-card .portfolio-project-meta {
	color: var(--category-accent, #c8c1b9);
}

.portfolio-project-card .portfolio-project-read {
	border-color: var(--category-accent, #c8c1b9);
}

.portfolio-project-card[hidden] {
	display: none !important;
}

.portfolio-project-grid.is-filtered .portfolio-project-card {
	margin-top: 0;
}

.portfolio-box .portfolio-img .project-stage img,
.portfolio-box:hover .portfolio-img .project-stage img {
	transform: none;
	filter: none;
}

.portfolio-box .portfolio-img .project-stage__artwork {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.portfolio-box .portfolio-img > a {
	display: block;
}

@media (width <=767.98px) {
	.portfolio-case-media.is-artwork,
	.portfolio-case-media.is-artwork-wide {
		grid-column: 1/-1;
	}

	.portfolio-case-context {
		order: 0;
		align-self: flex-start;
	}
}