/**
 * Saiberlab Projects — filterable grid.
 *
 * Values here mirror what the hand-built Elementor cards computed to, so the
 * grid is visually identical after the move to a post type.
 */

.slp-projects {
	--slp-line: #e4dcd3;
	--slp-accent: #8a5a2a;
	--slp-ink: #15120f;
	--slp-muted: #6e6862;
	--slp-subtle: #8a837c;
	--slp-radius: 8px;
}

/* Tabs --------------------------------------------------------------------- */

.slp-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

/* Qualified with the element name and scoped to the block: the theme styles a
   bare <button> with Elementor's accent colour, which renders as a pink pill,
   and a lone class selector loses that specificity contest. */
.slp-projects button.slp-tab {
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--slp-muted);
	cursor: pointer;
	font-family: Jost, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.8px;
	line-height: 1.2;
	padding: 15px 35px;
	text-transform: uppercase;
	transition: color .18s ease, border-color .18s ease;
}

.slp-projects button.slp-tab:hover,
.slp-projects button.slp-tab:focus-visible {
	background: none;
	background-color: transparent;
	color: var(--slp-accent);
}

.slp-projects button.slp-tab.is-active {
	background: none;
	background-color: transparent;
	border-bottom-color: var(--slp-accent);
	color: var(--slp-accent);
}

/* Grid --------------------------------------------------------------------- */

.slp-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.slp-card {
	background: #fff;
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.slp-card[hidden] {
	display: none;
}

.slp-card__media {
	/* A fixed ratio keeps the row tops aligned whatever the source crop. */
	aspect-ratio: 11 / 8;
	overflow: hidden;
}

.slp-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	width: 100%;
}

.slp-card:hover .slp-card__img {
	transform: scale(1.03);
}

.slp-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 18px 22px 24px;
}

.slp-card__title {
	color: var(--slp-ink);
	font-family: "Playfair Display", serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}

.slp-card__subtitle {
	color: var(--slp-subtle);
	font-family: Jost, sans-serif;
	font-size: 13px;
	margin: 6px 0 0;
}

.slp-card__desc {
	color: var(--slp-muted);
	font-family: Jost, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	margin: 16px 0 0;
}

.slp-card__link {
	align-items: center;
	color: var(--slp-accent);
	display: inline-flex;
	font-family: Jost, sans-serif;
	font-size: 11px;
	gap: 8px;
	letter-spacing: 1.8px;
	/* Pins the link to the foot of the card so it lines up across a row
	   whatever length the descriptions run to. */
	margin-top: auto;
	padding: 4px 0;
	padding-top: 20px;
	text-decoration: none;
	text-transform: uppercase;
	width: fit-content;
}

.slp-card__link:hover .slp-card__arrow,
.slp-card__link:focus-visible .slp-card__arrow {
	transform: translateX(4px);
}

.slp-card__arrow {
	transition: transform .18s ease;
}

.slp-empty {
	color: var(--slp-muted);
	font-family: Jost, sans-serif;
	padding: 30px 0;
}

/* Pager -------------------------------------------------------------------- */

.slp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 34px;
}

.slp-pager[hidden] {
	display: none;
}

.slp-projects .slp-pager button {
	background: none;
	background-color: transparent;
	border: 1px solid var(--slp-line);
	border-radius: 4px;
	color: var(--slp-muted);
	cursor: pointer;
	font-family: Jost, sans-serif;
	font-size: 13px;
	line-height: 1;
	min-width: 38px;
	padding: 11px 12px;
	transition: color .18s ease, border-color .18s ease;
}

.slp-projects .slp-pager button:hover:not([disabled]) {
	border-color: var(--slp-accent);
	color: var(--slp-accent);
}

.slp-projects .slp-pager button.is-active {
	background: var(--slp-accent);
	background-color: var(--slp-accent);
	border-color: var(--slp-accent);
	color: #fff;
}

.slp-projects .slp-pager button[disabled] {
	cursor: default;
	opacity: .4;
}

/* Responsive --------------------------------------------------------------- */

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

	.slp-projects button.slp-tab {
		font-size: 14px;
		padding: 12px 20px;
	}
}

@media (max-width: 767px) {
	.slp-grid,
	.slp-grid--2,
	.slp-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.slp-tabs {
		/* Keeps the filters on one line instead of stacking five deep. */
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.slp-tabs::-webkit-scrollbar {
		display: none;
	}

	.slp-projects button.slp-tab {
		flex: 0 0 auto;
		padding: 12px 16px;
	}
}

/* A generated mockup is rendered to the card's own shape with its padding and
   shadow already baked in, so it is shown whole rather than cropped to fill. */
.slp-card__media--mockup {
	background: #faf7f4;
}

.slp-card__media--mockup .slp-card__img {
	object-fit: contain;
}

.slp-card:hover .slp-card__media--mockup .slp-card__img {
	transform: none;
}