/* ==========================================================================
   CURB VIBES - BRAND DEVICES (post GenerateBlocks repair, v0.4.2)

   WHAT CHANGED IN 0.4.2
   Everything in this file that was compensating for core-block markup has
   been REMOVED, because GenerateBlocks now owns it directly in the block
   markup (editable by Sonia in the editor, not here):

     removed -> now owned by GenerateBlocks
     .cv-btn / .cv-btn--primary / .cv-btn--secondary   -> GB element <a> + styles
     .cv-textlink                                      -> GB element <a> + styles
     .cv-guide-card / --compact                        -> GB element + styles
     .cv-compare                                       -> GB grid element
     .cv-stays                                         -> GB grid element
     .cv-cta-band                                      -> GB element + styles
     .cv-related                                       -> GB grid element
     .cv-founder-note                                  -> GB element + styles
     .cv-trust-strip                                   -> GB grid element
     .cv-guide-grid (+ .wp-block-post-template deps)   -> GB query/looper/loop-item
     .cv-panel / .cv-minilabel / .cv-step-num
     .cv-h3 / .cv-step-row / .cv-chip / .cv-chip-row   -> GB element/text + styles
     .cv-container / .cv-reading / .cv-focused
     .cv-breakout                                      -> GB element max-width styles

   ALL core-block selector dependencies (.wp-block-group, .wp-block-button,
   .wp-block-button__link, .wp-block-post, .wp-block-post-template) are gone.

   WHAT REMAINS HERE, AND WHY
   Only brand devices GenerateBlocks cannot express cleanly, and which
   should stay stable across every page:
     1. placeholder frames  - striped pre-imagery device (repeating gradient)
     2. numbered decisions  - CSS counters, impossible via block attributes
   Observation labels, callout notches, the curbline, focus rings, reduced
   motion and width tokens live in components.css / utilities.css /
   tokens.css and are unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PLACEHOLDER FRAMES (striped, mono caption - canvas treatment)
   Applied to GenerateBlocks elements via the "cv-placeholder" class while
   real photography is pending. Ratio modifiers keep the authored aspect at
   every width so swapping in a real image cannot shift layout.
   -------------------------------------------------------------------------- */

.cv-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: repeating-linear-gradient(
		45deg,
		var(--cv-hairline) 0 14px,
		var(--cv-plaster) 14px 28px
	);
	color: var(--cv-charcoal);
	font-family: var(--cv-font-mono);
	font-size: 0.8125rem;
	width: 100%;
}

.cv-placeholder--16x9 { aspect-ratio: 16 / 9; }
.cv-placeholder--4x3  { aspect-ratio: 4 / 3; }
.cv-placeholder--3x2  { aspect-ratio: 3 / 2; }
.cv-placeholder--1x1  { aspect-ratio: 1 / 1; }
.cv-placeholder--4x5  { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   2. NUMBERED DECISIONS 01-03 (Brick Clay numerals)
   Applied to a core/list block - the sanctioned block for a genuine semantic
   ordered list. CSS counters cannot be expressed through block attributes,
   so this styling stays in the child theme.

   Brand Brick Clay is correct here: the numerals render at 1.25rem/600,
   which qualifies as large text for contrast purposes.
   -------------------------------------------------------------------------- */

.cv-decisions {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cv-decision;
	display: grid;
	gap: var(--cv-space-s);
}

.cv-decisions > li {
	counter-increment: cv-decision;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--cv-space-xs);
	align-items: baseline;
}

.cv-decisions > li::before {
	content: "0" counter(cv-decision);
	font-family: var(--cv-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--cv-clay);
	font-variation-settings: "SOFT" 0, "WONK" 0;
}