/*
 * CarFaultIQ — Premium Visual Experience v1.1
 * ------------------------------------------------------------------
 * Additive layer on top of premium-v1.css. Reuses the v1 category accent
 * tokens (--cfiq-cat-*) and the existing motion system (motion.js).
 *
 * OWNERSHIP NOTE: this file styles the *container* of vehicle imagery only
 * (.cfiq-car-hero__photo / .cfiq-vehicle-media__img). It never selects a
 * specific vehicle, filename, attachment, or generation, and it deliberately
 * uses object-fit: contain so any family / generation-specific / fallback
 * asset Codex supplies renders whole and uncropped.
 *
 * ROLLBACK: dequeue 'cfiq-premium-v1-1' in functions.php, or delete this
 * file. v1 and the pre-premium baseline both remain independently valid.
 * ------------------------------------------------------------------
 */

/* ---------- 1. Retention: "Continue exploring" pathway groups ---------- */

.cfiq-related--premium .cfiq-related__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cfiq-related__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex: 0 0 auto;
	background: color-mix(in srgb, var(--cfiq-rel-accent, var(--cfiq-cat-default)) 12%, transparent);
	color: var(--cfiq-rel-accent, var(--cfiq-cat-default));
}

.cfiq-related__title-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

.cfiq-related__title-icon svg * {
	fill: currentColor;
	stroke: currentColor;
}

/* Bind the pathway accent from the group's own content type. */
.cfiq-related__group--fault      { --cfiq-rel-accent: var(--cfiq-cat-fault); }
.cfiq-related__group--symptom    { --cfiq-rel-accent: var(--cfiq-cat-symptom); }
.cfiq-related__group--warning    { --cfiq-rel-accent: var(--cfiq-cat-warning); }
.cfiq-related__group--used       { --cfiq-rel-accent: var(--cfiq-cat-used); }
.cfiq-related__group--guide      { --cfiq-rel-accent: var(--cfiq-cat-guide); }
.cfiq-related__group--comparison { --cfiq-rel-accent: var(--cfiq-cat-comparison); }
.cfiq-related__group--obd        { --cfiq-rel-accent: var(--cfiq-cat-obd); }
.cfiq-related__group--insight    { --cfiq-rel-accent: var(--cfiq-cat-insight); }
.cfiq-related__group--vehicle    { --cfiq-rel-accent: var(--cfiq-cat-vehicle); }

/* A quiet left rule ties each pathway group to its destination type. */
.cfiq-related--premium .cfiq-related__group {
	position: relative;
	padding-left: 0.9rem;
}

.cfiq-related--premium .cfiq-related__group::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--cfiq-rel-accent, var(--cfiq-cat-default)) 30%, transparent);
}

@media (max-width: 480px) {
	.cfiq-related--premium .cfiq-related__group { padding-left: 0.7rem; }
}

/* ---------- 2. Card system polish ---------- */

/* Type eyebrow picks up its own content-type accent instead of one grey. */
.cfiq-card--type-cfiq_fault         { --cfiq-card-accent: var(--cfiq-cat-fault); }
.cfiq-card--type-cfiq_symptom       { --cfiq-card-accent: var(--cfiq-cat-symptom); }
.cfiq-card--type-cfiq_warning_light { --cfiq-card-accent: var(--cfiq-cat-warning); }
.cfiq-card--type-cfiq_used_warning  { --cfiq-card-accent: var(--cfiq-cat-used); }
.cfiq-card--type-cfiq_guide         { --cfiq-card-accent: var(--cfiq-cat-guide); }
.cfiq-card--type-cfiq_comparison    { --cfiq-card-accent: var(--cfiq-cat-comparison); }
.cfiq-card--type-cfiq_obd           { --cfiq-card-accent: var(--cfiq-cat-obd); }
.cfiq-card--type-cfiq_insight       { --cfiq-card-accent: var(--cfiq-cat-insight); }
.cfiq-card--type-cfiq_car           { --cfiq-card-accent: var(--cfiq-cat-vehicle); }

.cfiq-card__eyebrow.cfiq-card__type {
	color: var(--cfiq-card-accent, var(--cfiq-text-2, #475467));
	letter-spacing: 0.07em;
}

/* Non-colour cue as well as colour: a small leading rule on the eyebrow. */
.cfiq-card__eyebrow.cfiq-card__type::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	margin-right: 0.45rem;
	vertical-align: middle;
	background: currentColor;
	opacity: 0.55;
}

/* Arrow gains a little travel on hover — transform only, no layout shift. */
@media (prefers-reduced-motion: no-preference) {
	.cfiq-card__arrow {
		transition: transform 200ms var(--cfiq-ease, ease);
	}
	.cfiq-card:hover .cfiq-card__arrow {
		transform: translateX(3px);
	}
}

/* ---------- 3. Section art: archive header treatment ---------- */
/* A very low-contrast diagnostic grid, only behind short header text. Never
   applied behind body copy. */

.cfiq-archive__header,
.cfiq-insights-archive__header,
.cfiq-evidence__header {
	position: relative;
	isolation: isolate;
}

.cfiq-archive__header::after,
.cfiq-insights-archive__header::after,
.cfiq-evidence__header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(to right, var(--cfiq-line, rgba(122, 162, 247, 0.16)) 1px, transparent 1px),
		linear-gradient(to bottom, var(--cfiq-line, rgba(122, 162, 247, 0.16)) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.55), transparent 62%);
	mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.55), transparent 62%);
}

/* ---------- 4. Vehicle hub image container (resolver-agnostic) ---------- */
/* Whatever asset the resolver returns — family, generation-specific, or
   fallback, in any aspect ratio — is shown whole, centred, on a neutral
   surface. No crop, no fixed height, no asset-specific rule. */

.cfiq-car-hero__photo .cfiq-vehicle-media__img,
.cfiq-article__vehicle-photo .cfiq-vehicle-media__img {
	width: 100%;
	height: auto;
	object-fit: contain;
	background: color-mix(in srgb, var(--cfiq-slate, #24324a) 4%, transparent);
	border-radius: var(--cfiq-radius, 14px);
}

/* CLS note: the resolver's <img> already carries width/height attributes, so
   browsers infer the aspect ratio and reserve the box before decode. Nothing
   further is needed here, and no fixed height is imposed — a replacement
   asset of a different ratio stays safe. */

/* ---------- 5. Evidence / authority presentation ---------- */

.cfiq-evidence__count {
	transition: none;
}

@media (prefers-reduced-motion: no-preference) {
	.cfiq-evidence__count {
		transition: transform 200ms var(--cfiq-ease, ease), box-shadow 200ms var(--cfiq-ease, ease);
	}
	.cfiq-evidence__count:hover {
		transform: translateY(-2px);
		box-shadow: var(--cfiq-shadow, 0 8px 24px rgba(16, 24, 40, 0.06));
	}
}

/* Keep the record-kind label quietly authoritative rather than shouty. */
.cfiq-evidence__count-kind {
	letter-spacing: 0.06em;
}

/* ---------- 6. Section rhythm ---------- */

.cfiq-density-section + .cfiq-density-section {
	margin-top: clamp(2rem, 4vw, 3.25rem);
}

.cfiq-related--premium {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- 7. Reduced-motion belt-and-braces ---------- */

@media (prefers-reduced-motion: reduce) {
	.cfiq-card__arrow,
	.cfiq-evidence__count {
		transition: none !important;
		transform: none !important;
	}
}