/* Live doesn't actually flex-center this row -- the two filter widgets
   sit in 2 of 6 equal-width Elementor columns, flanked by 2 empty spacer
   columns on each side, which visually centers the pair. justify-content:
   center on a plain flex row reproduces the same visual result directly. */
.howl-ourclients-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 24px;
	align-items: center;
}
/* Values pulled directly from the live site's computed styles for
   .jet-select__control, so this matches pixel-for-pixel rather than
   an approximation. */
.howl-ourclients-filters select {
	appearance: none;
	-webkit-appearance: none;
	width: 193px;
	flex: 0 0 auto;
	padding: 8px 32px 8px 16px;
	border-radius: 4px;
	border: none;
	box-shadow: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23222' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - 12px) 50%;
	background-size: 20px;
	color: #222;
	font-size: 16px;
	font-weight: 400;
	height: 40px;
}
@media (max-width: 767px) {
	.howl-ourclients-filters select { width: 100%; }
}
.howl-ourclients-grid[aria-busy="true"] { opacity: 0.5; }

.howl-grid {
	display: grid;
	gap: 20px;
}
.howl-grid-3col {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
	/* Live site's grid-col-mobile-2 setting: 2 columns, not 1, at mobile widths. */
	.howl-grid-3col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* The client logo grid has zero real grid-gap on live -- all of the visual
   spacing between cards comes from each item's own 10px padding (see
   background-clip rule below), so the gap here must be zero or the two
   would stack and double up. */
.howl-ourclients-grid .howl-grid { gap: 0; }
@media (max-width: 767px) {
	.howl-ourclients-grid .howl-grid { gap: 0; }
}

/* Client logos: matches the original exactly -- the white card is NOT the
   full grid cell. Each cell has 10px of transparent padding around a white
   card area, and the logo itself (80px/50px mobile) sits centered inside
   that card with its own 10px of breathing room (card = image height + 20).
   background-clip: content-box keeps the padding transparent while only
   the inner content area is white, without needing an extra wrapper div. */
.howl-ourclients-grid .howl-grid-item {
	background: #ffffff;
	background-clip: content-box;
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
}
.howl-ourclients-grid .howl-grid-item img {
	max-height: 80px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (max-width: 767px) {
	.howl-ourclients-grid .howl-grid-item { height: 90px; }
	.howl-ourclients-grid .howl-grid-item img { max-height: 50px; }
}

/* Testimonial/feedback cards: true masonry (shortest-column packing via
   JS in listings.js), matching the live site's jet-listing-grid__masonry
   behavior -- not a uniform CSS grid where every row matches its tallest
   item. .howl-masonry-container gets position:relative and an explicit
   height from JS; each .howl-grid-item inside is absolutely positioned. */
.howl-masonry-container {
	position: relative;
}

.howl-testimonial-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: rgba(0,0,0,0.72);
	border: 1px solid #676767;
	border-radius: 5px;
	padding: 20px;
	color: #fff;
	box-sizing: border-box;
}
.howl-quote-icon { color: #FF4349; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.howl-testimonial-title { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.howl-testimonial-text { font-size: 16px; color: #a5a5a5; margin-bottom: 16px; }
.howl-testimonial-person { display: flex; gap: 12px; align-items: center; }
.howl-avatar { border-radius: 100%; width: 60px; height: 60px; object-fit: cover; }
.howl-testimonial-name { font-size: 18px; font-weight: 600; color: #FF4349; }
.howl-testimonial-job { font-size: 16px; color: #fff; }

/* Numbered pagination -- values pulled directly from the live site's
   computed styles for .jet-filters-pagination, not approximated. */
.howl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}
.howl-pagination__item {
	margin: 3px;
	cursor: pointer;
	background: #414141;
	color: #fff;
}
.howl-pagination__link {
	padding: 10px 20px;
	font-size: 16px;
	color: inherit;
}
.howl-pagination__current {
	background: #FF4349;
	color: #fff;
}
.howl-testimonials-grid[aria-busy="true"] { opacity: 0.5; }
.howl-empty-state { color: #888; font-style: italic; }