/* ==========================================================================
   9WEB STARTER THEME — COMPONENTS (Phase 6)
   CSS for the 5 registered block-style variations (inc/styles.php):
   Section, Card, Eyebrow, Badge — plus baseline button theming that
   theme.json's styles.elements.button can't express (radius, focus-
   visible). Token-driven only — no raw colour/spacing/radius value
   appears anywhere below without going through a --9w-* alias.
   ========================================================================== */

/* ---- Section (Group style: is-style-9w-section) --------------------------
   Vertical rhythm only. Deliberately does not touch background, width,
   or layout — those stay native (Group's own colour panel, and the
   constrained/wide/full width toolbar already on every Group). */

.is-style-9w-section {
	padding-block: var(--9w-space-16);
}

@media (max-width: 767px) {
	.is-style-9w-section {
		padding-block: var(--9w-space-10);
	}
}

/* ---- Card (Group style: is-style-9w-card) --------------------------------
   Surface panel. Radius applied deliberately here — NOT exposed as a
   per-instance editor control, since settings.blocks['core/group'].
   border.radius stays false (Phase 1/1.1 decision preserved). One
   consistent radius for every Card, not an arbitrary one per instance. */

.is-style-9w-card {
	background: var(--9w-color-background);
	border: 1px solid var(--9w-color-border);
	border-radius: var(--9w-radius-lg);
	padding: var(--9w-space-6);
	box-shadow: var(--9w-shadow-sm);
}

/* ---- Eyebrow (Paragraph style: is-style-9w-eyebrow) ----------------------
   Small overline label placed above a heading. */

.is-style-9w-eyebrow {
	font-size: var(--9w-text-sm);
	font-weight: var(--9w-font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--9w-color-accent);
	margin-bottom: var(--9w-space-2);
}

/* ---- Badge (Paragraph style: is-style-9w-badge) --------------------------
   Small filled pill label — distinct from Eyebrow's plain-text
   treatment (status/category tag rather than a section overline). */

.is-style-9w-badge {
	display: inline-block;
	font-size: var(--9w-text-xs);
	font-weight: var(--9w-font-weight-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--9w-color-primary);
	background: var(--9w-color-surface);
	border-radius: var(--9w-radius-pill);
	padding: var(--9w-space-1) var(--9w-space-3);
}

/* ---- Button baseline (core/button) ----------------------------------------
   Colours already come from theme.json styles.elements.button. This
   only adds what that can't express: a deliberate radius (mirrors the
   Card rationale — settings.blocks['core/button'].border.radius stays
   false) and a guaranteed visible focus-visible outline. */

.wp-block-button__link {
	border-radius: var(--9w-radius-md);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--9w-color-accent);
	outline-offset: 2px;
}

/* ---- Placeholder media -----------------------------------------------------
   Neutral fill for pattern-shipped image slots (assets/images/
   placeholder.svg) so patterns look complete before a client swaps in
   real photography — not a design element itself. */

.is-9w-placeholder-media {
	background: var(--9w-color-surface);
	border-radius: var(--9w-radius-md);
}

/* ---- Focus visibility (component-level content) ---------------------------
   Same :focus-visible-only rule as site-chrome.css — see
   docs/ACCESSIBILITY.md. Outline is never removed anywhere in this file. */

.is-style-9w-card a:focus-visible {
	outline: 2px solid var(--9w-color-accent);
	outline-offset: 2px;
}