/*
 * bizbank/text: free text of core blocks inside .bb-richtext, and the
 * "Банер" style of core/image inside it. Variants: article, wide, compact
 * and seo.
 *
 * Values repeat the site's news post body (.single-news .text-editor) for
 * "article" and "wide", and the collapsible SEO text (.content_seo.read-more)
 * for "seo". Rules that core's block-library CSS also sets on tables and
 * images are repeated here, so the section looks the same whether or not
 * that CSS is on the page. Breakpoint: 991px and below is mobile.
 */

.bb-text {
	position: relative;
	padding: 60px 0;
}

.bb-text.bb-text--white {
	background: #fff;
}

.bb-text.bb-text--article .bb-text__container {
	max-width: 960px;
}

.bb-text:not(.bb-text--seo) .bb-text__body > :first-child {
	margin-top: 0;
	padding-top: 0;
}

.bb-text:not(.bb-text--seo) .bb-text__body > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.bb-text .bb-richtext {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	color: #000;
}

.bb-text .bb-richtext a {
	display: inline-block;
	color: #3e66f4;
	text-decoration: underline;
	transition: 0.3s;
}

.bb-text .bb-richtext a:hover {
	text-decoration: none;
}

.bb-text .bb-richtext h2 {
	padding: 16px 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
}

.bb-text .bb-richtext h3 {
	padding: 12.8px 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
}

.bb-text .bb-richtext h4 {
	padding: 8px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.bb-text .bb-richtext ol li {
	padding: 0;
}

.bb-text .bb-richtext .wp-block-table {
	margin: 0 0 1em;
	overflow-x: auto;
}

.bb-text .bb-richtext table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.bb-text .bb-richtext table.has-fixed-layout {
	table-layout: fixed;
}

.bb-text .bb-richtext :is(td, th) {
	border: 1px solid #000;
	text-align: left;
	vertical-align: top;
}

.bb-text .bb-richtext td {
	border-top-color: rgba(0, 0, 0, 0.3);
	font-weight: 300;
}

.bb-text .bb-richtext th {
	font-weight: 700;
}

.bb-text .bb-richtext table.has-fixed-layout :is(td, th) {
	overflow-wrap: anywhere;
}

.bb-text .bb-richtext table p {
	padding: 0;
	font-size: 18px;
}

.bb-text .bb-richtext .wp-block-image {
	margin: 0 0 1em;
}

.bb-text .bb-richtext .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bb-text .bb-richtext .wp-block-image figcaption {
	margin: 0.5em 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.bb-text .bb-richtext .wp-block-image.is-style-bizbank-banner {
	margin: 0 0 17px;
	border-radius: 20px;
	overflow: hidden;
}

.bb-text .bb-richtext .wp-block-image.is-style-bizbank-banner img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

/* SEO text: grey band, 16px text, clipped to 14 lines under a fade. */
.bb-text.bb-text--seo {
	padding: 1em 0;
	background: #e8eff4;
}

.bb-text.bb-text--seo .bb-richtext {
	font-weight: 400;
}

.bb-text.bb-text--seo .bb-text__body {
	position: relative;
	max-height: calc(16px * 1.7 * 14);
	overflow: hidden;
	transition: max-height 500ms ease;
}

.bb-text.bb-text--seo .bb-text__body::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: calc(17px * 4);
	background: linear-gradient(to bottom, rgba(251, 252, 255, 0) 0%, #e8eff4 50%, #e8eff4 100%);
	pointer-events: none;
}

.bb-text.bb-text--seo .bb-text__body:focus {
	outline: 0;
}

.bb-text.bb-text--seo .bb-richtext :is(p, ul, ol) {
	margin: 1em 0;
	padding: 0;
	font-size: 16px;

	/* Production value: nested text inherits the computed 27.2px. */
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.7em;
}

.bb-text.bb-text--seo .bb-richtext :is(ul, ol) {
	padding-left: 40px;
	list-style-position: outside;
}

.bb-text.bb-text--seo .bb-richtext ul {
	list-style-type: disc;
}

.bb-text.bb-text--seo .bb-richtext ol {
	list-style-type: decimal;
}

.bb-text.bb-text--seo .bb-richtext li,
.bb-text.bb-text--seo .bb-richtext ul li:not(:last-child) {
	display: list-item;
	padding: 0;
}

.bb-text.bb-text--seo .bb-richtext ul li::before {
	content: none;
}

.bb-text.bb-text--seo .bb-richtext a {
	color: #000;
}

.bb-text.bb-text--seo .bb-richtext :is(td, th) {
	padding: 8px 10px;
	font-size: 16px;
	line-height: 1.7;
}

.bb-text.bb-text--seo .bb-text__more {
	display: block;
	position: absolute;
	bottom: 2em;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #2980b9;
	font-family: Mulish, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	appearance: none;
}

.bb-text.bb-text--seo .bb-text__more:focus-visible {
	outline: 2px solid #2980b9;
	outline-offset: 2px;
}

.bb-text.bb-text--seo.is-expanded .bb-text__body {
	max-height: none;
}

.bb-text.bb-text--seo.is-expanded .bb-text__body::before,
.bb-text.bb-text--seo.is-expanded .bb-text__more {
	opacity: 0;
	visibility: hidden;
}

/*
 * Compact text: full width, 18px text, 34px headline and no section padding;
 * the section's own bottom margin sets the rhythm between sections. The
 * note under the text is the block's "note" attribute. Type and spacing
 * switch at 650px.
 */
.bb.bb-text.bb-text--compact {
	margin: 0 0 64px;
	padding: 0;
}

.bb-text.bb-text--compact .bb-richtext {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.bb-text.bb-text--compact .bb-richtext h2 {
	margin: 0 0 24px;
	padding: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: normal;
}

.bb-text.bb-text--compact .bb-richtext p {
	margin: 0 0 20px;
	padding: 0;
}

.bb-text.bb-text--compact .bb-text__note {
	margin: 20px 0 0;
	padding: 0;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.bb-text.bb-text--compact .bb-text__note a {
	color: #3e66f4;
	text-decoration: underline;
}

.bb-text.bb-text--compact .bb-text__note a:hover {
	text-decoration: none;
}

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

	.bb.bb-text.bb-text--compact {
		margin-bottom: 48px;
	}

	.bb-text.bb-text--compact .bb-richtext {
		font-size: 16px;
	}

	.bb-text.bb-text--compact .bb-richtext h2 {
		font-size: 27px;
	}
}

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

	.bb-text {
		padding: 40px 0;
	}

	.bb-text .bb-richtext {
		font-size: 20px;
	}

	.bb-text .bb-richtext h2 {
		font-size: 28px;
	}

	.bb-text .bb-richtext h3 {
		font-size: 24px;
	}

	.bb-text .bb-richtext h4 {
		font-size: 20px;
	}

	.bb-text .bb-richtext :is(td, th) {
		padding: 18px 10px;
		font-size: 16px;
	}

	.bb-text .bb-richtext .wp-block-image.is-style-bizbank-banner {
		margin-bottom: 20px;
	}
}

/*
 * Editor canvas: the SEO text stays expanded, and its button label sits
 * below the text, where it is edited in place.
 */
.editor-styles-wrapper .bb-text.bb-text--seo .bb-text__body {
	max-height: none;
	overflow: visible;
}

.editor-styles-wrapper .bb-text.bb-text--seo .bb-text__body::before {
	display: none;
}

.editor-styles-wrapper .bb-text.bb-text--seo .bb-text__more {
	position: static;
	margin: 8px 0 0;
	cursor: text;
}