/* ==========================================================================
 * Cmsmart B2B product family (WS34, 48-SPEC): /products/<b2b-module>.
 * Layout comes from the WS25 module stylesheet (module.css) and luxury.css; this file only
 * adds the delivery-level pills (Core / Core + custom / Early access / Custom development),
 * the capture source label and the truth table. Tokens only.
 * ========================================================================== */

.cm-b2b .cm-b2b-pill {
	display: inline-flex; align-items: center; gap: var(--sp-4);
	padding: var(--sp-2) var(--sp-10); border-radius: var(--r-pill);
	font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label);
	line-height: var(--lh-tight); white-space: nowrap;
	border: 1px solid transparent;
}
.cm-b2b .cm-b2b-pill--core { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success-border); }
.cm-b2b .cm-b2b-pill--partial { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success-border); }
.cm-b2b .cm-b2b-pill--early { background: var(--c-info-bg); color: var(--c-navy-800); border-color: var(--c-info-border); }
.cm-b2b .cm-b2b-pill--custom { background: var(--c-brand-50); color: var(--c-brand-800); border-color: var(--c-brand-100); }
.cm-b2b .cm-b2b-pill--ondark { box-shadow: var(--shadow-lx-1); }

/* source label on capture cards: plugin capture vs UX prototype */
.cm-b2b .cm-b2b-src {
	margin: 0 0 var(--sp-8); font-size: var(--fs-12); font-weight: var(--fw-semibold);
	letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-success);
}
.cm-b2b .cm-b2b-src--proto { color: var(--c-navy-600); }

/* truth table: capability | level pill + evidence */
.cm-b2b .cm-b2b-truth td { vertical-align: top; }
.cm-b2b .cm-b2b-truth th[scope="row"] { font-weight: var(--fw-medium); }
.cm-b2b .cm-b2b-truth__src {
	display: block; margin-top: var(--sp-4);
	font-size: var(--fs-13); color: var(--c-ink-500); overflow-wrap: anywhere;
}

/* family cards: pill next to the icon chip wraps on small cards */
.cm-b2b .cm-pm-fcard__eyebrow { flex-wrap: wrap; }

/* B2B hub (/ecommerce/b2b-web-to-print) family block, 3n+1 modules: the first card spans two
   columns as a wide horizontal card (2 columns: 1 + 3 full rows); at 3 columns the last card
   spans two as well, so 7 cards fill three full rows. */
@media (min-width: 768px) {
	.cm-hub--b2b .cm-b2b-family--lead > li:first-child { grid-column: span 2; flex-direction: row; }
	.cm-hub--b2b .cm-b2b-family--lead > li:first-child .cm-hub__mcard-media { flex: 0 0 55%; margin: 0; }
	.cm-hub--b2b .cm-b2b-family--lead > li:first-child .cm-hub__mcard-media img { height: 100%; object-fit: cover; object-position: top left; }
	.cm-hub--b2b .cm-b2b-family--lead > li:first-child .cm-hub__mcard-body { align-self: center; }
}
@media (min-width: 992px) {
	.cm-hub--b2b .cm-b2b-family--lead > li:last-child { grid-column: span 2; flex-direction: row; }
	.cm-hub--b2b .cm-b2b-family--lead > li:last-child .cm-hub__mcard-media { flex: 0 0 55%; margin: 0; }
	.cm-hub--b2b .cm-b2b-family--lead > li:last-child .cm-hub__mcard-media img { height: 100%; object-fit: cover; object-position: top left; }
	.cm-hub--b2b .cm-b2b-family--lead > li:last-child .cm-hub__mcard-body { align-self: center; }
}

@media (max-width: 640px) {
	.cm-b2b .cm-b2b-truth thead { display: none; }
	.cm-b2b .cm-b2b-truth tr { display: block; padding: var(--sp-12) 0; border-bottom: 1px solid var(--c-lx-line); }
	.cm-b2b .cm-b2b-truth th[scope="row"], .cm-b2b .cm-b2b-truth td { display: block; border: 0; padding: var(--sp-4) var(--sp-16); }
	.cm-b2b .cm-b2b-pill { white-space: normal; }
}