/* ---------------------------------------------------------------------------
   Brand carousel.

   Colours come from the theme's custom properties with a fallback after each,
   so the plugin looks right here and does not fall apart on another theme.

   The rail is an overflowing grid with scroll-snap. Native scrolling means it
   drags on a touchscreen, works with a trackpad and keeps its momentum — none
   of which a JavaScript slider gives for free.
   --------------------------------------------------------------------------- */
.mbc {
	padding-block: clamp(38px, 5vw, 60px);
	border-top: 1px solid var(--line, #E3E9F5);
	background: var(--paper-2, #F5F8FF);
}

.mbc__wrap {
	max-width: var(--wrap, 1480px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(20px, 5vw, 56px));
}

.mbc__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.mbc__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--data, #EC4899);
}

.mbc__title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink, #131B2E);
}

.mbc__blurb {
	margin: 6px 0 0;
	font-family: var(--body, Georgia, serif);
	font-size: 15px;
	color: var(--muted, #5B6478);
}

.mbc__nav {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.mbc__arrow {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line, #E3E9F5);
	border-radius: 10px;
	background: var(--paper, #fff);
	cursor: pointer;
	transition: border-color .15s, background .15s, opacity .15s;
}

.mbc__arrow:hover:not(:disabled) {
	border-color: var(--accent, #3458FA);
	background: var(--accent-soft, #E9EDFE);
}

.mbc__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.mbc__arrow svg {
	width: 17px;
	height: 17px;
	stroke: var(--ink, #131B2E);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- the rail ---- */
.mbc__rail {
	display: grid;
	grid-auto-flow: column;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* One card, with the next one's edge showing. That sliver is what tells a
	   reader the row moves; a single full-width card reads as a static block
	   and the arrows are the only clue, which is no clue at all on a phone. */
	grid-auto-columns: 84%;
}

.mbc__rail::-webkit-scrollbar {
	display: none;
}

.mbc__rail:focus-visible {
	outline: 2px solid var(--accent, #3458FA);
	outline-offset: 4px;
	border-radius: 12px;
}

@media (min-width: 560px) {
	.mbc__rail { grid-auto-columns: minmax(0, calc((100% - 16px) / 2)); }
}

@media (min-width: 900px) {
	.mbc__rail { grid-auto-columns: minmax(0, calc((100% - 32px) / 3)); }
}

/* Four across only above 1180px. Below that a card is under 280px, and the
   name has nowhere to go beside the score. */
@media (min-width: 1180px) {
	.mbc__rail { grid-auto-columns: minmax(0, calc((100% - 48px) / 4)); }
}

/* ---- card ---- */
/* The card also carries .mnb-box, which is how it inherits --bx-accent and the
   rest of that plugin's custom properties. That class brings its own padding,
   border and radius too, so those are restated here — two classes beats one, so
   these win wherever the stylesheets happen to load. */
.mbc__rail .mbc-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--line, #E3E9F5);
	border-radius: var(--radius, 14px);
	background: var(--paper, #fff);
	box-shadow: var(--sh-card, 0 2px 10px rgba(52, 88, 250, .07));
	transition: transform .2s, box-shadow .2s, border-color .2s;
	font-family: inherit;
	color: inherit;
}

.mbc__rail .mbc-card:hover {
	transform: translateY(-3px);
	border-color: var(--line-strong, #C7D0E8);
	box-shadow: var(--sh-lift, 0 12px 28px -8px rgba(52, 88, 250, .24));
}

.mbc-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mbc-card__logo {
	flex: 0 0 auto;
	width: 64px;
	height: 48px;
	display: grid;
	place-items: center;
	padding: 5px;
	border: 1px solid var(--line, #E3E9F5);
	border-radius: 10px;
	background: var(--paper, #fff);
	overflow: hidden;
}

.mbc-card__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.mbc-card__initials {
	font-family: var(--display, system-ui, sans-serif);
	font-weight: 800;
	font-size: 17px;
	color: var(--accent, #3458FA);
}

.mbc-card__score {
	flex: 0 0 auto;
	width: 66px;
	padding: 7px 5px;
	border: 1px solid var(--line, #E3E9F5);
	border-radius: 10px;
	background: var(--paper-2, #F5F8FF);
	text-align: center;
}

.mbc-card__score b {
	display: block;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent, #3458FA);
}

.mbc-card__score > span {
	display: block;
	margin: 2px 0 3px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 8.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--faint, #8891A8);
}

.mbc-card__stars {
	display: flex;
	justify-content: center;
	gap: 1px;
	color: #F5A524;
}

.mbc-card__stars svg {
	width: 10px;
	height: 10px;
}

.mbc-card__tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--accent-soft, #E9EDFE);
	color: var(--accent, #3458FA);
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.mbc-card__tag:hover {
	background: var(--accent, #3458FA);
	color: #fff;
}

.mbc-card__name {
	margin: 9px 0 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.mbc-card__name a {
	color: var(--ink, #131B2E);
	text-decoration: none;
}

.mbc-card__name a:hover {
	color: var(--accent, #3458FA);
}

/* Clamped so every card in a row is the same height whatever the blurb. */
.mbc-card__blurb {
	margin: 7px 0 0;
	font-family: var(--body, Georgia, serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted, #5B6478);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mbc-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

/* The button and the coupon are M+B Blocks' markup. Only the sizing is set
   here — restyling them would put the carousel and the review boxes out of
   step the first time either changed. */
.mbc-card__actions .mnb-box__btn {
	justify-content: center;
	width: 100%;
}

.mbc-card__actions .mnb-box__coupon {
	width: 100%;
	justify-content: space-between;
}

/* ---- dots ---- */
.mbc__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.mbc__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--line-strong, #C7D0E8);
	transition: width .2s, background .2s;
}

.mbc__dot.is-on {
	width: 20px;
	background: var(--accent, #3458FA);
}

/* On a phone the arrows are redundant — the rail is dragged — and they crowd
   the heading. The dots stay as the position cue. */
@media (max-width: 700px) {
	.mbc__nav {
		display: none;
	}

	.mbc__head {
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbc__rail {
		scroll-behavior: auto;
	}

	.mbc-card,
	.mbc__dot,
	.mbc__arrow {
		transition: none;
	}

	.mbc-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Brand logo strip.

   A continuous marquee rather than a slider: no arrows, no dots, nothing to
   click by accident. It moves on its own and stops when a reader points at it.

   The movement is a CSS animation on a track holding two identical runs of
   tiles. Sliding the track exactly one run's width and starting again is
   seamless, because the second run is already sitting where the first one was.
   --------------------------------------------------------------------------- */
.mbc-strip {
	padding-block: clamp(18px, 2.4vw, 28px);
	border-block: 1px solid var(--line, #E3E9F5);
	background: var(--paper, #fff);
	overflow: hidden;
}

.mbc-strip__wrap {
	max-width: var(--wrap, 1480px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(20px, 5vw, 56px));

	/* Fades at both ends, so tiles arrive and leave rather than appearing and
	   vanishing at a hard edge. It applies to everything inside, which is why
	   the heading is a sibling rather than a child. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	overflow: hidden;
}

/* A sibling of the masked wrap, not a child — inside it the title's first and
   last letters would fade out with the logos. */
.mbc-strip__head {
	max-width: var(--wrap, 1480px);
	margin: 0 auto clamp(14px, 2vw, 20px);
	padding-inline: var(--gutter, clamp(20px, 5vw, 56px));
	text-align: center;
}

.mbc-strip__title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--ink, #131B2E);
}

.mbc-strip__blurb {
	max-width: 56ch;
	margin: 7px auto 0;
	font-family: var(--body, Georgia, serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted, #5B6478);
}

.mbc-strip__rail {
	display: flex;
	width: max-content;
	animation: mbc-marquee var(--mbc-speed, 42s) linear infinite;
}

.mbc-strip__run {
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	padding-right: 14px;
}

@keyframes mbc-marquee {
	from { transform: translate3d(0, 0, 0); }
	/* Exactly one run, so the second lands where the first began. */
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Stop on hover, and on keyboard focus — a reader tabbing through should not
   have the link move out from under them. */
.mbc-strip:hover .mbc-strip__rail,
.mbc-strip:focus-within .mbc-strip__rail {
	animation-play-state: paused;
}

/* The tile is taller than it is fixed-width.
   ----------------------------------------
   A logo is fitted inside, never cropped, so the shorter side decides how big
   it renders. In the old 210x76 tile a square badge was limited by 52px of
   usable height and came out 52px wide inside 178px of space — marooned, next
   to a wordmark that filled the tile edge to edge.

   Raising the height to 92px gives a square logo 64px to work with, and
   letting the width follow its content means the tile shrinks around it
   instead of leaving a field of white. A wordmark still gets its full 200px. */
.mbc-logo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: auto;
	min-width: 116px;
	max-width: 240px;
	height: 92px;
	padding: 14px 20px;
	border: 1px solid var(--line, #E3E9F5);
	border-radius: 10px;
	background: var(--paper, #fff);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mbc-logo:hover,
.mbc-logo:focus-visible {
	border-color: var(--line-strong, #C7D0E8);
	box-shadow: var(--sh-card, 0 2px 10px rgba(52, 88, 250, .07));
	transform: translateY(-2px);
}

.mbc-logo img {
	max-width: 200px;
	max-height: 100%;
	width: auto;
	height: auto;
	/* contain, never cover: a logo cropped is a logo ruined, and these arrive
	   in every shape from a square badge to a long wordmark. */
	object-fit: contain;
	display: block;
}

.mbc-logo__text {
	font-family: var(--display, system-ui, sans-serif);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: .02em;
	color: var(--accent, #3458FA);
}

@media (max-width: 640px) {
	.mbc-logo {
		min-width: 96px;
		max-width: 176px;
		height: 76px;
		padding: 12px 14px;
	}

	.mbc-logo img {
		max-width: 148px;
	}

	.mbc-strip__run {
		gap: 10px;
		padding-right: 10px;
	}
}

/* Someone who has asked for less movement gets a strip that simply sits there,
   scrollable by hand. An animation that only slows down is still movement. */
@media (prefers-reduced-motion: reduce) {
	.mbc-strip__rail {
		animation: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mbc-strip__rail::-webkit-scrollbar {
		display: none;
	}

	/* The duplicate run is only there to make the loop seamless. With no loop
	   it is just the same logos twice. */
	.mbc-strip__run + .mbc-strip__run {
		display: none;
	}

	.mbc-logo {
		transition: none;
	}

	.mbc-logo:hover {
		transform: none;
	}
}