/* Bearbones Build Gallery — storefront styles
 *
 * Plugs into the theme's design tokens (--wp--preset--color--*, --display, …)
 * so the plugin inherits the storefront look.
 */

/* ─── Single-build hero meta ───────────────────────────────────────── */

.bb-build-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 32px;
}
.bb-build-meta__owner {
	margin-left: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-3, #2A3038);
}

/* ─── Modifications checklist ───────────────────────────────────────── */

.bb-build-mods {
	margin: 56px 0;
	padding: 32px;
	background: var(--wp--preset--color--paper-2, #F7F8FA);
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
}
.bb-build-mods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
	gap: 8px 24px;
}
.bb-build-mods__list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
}
.bb-build-mods__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--wp--preset--color--ink, #0E1116);
	border-radius: 2px;
	background: transparent;
}

/* ─── Parts grid (matches Fitment Guides parts grid) ───────────────── */

.bb-build-parts                 { margin: 56px 0; }
.bb-build-parts__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
	gap: 16px;
	margin-top: 24px;
}
.bb-build-parts__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #FFFFFF);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease;
}
.bb-build-parts__card:hover    { border-color: var(--wp--preset--color--ink, #0E1116); }
.bb-build-parts__media         { aspect-ratio: 1 / 1; background: var(--wp--preset--color--paper-2, #F7F8FA); border-radius: 4px; overflow: hidden; }
.bb-build-parts__media img     { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-build-parts__sku           { color: var(--wp--preset--color--muted, #6B7280); font-size: 11px; }
.bb-build-parts__title         { font-size: 14px; font-weight: 600; line-height: 1.3; }
.bb-build-parts__price         { font-family: var(--wp--preset--font-family--display, 'Oswald', sans-serif); font-size: 18px; }
.bb-build-parts__unresolved    { margin-top: 24px; padding: 16px; background: var(--wp--preset--color--paper-2, #F7F8FA); border-left: 3px solid var(--wp--preset--color--muted-2, #9AA0A6); border-radius: 2px; }
.bb-build-parts__unresolved ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ─── Archive: editorial 3-column grid ──────────────────────────────── */

.bb-builds-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(320px, 1fr) );
	gap: 24px;
}
.bb-build-card {
	display: block;
	background: var(--wp--preset--color--ink, #0E1116);
	color: var(--wp--preset--color--paper, #FFFFFF);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	position: relative;
	aspect-ratio: 4 / 5;
	transition: transform .2s ease;
}
.bb-build-card:hover { transform: translateY(-2px); }

.bb-build-card__media {
	position: absolute;
	inset: 0;
}
.bb-build-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
}
.bb-build-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 22px 20px;
	background: linear-gradient( to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100% );
	color: var(--wp--preset--color--paper, #FFFFFF);
}
.bb-build-card__vehicle {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba( 255, 255, 255, 0.95 );
	color: var(--wp--preset--color--ink, #0E1116);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 2px;
}
.bb-build-card__title {
	font-family: var(--wp--preset--font-family--display, 'Oswald', sans-serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0 0 4px;
	color: var(--wp--preset--color--paper, #FFFFFF);
}
.bb-build-card__owner {
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.7 );
}

.bb-builds-pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.bb-builds-pagination .page-numbers {
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
}
.bb-builds-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink, #0E1116);
	color: var(--wp--preset--color--paper, #FFFFFF);
	border-color: var(--wp--preset--color--ink, #0E1116);
}

/* ─── Filter strip ──────────────────────────────────────────────────── */

.bb-builds-filter             { margin-bottom: 32px; }
.bb-builds-filter__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bb-builds-filter__tags .bb-chip {
	cursor: pointer;
	transition: background .15s ease;
}

/* ─── Related builds on PDP ─────────────────────────────────────────── */

.bb-pdp-builds {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--line, #E5E7EB);
}

/* ─── Submission form ───────────────────────────────────────────────── */

.bb-build-form {
	background: var(--wp--preset--color--paper, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
	padding: 32px;
	max-width: 760px;
	margin: 0 auto;
}
.bb-build-form__intro {
	font-size: 14px;
	color: var(--wp--preset--color--ink-2, #1A1F26);
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--wp--preset--color--line-2, #EEF0F3);
}
.bb-build-form__errors {
	background: #FBEAE9;
	border-left: 3px solid var(--wp--preset--color--danger, #C0392B);
	padding: 14px 16px;
	margin-bottom: 24px;
	border-radius: 2px;
}
.bb-build-form__errors ul { margin: 6px 0 0 0; padding-left: 18px; font-size: 14px; }

.bb-build-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.bb-build-form__field--full { grid-column: 1 / -1; }

.bb-build-form__field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #2A3038);
	margin-bottom: 6px;
}
.bb-build-form__field input[type="text"],
.bb-build-form__field input[type="number"],
.bb-build-form__field input[type="file"],
.bb-build-form__field select,
.bb-build-form__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	font-size: 14px;
	background: var(--wp--preset--color--paper, #FFFFFF);
}
.bb-build-form__field input:focus,
.bb-build-form__field select:focus,
.bb-build-form__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink, #0E1116);
}
.bb-build-form__mono {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 13px;
}
.bb-build-form__help {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--wp--preset--color--muted, #6B7280);
}
.bb-build-form__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bb-build-form__tag {
	cursor: pointer;
	font-size: 0;
	margin: 0;
}
.bb-build-form__tag input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}
.bb-build-form__tag span {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.bb-build-form__tag input:checked + span {
	background: var(--wp--preset--color--ink, #0E1116);
	color: var(--wp--preset--color--paper, #FFFFFF);
	border-color: var(--wp--preset--color--ink, #0E1116);
}
.bb-build-form__honeypot {
	position: absolute;
	left: -10000px;
	top: -10000px;
	height: 0;
	width: 0;
	overflow: hidden;
}
.bb-build-form__submit {
	margin-top: 28px;
	display: flex;
	justify-content: flex-end;
}

.bb-build-form__gate,
.bb-build-form__thanks {
	background: var(--wp--preset--color--paper-2, #F7F8FA);
	border: 1px solid var(--wp--preset--color--line, #E5E7EB);
	border-radius: 4px;
	padding: 56px 32px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.bb-build-form__gate p,
.bb-build-form__thanks p { margin: 16px 0 24px; }

@media ( max-width: 600px ) {
	.bb-build-form__grid { grid-template-columns: 1fr; }
	.bb-build-form       { padding: 20px; }
}