/*
 * AI Share Theme — Icon, image, and SSR-fallback utilities
 * currentColor SVG inheritance, image dimension safety, noscript fallback.
 */

.ai-share-icon svg,
.ai-share-platform-token__svg,
.ai-share-button__icon svg {
	color: currentColor;
}

img[width][height] {
	height: auto;
}

.ai-share-tool-icon img[width][height],
.ai-share-tool-icon__image[width][height] {
	height: 100%;
	aspect-ratio: 1 / 1;
}

.ai-share-tools-detail__hero img[width][height],
.ai-share-tools-detail__creator-avatar img[width][height],
.ai-share-tool-row__cover-image[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

.ai-share-icon img,
.ai-share-tool-row__platform-value img {
	aspect-ratio: 1 / 1;
}

/* noscript fallback for relation graph */
.ai-share-tools-detail__relation-graph-fallback-list {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ai-share-radius-md);
	padding: var(--ai-share-space-4) var(--ai-share-space-5);
}

.ai-share-tools-detail__relation-graph-fallback-list h3 {
	margin: 0 0 var(--ai-share-space-2) 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.ai-share-tools-detail__relation-graph-fallback-list ol {
	margin: 0;
	padding-left: var(--ai-share-space-5);
	display: grid;
	gap: var(--ai-share-space-2);
}

.ai-share-tools-detail__relation-graph-fallback-list a {
	color: var(--wp--preset--color--accent-dark);
}

/* Filter chips as group, not nav */
[role="group"].ai-share-chip-row,
.ai-share-chip-row[role="group"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ai-share-space-2);
}