/**
 * Shared skeleton primitive — content-shaped loading placeholders.
 *
 * One registered handle (`minami-skeleton`, see BlockRegistrar) that each block
 * enqueues from its own render.php, so it ships ONLY on pages that actually
 * render a skeleton-using block (CWV: zero bytes elsewhere). Holds the base
 * `.minami-skeleton` shimmer + the per-block ghost shapes; every ghost is built
 * from the real block's wrapper classes so it inherits the live element's box
 * and the swap to real content holds layout (CLS = 0).
 *
 * Colour rides `currentColor` via color-mix, so the shimmer adapts to light and
 * dark surfaces without a second ruleset.
 */

/* ---- Base shimmer ----------------------------------------------------- */
.minami-skeleton {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: var(--wp--custom--radius--sm, 6px);
	background: color-mix(in srgb, currentColor 11%, transparent);
}
.minami-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, currentColor 9%, transparent),
		transparent
	);
	animation: minami-skeleton-sweep calc(var(--minami-ambient-loop-dur, 2000ms) * 0.7) ease-in-out infinite;
}
@keyframes minami-skeleton-sweep {
	to { transform: translateX(100%); }
}

/* Text-bar variants: heights track the em box so a bar reads as a line of the
   size it stands in. Widths are the silhouette of a typical title/excerpt/meta. */
.minami-skeleton--line { height: 0.78em; }
.minami-skeleton--line.is-short { width: 70%; }
.minami-skeleton--line.is-shorter { width: 45%; }
.minami-skeleton--heading { height: 1.15em; width: 65%; }
.minami-skeleton--kicker { height: 0.7em; width: 5.5rem; }
.minami-skeleton--meta { height: 0.7em; width: 9rem; margin-block-start: 0.15rem; }



/* ---- post-feed: river row ghost --------------------------------------- */
/* Mirrors CardRenderer::row() — the .minami-card--row classes give the real
   4:3 thumb + body layout; only the inner content is swapped for bars.
   Shimmer runs per-shape (media span + text bars) via the base .minami-skeleton
   ::after — the body container and gaps between bars stay static. */
.minami-river__item.is-skeleton {
	list-style: none;
	min-width: 0;      /* flex item: prevent inflation beyond track width */
	overflow: hidden;  /* clip any child that still escapes the river track */
}
.minami-river__item.is-skeleton .minami-card__media {
	display: block;
	aspect-ratio: var(--minami-media-ratio, 4 / 3);
	max-width: 100%;  /* mirror the max-width:100% real <img> gets from the shell rule */
	min-width: 0;     /* prevent 1fr grid track from inflating */
}
.minami-river__item.is-skeleton .minami-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;  /* prevent 2fr grid track from inflating */
}

/* ---- reading-list: saved-card ghost ----------------------------------- */
.minami-reading-list__skeleton { margin: 0; padding: 0; list-style: none; }
.minami-reading-list__skeleton .minami-card__media {
	display: block;
	aspect-ratio: 16 / 9;
}
.minami-reading-list__skeleton .minami-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ---- live-search: result-row ghost ------------------------------------ */
.minami-search__hit.is-skeleton { pointer-events: none; }
.minami-search__hit.is-skeleton .minami-search__hit-thumb {
	display: block;
	aspect-ratio: 1 / 1;
}
.minami-search__hit.is-skeleton .minami-search__hit-body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	min-inline-size: 0;
}