@charset "utf-8";
/* =========================================================================
   Сторінка статті блогу (single.php) — макет Figma 4491:4576 / 4491:4977.
   Підключається у footer.php лише для is_singular('post') і навмисно
   лежить окремо від style.min.css, щоб не чіпати решту сайту.
   ========================================================================= */

@font-face {
    font-family: 'MazzardH-MediumItalic';
    src: url('../fonts/MazzardH-MediumItalic.woff2') format('woff2'),
         url('../fonts/MazzardH-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.single-article {
    --a-radius: 16px;
    --a-bg: #f0f2f4;
    --a-grey: #505050;
    --a-red: #c80000;
    --a-gap: 16px;
}

/* ---------- Хлібні крихти над карткою ---------- */

.single-article .breadcrumbs-bar .breadcrumbs {
    padding: 16px 0 0 0;
}

/* ---------- Шапка статті ---------- */

.single-article .top-block {
    margin-bottom: 0;
}

.single-article .top-block .wrap {
    border-radius: var(--a-radius);
    padding: 16px 20px 64px 20px;
    margin-top: var(--a-gap);
}

.single-article .top-block .wrap .all-articles {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "MazzardH-Regular";
    font-size: 12px;
    line-height: 1.6;
    color: #000000;
    text-decoration: none;
    float: left;
}

.single-article .top-block .wrap .all-articles:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/icon-arrow-back.svg) center no-repeat;
    background-size: contain;
    flex: 0 0 20px;
}

.single-article .top-block .wrap .all-articles:hover {
    color: var(--a-red);
}

.single-article .top-block .wrap h1 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    width: 100%;
    max-width: 900px;
    margin: 24px auto 0 auto;
    clear: both;
}

.single-article .top-block .wrap .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin: 24px auto 0 auto;
}

.single-article .top-block .wrap .tags a {
    margin: 0;
    height: auto;
    line-height: 1.6;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 14px;
}

.single-article .top-block .wrap .tags:empty {
    display: none;
}

/* ---------- Автор статті ---------- */

.single-article .article-author {
    padding-top: var(--a-gap);
}

.single-article .article-author__card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    border-radius: var(--a-radius);
    padding: 32px 40px;
}

.single-article .article-author__person {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.single-article .article-author__photo {
    display: block;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--a-bg);
}

.single-article .article-author__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.single-article .article-author__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.single-article .article-author__label {
    font-family: "MazzardH-Regular";
    font-size: 14px;
    line-height: 1.6;
    color: var(--a-grey);
}

.single-article .article-author__name {
    font-family: "MazzardH-Medium";
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
}

.single-article .article-author__person:hover .article-author__name {
    color: var(--a-red);
}

.single-article .article-author__post {
    font-family: "MazzardH-Regular";
    font-size: 12px;
    line-height: 1.4;
    color: #000000;
}

.single-article .article-author__dates {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.single-article .article-author__dates p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-family: "MazzardH-Regular";
    font-size: 14px;
    line-height: 1.6;
    color: var(--a-grey);
    white-space: nowrap;
}

/* ---------- Дві колонки: форма + текст ---------- */

.single-article .article-layout {
    padding-top: var(--a-gap);
}

.single-article .article-layout__grid {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.single-article .article-layout__aside {
    flex: 0 0 400px;
    width: 400px;
    position: sticky;
    top: 20px;
}

.single-article .article-layout__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Форма «Запис на консультацію» ---------- */

.single-article .article-form {
    position: relative;
    border-radius: var(--a-radius);
    overflow: hidden;
    padding: 40px 32px;
    background: #505050 url(../img/bg-article-form.jpg) center/cover no-repeat;
    text-align: center;
}

.single-article .article-form:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.single-article .article-form > * {
    position: relative;
    z-index: 1;
}

.single-article .article-form__head {
    margin-bottom: 24px;
}

.single-article .article-form__title {
    font-family: "MazzardH-Medium";
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.single-article .article-form__text {
    font-family: "MazzardH-Regular";
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
}

.single-article .article-form form.wpcf7-form {
    display: block;
    width: 100%;
    background: none;
    padding: 0;
    text-align: left;
}

.single-article .article-form form.wpcf7-form > div > p {
    margin: 0 0 24px 0;
}

.single-article .article-form form.wpcf7-form > div > p:last-child {
    margin-bottom: 0;
}

/* антиспам-поле не має займати місце між полями */
.single-article .article-form form.wpcf7-form > div > p:has(.cf7apps-honeypot-wrap) {
    display: none;
}

.single-article .article-form form .hidden-fields-container {
    display: none;
}

.single-article .article-form form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.single-article .article-form form select {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    height: 54px !important;
    padding: 0 16px !important;
    border-radius: 10px;
    border: none !important;
    background: rgba(242, 242, 242, 0.2) !important;
    font-family: "MazzardH-Regular";
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    box-sizing: border-box;
}

.single-article .article-form form input::placeholder {
    color: #ffffff;
    opacity: 1;
}

.single-article .article-form form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    cursor: pointer;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-color: rgba(242, 242, 242, 0.2) !important;
}

.single-article .article-form form select option {
    color: #000000;
}

.single-article .article-form form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0;
}

/* службові поля форми не мають створювати порожні відступи */
.single-article .article-form form input.doc,
.single-article .article-form form input.product,
.single-article .article-form form .wpcf7-form-control-wrap[data-name="text-173"],
.single-article .article-form form .wpcf7-form-control-wrap[data-name^="honeypot"] {
    display: none !important;
}

.single-article .article-form form .js-doctor-confirm {
    display: none;
}

.single-article .article-form form .wpcf7-acceptance {
    display: block;
    width: 100%;
    margin: 0;
    font-family: "MazzardH-Regular";
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
}

.single-article .article-form form .wpcf7-acceptance .wpcf7-list-item {
    display: block;
    margin: 0;
}

.single-article .article-form form .wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.single-article .article-form form .wpcf7-acceptance input[type=checkbox] + span {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    border-radius: 3px;
    border: #d9d9d9 solid 1px;
    background-color: #ffffff;
}

.single-article .article-form form .wpcf7-acceptance .wpcf7-list-item-label {
    width: auto;
    flex: 1 1 auto;
    line-height: 1.6;
    color: #ffffff;
}

.single-article .article-form form .wpcf7-acceptance .wpcf7-list-item-label a {
    color: #ffffff;
    text-decoration: underline;
}

.single-article .article-form form .wpcf7-acceptance .wpcf7-list-item-label a:hover {
    text-decoration: none;
}

.single-article .article-form form input[type=submit] {
    width: 100% !important;
    height: 43px;
    min-width: 0;
    margin: 0;
    padding: 0 32px;
    border-radius: 32px;
    border: none !important;
    background: var(--a-red);
    box-shadow: 0 8px 8px rgba(200, 0, 0, 0.24);
    font-family: "MazzardH-Medium";
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: #ffffff !important;
    cursor: pointer;
}

.single-article .article-form form input[type=submit]:hover {
    box-shadow: 0 10px 15px rgba(200, 0, 0, 0.4);
}

.single-article .article-form .wpcf7-not-valid-tip {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: #ffd5d5;
}

/* загальне повідомлення CF7 не потрібне: помилки видно під кожним полем,
   а після успішної відправки йде редирект на сторінку подяки */
.single-article .article-form .wpcf7-response-output {
    display: none !important;
}

.single-article .article-form .wpcf7-spinner {
    margin: 10px auto 0 auto;
}

/* ---------- Картки з текстом статті ---------- */

.single-article .article-card {
    background: #ffffff;
    border-radius: var(--a-radius);
    padding: 40px 48px;
}

/* блоки гнучкого контенту йдуть один за одним з однаковим відступом */
.single-article .article-layout__main > * + * {
    margin-top: var(--a-gap);
}

/* кнопка «Назад до блогу» в кінці текстового блоку */
.single-article .article-back {
    margin-top: 32px;
    text-align: center;
}

.single-article .article-back > .button {
    min-width: 288px;
}

/* типографіка тексту статті */

.single-article .article-card .text-block p,
.single-article .article-card .text-block ul li,
.single-article .article-card .text-block ol li {
    font-size: 14px;
    line-height: 1.6;
}

.single-article .article-card .text-block p {
    margin-bottom: 15px;
}

.single-article .article-card .text-block h2,
.single-article .article-card .text-block h3,
.single-article .article-card .text-block h4 {
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #000000;
    text-align: left;
}

.single-article .article-card .text-block h2 + *,
.single-article .article-card .text-block h3 + *,
.single-article .article-card .text-block h4 + * {
    margin-top: 0;
}

.single-article .article-card .text-block h2 {
    font-size: 26px;
}

.single-article .article-card .text-block h3 {
    font-size: 22px;
}

.single-article .article-card .text-block h4 {
    font-size: 18px;
}

.single-article .article-card .text-block * + h2,
.single-article .article-card .text-block * + h3,
.single-article .article-card .text-block * + h4 {
    margin-top: 32px;
}

.single-article .article-card .text-block > *:first-child {
    margin-top: 0;
}

.single-article .article-card .text-block ul,
.single-article .article-card .text-block ol {
    margin-bottom: 15px;
}

.single-article .article-card .text-block ul li,
.single-article .article-card .text-block ol li {
    margin-bottom: 10px;
}

.single-article .article-card .text-block ol li::marker {
    font-family: "MazzardH-Medium";
    color: var(--a-red);
}

.single-article .article-card .text-block img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--a-radius);
    margin: 24px 0;
}

.single-article .article-card .text-block .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* таблиці */

.single-article .article-card .text-block .table-scroll {
    margin: 24px 0;
    border: 1px solid var(--a-bg);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.single-article .article-card .text-block .table-scroll:focus-visible {
    outline: 2px solid var(--a-red);
    outline-offset: 2px;
}

.single-article .article-card .text-block table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    font-family: "MazzardH-Regular";
    font-size: 14px;
    line-height: 1.6;
    color: #000000;
}

.single-article .article-card .text-block table caption {
    caption-side: top;
    padding: 12px 16px 0 16px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--a-grey);
    text-align: left;
}

.single-article .article-card .text-block table th,
.single-article .article-card .text-block table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--a-bg);
}

.single-article .article-card .text-block table thead th {
    background: var(--a-bg);
    font-family: "MazzardH-Medium";
    font-weight: normal;
    vertical-align: bottom;
}

.single-article .article-card .text-block table tbody th {
    font-family: "MazzardH-Medium";
    font-weight: normal;
}

.single-article .article-card .text-block table > *:first-child > tr:first-child > th,
.single-article .article-card .text-block table > *:first-child > tr:first-child > td {
    border-top: none;
}

.single-article .article-card .text-block table p,
.single-article .article-card .text-block table ul,
.single-article .article-card .text-block table ol {
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

.single-article .article-card .text-block table p + p {
    margin-top: 8px;
}

/* цитата з підписом лікаря */

.single-article .article-card .text-block blockquote,
.single-article .article-card .text-block .article-quote {
    background: none;
    color: #000000;
    text-transform: none;
    padding: 16px 0;
    margin: 24px 0;
    border-top: 1px solid var(--a-bg);
    border-bottom: 1px solid var(--a-bg);
}

.single-article .article-card .text-block blockquote:before {
    display: none;
}

/* блок без цитати — сама лише картка лікаря */
.single-article .article-card .text-block .article-quote--author .article-quote-author {
    margin-top: 0;
}

.single-article .article-card .text-block blockquote,
.single-article .article-card .text-block blockquote > * {
    font-family: "MazzardH-MediumItalic", "MazzardH-Medium";
    font-size: 14px;
    line-height: 1.6;
    text-transform: none;
}

.single-article .article-card .text-block blockquote p:last-child {
    margin-bottom: 0;
}

.single-article .article-quote-author,
.single-article .article-card .text-block a.article-quote-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    text-decoration: none;
    color: #000000 !important;
}

.single-article .article-card .text-block a.article-quote-author:hover .article-quote-author__name {
    color: var(--a-red);
}

.single-article .article-quote-author__photo,
.single-article .article-card .text-block .article-quote-author__photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--a-bg);
}

/* специфічність вища за .text-block img, інакше фото отримує
   width:100% / height:auto / margin:24px 0 і перетворюється на овал */
.single-article .article-quote-author__photo img,
.single-article .article-card .text-block .article-quote-author__photo img {
    display: block;
    width: 72px;
    height: 72px;
    max-width: none;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.single-article .article-quote-author__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.single-article .article-quote-author__name {
    font-family: "MazzardH-Medium";
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.single-article .article-quote-author__post {
    font-family: "MazzardH-Regular";
    font-style: normal;
    font-size: 12px;
    line-height: 1.4;
}

/* ---------- Блок CTA ---------- */

.single-article .article-cta {
    background: #ffffff;
    border: 1px solid var(--a-red);
    border-left-width: 3px;
    border-radius: var(--a-radius);
    padding: 40px 80px;
    text-align: center;
}

.single-article .article-cta__title {
    font-family: "MazzardH-Medium";
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 32px 0;
}

.single-article .article-cta__box {
    background: var(--a-bg);
    border-radius: 12px;
    padding: 32px 48px;
}

.single-article .article-cta__text {
    font-family: "MazzardH-Medium";
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 16px 0;
}

.single-article .article-cta .button.red {
    display: inline-block;
    width: auto;
    min-width: 0;
    height: 43px;
    line-height: 43px;
    padding: 0 32px;
    border-radius: 32px;
    font-size: 12px;
    box-shadow: 0 8px 8px rgba(200, 0, 0, 0.24);
    box-sizing: border-box;
}

/* ---------- Рекомендовані статті ---------- */

.single-article .article-related {
    margin: var(--a-gap) 0;
}

/* ширина карток як у блоці «Блог» на головній */
.single-article .article-related .wrap {
    border-radius: var(--a-radius);
    padding: 64px 40px;
}

.single-article .article-related h2 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 32px 0;
}

.single-article .article-related h2 + * {
    margin-top: 0;
}

/* картки однакової висоти та однакові пропорції зображень, як у макеті */
.single-article .article-related .owl-stage {
    display: flex;
    align-items: stretch;
}

.single-article .article-related .owl-item {
    display: flex;
    float: none;
}

.single-article .article-related article.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

.single-article .article-related article.item .text-block {
    flex: 1 1 auto;
}

.single-article .article-related article.item .img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 218;
    object-fit: cover;
}

.single-article .article-related .owl-stage {
    margin-bottom: 32px;
}

.single-article .article-related .owl-dots {
    margin: 0 0 32px 0;
}

.single-article .article-related .owl-nav {
    display: none;
}

.single-article .article-related .button {
    min-width: 159px;
}

/* ================================ ≤1024 ================================= */

@media screen and (max-width: 1024px) {
    .single-article .article-layout__grid {
        display: block;
    }

    /* за макетом на мобільному липкої форми немає — її замінює блок CTA */
    .single-article .article-layout__aside {
        display: none;
    }

    .single-article .article-card {
        padding: 40px 20px;
    }

    .single-article .article-cta {
        padding: 40px 20px;
    }

    .single-article .article-cta__title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .single-article .article-cta__box {
        padding: 24px 16px;
    }

    .single-article .article-cta__text {
        font-size: 16px;
    }

    .single-article .article-cta .button.red {
        display: block;
        width: 100%;
    }

    .single-article .article-back > .button {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .single-article .top-block .wrap {
        padding: 16px 20px 40px 20px;
    }

    .single-article .top-block .wrap h1 {
        font-size: 26px;
        margin-top: 24px;
    }

    .single-article .top-block .wrap .tags a {
        font-size: 12px;
        line-height: 1.4;
    }

    .single-article .article-author__card {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
        gap: 24px;
    }

    .single-article .article-author__person {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .single-article .article-author__photo {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        margin: 0 auto;
    }

    .single-article .article-author__info {
        align-items: center;
        width: 100%;
    }

    .single-article .article-author__name {
        font-size: 16px;
    }

    .single-article .article-author__dates {
        flex: 1 1 auto;
        width: 100%;
    }

    .single-article .article-card .text-block h2 {
        font-size: 22px;
    }

    .single-article .article-card .text-block h3 {
        font-size: 18px;
    }

    .single-article .article-card .text-block h4 {
        font-size: 16px;
    }

    .single-article .article-card .text-block img {
        margin: 24px 0;
    }

    .single-article .article-card .text-block table {
        min-width: 520px;
    }

    .single-article .article-card .text-block table th,
    .single-article .article-card .text-block table td {
        padding: 10px 12px;
    }

    .single-article .article-quote-author__name {
        font-size: 16px;
    }

    .single-article .article-related .wrap {
        padding: 40px 20px;
    }

    .single-article .article-related h2 {
        font-size: 26px;
        margin-bottom: 24px;
    }

    .single-article .article-related .owl-stage {
        margin-bottom: 24px;
    }

    .single-article .article-related .owl-dots {
        margin: 0 0 24px 0;
    }

    .single-article .article-related .button {
        display: block;
        width: 100%;
        min-width: 0;
    }
}

/* ================================= ≤759 ================================= */

@media screen and (max-width: 759px) {
    .single-article .wrapper {
        padding: 0 16px;
    }

    .single-article .breadcrumbs-bar .breadcrumbs {
        padding: 16px 0 0 0;
    }

    .single-article .article-author__dates p {
        font-size: 13px;
    }
}