/*
 * Pointers (template-parts/components/pointers.php): Wydarzenia „Odnośniki”,
 * Kontakt „Szukasz terminu…” and Inspiracje „Szukasz kursów mindfulness i
 * MBSR?”. Built from the previews docs/preview/wydarzenia_v4.png,
 * kontakt.png and inspiracje.png:
 * items side by side, separated by a thin vertical line, each with a large
 * line icon, a heading, a line of text, an underlined link and a note.
 * Below 56em one under another, separated by a horizontal line.
 */

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

	padding-block: calc(var(--hf-space-m) + var(--hf-space-xs));
}

.hf-pointers__items
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-pointers__item + .hf-pointers__item
{
	margin-top: var(--hf-space-m);
	padding-top: var(--hf-space-m);
	border-top: 1px solid var(--hf-pointers-divider);
}

.hf-pointers__section
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--hf-space-m);
}

.hf-pointers__icon
{
	width: clamp(2.75rem, 2.2rem + 1.4vw, 3.75rem);
	height: clamp(2.75rem, 2.2rem + 1.4vw, 3.75rem);
	color: var(--hf-color-icon);
}

.hf-pointers__title
{
	margin: 0 0 var(--hf-space-2xs);
	font-size: var(--hf-text-l);
	line-height: 1.25;
	text-wrap: balance;
}

.hf-pointers__text
{
	margin: 0 0 var(--hf-space-s);
	color: var(--hf-color-text);
	font-size: var(--hf-text-control);
	line-height: 1.45;
	text-wrap: pretty;
}

.hf-pointers__link
{
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-control);
	text-decoration: none;
}

.hf-pointers__link-text
{
	text-decoration: underline;
	text-decoration-color: var(--hf-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.hf-pointers__link:hover
{
	color: var(--hf-color-primary-hover);
}

.hf-pointers__link-icon
{
	flex: none;
	width: 1.15em;
	height: 1.15em;
	transition: transform var(--hf-transition);
}

.hf-pointers__link:hover .hf-pointers__link-icon
{
	transform: translateX(3px);
}

.hf-pointers__note
{
	margin: var(--hf-space-2xs) 0 0;
	color: var(--hf-color-text);
	font-size: var(--hf-text-s);
}

/* Side by side with a vertical line between the items. */
/* Kontakt: a thin line above the band, as in the preview. */
.hf-pointers--ruled
{
	border-top: 1px solid var(--hf-pointers-divider);
}

/* Inspiracje: one item in the middle, the icon level with the heading and
   the link (preview at 1440: icon 65 px, heading 385 px wide, the strip
   125 px high). */
.hf-pointers--centered .hf-pointers__section
{
	grid-template-columns: auto minmax(0, max-content);
	align-items: center;
	justify-content: center;
}

.hf-pointers--centered .hf-pointers__icon
{
	width: clamp(2.75rem, 2rem + 2.3vw, 4.25rem);
	height: clamp(2.75rem, 2rem + 2.3vw, 4.25rem);
}

/* A little larger than the link, as in the preview (20 px at 1440, not
   the 24 px of the other pointers). */
.hf-pointers--centered .hf-pointers__title
{
	margin-bottom: var(--hf-space-xs);
	font-size: clamp(1.0625rem, 0.92rem + 0.4vw, 1.3125rem);
}

@media (min-width: 56em)
{
	.hf-pointers__items
	{
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.hf-pointers__item + .hf-pointers__item
	{
		margin-top: 0;
		padding-top: 0;
		padding-left: var(--hf-space-l);
		border-top: 0;
		border-left: 1px solid var(--hf-pointers-divider);
	}

	.hf-pointers__item:not(:last-child)
	{
		padding-right: var(--hf-space-l);
	}
}