/**
 * Sprint 8 — Design primitives.
 *
 * The shared layer for patterns that were measurably repeated across
 * modules. Not a new design language: every rule here is a *move*, and
 * every value is the one the theme was already using.
 *
 * ## What the audit measured
 *
 * Before this file existed the theme carried **127 duplicate declaration
 * blocks** (two or more properties, identical body, appearing more than
 * once), of which **59 distinct bodies appeared in more than one
 * stylesheet**. The patterns that recurred most:
 *
 *   - list reset (+ inline flex list) ....... 6x, 4x, 2x
 *   - uppercase eyebrow / label ............. 7x
 *   - inline icon+text meta row ............. 4x
 *   - vertical stack ........................ 4x
 *   - hover lift (border+shadow+transform) .. 4x
 *   - object-fit media fill ................. 3x
 *
 * This file removes **9** of them. That is a deliberately modest number,
 * and the reason is the next section.
 *
 * Each primitive below carries both its `.u-` utility class (for new
 * markup) and the existing selectors that shared its body, on one rule.
 * Aliasing rather than adding a class to every element means this refactor
 * touched **no template markup at all** — the DOM is byte-for-byte what it
 * was, which is what makes a purely stylistic consolidation safe to ship
 * without a browser.
 *
 * ## What this file does and does not touch
 *
 * It is consumed by the four modules this sprint's author wrote —
 * `internal-premium.css`, `conversion.css`, `motion.css`, `admin.css` —
 * whose duplicate declarations were removed in favour of the aliases here.
 *
 * It deliberately does **not** reach into `sections-premium.css`,
 * `pages-premium.css`, `hero-premium.css`, `home.css`, `service.css`,
 * `city.css`, `footer.css`, `discovery.css` or `components.css`. Those
 * carry the same patterns, and that is where the remaining 118 duplicates
 * live. Hoisting a declaration out of one of them moves that rule to a
 * different position in the cascade. For most it would be harmless; for
 * any that competes with a later module's override it would not be, and
 * **there is no browser in this environment to establish which is which**.
 * Trading measurable duplication for unmeasurable visual regression is the
 * wrong trade in a sprint whose brief says "do not redesign the UI".
 * See docs/DESIGN_SYSTEM.md §5 for the verification each one needs.
 *
 * ## Loading position
 *
 * Enqueued immediately after `reset.css` and before every component and
 * page module, so anything downstream can override a primitive on equal or
 * higher specificity without `!important`. Depends on `tokens.css` — every
 * value below is a token, never a literal.
 *
 * ## Naming
 *
 * `.u-` continues the utility prefix `animations.css` established in Phase
 * 2.14 (`.u-reveal`, `.u-fade-up`, `.u-hover-lift`, `.u-glass`) and Sprint
 * 4 extended (`.u-pulse-soft`). These are single-purpose and composable;
 * they are not components, and they carry no appearance of their own
 * beyond the pattern they name.
 */

/* ==================================================================
   1. Lists
   ------------------------------------------------------------------
   The single most repeated block in the codebase. A styled list in this
   theme is almost always "strip the browser's list chrome, then lay the
   items out" — those are two separate jobs, so they are two classes.
   ================================================================== */

.u-list-reset,
.how-it-works__steps,
.radha-dash__checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Reset plus a wrapping inline row — chip rows, tag rows, social rows,
   meta rows. `gap` is left to the consumer, because the spacing is the
   one thing that legitimately differs between them. */
.u-list-inline {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

/* ==================================================================
   2. Stack
   ------------------------------------------------------------------
   A vertical flow with a consistent gap. Distinct from `.u-list-reset`:
   this one is about rhythm, not about list chrome, and applies to any
   container.
   ================================================================== */

.u-stack {
	display: flex;
	flex-direction: column;
}

/* ==================================================================
   3. Inline meta
   ------------------------------------------------------------------
   The "small icon, then a short string" pairing: reading time, a date
   with a clock, a location with a pin, a status with a check. Baseline
   alignment is deliberate — `center` looks correct until the text wraps.
   ================================================================== */

.u-meta-inline,
.blog-featured__reading-time,
.search-card__reading-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* ==================================================================
   4. Media fill
   ------------------------------------------------------------------
   An image that fills a box whose size is set by the box, not the file.
   Always paired with an `aspect-ratio` on the container, which is what
   keeps these from contributing layout shift.
   ================================================================== */

.u-media-fill,
.blog-featured__media img,
.blog-preview-card__thumbnail img,
.search-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ==================================================================
   5. Eyebrow
   ------------------------------------------------------------------
   The small uppercase label above a heading. Seven independent copies
   of this existed. Colour is intentionally NOT set here — the eyebrow
   appears on light panels, dark panels and gradient heroes, and each
   consumer sets its own ink.
   ================================================================== */

.u-eyebrow {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ==================================================================
   6. Plain link
   ------------------------------------------------------------------
   A link that inherits its surroundings — card titles, heading links.
   The hover colour stays with the consumer, because it is the one part
   that carries the component's identity.
   ================================================================== */

.u-link-plain,
.blog-featured__title a,
.comparison-card__title a {
	color: inherit;
	text-decoration: none;
}

/* ==================================================================
   7. Icon sizing
   ------------------------------------------------------------------
   `reset.css` gives every svg `height: auto` and no intrinsic width, so
   an unsized inline icon stretches to whatever space is going. Sprint 3
   fixed that for buttons; these are the three sizes the rest of the
   theme actually uses, measured across the component set.
   ================================================================== */

.u-icon-xs,
.blog-featured__reading-time svg,
.search-card__reading-time svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	flex: 0 0 auto;
}

.u-icon-sm,
.rating-summary__platform svg,
.comparison-card__benefit-icon svg,
.privacy-note__icon svg {
	inline-size: 1rem;
	block-size: 1rem;
	flex: 0 0 auto;
}

.u-icon-md {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: 0 0 auto;
}

/* ==================================================================
   9. Aliases that need more than the bare primitive
   ------------------------------------------------------------------
   `.u-eyebrow` deliberately sets no colour — eyebrows appear on light,
   dark and gradient panels. These two consumers share the same ink and
   the same reset, so they are declared once here rather than twice in
   `internal-premium.css`.
   ================================================================== */

.blog-featured__eyebrow,
.about-pillar__label {
	margin: 0;
	color: var(--color-primary-600);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.blog-featured__author,
.blog-preview-card__author {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}