/* ==========================================================================
   Garment Branding (design: Garment Branding.dc.html)
   Shared sections, diagram and form band: components/sections.css.
   ========================================================================== */

.bu-branding__hero {
	align-items: center;
}

/* Method cards --------------------------------------------------------------- */

.bu-method-cards {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 700px) {
	.bu-method-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.bu-method-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bu-method-card {
	display: flex;
	flex-direction: column;
	border: var(--bu-border);
	background: var(--bu-color-white);
}

.bu-method-card__media {
	display: flex;
	justify-content: center;
	padding: clamp(14px, 2vw, 22px) clamp(24px, 4vw, 48px) clamp(8px, 1vw, 14px);
	border-bottom: var(--bu-border);
	background: var(--bu-color-surface);
}

.bu-method-card__media .bu-diagram {
	width: 100%;
	max-width: 240px;
}

@media (min-width: 1000px) {
	.bu-method-card__media .bu-diagram {
		max-width: 300px;
	}
}

.bu-method-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: clamp(18px, 2.5vw, 26px);
	font-size: var(--bu-text-base);
	line-height: var(--bu-leading-body);
	color: var(--bu-color-text);
}

.bu-method-card__number {
	font-size: var(--bu-text-sm);
	letter-spacing: var(--bu-tracking-label);
	text-transform: uppercase;
	font-weight: var(--bu-weight-semibold);
	color: var(--bu-color-accent);
}

.bu-method-card__title {
	font-family: var(--bu-font-heading);
	font-weight: var(--bu-weight-bold);
	font-size: clamp(28px, 2.6vw, 36px);
	line-height: var(--bu-leading-title);
	text-transform: uppercase;
}

.bu-points {
	display: grid;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.bu-points li {
	display: flex;
	gap: 10px;
	font-size: var(--bu-text-ui);
	line-height: var(--bu-leading-ui);
}

.bu-points li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	background: var(--bu-color-accent);
}

/* Placement picker -------------------------------------------------------------- */

.bu-placements {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.bu-placements {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.bu-placements {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.bu-placement {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 14px 14px 12px;
	border: 2px solid var(--bu-color-border);
	background: var(--bu-color-white);
	transition: border-color .15s ease;
}

.bu-placement:hover {
	border-color: var(--bu-color-ink);
	color: var(--bu-color-ink);
}

.bu-placement[aria-current="true"] {
	border-color: var(--bu-color-accent);
}

.bu-placement__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: var(--bu-text-ui);
	font-weight: var(--bu-weight-semibold);
	line-height: 1.3;
}

.bu-placement__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--bu-color-border-input);
}

.bu-placement[aria-current="true"] .bu-placement__mark {
	border-color: var(--bu-color-accent);
}

.bu-placement[aria-current="true"] .bu-placement__mark::after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--bu-color-accent);
}

.bu-placement__hint {
	font-size: var(--bu-text-sm);
	line-height: 1.35;
	color: var(--bu-color-muted);
}

.bu-placements__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 14px;
	font-size: var(--bu-text-meta);
	color: var(--bu-color-muted);
}

.bu-placements__selected {
	font-weight: var(--bu-weight-semibold);
	color: var(--bu-color-ink);
}

/* Comparison table (cards below 1000px) ------------------------------------------ */

.bu-compare {
	width: 100%;
	border: var(--bu-border);
	border-collapse: collapse;
	background: var(--bu-color-white);
	font-size: var(--bu-text-ui);
}

.bu-compare th,
.bu-compare td {
	padding: 14px 16px;
	border-bottom: var(--bu-border);
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

.bu-compare thead th {
	border-bottom: 2px solid var(--bu-color-ink);
	font-size: var(--bu-text-base);
}

.bu-compare thead th:first-child {
	font-size: var(--bu-text-sm);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bu-color-muted);
}

.bu-compare thead th + th,
.bu-compare td {
	border-left: var(--bu-border);
}

.bu-compare tbody th {
	font-weight: var(--bu-weight-semibold);
	color: var(--bu-color-ink);
}

.bu-compare td {
	color: var(--bu-color-text);
}

.bu-compare-cards {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 999.98px) {
	.bu-compare {
		display: none;
	}

	.bu-compare-cards {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
}

.bu-compare-cards__item {
	padding: 16px;
	border: var(--bu-border);
	background: var(--bu-color-white);
}

.bu-compare-cards__need {
	margin-bottom: 10px;
	font-size: var(--bu-text-base);
	font-weight: var(--bu-weight-semibold);
}

.bu-compare-cards dl {
	display: grid;
	gap: 6px;
	margin: 0;
	font-size: var(--bu-text-meta);
}

.bu-compare-cards dl > div {
	display: grid;
	grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
	gap: 14px;
}

.bu-compare-cards dt {
	color: var(--bu-color-muted);
}

.bu-compare-cards dd {
	margin: 0;
	color: var(--bu-color-text);
}