/**
 * BlueBot Our Work — responsive overrides.
 * Elementor's own responsive controls (columns, gaps) generate their own
 * inline breakpoint CSS; these rules cover behavior Elementor's control
 * system doesn't (filter bar scroll behavior, sensible fallbacks).
 */

/* Tablet: keep 2 columns by default, ensure filter bar scrolls. */
@media (max-width: 1024px) {
	.bbow-filter-bar {
		gap: 8px;
	}

	.bbow-filter-track-wrap {
		overflow-x: auto;
	}
}

/* Mobile: default to a single column, tighten spacing. */
@media (max-width: 767px) {
	.bbow-grid {
		grid-template-columns: 1fr !important;
	}

	.bbow-section__title {
		font-size: 22px;
	}

	.bbow-card__image-wrap {
		height: 220px;
	}

	.bbow-card__body {
		padding: 16px 18px 20px;
	}

	.bbow-filter-arrow {
		width: 32px;
		height: 32px;
	}

	.bbow-filter-btn {
		padding: 8px 16px;
		font-size: 13px;
	}

	.bbow-filter-row {
		flex-wrap: wrap;
	}

	.bbow-tag-dropdown {
		margin-left: 0;
		width: 100%;
	}

	.bbow-tag-dropdown__trigger {
		width: 100%;
		justify-content: space-between;
	}

	.bbow-tag-dropdown__panel {
		left: 0;
		right: 0;
		min-width: 0;
	}
}

/* Small mobile: extra breathing room for touch targets. */
@media (max-width: 480px) {
	.bbow-card__logo-wrap {
		max-width: 55%;
		padding: 6px 10px;
	}

	.bbow-load-more-btn {
		width: 100%;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.bbow-card,
	.bbow-card__image,
	.bbow-card__overlay,
	.bbow-filter-btn,
	.bbow-filter-arrow,
	.bbow-tag-dropdown__panel,
	.bbow-tag-dropdown__chevron,
	.bbow-grid {
		transition: none !important;
	}

	.bbow-filter-track-wrap {
		scroll-behavior: auto;
	}

	.bbow-reveal,
	.bbow-reveal.is-visible {
		-webkit-animation: none !important;
		animation: none !important;
		opacity: 1 !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
}