/*
 * thecannon-gear — front-end supplement styles
 *
 * The core .tc-shelf-grid / .tc-shelf / .tc-gear-chip styles live in
 * the theme's base.css. This file only adds what the plugin introduces:
 *   - .tc-gear-chips wrapper (flex row for the chips shortcode)
 *   - link variants for shelf chips and gear chips
 */

/* Chip shortcode wrapper — mirrors the wp:group flex layout it replaces */
.tc-gear-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12, 0.75rem);
}

/* Link variants — remove underline, preserve chip appearance */
a.tc-shelf__chip--link,
a.tc-gear-chip--link {
	text-decoration: none;
	transition: opacity 0.15s ease;
}

a.tc-shelf__chip--link:hover,
a.tc-gear-chip--link:hover {
	opacity: 0.75;
}

/* Bikes shortcode cards */
.tc-bike-fleet {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--24, 1.5rem);
}

.tc-bike-fleet__card {
	border: 1px solid var(--wp--preset--color--outline-variant, #d7d7d7);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--32, 2rem);
	background: var(--wp--preset--color--surface-container-lowest, #fff);
}

.tc-bike-fleet__kicker {
	margin: 0 0 var(--wp--preset--spacing--12, 0.75rem);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--outline, #6b6b6b);
}

.tc-bike-fleet__title {
	margin: 0 0 var(--wp--preset--spacing--12, 0.75rem);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

.tc-bike-fleet__description {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	line-height: 1.65;
	color: var(--wp--preset--color--on-surface-secondary, #444);
}

@media (max-width: 900px) {
	.tc-bike-fleet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.tc-bike-fleet {
		grid-template-columns: 1fr;
	}
}

/* Single gear media gallery */
.tc-gear-gallery-module {
	margin-top: var(--wp--preset--spacing--40, 2.5rem);
}

.tc-gear-gallery-module__title {
	margin: 0 0 var(--wp--preset--spacing--16, 1rem);
	font-size: var(--wp--preset--font-size--h4, 1.5rem);
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	font-weight: 800;
	line-height: 1.2;
}

.tc-gear-gallery-module__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--16, 1rem);
}

.tc-gear-gallery-module__item {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(24, 28, 29, 0.08);
	background: var(--wp--preset--color--surface-container-lowest, #fff);
	box-shadow: var(--tc-shadow-card, 0 16px 40px rgba(16, 18, 19, 0.08));
	min-height: 200px;
}

.tc-gear-gallery-module__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Related gear cards */
.tc-related-gear {
	margin-top: var(--wp--preset--spacing--40, 2.5rem);
	padding-top: var(--wp--preset--spacing--20, 1.25rem);
	border-top: 1px solid var(--wp--preset--color--outline-variant, #ebeeef);
}

.tc-related-gear__title {
	margin: 0 0 var(--wp--preset--spacing--16, 1rem);
}

/* Pills — consistent with Workbench chip pattern, tuned for light bg */
.tc-related-gear__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tc-related-gear__card {
	margin: 0;
}

.tc-related-gear__card-title {
	margin: 0;
	line-height: 1;
	font-weight: inherit;
}

/* Light-surface pill — dark on-surface pill with white text for high contrast.
   Visually distinct from the teal Workbench chips and the gold Daily Driver pill. */
.tc-related-gear__card-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #ffffff;
	background: var(--wp--preset--color--on-surface);
	border: 1px solid var(--wp--preset--color--on-surface);
	border-radius: 9999px;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-related-gear__card-title a:hover,
.tc-related-gear__card-title a:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: #ffffff;
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

/* Brand meta redundant in pill form — hide; brand is typically in the title */
.tc-related-gear__card-meta {
	display: none;
}

@media (max-width: 640px) {
	.tc-gear-gallery-module__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   Gear Build List — role / component pairs, card-wrapped
   ============================================================= */
.tc-build-list {
	margin: var(--wp--preset--spacing--32, 2rem) 0;
	padding: var(--wp--preset--spacing--8, 0.5rem) var(--wp--preset--spacing--32, 2rem);
	display: grid;
	gap: 0;
	background: var(--wp--preset--color--surface-container-lowest, #ffffff);
	border: 1px solid var(--wp--preset--color--outline-variant, #ebeeef);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--ambient);
}

.tc-build-list__row {
	display: grid;
	grid-template-columns: minmax(110px, 140px) 1fr;
	gap: var(--wp--preset--spacing--24, 1.5rem);
	align-items: baseline;
	padding: var(--wp--preset--spacing--16, 1rem) 0;
	border-top: 1px solid var(--wp--preset--color--outline-variant, #ebeeef);
}

.tc-build-list__row:first-child {
	border-top: none;
}

.tc-build-list__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #1cc1a3);
}

.tc-build-list__item {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument-sans, sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--on-surface, #181c1d);
}

.tc-build-list__name {
	font-weight: 600;
}

.tc-build-list__link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 100%;
	transition: background-size 0.2s ease, color 0.2s ease;
}

.tc-build-list__link:hover,
.tc-build-list__link:focus-visible {
	color: var(--wp--preset--color--primary-dark, #006b59);
	background-size: 100% 2px;
	outline: none;
}

.tc-build-list__note {
	color: var(--wp--preset--color--on-surface-secondary, #3c4a45);
}

@media (max-width: 540px) {
	.tc-build-list {
		padding: var(--wp--preset--spacing--8, 0.5rem) var(--wp--preset--spacing--24, 1.5rem);
		border-radius: 12px;
	}

	.tc-build-list__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}