/* =========================================================
   КОНТЕЙНЕР ФОТО — ТЕКСТ ОБТІКАЄ ЗОБРАЖЕННЯ
========================================================= */
#controller_wrap h1 { color: #14233a!important;  }
.content_item > div[style*="float: left"] {
    width: 60% !important;
    min-width: 300px !important;
    max-width: 532px !important;

    float: left !important;

    margin: 22px 24px 8px 8px !important;

    box-sizing: border-box;
}


/* =========================================================
   ФОТО
========================================================= */

.content_item > div[style*="float: left"] img {
    display: block;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;

    border-radius: 18px;

    object-fit: cover;
}


/* =========================================================
   SEO TEXT
========================================================= */

.content_item .seo-text {
    display: block;

    width: auto;

   margin-top: 14px;
    padding: 28px 32px;

    box-sizing: border-box;

    color: #536274;

    font-size: 16px;
    line-height: 1.72;

    background: #fff;

    border: 1px solid #e5e9ee;
    border-radius: 22px;

    box-shadow: 0 12px 32px rgba(28, 43, 64, .07);
}


/* =========================================================
   АБЗАЦИ
========================================================= */

.content_item .seo-text p {
    margin: 0 0 18px;

    color: #536274;

    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   ЗАГОЛОВКИ
========================================================= */

.content_item .seo-text h2 {
    margin: 28px 0 15px;

    color: #14233a;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.3;
}

.content_item .seo-text h2:first-child {
    margin-top: 0;
}


.content_item .seo-text h3 {
    margin: 25px 0 12px;

    color: #26364c;

    font-size: 20px;
    font-weight: 750;

    line-height: 1.4;
}


/* =========================================================
   STRONG
========================================================= */

.content_item .seo-text strong {
    color: #26364c;
    font-weight: 700;
}


/* =========================================================
   СПИСКИ
========================================================= */

.content_item .seo-text ul,
.content_item .seo-text ol {
    margin: 18px 0 22px;

    padding-left: 25px;

    color: #536274;
}


.content_item .seo-text li {
    margin: 7px 0;

    line-height: 1.65;
}


.content_item .seo-text li::marker {
    color: #e34b83;
}


/* =========================================================
   ПОСИЛАННЯ
========================================================= */

.content_item .seo-text a {
    color: #d83f76;

    font-weight: 600;

    text-decoration: none;
}

.content_item .seo-text a:hover {
    color: #b92f61;

    text-decoration: underline;
}


/* =========================================================
   ПІСЛЯ FLOAT
   Наступний блок після SEO-тексту очищає обтікання
========================================================= */

.content_item::after {
    content: "";

    display: table;

    clear: both;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .content_item > div[style*="float: left"] {
        width: 50% !important;
        min-width: 250px !important;

        margin-right: 20px !important;
    }

    .content_item .seo-text {
        padding: 25px 27px;

        font-size: 15px;
        line-height: 1.7;
    }

    .content_item .seo-text p {
        font-size: 15px;
        line-height: 1.7;
    }

    .content_item .seo-text h2 {
        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    /*
     * На телефоні фото стає широким,
     * а текст продовжує обтікати його.
     */

    .content_item > div[style*="float: left"] {
        width: 55% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 3px 15px 8px 0 !important;
    }


    .content_item > div[style*="float: left"] img {
        border-radius: 14px;
    }


    .content_item .seo-text {
        padding: 20px 17px;

        border-radius: 18px;

        font-size: 15px;

        line-height: 1.65;

        box-shadow: 0 9px 25px rgba(28, 43, 64, .06);
    }


    .content_item .seo-text p {
        margin-bottom: 15px;

        font-size: 15px;

        line-height: 1.65;
    }


    .content_item .seo-text h2 {
        margin: 24px 0 13px;

        font-size: 20px;

        line-height: 1.35;
    }


    .content_item .seo-text h3 {
        font-size: 18px;
    }

}

/* =========================================================
   INFO BAR
========================================================= */

.info_bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: 100%;

    margin: 20px 0 25px;
    padding: 0;

    box-sizing: border-box;

    background: #f8fafc;

    border: 1px solid #e5e9ee;
    border-radius: 16px;

    color: #667487;

    font-size: 13px;
    line-height: 1.4;

    overflow: hidden;
}


/* =========================================================
   ОКРЕМИЙ ЕЛЕМЕНТ
========================================================= */

.info_bar .bar_item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 46px;

    margin: 0;
    padding: 8px 18px;

    box-sizing: border-box;

    white-space: nowrap;
}


/* розділювач між елементами */

.info_bar .bar_item + .bar_item {
    border-left: 1px solid #e3e8ed;
}


/* =========================================================
   ПЕРЕГЛЯДИ
========================================================= */

.info_bar .bi_hits {
    color: #68778a;

    font-weight: 600;
}





/* =========================================================
   АВТОР
========================================================= */

.info_bar .bi_user {
    color: #536274;
}


/* текст "Главный редактор:" */

.info_bar .author_status {
    margin-left: 0 !important;
    margin-right: 5px;

    color: #8a96a5 !important;

    font-size: 12px;
    font-weight: 400;
}


/* ім'я автора */

.info_bar .bi_user a {
    color: #26364c;

    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}


.info_bar .bi_user a:hover {
    color: #e34b83;
}


/* =========================================================
   ДАТИ
========================================================= */

.info_bar .bi_date {
    color: #536274;
}


/* "Создано / Обновлено" */

.info_bar .calendar_status {
    margin-left: 0 !important;
    margin-right: 5px;

    color: #8a96a5 !important;

    font-size: 12px;
    font-weight: 400;
}


/* дата */

.info_bar .bi_date time {
    color: #26364c;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   ІКОНКИ
========================================================= */

.info_bar .bi_user::before {
    content: "●";

    display: inline-block;

    margin-right: 8px;

    color: #a6b2bf;

    font-size: 9px;
}


.info_bar .bi_date::before {
    content: "▣";

    display: inline-block;

    margin-right: 8px;

    color: #a6b2bf;

    font-size: 11px;
}


/* =========================================================
   HOVER
========================================================= */

.info_bar .bar_item {
    transition:
        background-color .2s ease,
        color .2s ease;
}


.info_bar .bar_item:hover {
    background: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .info_bar {
        margin: 18px 0 22px;

        border-radius: 14px;
    }


    .info_bar .bar_item {
        padding: 8px 14px;

        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .info_bar {
        display: grid;

        grid-template-columns: 1fr 1fr;

        margin: 16px 0 20px;

        border-radius: 14px;
    }


    .info_bar .bar_item {
        min-height: 44px;

        padding: 8px 11px;

        font-size: 12px;

        white-space: normal;
    }


    /* прибираємо вертикальні розділювачі */

    .info_bar .bar_item + .bar_item {
        border-left: 0;
    }


    /* вертикальний розділювач між колонками */

    .info_bar .bar_item:nth-child(even) {
        border-left: 1px solid #e3e8ed;
    }


    /* горизонтальний розділювач між рядами */

    .info_bar .bar_item:nth-child(n + 3) {
        border-top: 1px solid #e3e8ed;
    }


    .info_bar .author_status,
    .info_bar .calendar_status {
        font-size: 11px;
    }


    .info_bar .bi_user::before,
    .info_bar .bi_date::before,
    .info_bar .bi_hits::before {
        margin-right: 5px;
    }

}


/* =========================================================
   ДУЖЕ МАЛИЙ ТЕЛЕФОН
========================================================= */

@media (max-width: 400px) {

    .info_bar .bar_item {
        min-height: 42px;

        padding: 7px 9px;

        font-size: 11px;
    }


    .info_bar .author_status,
    .info_bar .calendar_status {
        font-size: 10px;
    }

}
/* =========================================================
   ДУЖЕ МАЛИЙ ТЕЛЕФОН
========================================================= */

@media (max-width: 400px) {

    .content_item > div[style*="float: left"] {
        width: 50% !important;

        margin-right: 12px !important;
    }


    .content_item .seo-text {
        padding: 17px 13px;

        border-radius: 16px;
    }


    .content_item .seo-text p {
        font-size: 14px;
        line-height: 1.63;
    }


    .content_item .seo-text h2 {
        font-size: 19px;
    }

}