/**
 * Homepage-specific layout: hero, featured grids, trending rail, brand strip.
 */

.bcm-hero {
	position: relative;
	background: linear-gradient(160deg, var(--bcm-color-bg) 0%, var(--bcm-surface-sunken) 100%);
	padding-block: var(--bcm-space-9) var(--bcm-space-7);
	overflow: hidden;
}

.bcm-hero__inner {
	display: grid;
	gap: var(--bcm-space-6);
	text-align: center;
	max-width: 820px;
	margin-inline: auto;
}

.bcm-hero h1 {
	font-size: clamp(2rem, 1.6rem + 2vw, var(--bcm-fs-3xl));
}

.bcm-hero__subtitle {
	font-size: var(--bcm-fs-md);
	color: var(--bcm-text-secondary);
}

.bcm-hero__search {
	position: relative;
	display: flex;
	gap: var(--bcm-space-2);
	background: var(--bcm-color-surface);
	border: 2px solid var(--bcm-border-color);
	border-radius: var(--bcm-radius-pill);
	padding: var(--bcm-space-2);
	box-shadow: var(--bcm-shadow-md);
	max-width: 640px;
	margin-inline: auto;
}

.bcm-hero__search input {
	flex: 1;
	border: 0;
	background: none;
	padding: 0.9em 1.2em;
	font-size: var(--bcm-fs-base);
}

.bcm-hero__search input:focus-visible {
	outline: none;
}

.bcm-hero__quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcm-space-2);
	justify-content: center;
}

.bcm-hero__quicklinks a {
	font-size: var(--bcm-fs-xs);
	background: var(--bcm-color-surface);
	border: 1px solid var(--bcm-border-color);
	border-radius: var(--bcm-radius-pill);
	padding: 0.5em 1em;
	text-decoration: none;
	color: var(--bcm-text-secondary);
}

.bcm-hero__quicklinks a:hover {
	border-color: var(--bcm-color-primary);
	color: var(--bcm-color-primary);
}

/* Editor's Choice / Best Value / Premium spotlight row */
.bcm-spotlight {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bcm-space-5);
}

@media (min-width: 860px) {
	.bcm-spotlight {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bcm-spotlight__card {
	position: relative;
	background: var(--bcm-color-surface);
	border-radius: var(--bcm-radius-lg);
	border: 1px solid var(--bcm-border-color);
	padding: var(--bcm-space-6);
	text-align: center;
	box-shadow: var(--bcm-shadow-sm);
}

.bcm-spotlight__card--featured {
	border-color: var(--bcm-color-primary);
	box-shadow: var(--bcm-shadow-md);
	transform: scale(1.02);
}

/* Category tiles */
.bcm-category-tile {
	position: relative;
	border-radius: var(--bcm-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: flex-end;
	color: #fff;
	text-decoration: none;
}

.bcm-category-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--bcm-duration-slow) var(--bcm-ease);
}

.bcm-category-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(31, 31, 31, 0.75) 0%, rgba(31, 31, 31, 0.1) 60%);
}

.bcm-category-tile:hover img {
	transform: scale(1.08);
}

/* Compact category grid: always exactly one row, no horizontal scroll.
   Column count matches the actual term count (set inline as --bcm-cat-cols)
   so columns shrink to fit the container instead of wrapping or overflowing. */
.bcm-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--bcm-cat-cols, 6), 1fr);
	gap: var(--bcm-space-3);
}

.bcm-category-tile--compact {
	aspect-ratio: 4 / 3.4;
}

.bcm-category-tile--compact .bcm-category-tile__label {
	padding: var(--bcm-space-2) var(--bcm-space-3);
	font-size: var(--bcm-fs-sm);
}

@media (max-width: 900px) {
	.bcm-category-grid {
		grid-template-columns: repeat(3, 1fr);
		row-gap: var(--bcm-space-4);
	}
}

@media (max-width: 560px) {
	.bcm-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bcm-category-tile__label {
	position: relative;
	z-index: 1;
	padding: var(--bcm-space-4);
	font-family: var(--bcm-font-heading);
	font-weight: 700;
}

/* Trending / horizontal scroll rail */
.bcm-rail {
	display: flex;
	gap: var(--bcm-space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--bcm-space-3);
}

.bcm-rail::-webkit-scrollbar {
	height: 6px;
}

.bcm-rail::-webkit-scrollbar-thumb {
	background: var(--bcm-border-color-strong);
	border-radius: var(--bcm-radius-pill);
}

.bcm-rail > * {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

/* Brand strip */
.bcm-brand-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcm-space-6);
	align-items: center;
	justify-content: center;
}

.bcm-brand-strip img {
	max-height: 40px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: all var(--bcm-duration-base) var(--bcm-ease);
}

.bcm-brand-strip a:hover img {
	filter: none;
	opacity: 1;
}

/* Popular Categories — plain compact sitemap link block */
.bcm-popular-categories {
	background: var(--bcm-color-surface);
	border-top: 1px solid var(--bcm-border-color);
	border-bottom: 1px solid var(--bcm-border-color);
}

.bcm-popular-categories__heading {
	font-size: var(--bcm-fs-lg);
	margin-bottom: var(--bcm-space-5);
}

.bcm-popular-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--bcm-space-6);
}

.bcm-popular-categories__grid h3 {
	font-size: var(--bcm-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bcm-text-muted);
	margin-bottom: var(--bcm-space-3);
}

.bcm-popular-categories__grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bcm-space-2);
}

.bcm-popular-categories__grid a {
	font-size: var(--bcm-fs-sm);
	color: var(--bcm-text-secondary);
	text-decoration: none;
}

.bcm-popular-categories__grid a:hover {
	color: var(--bcm-color-primary);
	text-decoration: underline;
}