/*
 * Page intro (template-parts/components/page-intro.php): Kontakt,
 * Inspiracje and the page not found (with the search form and buttons).
 * No section mockups; built from the previews
 * docs/preview/kontakt.png and inspiracje.png: nadtytuł, the page heading
 * on one line at 1440 with a short line under it, and the description,
 * left-aligned. The breadcrumbs above it in the previews are left out, as
 * on Wydarzenia and Miejsce. Narrower screens: the heading wraps
 * (balanced); phones drop the typed line break of the description.
 */

.hf-page-intro
{
	padding-block: var(--hf-space-section-block) var(--hf-space-l);
}

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

.hf-page-intro__title
{
	margin: 0 0 var(--hf-space-m);
	font-size: var(--hf-text-page-title);
	text-wrap: balance;
}

.hf-page-intro__lead
{
	max-width: 34em;
	margin: 0;
	font-size: var(--hf-text-xl);
	line-height: 1.35;
	text-wrap: pretty;
}

/* Optional search form and buttons under the description (the page not
   found): the form as wide as the description, the buttons as in the page
   hero. */
.hf-page-intro__search
{
	max-width: 36rem;
	margin-top: var(--hf-space-l);
}

.hf-page-intro__actions
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--hf-space-s) calc(var(--hf-space-s) + var(--hf-space-xs));
	margin-top: var(--hf-space-m);
}

/* Phones: the typed line break would leave the text ragged; buttons full
   width, as in the page hero. */
@media (max-width: 40em)
{
	.hf-page-intro__lead br
	{
		display: none;
	}

	.hf-page-intro__actions .hf-button
	{
		width: 100%;
	}
}