/* ==========================================================================
   Certified Bling — homepage (Phase 6; UX refinement pass this phase)

   Page-specific patterns only — hero/collections/how-it-works/our-process/
   brand-line all reuse existing global components (sections.css, product-
   card.css, collection-card.css, build-compare.css) with zero new CSS
   here. Enqueued only on the front page (functions.php). Breakpoints match
   the established homepage-component convention (sections.css .cb-process/
   .cb-portfolio-steps, vision.css): 1023px tablet, 767px mobile, 429px
   small phone.

   Sections 3/4/5 below (Featured Products, One Design Built Your Way,
   Budget Teaser) belong to template parts no longer called from
   front-page.php as of this phase — left in place rather than deleted
   (the brief preserves the underlying reusable components; nothing here
   is "the component" itself, just this page's old wrapper around it) but
   dead weight if this file ever needs trimming for real.
   ========================================================================== */

/* ---- 1. Hero ----------------------------------------------------------- */
.cb-home__hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-home__hero-copy { max-width: 28rem; }
.cb-home__hero-tertiary { margin-top: var(--cb-space-l); }

/* ---- 3. Featured Products ("Build Yours") ------------------------------ */
.cb-home__featured-intro { max-width: var(--cb-content); margin-top: var(--cb-space-xs); }

/* The one honest closing tile when the real catalog doesn't fill the grid
   — same .cb-card shape as a real product card (so it sits in the grid
   without looking like an error), media replaced with a quiet gradient
   rather than a product photo, CTA text instead of a product name. */
.cb-home__featured-more { display: flex; flex-direction: column; }
.cb-home__featured-more-media {
	aspect-ratio: 1 / 1;
	display: block;
	background: linear-gradient(165deg, var(--cb-paper-2) 0%, var(--cb-paper) 100%);
}
.cb-section--light .cb-home__featured-more .cb-card__name { color: var(--cb-ink-mute); }

/* ---- 4. One Design. Built Your Way. ------------------------------------ */
.cb-home__build-way-intro { max-width: var(--cb-content); margin-bottom: var(--cb-space-l); }

/* ---- 5. Build Around Your Budget (teaser) ------------------------------ */
.cb-home__budget-inner { max-width: 34rem; margin-inline: auto; text-align: center; }
.cb-home__budget-inner .cb-h-sub { margin-block: var(--cb-space-s); }
.cb-home__budget-inner .cb-body { margin-bottom: var(--cb-space-m); }

/* ---- 6. Find Your Piece (jewelry types) --------------------------------
   Compact, image-led tiles — lighter than .cb-collection-card (which is
   built for 3 large feature intros, not 8 category links). Exactly 8
   terms now (Wedding Bands added this phase) divide evenly into a clean
   4×2 grid on desktop — no awkward 3-up tablet step needed, so this goes
   straight from 4-up to the 2-up mobile grid the brief asks for. */
.cb-type-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cb-grid-gap);
}
.cb-type-tile {
	display: flex;
	flex-direction: column;
	gap: var(--cb-space-xs);
}
.cb-type-tile__media {
	display: block;
	aspect-ratio: 4 / 5;
	background: linear-gradient(165deg, var(--cb-charcoal) 0%, var(--cb-ink) 100%);
	transition: opacity var(--cb-transition);
}
.cb-type-tile:hover .cb-type-tile__media { opacity: 0.8; }
.cb-type-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.cb-type-tile__name { text-align: center; }
@media (prefers-reduced-motion: reduce) { .cb-type-tile__media { transition: none; } }
@media (max-width: 767px) { .cb-type-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---- 7. Custom Jewelry (redesign) ---------------------------------------
   Two premium visual paths, not two text columns — each reuses
   .cb-collection-card's exact classes (collection-card.css) rather than a
   second large-card component. No media supplied yet, same honest
   fallback the collection cards themselves use while real photography is
   pending (the component's own charcoal background). */
.cb-home__custom-intro { max-width: var(--cb-content); margin-top: var(--cb-space-xs); }
.cb-home__custom-paths {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cb-space-m);
	margin-top: var(--cb-space-l);
}
.cb-nav__pending-tag { opacity: 0.7; text-transform: none; letter-spacing: normal; }
@media (max-width: 767px) { .cb-home__custom-paths { grid-template-columns: 1fr; gap: var(--cb-space-m); } }

/* ---- 8. Try It On (redesign) ---------------------------------------------
   Was a single thin strip (icon + line + button) — now a real two-column
   feature moment: a device-style visual on one side, headline/copy/CTA on
   the other. The "screen" is an honest gradient + the same lens icon the
   old strip used, never a fabricated result screenshot — the real
   AI try-on backend isn't built yet (see try-on-teaser.php). */
.cb-home__tryon-grid {
	display: grid;
	grid-template-columns: minmax(0, 18rem) 1fr;
	align-items: center;
	gap: var(--cb-space-xl);
}
.cb-home__tryon-device {
	position: relative;
	aspect-ratio: 9 / 18.5;
	max-width: 16rem;
	margin-inline: auto;
	border-radius: 2.25rem;
	border: 1px solid var(--cb-line-dark);
	background: linear-gradient(165deg, var(--cb-charcoal) 0%, var(--cb-ink) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-home__tryon-device-notch {
	position: absolute;
	top: 0.85rem;
	left: 50%;
	width: 2.4rem;
	height: 0.3rem;
	border-radius: 999px;
	background: var(--cb-line-dark);
	transform: translateX(-50%);
}
.cb-home__tryon-device-screen { display: flex; color: var(--cb-gold); opacity: 0.85; }
.cb-home__tryon-content { max-width: 28rem; }
.cb-home__tryon-content .cb-h-section { margin-bottom: var(--cb-space-s); }
.cb-home__tryon-content .cb-body { max-width: 36ch; margin-bottom: var(--cb-space-m); }
@media (max-width: 767px) {
	.cb-home__tryon-grid { grid-template-columns: 1fr; text-align: center; gap: var(--cb-space-l); }
	.cb-home__tryon-content { max-width: none; margin-inline: auto; }
	.cb-home__tryon-content .cb-body { margin-inline: auto; }
}

/* ---- 9. How It Works (simplified to 3 steps) ----------------------------
   .cb-process--3 (sections.css) handles the grid; nothing homepage-
   specific needed beyond the made-to-order line below. */
.cb-home__how-mto { margin-top: var(--cb-space-l); color: var(--cb-gold-ink); }

/* ---- 9b. Our Process ("From Idea to Certified.") -------------------------
   New section this phase. Pure .cb-section__head + .cb-process (5-up,
   default grid) — no section-specific CSS needed beyond what already
   exists. */

/* ---- 10. Why Certified Bling (rewrite) ------------------------------------ */
.cb-home__why-intro { max-width: 56ch; margin-top: var(--cb-space-s); }
.cb-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cb-space-l);
	margin-top: var(--cb-space-l);
}
.cb-why-grid__item { border-top: 1px solid var(--cb-line-soft); padding-top: var(--cb-space-s); }
.cb-why-grid__item .cb-h-func { margin-bottom: 0.4rem; }
@media (max-width: 1023px) { .cb-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 429px) { .cb-why-grid { grid-template-columns: 1fr; } }

/* ---- 11. Certified in the Wild ------------------------------------------- */
.cb-social-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--cb-space-s);
}
.cb-social-grid__item {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.cb-social-grid__item img, .cb-social-grid__item video { width: 100%; height: 100%; object-fit: cover; }
.cb-social-grid__item--placeholder {
	background:
		radial-gradient(130% 110% at 85% 100%, color-mix(in srgb, var(--cb-gold) 8%, transparent), transparent 60%),
		linear-gradient(160deg, var(--cb-paper-2) 0%, var(--cb-paper) 100%);
}
@media (max-width: 1023px) { .cb-social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
	/* Horizontal browsing, not a cramped 2-col grid — the brief's own
	   guidance ("horizontal swipe only where it actually improves
	   browsing") applies here: 5 square-ish lifestyle tiles read better as
	   a scroll-past filmstrip on a phone than stacked/packed. */
	.cb-social-grid { display: flex; gap: var(--cb-space-s); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--cb-space-xs); margin-inline: calc(var(--cb-gutter) * -1); padding-inline: var(--cb-gutter); }
	.cb-social-grid__item { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ---- 12. Certified Partners (teaser) -------------------------------------- */
.cb-home__partners-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cb-space-l);
}
.cb-home__partners-inner > div:first-child { flex: 1 1 24rem; }
.cb-home__partners-inner .cb-h-sub { margin-bottom: 0.3rem; max-width: 30ch; }
.cb-home__partners-actions { display: flex; align-items: center; gap: var(--cb-space-m); flex-wrap: wrap; }

/* ---- 13. FAQ --------------------------------------------------------------
   Same visual language as Our Vision/legacy-theme FAQ accordions: a plain
   bordered list, +/- marker drawn from two pseudo-element bars (no icon
   font/SVG needed), reduced-motion-guarded reveal. */
.cb-home__faq-list { border-bottom: 1px solid var(--cb-line-dark); max-width: var(--cb-content); }
.cb-home__faq-item { border-top: 1px solid var(--cb-line-dark); padding-block: var(--cb-space-s); }
.cb-home__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-m);
	cursor: pointer;
	list-style: none;
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cb-home__faq-q::-webkit-details-marker { display: none; }
.cb-home__faq-q::marker { content: ""; }

/* Marker: a dedicated span (faq.php), not a pseudo-element on <summary>
   itself — two bars need to overlap into a "+", and a single element can
   only carry one ::before + one ::after, which isn't enough room for both
   bars AND the cross-fade/rotate transition each needs independently. */
.cb-home__faq-marker { position: relative; flex: none; width: 0.9em; height: 0.9em; }
.cb-home__faq-marker::before,
.cb-home__faq-marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.cb-home__faq-marker::before { width: 0.9em; height: 1px; } /* horizontal bar — always present */
.cb-home__faq-marker::after { width: 1px; height: 0.9em; transition: transform var(--cb-transition), opacity var(--cb-transition); } /* vertical bar — collapses open */
.cb-home__faq-item[open] .cb-home__faq-marker::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cb-home__faq-marker::after { transition: none; } }

.cb-home__faq-item p.cb-body { margin-top: var(--cb-space-s); max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) {
	.cb-home__faq-item[open] p.cb-body { animation: cb-faq-reveal 220ms ease both; }
}
@keyframes cb-faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- 14. Closing ----------------------------------------------------------- */
.cb-home__closing-support { max-width: 30rem; margin-inline: auto; margin-top: var(--cb-space-s); text-align: center; }
.cb-home__closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--cb-space-s); margin-top: var(--cb-space-l); }