/* Region cost of living section (patterns/region-living.php; Figma 149:2094, phones 136:3609): the
   salary calculator's white card, which holds the Cost of living form block (stacked). */

.fyo-form-card .fyo-form-card__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Below 1100px the figures and the form card stack (core's column rules carry !important); on
   tablets the card keeps its desktop width, centred. */
@media (max-width: 1099px) {
	.wp-block-columns.fyo-living__costs {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--60, 2rem);
	}

	.wp-block-columns.fyo-living__costs > .wp-block-column {
		flex-basis: 100% !important;
	}

	.fyo-living__costs .fyo-form-card {
		max-width: 35.2rem; /* 563 */
		margin-inline: auto;
	}
}

@media (max-width: 782px) {
	/* The phone frame's card: 16px in, an 18px heading, 12px between fields. The padding is an
	   inline style, hence !important. */
	.fyo-form-card {
		padding: var(--wp--preset--spacing--40, 1rem) !important;
	}

	.fyo-form-card .fyo-form-card__heading {
		font-size: 1.125rem;
	}

	/* 12px under the heading (the card's block gap is a doubled-class margin). */
	.fyo-form-card.fyo-form-card > * + * {
		margin-block-start: var(--wp--preset--spacing--30, 0.75rem);
	}

	/* The intro is 18px in the phone frame (the paragraph's own Large size is 20px there). */
	.fyo-living .fyo-section-head__intro {
		font-size: 1.125rem !important;
	}

	/* 16px from the heading to the figures (core's block gap is a doubled-class margin). */
	.fyo-living__summary.fyo-living__summary > * + * {
		margin-block-start: var(--wp--preset--spacing--40, 1rem);
	}
}