/* ==========================================================================
   Certified Bling — reusable section patterns (Phase 1)
   Layout/spacing contracts only — no live data binding yet (Phase 2). Every
   section shares .cb-section + a light/dark modifier (base.css) for vertical
   rhythm, then adds one of the patterns below for its internal layout.
   Adjacent same-ground sections drop the doubled seam padding, exactly as
   proven on the current homepage.
   ========================================================================== */

/* Suppress Blocksy's default page-title/hero-section module on WP Pages
   (its own unstyled "PAGE NAME" bar, black-on-white, rendered above our
   header.php's content by Blocksy's own page.php flow) — found live during
   the Phase 1 visual QA pass, breaking the dark-canvas-first look on every
   page. Scoped to body.page only (not post/product/archive, which this
   phase hasn't audited) since every real page template this project builds
   supplies its own heading via .cb-section/.cb-h-section instead; Blocksy's
   default is never the right look here. Revisit if a future phase wants
   Blocksy's hero-section for a specific post type.  */
body.page .hero-section { display: none; }

.cb-section { padding-block: var(--cb-space-3xl); }
.cb-section--light + .cb-section--light,
.cb-section--dark + .cb-section--dark { padding-top: 0; }

.cb-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--cb-space-m);
	margin-bottom: var(--cb-space-l);
}
.cb-section__head .cb-h-section { margin: 0; }

/* 1. Editorial hero — full-bleed, content anchored lower-left, ~90-100vh but
      sized to content, not forced to 100vh (so the opener never crops the
      next section out of the first viewport on short screens). */
.cb-section--hero {
	position: relative;
	isolation: isolate;
	min-height: 88vh;
	min-height: 88svh;
	display: flex;
	align-items: flex-end;
	padding-block: var(--cb-space-2xl) var(--cb-space-2xl);
	overflow: hidden;
}
.cb-section--hero__media { position: absolute; inset: 0; z-index: -1; background: var(--cb-black); }
/* max-width was 40rem — never actually stress-tested against a real
   multi-word headline at --cb-display's own clamp maximum (144px at wide
   viewports): a 640px box at that size can't even fit most single words
   on one line, so overflow-wrap:break-word (base.css's inherited default)
   was splitting words mid-letter ("SHOU/LD", "MATT/ER") — found live
   building the Our Vision hero. 58rem gives a 6-9 word headline room to
   wrap on real word boundaries at the clamp's upper end; margin-inline:0 +
   its own padding-inline (not a borrowed .cb-container) keeps the
   "anchored lower-left" placement this component was always meant to
   have — a page combining this class with .cb-container for its gutter
   was accidentally centering it instead, since max-width's cascade winner
   doesn't also cancel .cb-container's own margin-inline:auto. 58rem still
   wasn't quite enough (confirmed live: "OVERHEAD." still broke off its
   final letter at 822px available) — widened further to 68rem. */
.cb-section--hero__content { max-width: 68rem; margin-inline: 0; padding-inline: var(--cb-gutter); }
.cb-section--hero .cb-h-hero { margin-bottom: var(--cb-space-m); }
.cb-section--hero__actions { display: flex; flex-wrap: wrap; gap: var(--cb-space-s); margin-top: var(--cb-space-l); }

/* 2. 4-column product grid — see product-card.css .cb-grid--products for
      the grid itself; this is the section wrapper around it. */
.cb-section--grid { }

/* 3. Seasonal collection — same grid pattern, visually distinguished by a
      gold eyebrow + hairline rule rather than a different layout, so it
      never reads as a separate "banner" the way the brief warns against. */
.cb-section--seasonal .cb-eyebrow { color: var(--cb-gold); }
.cb-section--seasonal .cb-section__head { border-top: 1px solid var(--cb-gold-line); padding-top: var(--cb-space-m); }

/* 4. Lifestyle image/video — full-bleed media with minimal caption overlay,
      not a boxed card. */
.cb-section--lifestyle { padding-block: 0; }
.cb-section--lifestyle__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cb-section--lifestyle__media img, .cb-section--lifestyle__media video { width: 100%; height: 100%; object-fit: cover; }
.cb-section--lifestyle__caption {
	position: absolute; left: var(--cb-gutter); bottom: var(--cb-space-m);
	color: var(--cb-white);
	text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* 5. AI conversation — the one place Liquid Glass wraps a whole content
      block, because the conversation surface genuinely floats above the
      page in spirit (it's a tool, not an article). Bounded width so it
      reads as a console, not a full-bleed panel. */
.cb-section--ai-conversation .cb-ai-panel {
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--cb-space-l);
	min-height: 22rem;
	display: flex;
	flex-direction: column;
	gap: var(--cb-space-s);
}

/* 6. Portfolio / Our Work — Idea → Design → Finished → On the Customer,
      a horizontal progression on desktop, stacked on mobile. Numbered
      because it IS a real fixed sequence here, not decoration. */
.cb-portfolio-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-space-m); counter-reset: cb-step; }
.cb-portfolio-steps > * { counter-increment: cb-step; }
.cb-portfolio-steps > *::before {
	content: counter(cb-step, decimal-leading-zero);
	display: block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	color: var(--cb-gold);
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
}
@media (max-width: 767px) { .cb-portfolio-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 429px) { .cb-portfolio-steps { grid-template-columns: 1fr; } }

/* 7. How It Works — same numbered-step pattern as the current site's
      5-step process, formalized as a shared class rather than one-off CSS. */
.cb-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cb-space-m); counter-reset: cb-process; }
.cb-process > * { counter-increment: cb-process; }
.cb-process > *::before {
	content: counter(cb-process, decimal-leading-zero);
	display: block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	color: var(--cb-mute);
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
}
@media (max-width: 1023px) { .cb-process { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .cb-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 429px) { .cb-process { grid-template-columns: 1fr; } }

/* Modifier: a true 3-step sequence (the homepage's customer shopping
   journey). The default grid above is 5 columns — fine for a real 5-step
   process, but it leaves 3 items stranded in the first 3 of 5 tracks
   instead of filling the row. Same breakpoints, just a 3-up starting
   point instead of 5-up. */
.cb-process.cb-process--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .cb-process.cb-process--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 429px) { .cb-process.cb-process--3 { grid-template-columns: 1fr; } }

/* 8. Footer — see footer.css. */

/* 9. Brand line — "Dream It. Build It. Get Certified." A brand line, not
      filler copy: use it as one deliberate moment per page at most (e.g.
      closing the homepage, or anchoring Our Vision), never as a repeated
      section header or a tagline stamped on every block. Centered, display
      type, generous surrounding space — its rarity IS the design. */
.cb-brand-line {
	display: block;
	text-align: center;
	padding-block: var(--cb-space-2xl);
}
.cb-brand-line .cb-h-section { text-wrap: balance; }