/* Steps (a core/group style, inc/block-styles.php): numbered rows between dashed rules. Each row
   is a horizontal group holding the number and a stack of title and text; the number sits on the
   title's baseline. Used by patterns/photo-steps.php (Figma 83:941, phones 293:25293). */

.wp-block-group.is-style-steps > * {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--60, 2rem);
	border-top: 1px dashed var(--wp--custom--color--border--faint);
	line-height: 1.4;
}

/* The last row / column: the last block, so the editor's appender (a selected container's last
   child) does not take it over. */
.wp-block-group.is-style-steps > :nth-last-child(1 of :not(.block-list-appender)) {
	border-bottom: 1px dashed var(--wp--custom--color--border--faint);
}

.wp-block-group.is-style-steps > .is-layout-flex {
	align-items: baseline;
	gap: 48px;
}

/* The number: a fixed 24px column so every title starts at the same x ("01" and "03" differ in
   width; a longer label runs into the gap), 18px at every width (a block font size would be made
   fluid, down to 13px on phones) unless the editor picks a size. */
.wp-block-group.is-style-steps > .is-layout-flex > :first-child {
	flex: 0 0 1.5rem;
	min-width: 0;
	margin: 0;
	white-space: nowrap;
}

.wp-block-group.is-style-steps > .is-layout-flex > p:first-child:not([class*="-font-size"]) {
	font-size: 1.125rem;
}

.wp-block-group.is-style-steps > .is-layout-flex > :nth-last-child(1 of :not(.block-list-appender)) {
	flex: 1 1 0;
	min-width: 0;
	text-wrap: pretty;
}

.wp-block-group.is-style-steps :is(h2, h3, h4, p) {
	line-height: 1.4;
}

@media (max-width: 782px) {
	.wp-block-group.is-style-steps > * {
		padding-block: var(--wp--preset--spacing--40, 1rem);
	}

	.wp-block-group.is-style-steps > .is-layout-flex {
		gap: 32px;
	}
}

/* Photo with numbered steps (patterns/photo-steps.php). */

.fyo-photo-steps__photo,
.fyo-photo-steps__photo img {
	width: 100%;
	margin: 0;
}

.fyo-photo-steps__body.fyo-photo-steps__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60, 2rem);
}

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

.fyo-photo-steps__body > .is-style-steps {
	align-self: stretch;
}

.fyo-photo-steps .fyo-photo-steps__heading {
	font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); /* 56px desktop, 40px phones */
	line-height: 1.1;
	text-wrap: balance;
}

.fyo-photo-steps__intro {
	text-wrap: pretty;
}

/* Tablets (no mockup): two 50% columns are too narrow below 1100px, so the photo stacks above the
   text as on phones, cropped to 3:2 so it doesn't fill the screen. Core's column rules carry
   !important, and the image's ratio is an inline style. */
@media (max-width: 1099px) {
	.wp-block-columns.fyo-photo-steps__columns {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--60, 2rem);
	}

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

@media (min-width: 782px) and (max-width: 1099px) {
	.fyo-photo-steps__photo img {
		aspect-ratio: 3 / 2 !important;
	}
}

@media (max-width: 781px) {
	.fyo-photo-steps__body.fyo-photo-steps__body {
		gap: var(--wp--preset--spacing--40, 1rem);
	}

	.fyo-photo-steps .fyo-photo-steps__intro {
		font-size: 1.125rem !important; /* 18px on phones; the paragraph's own size is 24px */
	}

	.fyo-photo-steps__link {
		align-self: center;
	}
}

/* Phones: 80px below the link (the padding is an inline style, hence !important). On the homepage
   the statewide stats overlap 82 of it, so the link sits level with the top of their notch band. */
@media (max-width: 782px) {
	.fyo-photo-steps {
		padding-bottom: 80px !important;
	}
}