/* Macrolyx — Brokers & Tools cards. */

.mlx-promo {
	--mlx-promo-per: 3;
	--mlx-promo-gap: 12px;
	position: relative;
	display: flex;
	align-items: stretch;
	height: 100%;
	min-height: 0;
}
.mlx-promo-empty { color: var(--mlx-muted); font-size: 13px; text-align: center; margin: auto; }

/* ---------------- Track ---------------- */

.mlx-promo-track {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: var(--mlx-promo-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px 1px 10px;
}
.mlx-promo-track::-webkit-scrollbar { display: none; }
.mlx-promo-track { cursor: grab; }
.mlx-promo-track.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.mlx-promo-track.is-grabbing a,
.mlx-promo-track.is-grabbing img { pointer-events: none; }
.mlx-promo-track:focus-visible { outline: 1px solid rgba(var(--mlx-accent-rgb), .6); outline-offset: 2px; border-radius: 12px; }

/* Every tile is an equal share of the visible width, minus the gaps. */
.mlx-promo-track > * {
	flex: 0 0 calc((100% - (var(--mlx-promo-per) - 1) * var(--mlx-promo-gap)) / var(--mlx-promo-per));
	scroll-snap-align: start;
}

/* ---------------- Arrows & dots ---------------- */

.mlx-promo-nav {
	flex: 0 0 auto;
	align-self: center;
	width: 26px;
	height: 46px;
	margin: 0 2px;
	border: 1px solid var(--mlx-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: var(--mlx-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.mlx-promo-nav:hover:not(:disabled) {
	color: var(--mlx-text);
	border-color: rgba(var(--mlx-accent-rgb), .55);
	background: rgba(var(--mlx-accent-rgb), .1);
}
.mlx-promo-nav:disabled { opacity: .25; cursor: default; }

.mlx-promo-dots {
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	display: flex;
	justify-content: center;
	gap: 5px;
}
.mlx-promo-dot {
	width: 5px; height: 5px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--mlx-border);
	cursor: pointer;
	transition: width .2s, background .2s;
}
.mlx-promo-dot.is-on { width: 16px; border-radius: 3px; background: var(--mlx-accent); }

/* ---------------- Broker tile ---------------- */

.mlx-pb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
	border: 1px solid var(--mlx-border);
	border-radius: 14px;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
		var(--mlx-bg2);
	overflow: hidden;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
/* A soft accent wash that only shows on hover, so the resting state stays calm. */
.mlx-pb-card::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--mlx-accent), transparent);
	opacity: 0;
	transition: opacity .18s;
}
.mlx-pb-card:hover {
	border-color: rgba(var(--mlx-accent-rgb), .38);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
.mlx-pb-card:hover::before { opacity: 1; }

.mlx-pb-badge {
	position: absolute;
	top: 10px;
	inset-inline-end: -30px;
	transform: rotate(38deg);
	width: 116px;
	text-align: center;
	background: var(--mlx-accent);
	color: #06171a;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 17px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.mlx-pb-head { display: flex; align-items: center; gap: 10px; }

.mlx-pb-logo {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--mlx-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mlx-pb-logo img { max-width: 78%; max-height: 78%; object-fit: contain; display: block; }
.mlx-pb-logo-fallback { color: var(--mlx-accent); font-size: 17px; font-weight: 800; }

.mlx-pb-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mlx-pb-name {
	color: var(--mlx-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.mlx-pb-name:hover { color: var(--mlx-accent); }
.mlx-pb-since {
	color: var(--mlx-muted);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}
.mlx-pb-since i { font-style: normal; opacity: .5; margin: 0 2px; }

.mlx-pb-rating { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mlx-pb-rating b { color: var(--mlx-text); font-size: 11px; }

/* Two stacked star rows; the coloured one is clipped to the rating. */
.mlx-pb-stars { position: relative; display: inline-block; height: 11px; line-height: 0; }
.mlx-pb-stars-bg,
.mlx-pb-stars-fg { display: flex; gap: 1px; }
.mlx-pb-stars-bg svg { fill: var(--mlx-border); }
.mlx-pb-stars-fg {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	white-space: nowrap;
}
.mlx-pb-stars-fg svg { fill: #E8B341; }
.mlx-pb-stars svg { width: 11px; height: 11px; flex: 0 0 auto; }

.mlx-pb-desc {
	margin: 0;
	color: var(--mlx-muted);
	font-size: 11.5px;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mlx-pb-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 10px;
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid var(--mlx-border);
	border-bottom: 1px solid var(--mlx-border);
}
.mlx-pb-facts div { min-width: 0; }
.mlx-pb-facts dt {
	color: var(--mlx-muted);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-bottom: 1px;
}
.mlx-pb-facts dd {
	margin: 0;
	color: var(--mlx-text);
	font-size: 11.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mlx-pb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mlx-pb-chip {
	color: var(--mlx-text);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--mlx-border);
	border-radius: 20px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 0 8px;
	line-height: 17px;
	white-space: nowrap;
}
.mlx-pb-chips.is-platforms .mlx-pb-chip {
	color: var(--mlx-accent);
	background: rgba(var(--mlx-accent-rgb), .09);
	border-color: rgba(var(--mlx-accent-rgb), .3);
}

.mlx-pb-cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	border-radius: 9px;
	border: 1px solid rgba(var(--mlx-accent-rgb), .45);
	background: rgba(var(--mlx-accent-rgb), .12);
	color: var(--mlx-accent);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.mlx-pb-cta:hover { background: var(--mlx-accent); color: #06171a; }
.mlx-pb-cta span { transition: transform .15s; }
.mlx-pb-cta:hover span { transform: translateX(3px); }

/* ---------------- Tool tile ---------------- */

.mlx-pt-card {
	position: relative;
	display: block;
	border: 1px solid var(--mlx-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--mlx-bg2);
	text-decoration: none;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.mlx-pt-card:hover {
	border-color: rgba(var(--mlx-accent-rgb), .45);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

/* The tile takes the shape chosen in the admin, so artwork uploaded at that
   ratio is never cropped no matter how wide the card is. */
.mlx-pt-media {
	display: block;
	width: 100%;
	aspect-ratio: var(--mlx-pt-ratio, 16 / 9);
	background: rgba(255, 255, 255, .03);
}
.mlx-pt-media img {
	width: 100%;
	height: 100%;
	object-fit: var(--mlx-pt-fit, cover);
	display: block;
	transition: transform .3s ease;
}
/* Contain is for logos and artwork with their own margins: scaling it on
   hover would reveal the letterbox edges, so only cover zooms. */
.mlx-pt .mlx-promo-track { align-items: flex-start; }
/* Frameless slider: flush with the card edges, no reserved arrow/dot space. */
.mlx-pt { padding: 0; }
/* The strip sits inside the dashboard column, which is already padded, so it
   must add NO horizontal padding of its own or its edges would sit inboard of
   the cards above it. That column spaces its children by a 16px flex gap, so
   4px more lands the strip exactly 20px clear of the footer. */
.mlx-pt-strip {
	width: 100%;
	margin: 0 0 4px;
	box-sizing: border-box;
}
.mlx-pt .mlx-promo-track { padding: 0; }
.mlx-pt-card:hover .mlx-pt-media img { transform: scale(1.04); }
.mlx-pt[style*="contain"] .mlx-pt-card:hover .mlx-pt-media img { transform: none; }

/* The title sits on a gradient scrim so it stays legible on any artwork. */
.mlx-pt-title {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 22px 12px 10px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 55%, transparent);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

@media (max-width: 520px) {
	.mlx-promo-nav { display: none; }
	.mlx-pb-facts { grid-template-columns: 1fr; }
}