/* Region at a glance (patterns/region-at-a-glance.php; Figma 107:8182, phones 124:10567): the
   small map, heading and introduction beside the icon stats. The left column carries the section
   head classes, so the heading sizes and phone centring come from section-head.css. */

.fyo-glance__head.fyo-glance__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin-inline: 0; /* not the section head's centring: it is a column here */
}

.fyo-glance__head.fyo-glance__head > * {
	margin: 0; /* two classes: in the editor core's flow-layout margins print after this sheet */
}

.fyo-glance__head > p {
	text-wrap: pretty;
}

@media (max-width: 782px) {
	.fyo-glance__head {
		align-items: center;
		gap: var(--wp--preset--spacing--30, 0.75rem);
		text-align: center;
	}

	.fyo-glance__head.fyo-glance__head > :is(.fyo-locator, .wp-block-fyo-region-locator) {
		margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
	}

	.fyo-glance__head > p {
		font-size: var(--wp--preset--font-size--small) !important; /* 16px on phones; the paragraph's own size is 18px */
	}
}