/*
 * Miejsce icon strip (template-parts/place/features.php). From the preview
 * docs/preview/miejsce1_1.png: a quiet band under the hero, items in one
 * row separated by thin vertical lines, a line icon above each label.
 * Below 64em three items per row.
 */

.hf-place-features
{
	--hf-place-features-divider: color-mix(in srgb, var(--hf-color-line) 18%, transparent);

	padding-block: var(--hf-space-section-block);
	background: var(--hf-color-band-soft);
}

.hf-place-features__items
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: var(--hf-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-place-features__item
{
	display: flex;
	justify-content: center;
}

/* A line between the items of a row. */
.hf-place-features__item:not(:nth-child(3n + 1))
{
	border-left: 1px solid var(--hf-place-features-divider);
}

.hf-place-features__entry
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hf-space-s);
	padding: var(--hf-space-xs) var(--hf-space-xs);
	color: var(--hf-color-heading);
	font-size: var(--hf-text-control);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.hf-place-features__entry--link:hover .hf-place-features__label
{
	text-decoration: underline;
	text-decoration-color: var(--hf-color-primary);
	text-underline-offset: 0.3em;
}

.hf-place-features__icon
{
	width: clamp(2.5rem, 2rem + 1vw, 3rem);
	height: clamp(2.5rem, 2rem + 1vw, 3rem);
	color: var(--hf-color-icon);
}

/* One row, a line between every two items. */
@media (min-width: 64em)
{
	.hf-place-features__items
	{
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.hf-place-features__item:not(:nth-child(3n + 1))
	{
		border-left: 0;
	}

	.hf-place-features__item + .hf-place-features__item
	{
		border-left: 1px solid var(--hf-place-features-divider);
	}
}