/*
 * Home features under the hero (template-parts/home/features.php).
 * Mockup: docs/sections/home/home_under_hero.png. Desktop: items side by
 * side with thin vertical lines between them. Below 56em (portrait tablet and
 * phone; three columns would break every title): one under the other,
 * separated by a short horizontal line.
 */

.hf-features
{
	/* Less space below: the events section follows closely (user, 2026-10-26). */
	padding-block: clamp(3.5rem, 1.5rem + 6.5vw, 9rem) clamp(2.5rem, 1.25rem + 3.5vw, 5rem);
}

.hf-features__list
{
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.hf-features__item
{
	padding: var(--hf-space-xs) clamp(1rem, 3vw, 3rem);
	text-align: center;
}

.hf-features__item + .hf-features__item
{
	border-left: 1px solid var(--hf-color-line);
}

.hf-features__icon
{
	display: block;
	width: clamp(2.75rem, 1.6rem + 2.6vw, 4.25rem);
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto var(--hf-space-m);
	color: var(--hf-color-icon);
}

.hf-features__title
{
	margin: 0 0 var(--hf-space-xs);
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);
	text-wrap: balance;
}

.hf-features__text
{
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: 1.5;
	text-wrap: balance;
}

/* Landscape tablet and small laptops: columns are narrow, so the line
   breaks typed in the panel would leave single words on a line. */
@media (min-width: 56em) and (max-width: 79.99em)
{
	.hf-features__item
	{
		padding-inline: var(--hf-space-s);
	}

	.hf-features__text br
	{
		display: none;
	}
}

@media (max-width: 55.99em)
{
	.hf-features__list
	{
		grid-auto-flow: row;
		gap: var(--hf-space-l);
	}

	.hf-features__item + .hf-features__item
	{
		border-left: 0;
	}

	.hf-features__item + .hf-features__item::before
	{
		display: block;
		width: 4rem;
		height: 1px;
		margin: 0 auto var(--hf-space-l);
		background: var(--hf-color-line);
		content: "";
	}
}