/*
 * Kontakt „Napisz lub zadzwoń” with the form „W czym możemy pomóc?”
 * (template-parts/contact/inquiry.php). From the preview
 * docs/preview/kontakt.png: two panels of the same height side by side, the
 * contact details on a warm panel (#f6ede6 in the preview, the nearest
 * token is band-strong) and the form in a light card; in the form three
 * outlined tabs, the chosen one filled, and the button not stretched.
 * Below 64em the panels stack, below 36em the tabs too.
 */

.hf-contact-inquiry
{
	--hf-contact-inquiry-pad: clamp(1.25rem, 0.75rem + 1.6vw, 2.5rem);

	padding-block: 0 var(--hf-space-l);
}

.hf-contact-inquiry__inner
{
	display: grid;
	gap: 0.75rem;
}

/* Contact details */
.hf-contact-inquiry__details
{
	padding: var(--hf-contact-inquiry-pad);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-band-strong);
}

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

.hf-contact-inquiry__text
{
	max-width: 22em;
	margin: var(--hf-space-m) 0 0;
	font-size: var(--hf-text-m);
	line-height: 1.5;
}

.hf-contact-inquiry__address
{
	margin: var(--hf-space-l) 0 0;
	font-style: normal;
}

.hf-contact-inquiry__list
{
	display: grid;
	gap: var(--hf-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-contact-inquiry__item
{
	display: flex;
	align-items: flex-start;
	gap: var(--hf-space-m);
	color: var(--hf-color-heading);
	font-size: var(--hf-text-l);
	line-height: 1.4;
}

.hf-contact-inquiry__icon
{
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--hf-color-icon);
}

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

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

.hf-contact-inquiry__social
{
	margin-top: var(--hf-space-l);
	padding-top: var(--hf-space-l);
	border-top: 1px solid color-mix(in srgb, var(--hf-color-line) 30%, transparent);
}

.hf-contact-inquiry__social-title
{
	margin: 0;
	font-size: var(--hf-text-s);
}

.hf-contact-inquiry__social-list
{
	display: flex;
	gap: var(--hf-space-xs);
	margin: var(--hf-space-s) 0 0;
	padding: 0;
	list-style: none;
}

/* 44 px targets around 32 px icons. */
.hf-contact-inquiry__social-link
{
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -0.5rem;
	place-items: center;
	border-radius: var(--hf-radius-s);
	color: var(--hf-color-heading);
	transition: color var(--hf-transition);
}

.hf-contact-inquiry__social-list li + li .hf-contact-inquiry__social-link
{
	margin-left: 0;
}

.hf-contact-inquiry__social-link:hover
{
	color: var(--hf-color-primary);
}

.hf-contact-inquiry__social-link:focus-visible
{
	outline: 3px solid var(--hf-color-focus);
	outline-offset: 2px;
}

.hf-contact-inquiry__social-icon
{
	width: 2rem;
	height: 2rem;
}

/* Form card: more room than the home page form, as in the preview. */
.hf-contact-inquiry .hf-contact-form
{
	height: 100%;
	box-sizing: border-box;
	padding: var(--hf-contact-inquiry-pad);
}

.hf-contact-inquiry .hf-contact-form__heading
{
	margin-bottom: var(--hf-space-m);
}

/* Tabs: outlined, the chosen one filled with the button colour. */
.hf-contact-inquiry .hf-contact-form__tabs
{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: var(--hf-space-l);
}

.hf-contact-inquiry .hf-contact-form__tab
{
	min-height: 3.25rem;
	border: 1px solid color-mix(in srgb, var(--hf-color-field-border) 35%, var(--hf-color-surface));
	background: var(--hf-color-band-soft);
	line-height: 1.25;
}

.hf-contact-inquiry .hf-contact-form__tab:has(:checked)
{
	border-color: var(--hf-color-primary);
	background: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
}

.hf-contact-inquiry .hf-contact-form__fields
{
	gap: var(--hf-space-m) var(--hf-space-m);
}

.hf-contact-inquiry .hf-contact-form__label
{
	font-size: var(--hf-text-s);
}

.hf-contact-inquiry .hf-contact-form__input
{
	min-height: 3rem;
}

.hf-contact-inquiry .hf-contact-form__note
{
	margin-top: var(--hf-space-s);
}

.hf-contact-inquiry .hf-contact-form__submit
{
	width: auto;
	min-width: 16rem;
}

/*
 * Two panels side by side; the details panel about a third of the width as
 * in the preview, wider below 80em so the e-mail stays on one line.
 */
@media (min-width: 64em)
{
	.hf-contact-inquiry__inner
	{
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
	}
}

@media (min-width: 80em)
{
	.hf-contact-inquiry__inner
	{
		grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
	}
}

/* Phones: the tabs one under another, the button across. */
@media (max-width: 35.99em)
{
	.hf-contact-inquiry .hf-contact-form__tabs
	{
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hf-space-xs);
	}

	.hf-contact-inquiry .hf-contact-form__submit
	{
		width: 100%;
		min-width: 0;
	}
}