/*
 * Home band „Porozmawiajmy o Twoim przyjeździe” (template-parts/home/arrival.php).
 * Mockup: docs/sections/home/home_about_your_arrival.png. Full-width warm band;
 * text left, two buttons right. Below 56em the buttons go under the text,
 * on phones full width.
 */

.hf-arrival
{
	/* +4rem top and bottom over the mockup, in two steps of +2rem (user, 2026-10-26). */
	padding-block: clamp(6rem, 5.25rem + 2vw, 7.5rem);
	background: var(--hf-color-band);
}

.hf-arrival__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 buttons keep their row next to it. */
.hf-arrival__content
{
	flex: 1 1 24rem;
	min-width: 0;
}

.hf-arrival__title
{
	text-wrap: balance;
	margin: 0 0 var(--hf-space-xs);
	/* About 33 px at 1440 px: the heading (650 px in Libre Baskerville) and
	   the buttons share one row, as in the mockup. */
	font-size: clamp(1.5rem, 1.15rem + 1.05vw, 2.125rem);
}

.hf-arrival__text
{
	margin: 0;
	font-size: var(--hf-text-l);
}

.hf-arrival__actions
{
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: var(--hf-space-s) clamp(1rem, 0.5rem + 1vw, 1.75rem);
}

.hf-arrival__actions .hf-button
{
	min-width: 13rem;
}

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

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