/*
 * Uważność: „Wybierz swój kolejny krok” (template-parts/mindfulness/steps.php).
 * From the preview docs/preview/uwaznosc.png: the heading with a short line
 * and two cards side by side (about 601 px each at 1440, as the post cards:
 * thin border, light ground), each with a picture on top (about 2.1 : 1),
 * an eyebrow, a heading, a text, a button with an arrow up and right
 * (another site) and a small note. The buttons stand level in both cards.
 * Below 56em one card under the other.
 */

.hf-mindfulness-steps
{
	padding-block: var(--hf-space-section-block);
}

/* About 42 px in the preview at 1440, as the other headings of the page. */
.hf-mindfulness-steps__title
{
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-mindfulness-steps__list
{
	display: grid;
	gap: var(--hf-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-mindfulness-steps__card
{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hf-color-card-border);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-surface);
}

/* The picture: a photo fills it, a drawing stands in the middle. Both are
   positioned, so they do not stretch the box (an SVG in the flow made it
   1.13 : 1 instead of 2.1 : 1). */
.hf-mindfulness-steps__media
{
	position: relative;
	aspect-ratio: 2.1;
	overflow: hidden;
	background: var(--hf-color-band);
	color: var(--hf-color-icon);
}

.hf-mindfulness-steps__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hf-mindfulness-steps__illustration
{
	position: absolute;
	inset: 8% 0;
	width: 100%;
	height: 84%;
}

.hf-mindfulness-steps__illustration .hf-svg-fill
{
	fill: var(--hf-color-band-soft);
}

.hf-mindfulness-steps__body
{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
}

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

/* About 32 px in the preview at 1440. */
.hf-mindfulness-steps__name
{
	margin: 0 0 var(--hf-space-xs);
	font-size: var(--hf-text-card-title-l);
	line-height: 1.25;
	text-wrap: balance;
}

/* About 24 px in the preview at 1440, as the texts of „Jak praktykujemy”. */
.hf-mindfulness-steps__text
{
	max-width: 22em;
	margin: 0;
	font-size: var(--hf-text-l);
	line-height: 1.45;
	text-wrap: pretty;
}

/* Pushed down, so the buttons stand level in both cards. */
.hf-mindfulness-steps__actions
{
	margin-top: auto;
	padding-top: var(--hf-space-m);
}

/* About 18–19 px in the preview at 1440. */
.hf-mindfulness-steps__note
{
	margin: var(--hf-space-s) 0 0;
	font-size: var(--hf-text-m);
}

/* Two cards side by side, as in the preview. */
@media (min-width: 56em)
{
	.hf-mindfulness-steps__list
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: the button across the card. */
@media (max-width: 40em)
{
	.hf-mindfulness-steps__actions,
	.hf-mindfulness-steps__actions .hf-button
	{
		width: 100%;
	}
}