/* Our Work template (page-templates/template-our-work.php). Loaded on that template only. */

/* Compact filter bar so the work is visible straight away. */
.our-work-filters [data-work-filters] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.our-work-filters .btn.btn-outline-white {
	/* nowTypeface capitals sit ~0.7px high in the line box, and letter-spacing (3px) adds
	   trailing space after the last letter — offset both so the label is optically centred. */
	padding: calc(0.35rem + 0.75px) calc(0.9rem - 3px) calc(0.35rem - 0.75px) 0.9rem;
	font-size: 0.7rem;
	border-width: 1.5px;
	line-height: 1.4;
}
/* Phones: one swipeable row instead of several stacked rows. */
@media (max-width: 767.98px) {
	.our-work-filters [data-work-filters] {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.our-work-filters [data-work-filters]::-webkit-scrollbar {
		display: none;
	}
	.our-work-filters .btn.btn-outline-white {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Selected filter: same look as the button hover state. */
.our-work-filters .btn.btn-outline-white.active,
.our-work-filters .btn.btn-outline-white[aria-current="true"] {
	background-color: #ffffff;
	color: #0d1a1f;
	border-color: #ffffff;
}

/* Type of Work pills on cards: slightly smaller than the blog's so two fit on half-width cards. */
.our-work-grid .case-study .catagories .cat-single {
	height: 40px;
	padding: 0 16px;
	font-size: 0.85rem;
	white-space: nowrap;
}

.our-work-empty p {
	font-size: 1.1rem;
}