/*
 * Row of short facts (template-parts/components/icon-row.php). From the
 * preview docs/preview/miejsce1_1.png (Pokoje, Sala i ogród): a line icon
 * above each label, a thin vertical line between the items, the row
 * starting at the text edge. Long labels wrap instead of widening the row.
 */

.hf-icon-row
{
	--hf-icon-row-gap: clamp(1rem, 0.25rem + 2vw, 2rem);
	--hf-icon-row-divider: color-mix(in srgb, var(--hf-color-line) 22%, transparent);

	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-icon-row__item
{
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--hf-space-s);
	min-width: 0;
	padding-inline: var(--hf-icon-row-gap);
	color: var(--hf-color-text);
	font-size: var(--hf-text-control);
	line-height: 1.3;
	text-align: center;
}

.hf-icon-row__item:first-child
{
	padding-left: 0;
}

.hf-icon-row__item:last-child
{
	padding-right: 0;
}

.hf-icon-row__item + .hf-icon-row__item
{
	border-left: 1px solid var(--hf-icon-row-divider);
}

.hf-icon-row__icon
{
	flex: none;
	width: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
	height: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
	color: var(--hf-color-icon);
}