/* =========================================================
   LOCO Blog Module — v2.0.0 (rebuild по структуре)
   Desktop 1600 / Tablet 728 / Mobile 350
   ========================================================= */

:root{
    --ltk-blue-500: #1F65E9;
    --ltk-blue-600: #1E56C3;
    --ltk-blue-300: #6683B6;
    --ltk-blue-100: #AFC5EB;
    --ltk-blue-chip: #6687BE;
    --ltk-bg-alt: #F5F9FE;
    --ltk-neutral-600: #415170;
    --ltk-neutral-900: #1E1E1E;
    --ltk-white: #FFFFFF;
    --ltk-card-bg: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%);
    --ltk-card-bg-hover: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #B4D5FA 0%, #FEFDFF 79%, #DAE7F8 100%);
    --ltk-card-shadow: 2px 0 9px -2px rgba(30, 86, 195, 0.60);
    --ltk-card-shadow-hover: 4px 8px 20px -2px rgba(30, 86, 195, 0.40);
    --ltk-cta-bg: linear-gradient(90deg, #034DCF 0%, #3074F9 100%);
    --ltk-font: "Gilroy","Inter",system-ui,-apple-system,sans-serif;
    --ltk-header-h: 88px;
}

.loco-blog, .loco-blog *,
.loco-post, .loco-post *,
.loco-blog *::before, .loco-blog *::after,
.loco-post *::before, .loco-post *::after { box-sizing: border-box; }

/* =========================================================
   BLOG PAGE — [loco_blog]
   ========================================================= */

.loco-blog {
    max-width: 1600px;
    margin: 0 auto;
    
    font-family: var(--ltk-font) !important;
    color: var(--ltk-neutral-900) !important;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- Head: H1 "Блог" + чипы --- */
.loco-blog__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loco-blog__title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

.loco-blog__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.loco-blog__chip {
    padding: 4px 8px;
    background: var(--ltk-white);
    border-radius: 8px;
    outline: 1px solid var(--ltk-blue-100);
    outline-offset: -1px;
    color: var(--ltk-blue-chip) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
    transition: background .18s ease, color .18s ease, outline-color .18s ease, transform .18s ease;
    white-space: nowrap;
}
.loco-blog__chip:hover {
    background: var(--ltk-bg-alt);
    outline-color: var(--ltk-blue-500);
    color: var(--ltk-blue-600) !important;
    transform: translateY(-1px);
}
.loco-blog__chip.is-active:hover {
    background: var(--ltk-blue-600);
    color: var(--ltk-white) !important;
}
.loco-blog__chip.is-active {
    background: var(--ltk-blue-500);
    color: var(--ltk-white) !important;
    outline-color: var(--ltk-blue-500);
}
.loco-blog__chip.is-hidden { display: none !important; }

/* --- Grid: 3 колонки --- */
.loco-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
}

/* Featured скрывается при активном фильтре */
/* v1.9.7: featured всегда видим если есть — render решает когда выводить */

/* =========================================================
   FEATURED CARD (главная большая)
   Desktop: 1600×432, слева картинка 792×432, справа тело
   Tablet:  728×432, слева картинка 356×432, справа meta+text+btn
   Mobile:  как обычная карточка
   ========================================================= */
/* v1.9.9: высокая специфичность — побеждает .loco-blog-card { flex-direction: column } который идет ниже */
.loco-blog-card.loco-blog-card--featured {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: var(--ltk-card-bg);
    box-shadow: var(--ltk-card-shadow);
    border-radius: 32px;
    height: 432px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: background .3s ease, transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .loco-blog-card.loco-blog-card--featured:hover {
        background: var(--ltk-card-bg-hover);
        transform: translateY(-4px);
        box-shadow: var(--ltk-card-shadow-hover);
    }
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__image {
    flex: 1 1 0 !important;
    align-self: stretch !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    height: auto !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: var(--ltk-blue-100) !important;
    min-width: 0 !important;
    isolation: isolate;
    z-index: 1;
}
/* v1.9.8: fallback — если Elementor Kit ставит background на .elementor-widget-container, не перебиваем наш image */
.elementor-widget-shortcode .loco-blog-card.loco-blog-card--featured .loco-blog-card__image,
.elementor-shortcode .loco-blog-card.loco-blog-card--featured .loco-blog-card__image {
    background-image: inherit;
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__body {
    flex: 1 1 0;
    padding: 40px 24px 40px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 8px;
    min-width: 0;
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__excerpt {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-300) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.loco-blog-card.loco-blog-card--featured .loco-blog-card__excerpt a {
    color: inherit !important;
    text-decoration: underline !important;
}

.loco-blog-card.loco-blog-card--featured .loco-blog-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* =========================================================
   REGULAR CARD (обычная 512×—)
   ========================================================= */
.loco-blog-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    background: var(--ltk-card-bg);
    box-shadow: var(--ltk-card-shadow);
    border-radius: 32px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: background .3s ease, transform .25s ease, box-shadow .25s ease;
    height: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .loco-blog-card:hover {
        background: var(--ltk-card-bg-hover);
        transform: translateY(-4px);
        box-shadow: var(--ltk-card-shadow-hover);
    }
}

.loco-blog-card__image {
    position: relative;
    height: 296px;
    overflow: hidden;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    background-color: var(--ltk-blue-100);
    flex-shrink: 0;
}

/* v1.9.8: real <img> поверх background — гарантированно виден, background как fallback */
.loco-blog-card__image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}
.loco-blog-card__badge { z-index: 2; }


.loco-blog-card__badge {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 4px 8px;
    background: var(--ltk-white);
    border-radius: 8px;
    outline: 1px solid var(--ltk-blue-100);
    outline-offset: -1px;
    color: var(--ltk-blue-chip) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.loco-blog-card__body {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    min-width: 0;
}

.loco-blog-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.loco-blog-card__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loco-blog-card__excerpt {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-300) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.loco-blog-card__excerpt a {
    color: inherit !important;
    text-decoration: underline !important;
}

.loco-blog-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.loco-blog-card__meta {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.loco-blog-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.loco-blog-card__meta-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.loco-blog-card__meta-item-value {
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-blog-card__meta-item-label {
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* v1.5.0: базові стилі .loco-blog-card__btn (outlined blue + radial hover)
   тепер у shared.css як legacy-alias. Тут — тільки layout. */
.loco-blog-card__btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.loco-blog-card__btn svg { flex-shrink: 0; }

/* =========================================================
   CTA slot (Elementor template) внутри grid
   ========================================================= */
.loco-blog-card--cta {
    background: transparent;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: stretch;
    height: 100%;
}
.loco-blog-card--cta > * {
    width: 100%;
    height: 100%;
}
.loco-blog-card--cta:hover { transform: none; box-shadow: none; }

/* =========================================================
   No results
   ========================================================= */
.loco-blog__empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    background: var(--ltk-bg-alt);
    border-radius: 32px;
    display: none;
}
.loco-blog__empty.is-visible { display: block; }
.loco-blog__empty-title {
    margin: 0 0 12px !important;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}
.loco-blog__empty-text {
    margin: 0 !important;
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* =========================================================
   Load more button
   ========================================================= */
.loco-blog__more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.loco-blog__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 12px 24px;
    gap: 16px;
    border-radius: 16px;
    background: transparent;
    outline: 1px solid var(--ltk-blue-500);
    outline-offset: -1px;
    color: #303030 !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
    transition: background .18s ease, color .18s ease;
}

.loco-blog__more[hidden] { display: none !important; }
.loco-blog__more.is-loading { opacity: .6; pointer-events: none; }

/* =========================================================
   BLOG — Tablet ≤1024
   ========================================================= */
@media (max-width: 1024px) {
    .loco-blog { gap: 32px; padding: 0 ; }
    .loco-blog__title { font-size: 40px !important; }

    .loco-blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Featured планшет: 2 колонки внутри, meta наверху, text посередине, кнопка полная снизу */
    .loco-blog-card.loco-blog-card--featured {
        grid-column: 1 / -1;
        height: 432px;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__image {
        height: 432px;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__body {
        padding: 24px 24px 24px 16px;
        gap: 16px;
        justify-content: flex-start;
    }
    /* Порядок: meta → text → btn */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot {
        order: 1;
        justify-content: flex-start;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__text {
        order: 2;
        flex: 1 1 0;
        justify-content: start;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__btn {
        order: 3;
        width: 100%;
        align-self: stretch;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__excerpt {
        -webkit-line-clamp: 5;
    }
    /* На планшете кнопка НЕ должна быть в meta-строке */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot .loco-blog-card__btn { display: none; }

    .loco-blog-card__image { height: 200px; }
    .loco-blog-card--cta { grid-column: 1; }
}

/* =========================================================
   BLOG — Mobile ≤600
   ========================================================= */
@media (max-width: 600px) {
    
    .loco-blog { gap: 24px; padding: 0 0; }
    .loco-blog__title { font-size: 32px !important; }
    .loco-blog__chips { gap: 8px; }

    .loco-blog__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* На моб featured = обычная карточка */
    .loco-blog-card.loco-blog-card--featured {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__image {
        height: 200px;
        width: 100%;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__body {
        padding: 0 24px 24px;
        gap: 24px;
        justify-content: flex-start;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__text { order: 0; }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot { order: 0; justify-content: space-between; }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot .loco-blog-card__btn { display: none; }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__btn { order: 0; width: 100%; align-self: stretch; }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__excerpt { -webkit-line-clamp: 4; }

    .loco-blog-card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .loco-blog-card__btn { width: 100%; }
    .loco-blog-card--cta { grid-column: 1 / -1; }
    
    
    
        /* v1.9.11: mobile featured — как обычная карточка блога */
    .loco-blog-card.loco-blog-card--featured {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
        padding: 0 !important;
        padding-bottom: 24px !important;
        background: var(--ltk-card-bg) !important;
        box-shadow: var(--ltk-card-shadow) !important;
        border-radius: 32px !important;
        overflow: hidden !important;
    }

    /* Картинка — как в regular: 296px, полная ширина, скругление 24 */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__image {
        flex: 0 0 auto !important;
        align-self: auto !important;
        width: 100% !important;
        height: 200px !important;
        border-radius: 24px !important;
        margin: 0 !important;
    }

    /* Body — как в regular: padding 0 24, gap 24, без flex-between */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__body {
        padding: 0 24px !important;
        gap: 24px !important;
        justify-content: flex-start !important;
        flex: 1 !important;
    }

    /* Text — заголовок с line-clamp 2 как в regular */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__text {
        justify-content: flex-start !important;
        flex: 1 !important;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__excerpt {
        -webkit-line-clamp: 4 !important;
    }

    /* Foot — колонка (meta сверху, кнопка снизу на всю ширину) как в regular mobile */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        justify-content: flex-start !important;
    }
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__btn {
        display: inline-flex !important;
        width: 100% !important;
        align-self: stretch !important;
        order: 0 !important;
    }
    /* Скрытый дубликат кнопки из tablet CSS — на всякий случай */
    .loco-blog-card.loco-blog-card--featured .loco-blog-card__foot .loco-blog-card__btn {
        display: inline-flex !important;
    }

}

/* =========================================================
   POST PAGE — [loco_post]
   Порядок: Hero → BODY (sidebar+main+share) → RELATED (full-width)
   ========================================================= */

.loco-post {
    max-width: 1600px;
    margin: 0 auto;
    
    font-family: var(--ltk-font) !important;
    color: var(--ltk-neutral-900) !important;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --- Hero 1600×710 --- */
.loco-post__hero {
    position: relative;
    width: 100%;
    min-height: 710px;
    padding: 32px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    background-color: var(--ltk-blue-500);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}
.loco-post__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 89.58% 316.74% at 50% 10.42%, rgba(255,255,255,0) 0%, rgba(30,86,195,0.80) 100%);
    z-index: 0;
}
.loco-post__hero > * { position: relative; z-index: 1; }
/* v1.9.10: hero image — скрыта на desktop и tablet, видна только на mobile */
.loco-post__hero-image { display: none; }

.loco-post__hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    height: 73px;
    padding: 4px 32px;
    background: var(--ltk-white);
    border-radius: 8px;
    flex-wrap: wrap;
}
.loco-post__hero-meta-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}
.loco-post__hero-meta-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.loco-post__hero-meta-item-value {
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-post__hero-meta-item-label {
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.loco-post__hero-title {
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch;
    color: var(--ltk-white) !important;
    font-family: var(--ltk-font) !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

/* --- BODY: sidebar(376) + main(784) --- */
.loco-post__body {
    display: grid;
    grid-template-columns: 376px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    max-width: 100%;    margin-bottom: 180px;
    min-width: 0;
}
.loco-post__services{
     margin-bottom: 180px!important;
}
.loco-post__body > * { min-width: 0; }

.loco-post__aside {
    position: sticky;
    top: calc(var(--ltk-header-h) + 8px);
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
    width: 376px;
}

/* --- TOC --- */
.loco-post-toc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loco-post-toc__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}
.loco-post-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.loco-post-toc__item {
    display: flex;
    gap: 8px;
    list-style: none !important;
    align-items: baseline !important;
}
.loco-post-toc__item::before,
.loco-post-toc__item::marker {
    content: none !important;
    display: none !important;
}
.loco-post-toc__bullet {
    display: none !important;
    width: 6px;
    align-items: flex-start;
    padding-top: 6px;
    flex: 0 0 6px;
    transition: opacity .18s ease;
}
.loco-post-toc__bullet svg { width: 6px; height: 15px !important; display: block; }
.loco-post-toc__link {
    color: var(--ltk-blue-chip) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .18s ease, font-weight .18s ease;
    /* v1.5.0: перенос довгих заголовків, вирівнювання зліва */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}
.loco-post-toc__link:hover { color: var(--ltk-blue-600) !important; }
.loco-post-toc__item.is-active .loco-post-toc__bullet {
    display: inline-flex !important;
    opacity: 1;
}
.loco-post-toc__item.is-active .loco-post-toc__link {
    color: var(--ltk-blue-600) !important;
    font-weight: 700 !important;
}
.loco-post-toc__head { display: none; }

/* --- Sidebar CTA (синий блок) --- */
.loco-post-cta {
    width: 100%;
    max-width: 376px;
    padding: 24px;
    background: var(--ltk-cta-bg);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}
.loco-post-cta__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.loco-post-cta__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-white) !important;
    font-family: var(--ltk-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}
.loco-post-cta__text {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-white) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
/* v1.5.0: базові стилі .loco-post-cta__btn (dark, hover темніший — бо на синьому фоні)
   у shared.css. Тут — тільки layout. */
.loco-post-cta__btn {
    align-self: flex-start;
}

/* --- Main content --- */
.loco-post__main {
    max-width: 784px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}
.loco-post__content {
    display: flex;
    flex-direction: column;
    gap: 32px; /* v1.9.10 */
}
/* v1.9.10: аккуратные отступы между тегами внутри контента */
.loco-post__content > h2 { margin-top: 24px !important; }
.loco-post__content > h2:first-child { margin-top: 0 !important; }
.loco-post__content > h3 { margin-top: 16px !important; }
.loco-post__content > p { margin-top: 8px !important; }
.loco-post__content > ul,
.loco-post__content > ol { margin-top: 12px !important; }
.loco-post__content > img,
.loco-post__content > figure { margin-top: 24px !important; }
.loco-post__content > *:first-child { margin-top: 0 !important; }
.loco-post__content > p:first-of-type {
    margin: 0 !important;
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-post__content h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    scroll-margin-top: 120px;
}
.loco-post__content h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.loco-post__content p {
    margin: 0 !important;
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-post__content a,
.loco-post__content a:visited {
    color: var(--ltk-blue-600) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--ltk-blue-500) !important;
    text-underline-offset: 3px !important;
    font-weight: 400 !important;
    transition: color .18s ease, text-decoration-color .18s ease;
}
.loco-post__content a:hover,
.loco-post__content a:focus,
.loco-post__content a:active {
    color: var(--ltk-blue-500) !important;
    text-decoration-color: var(--ltk-blue-500) !important;
    background: transparent !important;
}
.loco-post__content strong {
    color: var(--ltk-blue-500) !important;
    font-weight: 700 !important;
}
.loco-post__content ul, .loco-post__content ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loco-post__content li {
    position: relative;
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding-left: 14px;
}
.loco-post__content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ltk-blue-600);
}
.loco-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
}
.loco-post__section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.loco-post__section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Share (внутри main, 784px) --- */
.loco-post__share {
    padding: 40px;
    background: var(--ltk-card-bg);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loco-post__share-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}
.loco-post__share-text {
    margin: 0 !important;
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-post__share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.loco-post__share-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    outline: 1px solid var(--ltk-blue-100);
    outline-offset: -1px;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease, outline-color .18s ease, transform .18s ease;
    color: var(--ltk-neutral-900);
    text-decoration: none !important;
    position: relative;
}
.loco-post__share-btn:hover {
    outline-color: var(--ltk-blue-500);
    background: var(--ltk-bg-alt);
    color: var(--ltk-blue-500);
    transform: translateY(-2px);
}
.loco-post__share-btn svg [fill]:not([fill="none"]) { fill: currentColor; }
.loco-post__share-btn svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.loco-post__share-btn svg { width: 24px; height: 24px; display: block; }
.loco-post__share-btn--copy.is-copied {
    outline-color: var(--ltk-blue-500);
    background: var(--ltk-blue-500);
}
.loco-post__share-btn--copy.is-copied path { stroke: var(--ltk-white); }
.loco-post__share-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: var(--ltk-neutral-900);
    color: var(--ltk-white);
    font-size: 12px;
    font-family: var(--ltk-font);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.loco-post__share-btn--copy.is-copied .loco-post__share-tooltip { opacity: 1; }

/* =========================================================
   SERVICES block (перед related) — рендерится через [loco_services]
   ========================================================= */
.loco-post__services {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.loco-post__services-note {
    padding: 32px;
    background: var(--ltk-bg-alt);
    border: 2px dashed var(--ltk-blue-100);
    border-radius: 24px;
    color: var(--ltk-neutral-600);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================================
   RELATED — отдельная секция, full-width, ПОД BODY
   ========================================================= */
.loco-post__related {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.loco-post__related-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}
.loco-post__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* =========================================================
   POST — Tablet ≤1024
   ========================================================= */
   
   
 
@media(min-width:600px) and (max-width: 1024px) {  .loco-blog-card--featured .loco-blog-card__btn{     position: absolute;     bottom: 24px;     width: 170px!important; display:flex!important;}
  .loco-blog-card--featured .loco-blog-card__body{
    position: relative;
}
   }
@media (max-width: 1024px) {
    .loco-post { gap: 32px; padding: 0 0!important; }

    .loco-post__hero { min-height: 710px; padding: 32px; }
    .loco-post__hero-title { font-size: 40px !important; }
    .loco-post__hero-meta {
        gap: 24px;
        padding: 8px 20px;
        height: auto;
    }
.loco-post__services{
    
            margin-bottom: 120px!important;
}
    /* Sidebar над контентом, полная ширина, аккордеон */
    .loco-post__body {
        grid-template-columns: 1fr;
        gap: 32px;
            margin-bottom: 120px!important;
    }
    .loco-post__aside {
        position: static;
        width: 100%;
        top: auto;
        max-width: 100%;
    }
    .loco-post-toc {
        background: var(--ltk-white);
        border-radius: 24px;
        outline: 1px solid var(--ltk-blue-100);
        outline-offset: -1px;
        padding: 16px 24px;
        overflow: hidden;
        gap: 0; /* v1.9.10: закрыт — без лишнего отступа */
        transition: gap .2s ease;
    }
    .loco-post-toc.is-open { gap: 16px; }
    .loco-post-toc__title { display: none; }
    .loco-post-toc__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: transparent;
        border: 0;
        cursor: pointer;
        width: 100%;
        padding: 0;
        text-align: left;
    }
    .loco-post-toc__head-title {
        color: var(--ltk-blue-500) !important;
        font-family: var(--ltk-font) !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        flex: 1;
    }
    .loco-post-toc__chev {
        display: inline-flex;
        transition: transform .28s ease;
    }
    .loco-post-toc.is-open .loco-post-toc__chev { transform: rotate(180deg); }
    .loco-post-toc__list {
        max-height: 0;
        overflow: hidden;
        gap: 0;
        transition: max-height .3s ease, padding-top .3s ease;
        padding-top: 0;
    }
    .loco-post-toc.is-open .loco-post-toc__list {
        max-height: 800px;
        padding-top: 8px;
        gap: 20px;
    }
    /* Sidebar CTA скрываем в потоке на планшете и моб (будет как fixed) */
    .loco-post__aside .loco-post-cta { display: none; }

    .loco-post__main { max-width: 100%; }
    .loco-post__main, .loco-post__content { gap: 20px; }

    .loco-post__related-title { font-size: 40px !important; }
    .loco-post__related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* =========================================================
   POST — Mobile ≤600
   ========================================================= */
@media (max-width: 600px) {
        .loco-post__body, .loco-post__services {
        margin-bottom: 80px!important;}
    .loco-post { gap: 24px; padding: 0 0 !important; }

    /* v1.9.10: mobile hero — по макету: светлый фон, титл сверху, meta pill, картинка внизу */
    .loco-post__hero {
        min-height: auto;
        padding: 0;
        background: transparent !important;
        background-image: none !important;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 20px;
        overflow: visible;
    }
    .loco-post__hero::before { display: none; }
    .loco-post__hero-title {
        order: 1;
        color: var(--ltk-neutral-900) !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        text-align: left;
    }
    .loco-post__hero-meta {
        order: 2;
        align-self: stretch;
        display: flex;
        flex-wrap: wrap;
        gap: 16px 40px;
        padding: 0;
        height: auto;
        justify-content: flex-start;
    }
    /* Картинка mobile — отдельный блок внизу (через img.loco-post__hero-image) */
    .loco-post__hero-image {
        order: 3;
        display: block;
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 24px!important;
    }

    .loco-post-toc__head-title { font-size: 20px !important; }

    .loco-post__main, .loco-post__content { gap: 20px; }
    .loco-post__share { padding: 24px; }
    .loco-post__share-list { gap: 12px; }

    .loco-post__related-title { font-size: 28px !important; }
    .loco-post__related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.cky-btn-revisit-wrapper{
    
    z-index: 10!important;
}
/* =========================================================
   MOBILE FIXED CTA (закреплён снизу + крестик)
   ========================================================= */
.loco-post-cta-mobile {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 90;
    padding: 14px 16px;
    padding-right: 16px;
    background: var(--ltk-cta-bg);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(3,42,120,.35);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateY(120%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.loco-post-cta-mobile.is-visible {
    display: flex;
    transform: translateY(0);
}
.loco-post-cta-mobile.is-hidden-scroll {
    transform: translateY(calc(100% + 20px));
}
.loco-post-cta-mobile__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.loco-post-cta-mobile__title {
    margin: 0 !important;
    color: var(--ltk-white) !important;
    font-family: var(--ltk-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.loco-post-cta-mobile__text {
    margin: 0 !important;
    color: rgba(255,255,255,.85) !important;
    font-family: var(--ltk-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.loco-post-cta-mobile__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 8px 14px;
    background: var(--ltk-neutral-900);
    color: var(--ltk-white) !important;
    font-family: var(--ltk-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.loco-post-cta-mobile__close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ltk-neutral-900);
    border: 2px solid var(--ltk-white);
    color: var(--ltk-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.loco-post-cta-mobile__close svg { width: 12px; height: 12px; }

@media (min-width: 1025px) {
    .loco-post-cta-mobile { display: none !important; }
}
.loco-blog__chip:focus,
.loco-blog__chip:focus-visible {
    outline: 2px solid var(--ltk-blue-500);
    outline-offset: 2px;
}
.loco-blog__chip.is-active:focus,
.loco-blog__chip.is-active:hover {
    background: var(--ltk-blue-600) !important;
    color: var(--ltk-white) !important;
    outline-color: var(--ltk-blue-600);
}