/* Maverick brands section — Figma node 1:148 (1440 x 644, bg #F3EFE6). Spec: docs/design/homepage-figma-spec.md §3.
   Whole-pixel line-heights as drawn: H2 30 -> 34, H3 22 -> 26, body 15 -> 23. */

.mvk-brands {
	box-sizing: border-box;
	margin: 0;
	padding: 48px 64px 56px;
	background: var(--mvk-section-bg);
	color: var(--mvk-navy);
}
.mvk-brands__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1312px;
	margin: 0 auto;
}

/* Cards ------------------------------------------------------------------- */
.mvk-nxg,
.mvk-cc {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	margin: 0;
	background: var(--mvk-cream);
	border: 1px solid var(--mvk-card-border);
	border-radius: 14px;
	overflow: hidden;
}

/* Brand row: logo | divider | eyebrow */
.mvk-brandrow { display: flex; align-items: center; gap: 14px; width: fit-content; }
.mvk-brandrow__logo { display: block; flex: none; max-width: none; object-fit: contain; }
.mvk-brandrow__divider { flex: none; width: 1px; height: 20px; background: rgba(36, 60, 71, 0.25); }
.mvk-brandrow__eyebrow {
	flex: none;
	color: var(--mvk-rust);
	font: 700 10px/14px var(--mvk-font-body);
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.mvk-brandrow--nxg .mvk-brandrow__logo { width: 140px; height: 38px; }
.mvk-brandrow--nxg .mvk-brandrow__eyebrow { width: 135px; } /* Figma text widths (rounded up) */
.mvk-brandrow--cc .mvk-brandrow__logo { width: 86px; height: 43px; }
.mvk-brandrow--cc .mvk-brandrow__eyebrow { width: 158px; }

.mvk-brands .mvk-brands__title {
	margin: 0;
	padding: 0;
	color: var(--mvk-navy);
	font-family: var(--mvk-font-display);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.mvk-brands .mvk-brands__title--lg { font-size: 30px; line-height: 34px; }
.mvk-brands .mvk-brands__title--md { font-size: 22px; line-height: 26px; }
.mvk-brands .mvk-brands__body {
	margin: 0;
	padding: 0;
	color: rgba(36, 60, 71, 0.8);
	font: 400 15px/23px var(--mvk-font-body);
	letter-spacing: 0;
}

/* NXG feature --------------------------------------------------------------- */
.mvk-nxg__photo {
	display: block;
	flex: 0 0 min(720px, 55%);
	width: min(720px, 55%);
	height: 340px;
	max-width: none;
	object-fit: cover;
}
.mvk-nxg__copy {
	box-sizing: border-box;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	padding: 0 56px;
}
.mvk-nxg__spacer { width: 1px; height: 6px; }
.mvk-brands .mvk-nxg__cta { align-self: flex-start; justify-content: flex-start; width: 240px; }

/* Cowboy's Choice strip ------------------------------------------------------- */
.mvk-cc {
	align-items: center;
	gap: 28px;
	padding: 20px 32px 20px 20px;
}
.mvk-cc__thumb {
	display: block;
	flex: none;
	width: 200px;
	height: 140px;
	max-width: none;
	border-radius: 10px;
	object-fit: cover;
}
.mvk-cc__copy { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.mvk-cc .mvk-brands__title--md { width: 534px; max-width: 100%; white-space: nowrap; } /* Figma text width (rounded up) */
.mvk-cc__desc { width: 485px; max-width: 100%; }
.mvk-cc__links { display: flex; flex: none; align-items: flex-start; gap: 24px; }
.mvk-cc__link--find { width: 101px; }
.mvk-cc__link--become { width: 127px; }
.mvk-cc__link--bulk { width: 130px; }

/* Responsive — NOT DESIGNED in Figma (only 1440 exists). Derived; awaiting operator approval (Decision D7). */
@media (max-width: 1439px) {
	.mvk-brands { padding-left: 40px; padding-right: 40px; }
	.mvk-brands .mvk-nxg__cta { width: auto; }
	.mvk-cc .mvk-brands__title--md { width: auto; white-space: normal; }
	.mvk-cc__link--find, .mvk-cc__link--become, .mvk-cc__link--bulk { width: auto; }
}
@media (max-width: 1099px) {
	.mvk-nxg { flex-direction: column; }
	.mvk-nxg__photo { flex: none; width: 100%; height: clamp(220px, 44vw, 340px); }
	.mvk-nxg__copy { padding: 32px; }
	.mvk-cc { flex-wrap: wrap; align-items: flex-start; padding: 20px; }
	.mvk-cc__copy { flex: 1 1 320px; }
	.mvk-cc__links { flex: 1 1 100%; flex-wrap: wrap; gap: 0 24px; }
}
@media (max-width: 599px) {
	.mvk-brands { padding: 32px 20px 40px; }
	.mvk-nxg__copy { padding: 24px 20px; }
	.mvk-brands .mvk-brands__title--lg { font-size: 26px; line-height: 30px; }
	.mvk-brands .mvk-brands__title--lg br { display: none; }
	.mvk-brands .mvk-nxg__cta { align-self: stretch; justify-content: center; }
	.mvk-cc__thumb { flex: 1 1 100%; width: 100%; height: 180px; }
	.mvk-cc__desc br { display: none; }
}