/*
 * Wydarzenia band „Nie wiesz, który wyjazd wybrać?” (template-parts/events/ask.php).
 * No section mockup; built from the preview docs/preview/wydarzenia_v4.png:
 * a deeper warm band, heading with a rule and a line of text on the left,
 * one button on the right. Below 56em the button goes under the text, on
 * phones full width.
 */

.hf-events-ask
{
	padding-block: calc(var(--hf-space-m) + var(--hf-space-xs));
	background: var(--hf-color-band-deep);
}

.hf-events-ask__inner
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hf-space-m) var(--hf-space-l);
}

/* The text gives way first, so the button keeps its place next to it. */
.hf-events-ask__content
{
	flex: 1 1 28rem;
	min-width: 0;
}

.hf-events-ask__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-events-ask__text
{
	margin: var(--hf-space-s) 0 0;
	color: var(--hf-color-text);
	font-size: var(--hf-text-l);
	text-wrap: pretty;
}

.hf-events-ask__actions
{
	flex: none;
}

/* Wider than the text needs, as in the preview (about 350 px at 1440). */
.hf-events-ask__actions .hf-button
{
	min-width: 18rem;
}

@media (max-width: 40em)
{
	.hf-events-ask__actions,
	.hf-events-ask__actions .hf-button
	{
		width: 100%;
		min-width: 0;
	}
}