/* Advertising slot in the catalog feed and the advertiser page (modules/ads).
   Classes are brand-*, not ads-*: blocker lists hide .ads-card and .ads-box by name. */

.brand-card {
	flex: 1 1 auto;
}

.brand-card .brand-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--main-color);
}

.brand-card .brand-placeholder i {
	color: #ffffff;
	font-size: 48px;
}

.brand-card .brand-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 3em;
	font-family: var(--title-font-family);
	font-size: 14px;
	line-height: 1.5;
	color: #6b6b6b;
}

/* Advertiser page */

.brand-page {
	--ads-ink: var(--headings-color);
	--ads-accent: var(--main-color-hover);
	--ads-grey: #f7f7f7;
	--ads-line: rgba(24, 26, 32, 0.12);
	--ads-muted: #5c5b63;
}

@media (min-width: 768px) and (max-width: 1399.98px) {
	.brand-page .container {
		padding-left: max(32px, calc(50% - 603px));
		padding-right: max(32px, calc(50% - 603px));
	}
}

.brand-page > section {
	padding: 72px 0;
}

.brand-page > .brand-hero {
	padding-top: 56px;
}

.brand-page > .brand-why {
	background-color: var(--ads-grey);
}

.brand-page > .brand-final {
	padding-top: 0;
}

.brand-page .brand-h1,
.brand-page .brand-h2,
.brand-page .brand-h3 {
	color: var(--ads-ink);
	letter-spacing: -0.01em;
	text-align: left;
}

.brand-page .brand-h1 {
	max-width: 17em;
	margin-bottom: 16px;
	font-size: 40px;
	line-height: 1.15;
}

.brand-page .brand-h2 {
	margin-bottom: 14px;
	font-size: 30px;
	line-height: 1.2;
}

.brand-page .brand-h3 {
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 1.3;
}

.brand-page .brand-lead {
	max-width: 36em;
	font-size: 17px;
	line-height: 1.6;
}

.brand-page .brand-copy {
	max-width: 36em;
	font-size: 15px;
	line-height: 1.6;
}

.brand-page .brand-section-head {
	margin-bottom: 32px;
}

.brand-page .ud-btn {
	white-space: normal;
}

.brand-hero-head {
	margin-bottom: 40px;
}

.brand-demo-feed .listing-style7 {
	height: calc(100% - 30px);
}

.brand-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-radius: 12px;
	background-color: var(--ads-ink);
}

.brand-stat {
	padding: 28px 32px;
}

.brand-stat + .brand-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.brand-page .brand-stat-value {
	margin: 0 0 6px;
	color: #ffffff;
	font-family: var(--title-font-family);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.brand-stat-value span {
	color: var(--ads-accent);
}

.brand-page .brand-stat-label {
	max-width: 26em;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 1.5;
}

.brand-box {
	padding: 28px;
	border: 1px solid var(--card-border-color);
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: var(--card-shadow);
}

.brand-grid {
	display: grid;
	gap: 24px;
}

.brand-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 50%;
	background-color: var(--ads-accent);
	color: var(--ads-ink);
	font-size: 22px;
	line-height: 1;
}

.brand-search {
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--ads-line);
}

.brand-queries {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ads-line);
	list-style: none;
}

.brand-queries li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ads-line);
	font-size: 16px;
	line-height: 1.4;
}

.brand-queries .fa-magnifying-glass {
	flex-shrink: 0;
	color: var(--ads-muted);
	font-size: 14px;
}

.brand-final-box {
	padding: 56px 60px;
	border-radius: 12px;
	background-color: var(--ads-ink);
}

.brand-final-box .brand-h2,
.brand-final-box .brand-copy {
	color: #ffffff;
}

.brand-final-box .brand-copy {
	font-size: 16px;
}

@media (min-width: 768px) {
	.brand-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.brand-grid-3 > :last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 992px) {
	.brand-grid-3,
	.brand-who {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.brand-cta {
		padding-left: 32px;
	}
}

@media (max-width: 991.98px) {
	.brand-page > section {
		padding: 48px 0;
	}

	.brand-page > .brand-hero {
		padding-top: 40px;
	}

	.brand-cta {
		margin-top: 24px;
	}

	.brand-page .brand-h1 {
		font-size: 32px;
	}

	.brand-page .brand-h2 {
		font-size: 26px;
	}

	.brand-search {
		margin-top: 48px;
		padding-top: 40px;
	}

	.brand-queries {
		margin-top: 12px;
	}

	.brand-final-box {
		padding: 40px 32px;
	}
}

@media (max-width: 575.98px) {
	.brand-page .brand-h1 {
		font-size: 28px;
	}

	.brand-page .brand-h2 {
		font-size: 24px;
	}

	.brand-page .brand-cta .ud-btn {
		display: block;
		width: 100%;
	}

	.brand-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.brand-stat {
		padding: 22px 24px;
	}

	.brand-stat + .brand-stat {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		border-left: 0;
	}

	.brand-page .brand-stat-value {
		font-size: 36px;
	}

	.brand-box {
		padding: 24px 20px;
	}

	.brand-final-box {
		padding: 32px 20px;
	}
}