/*
	.grid-2 is the shared 2-column primitive (layout.css) that Callout and Two
	Column Content also render into — this widens the gap for Connect Callout
	only, scoped via the section's own flex-section--connect-callout class.
*/
.flex-section--connect-callout .grid-2 {
	gap: var(--space-10);
}

.connect-callout__content {
	& > * + * {
		margin-block-start: var(--space-4);
	}
}

.connect-callout__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-block: var(--space-8) 0;
	padding: 0;
	list-style: none;
}

.connect-callout__contact {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.connect-callout__contact-text {
	font-weight: var(--font-weight-bold);
}

.connect-callout__contact-icon {
	display: flex;
	flex: none;
	color: var(--color-accent-bg);

	& svg {
		width: var(--space-8);
		height: var(--space-8);
	}
}

/*
	Overrides assets/css/gravity-forms.css's own shared textarea height
	(160px) with a taller one for this block's own message field. Equal
	specificity to the shared rule, so this only wins because
	connect-callout.css is enqueued after the shared file whenever both load
	on the same page (inc/enqueue.php) — the same source-order technique
	this theme's block-specific overrides generally rely on rather than
	reaching for higher specificity or another !important.

	min-block-size needs overriding alongside height for the same reason the
	shared rule does: Gravity Forms' own gfield textarea.large sets
	min-block-size: 18rem (288px) — larger than either 200px here or the
	shared 160px — and min-height always wins over a smaller height
	regardless of !important on height alone, since that's a CSS box-sizing
	rule, not a cascade fight.
*/
.connect-callout__form textarea {
	height: 12.5rem !important; /* 200px */
	min-block-size: 12.5rem !important; /* 200px */
}

/*
	Nothing in this block's own markup sets a font-size directly — the only
	element inside Connect Callout actually at --font-size-2 on mobile is
	its embedded form's own submit button, via the theme-wide mobile rule
	in assets/css/gravity-forms.css (.gform_wrapper .button). This bumps it
	back up to --font-size-3 for Connect Callout specifically, without
	touching Forms' own submit button elsewhere, which stays at
	--font-size-2. Three classes beats that shared rule's two on
	specificity, which is what actually wins here — both carry !important,
	so a tie would otherwise need to fall back to source order instead.
*/
@media (max-width: 47.99em) {
	.flex-section--connect-callout .gform_wrapper .button {
		font-size: var(--font-size-3) !important;
	}
}