/*
 * Kontakt „Spotkajmy się na Kaszubach” (template-parts/contact/location.php).
 * From the preview docs/preview/kontakt.png: a warm band (#f9f4ee in the
 * preview, the nearest token is band), the heading under which a short
 * line, the place larger than the address, the text with typed line
 * breaks, two outlined buttons one under another, and the photo on the
 * right as tall as the text. Below 64em the photo goes under the text;
 * phones drop the typed line breaks.
 */

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

.hf-contact-location__inner
{
	display: grid;
	gap: var(--hf-space-l);
}

.hf-contact-location__title
{
	margin: 0;
	font-size: var(--hf-text-h2-s);
	text-wrap: balance;
}

.hf-contact-location__address
{
	margin: var(--hf-space-m) 0 0;
	color: var(--hf-color-text);
	font-size: var(--hf-text-l);
	font-style: normal;
	line-height: 1.45;
}

.hf-contact-location__place
{
	display: block;
	margin-bottom: var(--hf-space-2xs);
	color: var(--hf-color-heading);
	font-family: var(--hf-font-display);
	font-size: var(--hf-text-card-title);
	line-height: 1.3;
}

.hf-contact-location__text
{
	max-width: 20em;
	margin: var(--hf-space-m) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-contact-location__actions
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hf-space-s);
	margin-top: var(--hf-space-l);
}

.hf-contact-location__actions:empty
{
	display: none;
}

/* The route link reads as a link, as in the preview. */
.hf-contact-location__actions .hf-button[target="_blank"] > span
{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.hf-contact-location__media
{
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--hf-radius-m);
}

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

/* Text on the left, the photo on the right as tall as the text. */
@media (min-width: 64em)
{
	.hf-contact-location__inner
	{
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.hf-contact-location__media
	{
		min-height: 20rem;
		aspect-ratio: auto;
	}
}

/* Phones: the typed line breaks would leave the text ragged; buttons across. */
@media (max-width: 40em)
{
	.hf-contact-location__text br
	{
		display: none;
	}

	.hf-contact-location__actions
	{
		align-items: stretch;
	}
}