/**
 * Portfolio grid — category tabs, filter sidebar, project cards, pagination.
 *
 * Figma frames 1920 / 1440 / 1240 / 1024 / 768 / 360 → "Portfolio".
 * Card turns from a horizontal split into a stacked one below 1440, and
 * the sidebar moves above the grid below 768.
 */

.spc-portfolio__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ---------------------------------------------------------------------------
   Category tabs
   ------------------------------------------------------------------------ */

.spc-portfolio__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border: 1px solid var(--sp-border);
}

.spc-portfolio__tab {
	padding: 12px 24px;
	font: 700 16px/1.5 var(--sp-font-body);
	color: var(--sp-muted);
	text-decoration: none;
	transition: color var(--spc-duration) var(--spc-ease), box-shadow var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__tab:hover,
.spc-portfolio__tab:focus-visible,
.spc-portfolio__tab.is-current {
	color: var(--sp-black);
	box-shadow: inset 0 0 0 2px var(--sp-gold);
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.spc-portfolio__content {
	display: grid;
	grid-template-columns: 480px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.spc-portfolio__aside {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spc-portfolio__posts {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ---------------------------------------------------------------------------
   Filters
   ------------------------------------------------------------------------ */

.spc-portfolio__filter {
	padding: 8px;
	border-radius: 32px;
	background: var(--sp-white);
}

.spc-portfolio__filter-title {
	padding: 16px;
	border-bottom: 1px solid var(--sp-border);
}

.spc-portfolio__filter-list {
	margin: 0;
	padding: 16px;
	list-style: none;
}

.spc-portfolio__check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	font: 700 16px/1.5 var(--sp-font-body);
	color: var(--sp-dark);
	text-decoration: none;
	transition: color var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__check:hover,
.spc-portfolio__check:focus-visible {
	color: var(--sp-gold);
}

.spc-portfolio__box {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px;
	border: 2px solid var(--sp-dark);
	border-radius: 3px;
	transition: background-color var(--spc-duration) var(--spc-ease), border-color var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__check.is-checked .spc-portfolio__box {
	background: var(--sp-black);
	border-color: var(--sp-black);
}

/* The tick, drawn with two borders so no icon file is needed. */
.spc-portfolio__check.is-checked .spc-portfolio__box::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4px;
	height: 8px;
	border: solid var(--sp-cream);
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

/* ---------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------ */

.spc-portfolio__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	list-style: none;
	transition: opacity var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__posts.is-loading .spc-portfolio__grid {
	opacity: 0.4;
}

.spc-portfolio__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.spc-portfolio__photo {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sp-border);
}

.spc-portfolio__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spc-portfolio__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 8px;
	border-radius: 9999px;
	background: var(--sp-white);
	font: 600 12px/1 var(--sp-font-body);
	color: var(--sp-dark);
}

.spc-portfolio__badge-icon {
	width: 12px;
	height: 12px;
}

.spc-portfolio__badge span {
	padding-inline: 4px;
}

.spc-portfolio__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
}

.spc-portfolio__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--sp-muted);
}

.spc-portfolio__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__title a:hover,
.spc-portfolio__title a:focus-visible {
	color: var(--sp-gold);
}

.spc-portfolio__empty {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Load more + pagination
   ------------------------------------------------------------------------ */

.spc-portfolio__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spc-portfolio__bottom[hidden],
.spc-portfolio__more[hidden],
.spc-portfolio__empty[hidden] {
	display: none;
}

/* Keeps the pagination on the right when "Load more" is gone. */
.spc-portfolio__pages {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.spc-portfolio__page,
.spc-portfolio__gap,
.spc-portfolio__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font: 700 16px/1.5 var(--sp-font-body);
	color: var(--sp-dark);
	text-decoration: none;
	transition: color var(--spc-duration) var(--spc-ease), border-color var(--spc-duration) var(--spc-ease);
}

.spc-portfolio__page:hover,
.spc-portfolio__page:focus-visible,
.spc-portfolio__page.is-current {
	color: var(--sp-gold);
}

.spc-portfolio__arrow {
	border: 1px solid var(--sp-dark);
	border-radius: 9999px;
}

.spc-portfolio__arrow .spc-icon {
	width: 24px;
	height: 24px;
}

.spc-portfolio__arrow:hover,
.spc-portfolio__arrow:focus-visible {
	border-color: var(--sp-gold);
	color: var(--sp-gold);
}

.spc-portfolio__arrow.is-disabled {
	border-color: var(--sp-muted);
	color: var(--sp-muted);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   1440 and below: the card stacks
   ------------------------------------------------------------------------ */

@media (max-width: 1439px) {
	.spc-portfolio__card {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1239px) {
	.spc-portfolio__inner,
	.spc-portfolio__posts {
		gap: 32px;
	}

	.spc-portfolio__content {
		grid-template-columns: 464px minmax(0, 1fr);
		gap: 32px;
	}
}

/* From here the posts column is too narrow for "Load more" and the page
   numbers side by side (the Figma frames let them overflow), so the bar
   stacks and the tab row scrolls instead of wrapping. */
@media (max-width: 1023px) {
	.spc-portfolio__content {
		grid-template-columns: 336px minmax(0, 1fr);
	}

	.spc-portfolio__tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.spc-portfolio__tabs::-webkit-scrollbar {
		display: none;
	}

	.spc-portfolio__tab {
		white-space: nowrap;
	}

	.spc-portfolio__bottom {
		flex-direction: column;
		align-items: stretch;
	}

	.spc-portfolio__more {
		align-self: center;
	}

	.spc-portfolio__pages {
		margin-left: 0;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.spc-portfolio__pages::-webkit-scrollbar {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Phones: sidebar above the grid, bottom bar in two rows
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.spc-portfolio__content {
		grid-template-columns: minmax(0, 1fr);
		gap: 64px;
	}

}