/*
 * seo text with tabs on the home page (figma node 5799:26849)
 * tabs themselves are the shared component: css/up-tabs.css
 *
 * texts and names of tabs come from the page editor (database), they are not changed here:
 * the look of the old html (h1.title_big, .font-20 ...) is fixed by css of this block only.
 * selectors have two classes on purpose - shared css files are linked more than once on the page
 */

/* the section continues the gray brands block above, that block already gives 100px of space on top */
.seob{background:#F8F8F8;padding:0 0 100px;position:relative;
	/* the site content wrapper (.center) keeps 30px of white under the last block, the gray goes down to the footer */
	margin-bottom:-30px}
/* text column of the mockup */
.seob .seob-main{max-width:1116px;margin:30px auto 0;position:relative}

/* folded: title + 120px of text. height of the title part is measured by js (a title can take 2-3 lines) */
.seob .seo-text{max-height:calc(var(--seob-head,130px) + 120px);overflow:hidden}
.seob .seob-panes{margin:0}
/* text of a picked tab comes in softly. only opacity: no move, no change of size */
.seob .seob-panes > .tab-pane.active{animation:seobIn .3s ease both}
@keyframes seobIn{from{opacity:0}to{opacity:1}}

/* ---- typography of the old html ---- */
.seob .seo_on_main{font-size:14px;line-height:1.5;color:#212121}
/* title 48/60 in the center, 20px to the orange line, the line is 2px */
.seob .seo_on_main .title_big{display:block;position:relative;margin:0;padding:0 0 22px;font-size:48px;line-height:60px;font-weight:700;text-align:center;color:#212121}
.seob .seo_on_main .title_big:after{content:"";position:absolute;left:50%;bottom:0;width:50px;height:2px;margin-left:-25px;border-radius:2px;background:#EC7529}
/* first paragraph stands 48px under the line */
.seob .seo_on_main .title_big + *{margin-top:48px}
/* the old gap of 50px was made for the big 20px intro. with 14px text it leaves a hole in the folded part */
.seob .seo_on_main .title_big + * + .margin-top-50{margin-top:20px}
.seob .seo_on_main .font-20{font-size:14px}

/* ---- fade + "more" ---- */
.seob .seob-fade{position:absolute;left:0;right:0;bottom:24px;height:103px;background:linear-gradient(180deg,rgba(248,248,248,0) 0%,#F8F8F8 72.917%);pointer-events:none}
.seob .see-more{margin-top:0}
.seob .see-more button{display:flex;align-items:center;gap:10px;height:24px;padding:0;margin:0;font-size:14px;line-height:1.5;font-weight:700;color:#83B00B}
.seob .see-more button svg{display:block;flex:0 0 24px;width:24px;height:24px}
.seob .see-more button:focus{outline:none}
.seob .see-more button:focus-visible{outline:2px solid #EC7529;outline-offset:4px;border-radius:4px}
@media (hover:hover){
	.seob .see-more button:hover{color:#EC7529}
}
/* unfolded, or the text is short and there is nothing to unfold */
.seob .seo-main.opening .seob-fade,
.seob .seo-main.is-short .seob-fade,
.seob .seo-main.is-short .see-more{display:none!important}
.seob .seo-main.is-short .seo-text{max-height:none}

/* white footer stands right under the gray section: no divider is needed on this page */
body .footer{border-top-color:transparent}

@media (min-width:992px){
	/* line break inside of a title is for the old left title, in the center the title goes in one line */
	.seob .seo_on_main .title_big br{display:none}
}
@media (max-width:991px){
	/* .center has 10px of bottom padding from this width */
	.seob{padding-bottom:70px;margin-bottom:-10px}
	.seob .seo_on_main .title_big{font-size:36px;line-height:1.25}
	/* tabs row goes edge to edge like in the other blocks, the first tab starts from the usual 10px */
	.seob .seob-tabs{margin-left:-10px;margin-right:-10px;max-width:none}
	.seob .seob-tabs .utabs-track{padding:0 10px}
}
@media (max-width:768px){
	.seob{padding-bottom:50px}
	.seob .seob-main{margin-top:20px}
	.seob .seo_on_main .title_big{font-size:28px;padding-bottom:17px}
	.seob .seo_on_main .title_big + *{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){
	.seob .seob-panes > .tab-pane.active{animation:none}
}