/* Shared hook: TinyMCE `body_class: cms-content` and frontend `.cms-content` wrapper.
   Existing stored HTML (<h2>, <p>, <ul>) is enough — editors do not need to re-save. */
.cms-content {
    font-family: Rubik, system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1f2328;
    max-width: none;
    width: 100%;
}

.cms-content--wide {
    max-width: none;
    width: 100%;
}

.cms-content > *:first-child {
    margin-top: 0;
}

.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
    font-weight: 600;
    line-height: 1.3;
    color: #212529;
    letter-spacing: normal;
    margin: 2.25rem 0 0.85rem;
}

.cms-content h1 { font-size: 1.85rem; }
.cms-content h2 { font-size: 1.5rem; }
.cms-content h3 { font-size: 1.2rem; }
.cms-content h4 { font-size: 1.05rem; }

.cms-content p {
    margin: 0 0 1.15rem;
    text-align: start;
    letter-spacing: normal;
    hyphens: manual;
    max-width: none;
}

.cms-content .cms-lead {
    font-size: 1.15rem;
    color: #4a4a4a;
}

.cms-content a {
    color: var(--theme-color, #465bd0);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cms-content a:hover {
    opacity: 0.85;
}

.cms-content ul,
.cms-content ol {
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
    display: block;
}

.cms-content li {
    margin: 0.25rem 0;
    display: list-item;
}

.cms-content ul {
    list-style: disc;
}

.cms-content ol {
    list-style: decimal;
}

.cms-content strong,
.cms-content b {
    font-weight: 600;
}

.cms-content em,
.cms-content i:not(.fa):not(.fas):not(.far):not(.fab) {
    font-style: italic;
}

.cms-content i.fa,
.cms-content i.fas,
.cms-content i.far,
.cms-content i.fab {
    font-style: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.cms-content blockquote,
.cms-content .cms-note {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    background: #f0f3f8;
    border-left: 3px solid var(--theme-color, #465bd0);
    color: #333;
}

.cms-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0.35rem;
}

.cms-content figure,
.cms-content .cms-figure {
    margin: 1.25rem 0;
}

.cms-content figure img {
    width: 100%;
}

.cms-content a.cms-lightbox {
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}

.cms-content a.cms-lightbox:hover {
    opacity: 1;
}

.cms-content a.cms-lightbox:focus-visible {
    outline: 2px solid var(--theme-color, #465bd0);
    outline-offset: 3px;
}

.cms-content figure > a.cms-lightbox {
    display: block;
}

.cms-content figcaption {
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: #6d6d6d;
}

.cms-content .cms-float-left {
    float: left;
    max-width: min(46%, 18rem);
    margin: 0.25rem 1.25rem 0.75rem 0;
}

.cms-content .cms-float-right {
    float: right;
    max-width: min(46%, 18rem);
    margin: 0.25rem 0 0.75rem 1.25rem;
}

.cms-content table,
.cms-content .cms-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.15rem 0 1.4rem;
    font-size: 0.95rem;
}

.cms-content th,
.cms-content td {
    border: 1px solid #d9dde5;
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.cms-content tbody tr:nth-child(even) td {
    background: #f7f8fb;
}

.cms-content thead th,
.cms-content tr:first-child th {
    background: #eef1f7;
    font-weight: 600;
}

.cms-content .cms-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.65rem;
    margin: 1.25rem 0 1.5rem;
    max-width: none;
}

.cms-content .cms-gallery figure {
    margin: 0;
}

.cms-content .cms-gallery a {
    display: block;
}

.cms-content .cms-gallery img {
    width: 100%;
    height: 8.5rem;
    object-fit: cover;
}

.cms-content .cms-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    max-width: none;
}

.cms-content .cms-feature {
    background: #f7f8fb;
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
}

.cms-content .cms-feature h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.cms-content .cms-feature p {
    margin: 0;
    color: #5b5b5b;
    font-size: 0.95rem;
}

/*
 * Homepage advantages: original bmservice.by used Bootstrap columns,
 * d-flex + h5 (15–16px / 400), FA icons, striped white/#f8f9fa.
 * Do not nest this block in .cms-content — article h3/1.05rem must not leak.
 */
.home-features,
.cms-features--home {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #232323;
}

.home-features .cms-features--home,
.cms-content .cms-features--home {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    max-width: none;
    background: transparent;
}

.home-features .cms-features--home.row {
    display: flex;
}

.home-features .cms-feature,
.cms-content .cms-features--home .cms-feature {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.cms-features--home .cms-feature:nth-child(even) .d-flex {
    background: #f8f9fa;
}

.cms-features--home:not(.row) .cms-feature:nth-child(even) {
    background: #f8f9fa;
}

.home-features .cms-feature:nth-child(odd) .d-flex,
.cms-features--home:not(.row) .cms-feature:nth-child(odd) {
    background: transparent;
}

.home-features .cms-feature .fa,
.cms-features--home .cms-feature > .fa,
.cms-features--home .cms-feature .fa {
    color: #3c5272;
    line-height: 1;
    font-style: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.home-features .cms-feature h5,
.cms-features--home .cms-feature h5,
.cms-content .cms-features--home .cms-feature h3 {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    margin: 0 0 1rem;
    color: #212529;
    font-family: Rubik, sans-serif;
}

.home-features .cms-feature p,
.cms-features--home .cms-feature p,
.cms-content .cms-features--home .cms-feature p {
    font-size: 14px;
    line-height: 18px;
    color: #232323;
    margin: 0;
    font-family: Rubik, sans-serif;
    font-weight: 400;
}

@media (max-width: 991px) {
    .cms-content .cms-features--home:not(.row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cms-content .cms-features--home:not(.row) {
        grid-template-columns: 1fr;
    }
}

/*
 * demo2 `.blog-details .blog-detail-contain h2` is the article TITLE
 * (margin-top: -8px, ~title pull-up). After import, section headings are
 * also <h2> in that contain, so they glued to the previous paragraph.
 * These selectors (0,3,1) beat the theme (0,2,1) without touching About.
 */
.blog-details .blog-detail-contain .cms-content,
.blog-details .blog-detail-contain .cms-content--wide {
    max-width: none;
    width: 100%;
}

.blog-details .blog-detail-contain .cms-content h1,
.blog-details .blog-detail-contain .cms-content h2,
.blog-details .blog-detail-contain .cms-content h3,
.blog-details .blog-detail-contain .cms-content h4,
.blog-details .blog-detail-contain .cms-content h5,
.blog-details .blog-detail-contain .cms-content h6 {
    font-weight: 600;
    line-height: 1.3;
    color: #212529;
    letter-spacing: normal;
    text-transform: none;
    max-width: none;
    margin: 2.25rem 0 0.85rem;
}

.blog-details .blog-detail-contain .cms-content h1 { font-size: 1.85rem; }
.blog-details .blog-detail-contain .cms-content h2 { font-size: 1.5rem; }
.blog-details .blog-detail-contain .cms-content h3 { font-size: 1.2rem; }
.blog-details .blog-detail-contain .cms-content h4 { font-size: 1.05rem; }

.blog-details .blog-detail-contain .cms-content > *:first-child {
    margin-top: 0;
}

.blog-details .blog-detail-contain .cms-content p {
    margin: 0 0 1.15rem;
    text-align: start;
    letter-spacing: normal;
    line-height: 1.7;
    max-width: none;
    hyphens: manual;
}

.blog-details .blog-detail-contain .cms-content p + p {
    margin-top: 0;
}

.blog-details .blog-detail-contain .cms-content ul,
.blog-details .blog-detail-contain .cms-content ol {
    display: block;
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
    max-width: none;
}

.blog-details .blog-detail-contain .cms-content li {
    display: list-item;
    list-style-position: outside;
    margin: 0.25rem 0;
}

/* About page: match old demo2 .about-details / body Rubik 14px, not generic CMS article type. */
.cms-content.cms-content--about {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #232323;
}

.cms-content--about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
    row-gap: 0.35rem;
    align-items: center;
}

.cms-content--about > .cms-about-photo {
    grid-column: 1;
    grid-row: 1 / span 12;
    margin: 0;
    max-width: 100%;
}

.cms-content--about > .cms-about-photo a.cms-lightbox {
    display: block;
}

.cms-content--about > .cms-about-photo img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    object-fit: cover;
}

.cms-content--about > :not(.cms-features):not(.cms-about-photo) {
    grid-column: 2;
}

.cms-content--about > .cms-features {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1.75rem;
    margin: 3rem 0 0.5rem;
    align-items: start;
}

.cms-content--about .cms-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
}

.cms-content--about .cms-feature .fa {
    color: #3c5272;
    line-height: 1;
    font-style: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin: 0 0 0.85rem;
    display: block;
}

.cms-content--about > h2 {
    margin: 0 0 10px;
    font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: inherit;
    color: var(--theme-color, #465bd0);
}

.cms-content--about > h3 {
    font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    letter-spacing: 1.5px;
    margin: 0 0 16px;
    max-width: 80%;
    line-height: 1.5;
    text-transform: uppercase;
    color: #212529;
}

.cms-content--about > p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.5;
    color: #7e7e7e;
    margin: 0 0 1rem;
}

.cms-content--about .cms-feature h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    max-width: none;
    line-height: 1.2;
    margin: 0 0 0.45rem;
    color: #212529;
    min-height: 3.6em;
    width: 100%;
}

.cms-content--about .cms-feature p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: #7e7e7e;
    margin: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .cms-content--about {
        display: block;
    }

    .cms-content--about > .cms-about-photo {
        margin: 0 0 1.25rem;
    }

    .cms-content--about > h3 {
        max-width: 100%;
    }

    .cms-content--about > .cms-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 1.75rem;
    }
}

@media (max-width: 575px) {
    .cms-content--about > .cms-features {
        grid-template-columns: 1fr;
    }

    .cms-content--about .cms-feature h3 {
        min-height: 0;
    }
}

.cms-content::after {
    content: "";
    display: block;
    clear: both;
}

body.mce-content-body {
    margin: 0;
    padding: 1rem 1.15rem;
    background: #fff;
}

@media (max-width: 767px) {
    .cms-content .cms-float-left,
    .cms-content .cms-float-right {
        float: none;
        max-width: 100%;
        margin: 0 0 1rem;
    }
}

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: opacity 0.16s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: opacity 0.16s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.mfp-title {
    text-align: left;
    line-height: 1.4;
}
