/*
 * Home „Uważność w naszym miejscu” (template-parts/home/mindfulness.php).
 * No section mockup; from the preview docs/preview/new_home7_2.png: quiet
 * band, text and two buttons left, line illustration of a meditating figure
 * on rings right. Below 48em the illustration goes under the text; phones
 * get full-width buttons, as in the „Porozmawiajmy” band.
 */

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

.hf-mindfulness__inner
{
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--hf-space-l);
}

.hf-mindfulness__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

.hf-mindfulness__title
{
	margin: 0 0 var(--hf-space-m);
	font-size: var(--hf-text-h2-s);
}

.hf-mindfulness__text
{
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-l);
	line-height: 1.55;
	/* Two or three even lines instead of a short last one. */
	text-wrap: balance;
}

.hf-mindfulness__actions
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--hf-space-s);
}

.hf-mindfulness__media
{
	justify-self: center;
	color: var(--hf-color-icon);
}

.hf-mindfulness__illustration
{
	display: block;
	width: clamp(11rem, 6rem + 14vw, 22rem);
	height: auto;
}

/* Shapes that cover the rings behind the figure: same colour as the band. */
.hf-mindfulness__illustration .hf-svg-fill
{
	fill: var(--hf-color-band-soft);
}

/* The typed line break fits only in the widest text column; below it
   would leave a short line, so the text flows on its own. */
@media (max-width: 89.99em)
{
	.hf-mindfulness__text br
	{
		display: none;
	}
}

@media (max-width: 47.99em)
{
	.hf-mindfulness__inner
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 40em)
{
	.hf-mindfulness__actions
	{
		flex-direction: column;
	}

	.hf-mindfulness__actions .hf-button
	{
		width: 100%;
	}
}