/* ==========================================================================
   Certified Bling — collection card / feature component (Phase 2, new)
   The visual introduction to one of the three collections (360 / Galaxy /
   Standard) — a large image- or video-led tile, not a product card and not
   locked to the homepage. Reusable on the homepage collections section, a
   /collections/ index, or anywhere a collection needs introducing.

   Deliberately NOT where the collection's own product grid lives — that's
   the existing .cb-grid--products/.cb-card pair, rendered as a sibling
   section after this tile (or on the collection's own archive page). This
   component's job is purely: strong image, name, one positioning sentence,
   a way in.
   ========================================================================== */

.cb-collection-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	min-height: clamp(22rem, 20rem + 12vw, 34rem);
	overflow: hidden;
	background: var(--cb-charcoal); /* shows while media loads, or if none supplied yet */
}

.cb-collection-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.cb-collection-card__media img,
.cb-collection-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom-anchored scrim — only as tall as the text block needs, not a flat
   tint over the whole image, so the photography still reads at full
   strength above the copy. */
.cb-collection-card__scrim {
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	height: 65%;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0) 100%);
}

.cb-collection-card__content {
	position: relative;
	padding: var(--cb-space-l);
	color: var(--cb-white);
	max-width: 30rem;
	/* .cb-collection-card is a flex container (align-items:flex-end above);
	   flex items default to min-width:auto, which refuses to shrink below
	   their content's natural (pre-wrap) width — the classic flexbox text-
	   overflow trap. That's what let "STANDARD" spill past its card while
	   "360"/"GALAXY" happened to fit: overflow-wrap alone (below) can't
	   fix it without this. Found live (homepage QA pass). */
	min-width: 0;
}
.cb-collection-card__eyebrow { color: var(--cb-gold); margin-bottom: 0.4rem; display: block; }
.cb-collection-card__name {
	overflow-wrap: break-word;
	/* .cb-h-section from base.css covers weight/family/transform; sized
	   down to --cb-text-xl (the existing subheadline step, same one
	   .cb-h-sub uses) rather than its default --cb-text-2xl — at the
	   card's ~317px usable content width, 2xl let "Standard" (the longest
	   current collection name) overflow/break ugly mid-word. One
	   consistent smaller size across all three cards reads more
	   controlled than one card suddenly smaller than its siblings would. */
	font-size: var(--cb-text-xl);
	margin-bottom: 0.6rem;
}
.cb-collection-card__tagline {
	color: var(--cb-mute);
	margin-bottom: var(--cb-space-m);
	max-width: 32ch;
}
.cb-collection-card__cta { display: inline-flex; }

/* This card is always dark (its own scrim, regardless of section), so
   its text must always be white/mute-on-dark — but base.css's
   `.cb-section--light .cb-h-section/.cb-h-sub/.cb-h-func { color: black }`
   rules outrank this file's own `.cb-collection-card__content { color:
   white }` by specificity whenever a card sits inside a light section
   (confirmed live: Create Custom's two path cards and the homepage's own
   Custom Jewelry section both render near-invisible black-on-dark text
   there). Re-asserted here, scoped to content actually inside the card,
   so it wins regardless of which section wraps it. */
.cb-section--light .cb-collection-card__content .cb-h-hero,
.cb-section--light .cb-collection-card__content .cb-h-section,
.cb-section--light .cb-collection-card__content .cb-h-sub,
.cb-section--light .cb-collection-card__content .cb-h-func,
.cb-section--light .cb-collection-card__content .cb-body { color: var(--cb-white); }

/* Same conflict, the CTA button (buttons.css's own `.cb-section--light
   .cb-btn--secondary { color: black; border-color: black-ish }` rule
   rendered it just as invisible). */
.cb-section--light .cb-collection-card__content .cb-btn--secondary,
.cb-section--light .cb-collection-card__content .cb-btn--text {
	color: var(--cb-white);
	border-color: color-mix(in srgb, var(--cb-white) 35%, transparent);
}
.cb-section--light .cb-collection-card__content .cb-btn--secondary:hover {
	background: var(--cb-white);
	color: var(--cb-black);
	border-color: var(--cb-white);
}
.cb-section--light .cb-collection-card__content .cb-nav__link--pending { color: var(--cb-mute); }

/* ---- Grid wrapper — 3-up desktop (one per collection), stacked on
   mobile. Generous gap: these are meant to breathe, not pack tight like
   product tiles. */
.cb-grid--collections {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cb-space-m);
}
@media (max-width: 900px) {
	.cb-grid--collections { grid-template-columns: 1fr; gap: var(--cb-space-l); }
	.cb-collection-card { min-height: 20rem; }
}

/* ---- Optional featured-products strip inside/after a collection card —
   reuses .cb-grid--products/.cb-card as-is; this just sets the rhythm
   between the feature tile and the strip that follows it. */
.cb-collection-card + .cb-grid--products {
	margin-top: var(--cb-space-m);
}