/*
 * Miejsce „Porozmawiajmy o Twoim pobycie” (template-parts/place/contact.php).
 * From the preview docs/preview/miejsce1_2.png: a low warm band (#f4ede5 in
 * the preview, the nearest token is band-strong) with three columns: the
 * heading under a short line and the place under it; the place, phone and
 * e-mail with icons; the button on the right, centred in the band. Below
 * 64em one under another, the button across on phones.
 */

.hf-place-contact
{
	padding-block: var(--hf-space-l);
	background: var(--hf-color-band-strong);
}

.hf-place-contact__inner
{
	display: grid;
	gap: var(--hf-space-l);
}

.hf-place-contact__title
{
	max-width: 10em;
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-place-contact__subtitle
{
	margin: var(--hf-space-xs) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.4;
}

.hf-place-contact__list
{
	display: grid;
	gap: var(--hf-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-place-contact__item
{
	display: flex;
	align-items: center;
	gap: var(--hf-space-m);
	color: var(--hf-color-heading);
	font-size: var(--hf-text-m);
	line-height: 1.4;
}

.hf-place-contact__icon
{
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--hf-color-icon);
}

/* The e-mail and phone read as plain text, underlined on hover and focus. */
.hf-place-contact__link
{
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.hf-place-contact__link:hover,
.hf-place-contact__link:focus-visible
{
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 39.99em)
{
	.hf-place-contact__action .hf-button
	{
		width: 100%;
	}
}

/*
 * Two columns: the heading on the left, the contact details and the button
 * under them on the right. Three columns would break the heading into three
 * lines below 75em (measured 2026-10-28).
 */
@media (min-width: 56em) and (max-width: 74.99em)
{
	.hf-place-contact__inner
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--hf-space-l);
	}

	.hf-place-contact__intro
	{
		grid-row: span 2;
	}
}

/* Three columns: heading, contact details, button on the right. */
@media (min-width: 75em)
{
	.hf-place-contact__inner
	{
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.hf-place-contact__action .hf-button
	{
		min-width: 16rem;
	}
}