/*
 * Index Brands — search results, §3.
 *
 * Loads alongside index.css, which already carries the search field, the card
 * hover and the button shapes. Only what is specific to results lives here.
 */

/* The simplified field, §3.1: 58px rather than the landing page's 66px. */
.ib-search-page .ib-search--sm {
	height: 58px;
	margin-top: 34px;
}

.ib-search-page .ib-search--sm .ib-search__input {
	font-size: 16.5px;
}

.ib-search-page .ib-search--sm .ib-search__go {
	height: 46px;
	padding-inline: 24px;
	font-size: 15px;
}

/* -------------------------------------------------------- filters as tabs */

/*
 * §3.2 is specific: flat tabs, a 1.5px bottom rule when active, and no pill
 * fills — so the filters read as a change of view rather than as four more
 * buttons competing with the search field above them.
 */
.ib-search-page .ib-tabs-row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin: 26px 0 22px;
	border-bottom: 1px solid var(--border-soft);
}

.ib-search-page .ib-tabs {
	display: flex;
	align-items: flex-end;
	gap: 22px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ib-search-page .ib-tabs::-webkit-scrollbar {
	display: none;
}

.ib-search-page .ib-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 11px;
	/* The rule is transparent rather than absent, so nothing shifts on activate. */
	border-bottom: 1.5px solid transparent;
	margin-bottom: -1px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--faint);
	text-decoration: none;
	white-space: nowrap;
	/* §9: never below 44px on touch — the rule stays thin, the target does not. */
	min-height: 44px;
	align-items: flex-end;
}

.ib-search-page .ib-tab:hover {
	color: var(--muted);
}

.ib-search-page .ib-tab.is-active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.ib-search-page .ib-tab__n {
	font-size: 12px;
	font-weight: 500;
	color: var(--faint);
}

.ib-search-page .ib-tab__n:empty {
	display: none;
}

.ib-search-page .ib-results-count {
	font-size: 13.5px;
	color: var(--muted);
	padding-bottom: 12px;
	white-space: nowrap;
}

.ib-search-page .ib-results-count__q {
	display: inline-block;
	color: var(--ink);
	font-weight: 600;
}

/* ------------------------------------------------------------ result grid */

/* Dense equal tiles, ~116px, §3.3. */
.ib-search-page .ib-tiles {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}

.ib-search-page .ib-tile {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	border-radius: var(--r-tile);
	overflow: hidden;
	text-decoration: none;
	padding: 10px;
}

.ib-search-page .ib-tile__wm {
	line-height: 1;
	white-space: nowrap;
	max-width: 88%;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* A small lime dot marks a for-sale brand, §3.3. */
.ib-search-page .ib-tile__dot {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-end: 9px;
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--lime);
}

/*
 * The veil is opaque and in the brand's own colour — not a translucent scrim —
 * so the ink computed against that colour keeps exactly the contrast it was
 * chosen for. A semi-transparent overlay would change the ground underneath the
 * text and quietly break the readability rule.
 */
.ib-search-page .ib-tile__veil {
	position: absolute;
	inset: 0;
	background: var(--brand);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px;
	text-align: center;
	opacity: 0;
	transition: opacity .22s ease;
}

.ib-search-page .ib-tile:hover .ib-tile__veil,
.ib-search-page .ib-tile:focus-visible .ib-tile__veil {
	opacity: 1;
}

/* Touch has no hover, so the veil is the permanent reading surface there. */
@media (hover: none) {
	.ib-search-page .ib-tile__veil {
		opacity: 1;
	}
}

.ib-search-page .ib-tile__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--brand-ink);
}

.ib-search-page .ib-tile__domain,
.ib-search-page .ib-tile__industry {
	font-size: 12px;
	font-weight: 500;
	color: var(--brand-ink);
	opacity: 0.82;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----------------------------------------------------------- empty state */

.ib-search-page .ib-none {
	padding: 64px 0 24px;
	max-width: 46ch;
}

.ib-search-page .ib-none.is-hidden {
	display: none;
}

.ib-search-page .ib-none__t {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 8px;
}

.ib-search-page .ib-none__n {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 22px;
	text-wrap: pretty;
}

.ib-search-page .ib-none__acts {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ib-search-page .ib-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: 26px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: var(--r-pill);
	text-decoration: none;
	white-space: nowrap;
}

.ib-search-page .ib-tiles.is-busy {
	opacity: .55;
	transition: opacity .15s ease;
}

.ib-search-page .ib-more {
	padding-top: 26px;
}