/**
 * Blue Frame Films: industries.css
 *
 * Purpose:  "Industries we work with" pills and the "Trusted by local businesses" logo row.
 * Used by:  template-parts/home/industries.php.
 * To edit:  Pill colors: .ind-list span. Logo height: --logo-h (48px desktop, 36px mobile).
 *           Logo tint: .logo-item img filter (light gray; brand colour on hover/focus).
 */

/* ==========================================================================
   Industries strip
   ========================================================================== */
.ind {
	background: var(--bg2);
	border-top: 1px solid var(--line);
	padding: 36px 0;
}

.ind-h,
.tl-h {
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}

.ind-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 24px;
}

.ind-list span {
	border: 1px solid rgba(30,123,255,.35);
	background: rgba(30,123,255,.08);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: .86rem;
	color: #d7e3ff;
}

/* ==========================================================================
   Trusted by: client logo row (no JS)
   ========================================================================== */
.trusted {
	--logo-h: 48px;
}

.trusted .tl-h {
	margin: 0;
	line-height: inherit;
}

.logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 40px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.logo-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--logo-h);
}

.logo-cell {
	display: flex;
	align-items: center;
	height: var(--logo-h);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

/* Monochrome light gray until hover/focus, then the logo's own colours. Grayscale + brightness
   (not a flat silhouette) so multi-colour badges like Grandma Hands or Re-Leaf keep their detail. */
.logo-item img {
	display: block;
	height: var(--logo-h);
	width: auto;
	max-width: 200px;
	object-fit: contain;
	filter: grayscale(1) brightness(1.3) contrast(.95);
	opacity: .8;
	transition: filter .2s ease, opacity .2s ease;
}

/* 'chip' => true: logo on its own light/opaque background, shown on a small rounded light chip, never filtered. */
.logo-chip img {
	box-sizing: border-box;
	padding: 4px 10px;
	background: #f4f1ea;
	border-radius: 10px;
	filter: none;
	opacity: .92;
}

/* 'avatar' => true: a square profile picture, shown as a round chip at the same height. */
.logo-avatar img {
	box-sizing: border-box;
	width: var(--logo-h);
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(195,207,233,.35);
}

.logo-item:hover img,
.logo-cell:focus-visible img {
	filter: none;
	opacity: 1;
}

/* 'dark' => true (v2.7.1): dark artwork shown as a white silhouette, then its own colours on a light chip. */
.logo-dark img {
	box-sizing: border-box;
	padding: 4px 10px;
	border-radius: 10px;
	filter: brightness(0) invert(1);
	transition: filter .2s ease, opacity .2s ease, background-color .2s ease;
}

.logo-dark:hover img,
.logo-dark .logo-cell:focus-visible img {
	filter: none;
	background: #f4f1ea;
}

.logo-cell:focus-visible {
	outline: 2px solid var(--blue2, #4da3ff);
	outline-offset: 4px;
}

/* No logo file yet: the business name as a quiet wordmark. */
.logo-name {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
	line-height: 1.15;
	color: #c3cfe9;
	opacity: .85;
	max-width: 190px;
	transition: color .2s ease, opacity .2s ease;
}

.logo-item:hover .logo-name,
.logo-cell:focus-visible .logo-name {
	color: #fff;
	opacity: 1;
}

/* Review-only: pending badge + note (gone when review tags are off). */
.logo-item .logo-badge {
	position: absolute;
	top: -10px;
	right: -14px;
	font-size: .6rem;
	padding: 1px 6px;
	white-space: nowrap;
}

.logo-item.is-pending .logo-cell {
	outline: 1px dashed rgba(255,190,90,.35);
	outline-offset: 4px;
}

.trusted .logo-note {
	display: inline-block;
	margin-top: 18px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
}

/* Mobile: one row that scrolls sideways and snaps to each logo. */
@media (max-width: 760px) {
	.trusted {
		--logo-h: 36px;
	}

	.logo-row {
		flex-wrap: nowrap;
		gap: 28px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		padding: 12px 2px 10px;
		margin-right: calc(-1 * 24px);
		padding-right: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.logo-item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.logo-item img {
		max-width: 140px;
	}

	.logo-name {
		font-size: .85rem;
		max-width: 150px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-item img,
	.logo-name {
		transition: none;
	}
}