/*
 * Uważność: „Czym jest uważność?” (template-parts/mindfulness/about.php).
 * From the preview docs/preview/uwaznosc.png: on the left the heading with
 * a short line and a larger definition; on the right, behind a thin
 * vertical line, a smaller heading, a text and a drawing of three rings
 * with a dot, both centred against the left column. Below 72em the right
 * part moves under the left one, behind a horizontal line; phones leave
 * out the drawing.
 */

.hf-mindfulness-about
{
	--hf-mindfulness-about-divider: color-mix(in srgb, var(--hf-color-line) 18%, transparent);
	--hf-mindfulness-about-gap: clamp(var(--hf-space-l), 3.5vw, var(--hf-space-xl));

	padding-block: var(--hf-space-section-block);
}

.hf-mindfulness-about__inner
{
	display: grid;
	gap: var(--hf-mindfulness-about-gap);
}

/* About 44 px in the preview at 1440. */
.hf-mindfulness-about__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

/* The size of the hero description, as in the preview (both about 27 px
   there, the generated texts being about 15% larger). */
.hf-mindfulness-about__lead
{
	max-width: 30em;
	margin: var(--hf-space-m) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-mindfulness-about__approach
{
	display: flex;
	align-items: center;
	gap: var(--hf-space-l);
	padding-top: var(--hf-mindfulness-about-gap);
	border-top: 1px solid var(--hf-mindfulness-about-divider);
}

/* The drawing follows the text instead of the far edge (at 1024 it stood
   about 280 px away from it). */
.hf-mindfulness-about__approach-text
{
	flex: 0 1 34rem;
	min-width: 0;
}

/* As the titles of the pointers component. */
.hf-mindfulness-about__subtitle
{
	margin: 0 0 var(--hf-space-s);
	font-size: var(--hf-text-l);
	line-height: 1.3;
	text-wrap: balance;
}

.hf-mindfulness-about__text
{
	max-width: 30em;
	margin: 0;
	font-size: var(--hf-text-m);
	line-height: 1.6;
	text-wrap: pretty;
}

/* 157 px in the preview at 1440 (160 here), 7rem from about 1024 down. */
.hf-mindfulness-about__rings
{
	flex: none;
	width: clamp(7rem, 11.5vw - 0.4rem, 10rem);
	height: auto;
	color: var(--hf-color-line);
	stroke-opacity: 0.4;
}

.hf-mindfulness-about__rings-dot
{
	fill: var(--hf-color-icon);
}

/* Two columns, the thin line between them as tall as the section. Not
   below 72em: at 1024 the left column (379 px) broke the typed lines of the
   definition again and the text on the right ran to 5 lines of 300 px. */
@media (min-width: 72em)
{
	.hf-mindfulness-about__inner
	{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		align-items: stretch;
	}

	.hf-mindfulness-about__intro
	{
		align-self: center;
	}

	.hf-mindfulness-about__approach
	{
		padding-top: 0;
		padding-left: var(--hf-mindfulness-about-gap);
		border-top: 0;
		border-left: 1px solid var(--hf-mindfulness-about-divider);
	}
}

/* Phones: the typed line breaks would leave the text ragged; no drawing. */
@media (max-width: 40em)
{
	.hf-mindfulness-about__lead br,
	.hf-mindfulness-about__text br
	{
		display: none;
	}

	.hf-mindfulness-about__rings
	{
		display: none;
	}
}