/**
 * Home page (1a) only: hero, "browse by category" tiles, brand band.
 */

.chb-hero {
	position: relative;
	padding: 76px 48px 64px;
}
/* Full-bleed background: breaks out to the viewport edge regardless of
   .chb-hero's own (1280px-constrained) width, via the standard
   50%/-50vw/100vw centering trick. Content (.chb-hero__glow,
   .chb-hero__content) stays exactly where it was -- only the background
   wash extends further. z-index keeps it behind real content since
   plain DOM order isn't reliable once positioned children are involved. */
.chb-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX( -50% );
	background: radial-gradient( ellipse 700px 500px at 88% 8%, color-mix( in srgb, var( --accent ) 22%, transparent ), transparent 70% );
	z-index: 0;
	pointer-events: none;
}
.chb-hero__glow {
	position: absolute;
	top: -40px;
	right: -60px;
	width: 640px;
	height: 340px;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.chb-hero__line {
	position: absolute;
	height: 1px;
	transform: rotate( -18deg );
}
.chb-hero__line--1 { top: 60px; right: 120px; width: 520px; background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --accent ) 55%, transparent ) 60%, transparent ); }
.chb-hero__line--2 { top: 140px; right: 40px; width: 420px; background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --accent ) 40%, transparent ) 55%, transparent ); }
.chb-hero__line--3 { top: 220px; right: 180px; width: 340px; background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --accent ) 45%, transparent ) 55%, transparent ); }
.chb-hero__dot {
	position: absolute;
	top: 56px;
	right: 118px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --accent );
	opacity: 0.7;
}
.chb-hero__dot--2 {
	top: 216px;
	right: 176px;
	width: 5px;
	height: 5px;
	opacity: 0.5;
	animation-delay: 1.2s;
}

.chb-hero__content {
	max-width: 760px;
	position: relative;
	z-index: 1;
}
.chb-hero__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.chb-hero__badge {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var( --accent );
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chb-hero__star {
	width: 16px;
	height: 16px;
	background: var( --accent-ink );
	clip-path: polygon( 50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}
.chb-hero__badge-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.chb-hero__headline {
	font-family: var( --font-heading );
	font-weight: 800;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0;
}
.chb-hero__intro {
	font-size: 18px;
	line-height: 1.6;
	color: var( --muted );
	max-width: 560px;
	margin: 0 0 22px;
}
.chb-hero__intro p {
	margin: 0 0 12px;
}
.chb-hero__intro p:last-child {
	margin-bottom: 0;
}
/* Browse by category */
.chb-category-grid {
	display: grid;
	/* grid-template-columns set inline per-instance (chadhall/category-grid's
	   "columns" attribute) so this one block serves both Home's 5-col
	   default and the /reviews page's 2-col layout. */
	gap: 18px;
}
/* When there are exactly 2 columns, a lone odd last tile spans both
   columns and centers itself at roughly one column's width, instead of
   stretching full-width or leaving an awkward gap on one side. */
.chb-category-grid--center-last > :last-child:nth-child( odd ) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc( 50% - 9px );
}
.chb-category-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid;
	border-radius: var( --radius-medium );
	padding: 22px;
	height: 150px;
	transition: transform 150ms ease;
}
.chb-category-tile:hover {
	transform: translateY( -3px );
}
.chb-category-tile__swatch {
	width: 34px;
	height: 34px;
	border-radius: 9px;
}
.chb-category-tile__icon {
	object-fit: cover;
}
.chb-category-tile__name {
	font-weight: 700;
	font-size: 16px;
}
.chb-category-tile__count {
	font-size: 12px;
	color: var( --muted );
	margin-top: 3px;
}

/* ---- Tablet ---- */
@media ( max-width: 900px ) {
	.chb-hero {
		padding: 56px 32px 48px;
	}
	.chb-hero__headline {
		font-size: 38px;
		line-height: 1.12;
	}
	.chb-hero__intro {
		font-size: 17px;
	}
	.chb-category-grid:not( .chb-category-grid--center-last ) {
		grid-template-columns: repeat( 3, 1fr ) !important;
	}
}

/* ---- Mobile ---- */
@media ( max-width: 600px ) {
	.chb-hero {
		padding: 40px 20px 36px;
	}
	.chb-hero__glow {
		display: none;
	}
	.chb-hero__title-row {
		align-items: flex-start;
	}
	.chb-hero__badge {
		width: 36px;
		height: 36px;
		margin-top: 2px;
	}
	.chb-hero__star {
		width: 13px;
		height: 13px;
	}
	.chb-hero__headline {
		font-size: 28px;
		line-height: 1.18;
	}
	.chb-hero__intro {
		font-size: 16px;
	}
	.chb-category-grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
		gap: 12px;
	}
	.chb-category-tile {
		height: auto;
		padding: 16px;
		gap: 24px;
	}
}