/**
 * PUMPT Work — front-end styles.
 *
 * Defaults here match the reference design; every value is overridable
 * from the Elementor Style tab, which writes into the CSS variables and
 * the element selectors below.
 */

.pw-wrap {
	--pw-transition: 300ms;
	--pw-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pw-font-heading: Helvetica, sans-serif;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--pw-font-body);
}

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

.pw-grid {
	display: grid;
	grid-template-columns: repeat(var(--pw-columns, 3), minmax(0, 1fr));
	column-gap: var(--pw-column-gap, 60px);
	row-gap: var(--pw-row-gap, 60px);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity var(--pw-transition) ease;
}

.pw-wrap.is-loading .pw-grid {
	opacity: 0.35;
	pointer-events: none;
}

/* Responsive fallback for --pw-columns.
 * Elementor widgets get per-breakpoint values from their own generated CSS,
 * which is far more specific and still wins. This is for grids rendered
 * outside Elementor — the related-work grid on the single case study — which
 * otherwise stayed at 3 columns all the way down to phone width. */
@media (max-width: 1024px) {
	.pw-grid {
		--pw-columns: 2;
	}
}

@media (max-width: 767px) {
	.pw-grid {
		--pw-columns: 1;
		--pw-column-gap: 24px;
		--pw-row-gap: 40px;
	}
}

/* ----------------------------------------------- Per-row / featured layout
 * Switches to flex so individual rows can hold a different number of cards
 * than the default column count. CSS Grid can't express this: it would need
 * repeat(calc(var(--pw-columns) * n), …) and repeat() only accepts a literal
 * integer for the track count.
 *
 * A card with no --of-N modifier falls back to the normal column width, so
 * anything past the defined rows flows as usual.
 */
.pw-grid.pw-grid--flex {
	display: flex;
	flex-wrap: wrap;
}

.pw-grid--flex > .pw-card {
	flex: 0 0 calc(
		(100% - (var(--pw-columns, 3) - 1) * var(--pw-column-gap, 60px)) / var(--pw-columns, 3)
	);
}

.pw-grid--flex > .pw-card--of-1 { flex-basis: 100%; }
.pw-grid--flex > .pw-card--of-2 { flex-basis: calc((100% - 1 * var(--pw-column-gap, 60px)) / 2); }
.pw-grid--flex > .pw-card--of-3 { flex-basis: calc((100% - 2 * var(--pw-column-gap, 60px)) / 3); }
.pw-grid--flex > .pw-card--of-4 { flex-basis: calc((100% - 3 * var(--pw-column-gap, 60px)) / 4); }
.pw-grid--flex > .pw-card--of-5 { flex-basis: calc((100% - 4 * var(--pw-column-gap, 60px)) / 5); }
.pw-grid--flex > .pw-card--of-6 { flex-basis: calc((100% - 5 * var(--pw-column-gap, 60px)) / 6); }

.pw-grid--flex > .pw-card--featured {
	--pw-media-height: var(--pw-featured-media-height, 420px);
}

/* One column has nothing to widen — let every card fill the row. */
@media (max-width: 767px) {
	.pw-grid--flex > .pw-card,
	.pw-grid--flex > .pw-card[class*="pw-card--of-"] {
		flex-basis: calc(
			(100% - (var(--pw-columns, 1) - 1) * var(--pw-column-gap, 60px)) / var(--pw-columns, 1)
		);
	}
}

/* ---------------------------------------------------------------- Card */

.pw-card {
	--pw-media-height: 288px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition:
		background-color var(--pw-transition) ease,
		border-color var(--pw-transition) ease,
		box-shadow var(--pw-transition) ease,
		transform var(--pw-transition) ease;
}

.pw-card__media {
	position: relative;
	display: block;
	width: 100%;
	height: var(--pw-media-height, 288px);
	margin-bottom: 20px;
	overflow: hidden;
	background-color: var(--pw-placeholder, #000);
	text-decoration: none;
}

.pw-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pw-transition) ease, filter var(--pw-transition) ease;
}

.pw-card__image--placeholder {
	background-color: var(--pw-placeholder, #000);
}

.pw-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.pw-card__body > *:last-child {
	margin-bottom: 0;
}

/* Matches .pw-card__excerpt exactly — no tracking, so it reads as the same
   face as the rest of the body copy. */
.pw-card__client {
	display: block;
	margin-bottom: 14px;
	color: #333;
	font-family: var(--pw-font-body);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 26px;
	text-transform: uppercase;
}

/* Same specificity guard as the tag list — the theme sets heading margins
   via `.entry-content h1..h6`. */
.pw-card .pw-card__title {
	margin: 0 0 20px;
	color: #000;
	font-family: var(--pw-font-heading);
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 30px;
}

/* Beat the theme's content-link underline, including its hover/focus states.
   Astra's `.ast-single-post .entry-content a` is (0,2,1), so a bare
   `.pw-card__title a` at (0,1,1) would lose — and merely matching it would
   leave the outcome to stylesheet order. `.pw-grid` makes it (0,3,1). */
.pw-grid .pw-card .pw-card__title,
.pw-grid .pw-card .pw-card__title a,
.pw-grid .pw-card .pw-card__title a:link,
.pw-grid .pw-card .pw-card__title a:visited,
.pw-grid .pw-card .pw-card__title a:hover,
.pw-grid .pw-card .pw-card__title a:focus,
.pw-grid .pw-card .pw-card__title a:active {
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
}

.pw-card__title a {
	color: inherit;
	transition: color var(--pw-transition) ease;
}

.pw-card__excerpt {
	margin-bottom: 20px;
	color: #333;
	font-family: var(--pw-font-body);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

/* Scoped to `.pw-card`, not `.pw-wrap`: Astra ships
   `.entry-content ul { padding-left: 20px }` at (0,1,1), which outranks a bare
   `.pw-card__terms`. Two classes (0,2,0) takes it back — and `.pw-card` is
   present in the single template's related grid too, where `.pw-wrap` is not. */
.pw-card .pw-card__terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-card .pw-card__term {
	margin: 0;
	list-style: none;
}

.pw-card__term {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid #111;
	border-radius: 999px;
	color: #111;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

/* ------------------------------------------------------------ Filter bar */

.pw-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

.pw-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 26px;
	border: 1px solid #d4d4d4;
	border-radius: 999px;
	background-color: #fff;
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--pw-transition) ease,
		border-color var(--pw-transition) ease,
		color var(--pw-transition) ease;
}

.pw-filter__item:hover:not(.is-active) {
	border-color: #b8b8b8;
	background-color: #f2f2f2;
}

.pw-filter__item.is-active {
	border-color: #000;
	background-color: #000;
	color: #fff;
	font-weight: 600;
}

.pw-filter__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pw-filter__count {
	font-size: 0.85em;
	opacity: 0.7;
}

/* ------------------------------------------------------------ Pagination */

.pw-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 48px;
}

/* Three classes (0,3,0) to outrank Astra's
   `.ast-single-post .entry-content a { text-decoration: underline }` (0,2,1),
   which otherwise underlines every page number and arrow. */
.pw-wrap .pw-pagination .page-numbers,
.pw-wrap .pw-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 56px;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid #d4d4d4;
	border-radius: 999px;
	background-color: #fff;
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--pw-transition) ease,
		border-color var(--pw-transition) ease,
		color var(--pw-transition) ease;
}

.pw-wrap .pw-pagination .page-numbers:hover,
.pw-wrap .pw-pagination .page-numbers:focus,
.pw-wrap .pw-load-more:hover,
.pw-wrap .pw-load-more:focus {
	text-decoration: none;
}

.pw-wrap .pw-pagination .page-numbers.current,
.pw-wrap .pw-pagination a.page-numbers:hover,
.pw-wrap .pw-load-more:hover {
	border-color: #000;
	background-color: #000;
	color: #fff;
}

.pw-wrap .pw-pagination .page-numbers:focus-visible,
.pw-wrap .pw-load-more:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Ellipsis is a plain span, not a button. */
.pw-wrap .pw-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: none;
	cursor: default;
}

.pw-pagination__icon {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
}

.pw-load-more.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* -------------------------------------------------------- See all link */

.pw-footer {
	display: flex;
	margin-top: 48px;
}

/* Three classes to outrank Astra's `.ast-single-post .entry-content a`
   underline, same as the pagination. */
.pw-wrap .pw-footer .pw-see-all {
	display: inline-block;
	color: #000;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--pw-transition) ease, opacity var(--pw-transition) ease;
}

.pw-wrap .pw-footer a.pw-see-all:hover,
.pw-wrap .pw-footer a.pw-see-all:focus {
	text-decoration: none;
	opacity: 0.65;
}

.pw-wrap .pw-footer a.pw-see-all:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------------------------------------------------------- Empty state */

.pw-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 0;
	opacity: 0.7;
}

/* ---------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.pw-card,
	.pw-card__image,
	.pw-grid,
	.pw-filter__item,
	.pw-pagination .page-numbers,
	.pw-load-more {
		transition: none;
	}
}