/**
 * Component Token CSS — Styles patterns using Style Guide tokens.
 *
 * Two delivery mechanisms:
 * 1. CSS classes (sg-card, sg-badge, sg-section-dark) — pattern team adds manually
 * 2. Global overrides (buttons, links, images, inputs) — automatic{border-width: var(--spectra-card-border-width);
	border-style: var(--spectra-card-border-style);
	border-color: var(--spectra-card-border-color);
	border-radius: var(--spectra-radius-card);
	box-shadow: var(--spectra-card-shadow);
	overflow: hidden;}/*
 * Card transition channel — authored Tailwind utilities like
 * `transition-colors duration-500` set the `transition` shorthand at
 * specificity (0,1,0) and would otherwise FULLY REPLACE the card's
 * lift/shadow transition list,leaving translate + box-shadow snapping
 * instantly on hover (the "glitchy abrupt" hover state). Bumping to
 * the doubled-class selector resolves at (0,2,0) so the card's own
 * transition channel wins for the properties it cares about,while
 * authored color transitions still apply via their own cascade. This
 * is one of the few cases where we knowingly out-specify author intent
 * — the lift is the card's identity.
 *
 * Tailwind v4 emits `hover:-translate-y-N` via the `translate` longhand
 * (not the `transform` shorthand){transition:
		box-shadow var(--spectra-transition-normal, 250ms) ease,
		transform var(--spectra-transition-normal, 250ms) ease,
		translate var(--spectra-transition-normal, 250ms) ease;}the
 * authored value applies (no doubling). When the LLM doesn't{box-shadow: var(--spectra-card-hover-shadow);
	translate: 0 var(--spectra-card-hover-translate-y);}`
   default. Both that and the primary/secondary rules above are (0,0,0)
   (`:where()`),so the winner flips between the editor and the front end
   (whichever stylesheet loads last). One real class here lifts this to
   (0,1,0) so the Spectra token wins consistently in BOTH contexts{border-radius: var(--spectra-radius-interactive);}/*
 * When the badge also carries a `flex` / `inline-flex` utility (common when
 * the badge composes an icon + label){display: inline-flex;}NOT on the inner <img> (same constraint called out
   above for img-level border-radius). When an author writes
   `<img class="object-cover">` (or the Block UI applies it via
   className),Tailwind's `object-cover` utility lands on the
   figure where it has no effect — replaced-element fitting is
   only honoured on <img>/<video>.

   Forward the intent to the inner img: when the figure carries
   `object-cover` / `object-contain`,not `.entry-content`{width: 100%;
	height: 100%;
	display: block;}leaving title + chevron clustered on
   the left with empty whitespace on the right.

   Double-class selectors (0,2,0 / 0,3,0) beat the JIT deterministically
   without !important{justify-content: space-between;}/* Chevron right-gap: the icon block has no default padding,so once the
   header uses `justify-content: space-between` above{padding-right: 1.5rem;}/* Details top-padding: the ERA converter strips `border-t`/`border-b`/
   `divide-*` separators from details wrappers (no divider between title
   and body). Once there's no separator,the header-content's p-6 (24px
   bottom padding) + details' p-6 (24px top padding) produce a 48px gap
   between header text and body text — visually disconnected from the
   item's own border radius. Zeroing padding-top halves that to 24px{padding-top: 0;}/* ================================================================
   REDUCED MOTION
   Respects prefers-reduced-motion — disables all transitions,transforms,and animations when user prefers reduced motion.
   ================================================================ */

@media (prefers-reduced-motion: reduce){.sg-card,
	.wp-element-button,
	.wp-block-button__link,
	.spectra-button__link,
	.entry-content a,
	.entry-content input,
	.entry-content textarea,
	.entry-content select,
	.wp-block-navigation a {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}

	.sg-card:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.spectra-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none !important;
	}}