/* ==========================================================================
   Certified Bling — Home / Create Custom Jewelry (Phase 4)
   The primary CTA panel after the hero. Hard reset from warm-white back to
   near-black. Split: message + CTA left (~42%), a four-step typographic
   process right (~58%). No cards, no boxes — hierarchy, spacing, hairlines.
   ========================================================================== */

/* Hard, editorial hand-off from the warm-white section above. */
.cb-section--light:has(+ .home-custom) {
	padding-bottom: var(--cb-space-2xl);
}

.home-custom {
	background: var(--cb-black);
	color: var(--cb-white);
	padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
}

/* --- Split shell -------------------------------------------------- */

.home-custom__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

@media (min-width: 1024px) {
	.home-custom__inner {
		grid-template-columns: 42fr 58fr;
		gap: clamp(3rem, 1rem + 6vw, 7rem);
		align-items: center;
	}
}

/* --- Left: message + CTA -------------------------------------- */

.home-custom__eyebrow {
	color: var(--cb-mute);
	margin-bottom: var(--cb-space-m);
}

.home-custom__title {
	margin: 0;
	font-size: clamp(2.1rem, 0.9rem + 3.1vw, 3.5rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--cb-white);
}
.home-custom__title span {
	display: block;
	white-space: nowrap;
}

.home-custom__copy {
	margin-top: var(--cb-space-m);
	max-width: 42ch;
	color: var(--cb-mute);
	font-size: var(--cb-text-base);
	line-height: 1.6;
}

.home-custom__cta {
	margin-top: var(--cb-space-m);
	align-self: flex-start;
}
@media (min-width: 1024px) {
	.home-custom__cta { margin-top: var(--cb-space-l); }
}

/* --- Right: four-step process ------------------------------- */

.home-custom__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 0.8rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 1.6vw, 2rem);
}

@media (min-width: 760px) {
	.home-custom__steps { grid-template-columns: repeat(4, 1fr); }
}

.home-custom__step {
	display: flex;
	flex-direction: column;
}

/* Visual zone — replaceable with real process photography. */
.home-custom__step-visual {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: var(--cb-space-s);
	background: #0a0a0b;
}
@media (min-width: 760px) {
	.home-custom__step-visual { aspect-ratio: 5 / 7; }
}
.home-custom__step-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-custom__step-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px var(--cb-line-soft);
	background: linear-gradient(162deg, #111113 0%, #070709 78%);
}
.home-custom__step[data-cue="design"] .home-custom__step-ph {
	background:
		radial-gradient(78% 70% at 50% 38%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(162deg, #101013 0%, #08080a 78%);
}
.home-custom__step[data-cue="create"] .home-custom__step-ph {
	background:
		radial-gradient(60% 60% at 50% 52%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 62%),
		linear-gradient(200deg, #121214 0%, #08080a 80%);
}
.home-custom__step[data-cue="certified"] .home-custom__step-ph {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%),
		linear-gradient(162deg, #101012 0%, #060608 78%);
}

.home-custom__cue {
	width: 40%;
	height: auto;
	color: var(--cb-white);
	opacity: 0.16;
}

/* Step text block — the hairline above each aligns into one horizontal
   thread across the row (desktop) / per row (2x2 mobile). No arrows. */
.home-custom__step-body {
	border-top: 1px solid var(--cb-line-soft);
	padding-top: var(--cb-space-xs);
}

.home-custom__step-num {
	display: block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	letter-spacing: 0.16em;
	color: var(--cb-mute);
}

.home-custom__step-title {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--cb-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.05;
	font-size: var(--cb-text-lg);
	color: var(--cb-white);
}

.home-custom__step-desc {
	display: block;
	margin-top: 0.5rem;
	max-width: 24ch;
	color: var(--cb-mute);
	font-size: var(--cb-text-sm);
	line-height: 1.45;
}