/*
 * bizbank/steps, five variants. Values follow the sections the block
 * reproduces: "app" section.card_steps (style.css, breakpoint 576px),
 * "icons" section.adv-steps-icons (template-accounts.css, 576px), "mosaic"
 * section.counter_section (app.css, 992px), "timeline" the section
 * .b-timeline-section of the BISешка page mockup (breakpoints 1024px and
 * 767px for the columns, 991px for the site's body type), "columns" the
 * section "Як працює факторинг" of the Factoring page mockup (breakpoints
 * 1000px and 650px).
 */

.bb-steps .bb-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-steps .bb-steps__item {
	list-style: none;
}

.bb-steps .bb-steps__heading mark {
	background: var(--bb-yellow);
	color: inherit;
}

/*
 * Yellow badge with a grey square peeking out at its top left ("app" and
 * "icons").
 */
.bb-steps .bb-steps__badge {
	position: relative;
	display: block;
}

.bb-steps .bb-steps__badge::before,
.bb-steps .bb-steps__badge::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
}

.bb-steps .bb-steps__badge::before {
	top: -8px;
	left: -8px;
	background: #e7eef4;
}

.bb-steps .bb-steps__badge::after {
	z-index: 1;
	background: #ffed70;
}

/*
 * App: steps in a white box, the typed label shows its first character
 * large.
 */
.bb-steps--app {
	margin-bottom: 70px;
}

.bb-steps--app .bb-steps__box {
	padding: 16px;
	border-radius: 16px;
	background: var(--bb-white);
	text-align: center;
}

.bb-steps--app .bb-steps__heading {
	font-size: 24px;
	font-weight: 800;
	line-height: 32px;
	text-align: center;
}

.bb-steps--app .bb-steps__list {
	max-width: 240px;
	margin: 24px auto;
}

.bb-steps--app .bb-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 0 24px;
	padding: 0;
}

.bb-steps--app .bb-steps__badge {
	width: 60px;
	height: 72px;
	margin-bottom: 16px;
	padding-top: 4px;
}

.bb-steps--app .bb-steps__label {
	position: relative;
	z-index: 2;
	display: block;
	width: 60px;
	height: 72px;
	margin-bottom: 16px;
	padding-top: 4px;
	font-size: 14px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
}

.bb-steps--app .bb-steps__label::first-letter {
	margin-right: 10px;
	margin-left: 10px;
	font-size: 32px;
	font-weight: 800;
	line-height: 32px;
}

.bb-steps--app .bb-steps__text {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.bb-steps--app .bb-steps__subtitle {
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 800;
	line-height: 24px;
	text-align: center;
}

.bb-steps--app .bb-steps__badges {
	display: block;
	line-height: 1.5;
	text-align: center;
}

.bb-steps--app .bb-badges__link {
	display: inline-block;
	color: var(--bb-black);
	text-decoration: none;
}

.bb-steps--app .bb-badges__link img {
	display: inline;
	max-width: none;
	vertical-align: baseline;
}

/* The canvas badges have no whitespace between them. */
.editor-styles-wrapper .bb-steps--app .bb-badges__link + .bb-badges__link {
	margin-left: 0.26em;
}

@media (min-width: 576px) {

	.bb-steps--app .bb-steps__heading {
		margin-top: 20px;
		font-size: 30px;
	}

	.bb-steps--app .bb-steps__list {
		display: flex;
		align-items: flex-start;
		max-width: 700px;
		margin: 54px auto 15px;
	}

	.bb-steps--app .bb-steps__item {
		flex: 1;
		padding: 0 16px;
	}
}

/* Icons: white cards in two columns, an automatic number and a faded icon. */
.bb-steps--icons {
	margin-bottom: 70px;
}

.bb-steps--icons .bb-steps__box {
	padding: 0;
	border-radius: 16px;
	text-align: center;
}

.bb-steps--icons .bb-steps__heading {
	margin-top: 56px;
	font-size: 24px;
	font-weight: 800;
	line-height: 32px;
	text-align: left;
}

.bb-steps--icons .bb-steps__list {
	width: 100%;
	max-width: 100%;
	margin: 24px 0 0;
	padding: 0;
	counter-reset: bb-steps-icons;
}

.bb-steps--icons .bb-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin: 0 0 15px;
	padding: 24px 16px 16px;
	border-radius: 16px;
	background: var(--bb-white);
	counter-increment: bb-steps-icons;
	isolation: isolate;
	overflow: hidden;
}

.bb-steps--icons .bb-steps__icon {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: -1;
	width: 148px;
	line-height: 0;
	transform: translateY(-50%);
}

.bb-steps--icons .bb-steps__icon img {
	display: block;
	width: 148px;
	max-width: none;
	height: auto;
}

.bb-steps--icons .bb-steps__badge {
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	margin-left: 8px;
	padding-top: 4px;
}

.bb-steps--icons .bb-steps__num {
	position: relative;
	z-index: 2;
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	padding-top: 4px;
	font-size: 14px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
}

.bb-steps--icons .bb-steps__num::before {
	content: counter(bb-steps-icons);
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
}

.bb-steps--icons .bb-steps__num::first-letter {
	margin-right: 10px;
	margin-left: 10px;
	font-size: 32px;
	font-weight: 800;
	line-height: 32px;
}

.bb-steps--icons .bb-steps__text {
	position: relative;
	max-width: 160px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
}

@media (min-width: 576px) {

	.bb-steps--icons .bb-steps__heading {
		font-size: 30px;
	}

	.bb-steps--icons .bb-steps__list {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.bb-steps--icons .bb-steps__item {
		flex: 1 1 calc(50% - 40px);
		width: calc(50% - 40px);
		margin-right: 20px;
	}

	.bb-steps--icons .bb-steps__text {
		max-width: 200px;
	}
}

/* Mosaic: cards of 4/6 and 2/6, then 3/6 and 3/6, big grey numbers. */
.bb-steps--mosaic {
	padding: 55px 0 84px;
}

.bb-steps--mosaic .bb-steps__heading {
	padding: 16px 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
}

.bb-steps--mosaic .bb-steps__list {
	padding-top: 20px;
	counter-reset: bb-steps-mosaic;
}

.bb-steps--mosaic .bb-steps__item {
	position: relative;
	display: grid;
	grid-column: span 3;
	align-content: end;
	align-items: end;
	min-height: 300px;
	margin: 0;
	padding: 32px 20px 28px;
	border-radius: 20px;
	background: var(--bb-white);
	color: var(--bb-black);
	overflow: hidden;
	counter-increment: bb-steps-mosaic;
	transition: all 0.2s ease;
}

.bb-steps--mosaic .bb-steps__item:nth-child(4n+1) {
	grid-column: span 4;
}

.bb-steps--mosaic .bb-steps__item:nth-child(4n+2) {
	grid-column: span 2;
}

.bb-steps--mosaic .bb-steps__item::before {
	content: counter(bb-steps-mosaic);
	position: absolute;
	top: 0;
	right: 20px;
	color: #e8eff4;
	font-size: 120px;
	font-weight: 1000;
	line-height: 1;
}

.bb-steps--mosaic .bb-steps__item:hover {
	background: #ffed70;
}

.bb-steps--mosaic .bb-steps__item:hover::before {
	color: #fff6b8;
}

.bb-steps--mosaic .bb-steps__label {
	padding: 8px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.bb-steps--mosaic .bb-steps__label::after {
	content: " " counter(bb-steps-mosaic);
}

.bb-steps--mosaic .bb-steps__title {
	padding: 0 0 9px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
}

.bb-steps--mosaic .bb-steps__text {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

@media screen and (min-width: 992px) {

	.bb-steps--mosaic .bb-steps__heading {
		padding-right: 20px;
		padding-left: 20px;
	}

	.bb-steps--mosaic .bb-steps__list {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 10px;
	}

	.bb-steps--mosaic .bb-steps__heading + .bb-steps__list {
		margin-top: 14px;
	}
}

@media screen and (max-width: 991px) {

	.bb-steps--mosaic {
		padding: 20px 0;
	}

	.bb-steps--mosaic .bb-steps__heading {
		padding-bottom: 23px;
		font-size: 28px;
	}

	.bb-steps--mosaic .bb-steps__item {
		min-height: 400px;
		margin-bottom: 24px;
		padding-top: 24px;
		font-size: 16px;
	}

	.bb-steps--mosaic .bb-steps__item:not(:last-child) {
		margin-bottom: 32px;
	}

	.bb-steps--mosaic .bb-steps__item::before {
		top: 4px;
	}

	.bb-steps--mosaic .bb-steps__label {
		font-size: 16px;
	}

	.bb-steps--mosaic .bb-steps__title {
		font-size: 24px;
	}

	.bb-steps--mosaic .bb-steps__text {
		padding-bottom: 2px;
		font-size: 14px;
	}
}

/*
 * Timeline: the heading, an intro, white cards of five columns (two up to
 * 1024px, one up to 767px) with the number in a yellow circle, the time,
 * a title and a text, and a note with a yellow line on the left. In the
 * mockup the time is an inline block on a line of the site's body type,
 * 24px/36px (20px/30px up to 991px), which in Mulish puts it 14px (9px)
 * below the circle's margin; the padding on top of the time keeps that gap.
 * The card is a flex column, so its texts stay blocks in the editor canvas
 * too, where editor-canvas.css makes the texts of list items inline. The
 * section margin takes two classes to outweigh the canvas reset of
 * editor-canvas.css, which loads later with one, so the canvas keeps the
 * gap under the section as well.
 */
.bb-steps.bb-steps--timeline {
	margin-bottom: 60px;
}

.bb-steps--timeline .bb-steps__heading {
	margin: 0 0 18px;
	padding: 16px 0;
	color: var(--bb-black);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
}

.bb-steps--timeline .bb-steps__subtitle {
	max-width: 960px;
	margin: 0 0 12px;
	color: var(--bb-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

.bb-steps--timeline .bb-steps__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	counter-reset: bb-steps-timeline;
}

.bb-steps--timeline .bb-steps__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 20px;
	border: 1px solid #e3e9ef;
	border-radius: 18px;
	background: var(--bb-white);
	color: var(--bb-black);
	counter-increment: bb-steps-timeline;
}

.bb-steps--timeline .bb-steps__item::before {
	content: counter(bb-steps-timeline);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--bb-yellow);
	color: var(--bb-black);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.5;
}

.bb-steps--timeline .bb-steps__label {
	margin: 0 0 6px;
	padding-top: 14px;
	color: #6b7680;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.bb-steps--timeline .bb-steps__title {
	margin: 0 0 6px;
	color: var(--bb-black);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.bb-steps--timeline .bb-steps__text {
	margin: 0;
	color: #4b555f;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.bb-steps--timeline .bb-steps__note {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-left: 4px solid var(--bb-yellow);
	border-radius: 10px;
	background: #fffbe6;
	color: var(--bb-black);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.bb-steps--timeline .bb-steps__text a,
.bb-steps--timeline .bb-steps__subtitle a,
.bb-steps--timeline .bb-steps__note a {
	color: inherit;
	text-decoration: underline;
}

@media screen and (max-width: 1024px) {

	.bb-steps--timeline .bb-steps__heading {
		font-size: 32px;
	}

	.bb-steps--timeline .bb-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 991px) {

	.bb-steps--timeline .bb-steps__label {
		padding-top: 9px;
	}
}

@media screen and (max-width: 767px) {

	.bb-steps.bb-steps--timeline {
		margin-bottom: 40px;
	}

	.bb-steps--timeline .bb-steps__heading {
		font-size: 24px;
		line-height: 1.2;
	}

	.bb-steps--timeline .bb-steps__subtitle {
		font-size: 15px;
	}

	.bb-steps--timeline .bb-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Columns: the heading, an intro, four steps in a row without cards (two up
 * to 1000px, one up to 650px with the circle on the left, spanning the title
 * and the text) with an automatic number in a yellow circle, a title and a
 * text, and a plain note under them. Values follow the section "Як працює
 * факторинг" of the Factoring page mockup. The number is a CSS counter, 01,
 * 02, ...; the bottom padding of a step is the 22px of the mockup plus the
 * 20px under its text. The step is a flex column, so its texts stay blocks in
 * the editor canvas too, where editor-canvas.css makes the texts of list items
 * inline. The section margin and size take two classes to outweigh the canvas
 * reset of editor-canvas.css, which loads later with one.
 */
.bb-steps.bb-steps--columns {
	margin-bottom: 64px;
	font-size: 18px;
	line-height: 1.5;
}

.bb-steps--columns .bb-steps__heading {
	margin: 0 0 24px;
	padding: 0;
	color: var(--bb-black);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.25;
}

.bb-steps--columns .bb-steps__subtitle {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.bb-steps--columns .bb-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	counter-reset: bb-steps-columns;
}

.bb-steps--columns .bb-steps__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 0 42px;
	counter-increment: bb-steps-columns;
}

.bb-steps--columns .bb-steps__item::before {
	content: counter(bb-steps-columns, decimal-leading-zero);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--bb-yellow);
	color: var(--bb-black);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
}

.bb-steps--columns .bb-steps__title {
	margin: 0 0 12px;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.35;
}

.bb-steps--columns .bb-steps__text {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.bb-steps--columns .bb-steps__note {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.bb-steps--columns .bb-steps__text a,
.bb-steps--columns .bb-steps__subtitle a,
.bb-steps--columns .bb-steps__note a {
	color: inherit;
	text-decoration: underline;
}

@media screen and (max-width: 1000px) {

	.bb-steps--columns .bb-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 650px) {

	.bb-steps.bb-steps--columns {
		margin-bottom: 48px;
		font-size: 16px;
	}

	.bb-steps--columns .bb-steps__heading {
		font-size: 27px;
	}

	.bb-steps--columns .bb-steps__subtitle {
		font-size: 16px;
	}

	.bb-steps--columns .bb-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-steps--columns .bb-steps__item {
		display: grid;
		grid-template-columns: 58px minmax(0, 1fr);
		column-gap: 18px;
		padding: 12px 0;
	}

	.bb-steps--columns .bb-steps__item::before {
		grid-row: 1 / 3;
		font-size: 16px;
	}

	.bb-steps--columns .bb-steps__title {
		grid-column: 2;
		margin-bottom: 6px;
		font-size: 22px;
	}

	.bb-steps--columns .bb-steps__text {
		grid-column: 2;
		font-size: 16px;
	}
}

/*
 * Editor canvas: the classic-theme editor styles cap every block at 840px,
 * the steps are blocks too; the button that adds an icon to a step without
 * one.
 */
.editor-styles-wrapper .bb-steps .bb-steps__item {
	max-width: none;
}

.bb-steps--icons .bb-steps__icon--empty {
	top: 16px;
	right: 16px;
	z-index: 3;
	width: auto;
	line-height: 1.4;
	transform: none;
}

.bb-steps--icons .bb-steps__icon--empty .components-button {
	font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}