/*
 * Blog detail — modern layer
 * Палитра: navy #013f54 / turquoise #00bea2
 * Подключается после базовых style.css и style_ld.css.
 */

.bl_detail-page {
    --bl-navy: #013f54;
    --bl-navy-deep: #012f40;
    --bl-navy-soft: #075d76;
    --bl-turquoise: #00bea2;
    --bl-turquoise-dark: #009d87;
    --bl-turquoise-soft: #e7fbf7;
    --bl-paper: #ffffff;
    --bl-surface: #f4f8fa;
    --bl-ink: #10243b;
    --bl-muted: #607186;
    --bl-line: #dce6eb;
    --bl-shadow: 0 16px 44px rgba(1, 63, 84, .10);
    --bl-radius-lg: 26px;
    --bl-radius-md: 18px;
    --bl-radius-sm: 12px;
    color: var(--bl-ink);
    background: var(--bl-surface);
    overflow: clip;
}

.bl_detail-page *,
.bl_detail-page *::before,
.bl_detail-page *::after {
    box-sizing: border-box;
}

.bl_detail-page a,
.bl_detail-page button {
    -webkit-tap-highlight-color: transparent;
}

.bl_detail-page :focus-visible {
    outline: 3px solid rgba(0, 190, 162, .55);
    outline-offset: 3px;
}

.bl_detail-page .bl_container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
    padding: 0;
}

/* Reading progress --------------------------------------------------------- */
.bl_reading-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 9997;
    height: 4px;
    background: rgba(255,255,255,.16);
    pointer-events: none;
}

.bl_reading-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--bl-turquoise), #63ebda);
    box-shadow: 0 0 18px rgba(0, 190, 162, .7);
    transition: width .08s linear;
}

/* Hero --------------------------------------------------------------------- */
.bl_detail-page .bl_detail-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(54px, 8vw, 110px) 0 clamp(48px, 7vw, 92px);
    min-height: 0;
    background: var(--bl-navy);
    overflow: hidden;
}

.bl_detail-page .bl_detail-hero-bg,
.bl_detail-page .bl_detail-hero-gradient {
    position: absolute;
    inset: 0;
}

.bl_detail-page .bl_detail-hero-gradient {
    background:
        radial-gradient(circle at 78% 12%, rgba(0, 190, 162, .24), transparent 26rem),
        radial-gradient(circle at 10% 100%, rgba(59, 151, 184, .22), transparent 32rem),
        linear-gradient(135deg, var(--bl-navy-deep), var(--bl-navy) 48%, #07536a);
}

.bl_detail-page .bl_detail-hero-bg::after {
    content: '';
    position: absolute;
    width: 44rem;
    height: 44rem;
    right: -16rem;
    top: -24rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    box-shadow: 0 0 0 6rem rgba(255,255,255,.025), 0 0 0 12rem rgba(255,255,255,.018);
}

.bl_detail-page .bl_detail-hero-glow {
    filter: blur(18px);
    opacity: .9;
}

.bl_detail-page .bl_detail-hero-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    align-items: center;
    gap: clamp(30px, 6vw, 86px);
}

.bl_detail-page .bl_back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-bottom: 28px;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.bl_detail-page .bl_back-link:hover {
    color: #fff;
    transform: translateX(-3px);
}

.bl_detail-page .bl_back-link svg { width: 18px; height: 18px; }

.bl_detail-page .bl_detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.bl_detail-page .bl_detail-hero-tag,
.bl_detail-page .bl_detail-date,
.bl_detail-page .bl_detail-readtime {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.bl_detail-page .bl_detail-hero-tag { color: #85f4e7; }
.bl_detail-page .bl_detail-hero-tag-dot { width: 6px; height: 6px; background: var(--bl-turquoise); box-shadow: 0 0 0 4px rgba(0, 190, 162, .15); }
.bl_detail-page .bl_detail-date svg,
.bl_detail-page .bl_detail-readtime svg { width: 14px; height: 14px; }

.bl_detail-page .bl_detail-title {
    max-width: 850px;
    margin: 0;
    color: #fff;
    /* H1 is intentionally the largest heading: never wider than 46px. */
    font-size: clamp(34px, 3.25vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.038em;
    text-wrap: balance;
}

.bl_detail-page .bl_detail-hero-desc {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.77);
    font-size: clamp(17px, 1.65vw, 21px);
    line-height: 1.62;
}

.bl_detail-page .bl_detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 32px;
}

.bl_detail-page .bl_detail-hero-btn,
.bl_detail-page .bl_sidebar-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--bl-turquoise);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0, 190, 162, .22);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.bl_detail-page .bl_detail-hero-btn:hover,
.bl_detail-page .bl_sidebar-cta-btn:hover {
    background: #11d1b6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 190, 162, .30);
}

.bl_detail-page .bl_detail-hero-btn svg { width: 17px; height: 17px; }

.bl_detail-page .bl_detail-hero-share {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.bl_detail-page .bl_detail-hero-share-label {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-right: 2px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Share controls match the height of the neighbouring primary CTA. */
.bl_detail-page .bl_detail-hero-share-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.bl_detail-page .bl_detail-hero-share-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.30);
    transform: translateY(-2px);
}

.bl_detail-page .bl_social-icon { display:block; width: 20px; height: 20px; }
.bl_detail-page .bl_social-mark {
    display: inline-block;
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.07em;
    text-transform: uppercase;
}

.bl_detail-page .bl_detail-hero-right { position: relative; min-width: 0; }
.bl_detail-page .bl_detail-hero-right::before {
    content: '';
    position: absolute;
    inset: 18px -16px -18px 16px;
    border: 1px solid rgba(102, 240, 223, .34);
    border-radius: 30px;
    transform: rotate(5deg);
    pointer-events: none;
}

.bl_detail-page .bl_detail-hero-img-card {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / .78;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 26px;
    background: linear-gradient(135deg, #0c6981, #023a4f);
    box-shadow: 0 26px 60px rgba(0,0,0,.28);
}

.bl_detail-page .bl_detail-hero-img-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,.13), transparent 44%);
    pointer-events: none;
}

.bl_detail-page .bl_detail-hero-img-el { width: 100%; height: 100%; object-fit: cover; }
.bl_detail-page .bl_detail-hero-img-card--animation > * { position: relative; z-index: 1; }

/* Main layout -------------------------------------------------------------- */
.bl_detail-page .bl_detail-content {
    position: relative;
    padding: clamp(42px, 7vw, 88px) 0 clamp(58px, 8vw, 108px);
    background: linear-gradient(180deg, #f2f7f8 0, #fff 22rem, #f6fafb 100%);
}

.bl_detail-page .bl_detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: clamp(20px, 5vw, 40px);
}

.bl_detail-page .bl_detail-article {
    min-width: 0;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid rgba(220,230,235,.86);
    border-radius: var(--bl-radius-lg);
    background: var(--bl-paper);
    box-shadow: var(--bl-shadow);
}

.bl_detail-page .bl_detail-text {
    max-width: 770px;
    margin-inline: auto;
    color: #33465c;
    font-size: clamp(16px, 1.28vw, 18px);
    line-height: 1.78;
}

.bl_detail-page .bl_detail-text > :first-child { margin-top: 0; }
.bl_detail-page .bl_detail-text > :last-child { margin-bottom: 0; }
.bl_detail-page .bl_detail-text p { margin: 0 0 1.35em; line-height: 1.5;}
.bl_detail-page .bl_detail-text strong { color: var(--bl-ink); font-weight: 750; }
.bl_detail-page .bl_detail-text a { color: var(--bl-turquoise-dark); font-weight: 700; text-decoration-thickness: 1.5px; }

.bl_detail-page .bl_detail-text h2,
.bl_detail-page .bl_detail-text .art_section-title {
    margin: 20px 0 15px;
    color: var(--bl-ink);
    font-size: clamp(28px, 3.25vw, 43px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.bl_detail-page .bl_detail-text h2 span,
.bl_detail-page .bl_detail-text .art_section-title span { color: var(--bl-turquoise); }

.bl_detail-page .bl_detail-text h3 {
    margin: 1.75em 0 .65em;
    color: var(--bl-ink);
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.024em;
}

.bl_detail-page .bl_detail-text h4 { color: var(--bl-ink); font-weight: 800; }
.bl_detail-page .bl_detail-text ul,
.bl_detail-page .bl_detail-text ol { padding-left: 1.35em; }
.bl_detail-page .bl_detail-text li::marker { color: var(--bl-turquoise); font-weight: 800; }
.bl_detail-page .bl_detail-text img { border-radius: 18px; box-shadow: 0 18px 40px rgba(1, 63, 84, .12); }

/* Article primitive styles ------------------------------------------------- */
.bl_detail-page .art_container--narrow { max-width: none; margin: 0; padding: 0; }
.bl_detail-page .art_section-sub { max-width: 660px; margin: 0 0 30px; color: var(--bl-muted); font-size: 16px; line-height: 1.65; }
.bl_detail-page .art_lead { margin: 0 0 54px; }
.bl_detail-page .art_lead-inner {
    position: relative;
    padding: 26px 28px 26px 30px;
    border-left: 4px solid var(--bl-turquoise);
    border-radius: 0 18px 18px 0;
    background: linear-gradient(135deg, #ecfffb, #f7fbfc);
}
.bl_detail-page .art_lead-inner p { margin: 0; color: #1e4051; font-size: clamp(18px, 1.65vw, 21px); line-height: 1.6; }

.bl_detail-page .art_lead-law,
.bl_detail-page .art_diff-note {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(0, 190, 162, .22);
    border-radius: 16px;
    background: #f5fffd;
}
.bl_detail-page .art_lead-law-icon,
.bl_detail-page .art_diff-note > svg { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--bl-turquoise-dark); background: rgba(0,190,162,.13); }
.bl_detail-page .art_lead-law svg,
.bl_detail-page .art_diff-note > svg { width: 20px; height: 20px; }
.bl_detail-page .art_lead-law p,
.bl_detail-page .art_diff-note p { margin: 0; color: #3f5a68; font-size: 16px; line-height: 1.5; }

.bl_detail-page .art_diff,
.bl_detail-page .art_how,
.bl_detail-page .art_features,
.bl_detail-page .art_example,
.bl_detail-page .art_changes,
.bl_detail-page .art_faq,
.bl_detail-page .art_summary {
    margin: 68px 0;
    padding: 0;
    background: transparent;
}

.bl_detail-page .art_diff-grid,
.bl_detail-page .art_features-grid,
.bl_detail-page .art_summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bl_detail-page .art_diff-card,
.bl_detail-page .art_feature-card,
.bl_detail-page .art_summary-card {
    position: relative;
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--bl-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(1,63,84,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bl_detail-page .art_diff-card:hover,
.bl_detail-page .art_feature-card:hover,
.bl_detail-page .art_summary-card:hover {
    border-color: rgba(0,190,162,.55);
    box-shadow: 0 18px 36px rgba(1,63,84,.10);
    transform: translateY(-4px);
}

.bl_detail-page .art_diff-card--accent { border-color: rgba(0,190,162,.45); background: linear-gradient(145deg,#e7fbf7,#fff); }
.bl_detail-page .art_diff-label,
.bl_detail-page .art_change-tag,
.bl_detail-page .art_example-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--bl-turquoise-dark);
    background: var(--bl-turquoise-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.bl_detail-page .art_diff-card h3,
.bl_detail-page .art_feature-card h3,
.bl_detail-page .art_summary-card h4 { margin: 12px 0 8px; color: var(--bl-ink); font-size: 20px; line-height: 1.28; }
.bl_detail-page .art_diff-card p,
.bl_detail-page .art_feature-card p,
.bl_detail-page .art_summary-card p { margin: 0; color: var(--bl-muted); font-size: 16px; line-height: 1.5; }

.art_diff-card h3 {min-height: 52px;}

/* Priority steps ----------------------------------------------------------- */
.bl_detail-page .art_how-steps { position: relative; display: grid; gap: 16px; }
.bl_detail-page .art_how-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--bl-line);
    border-radius: 18px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bl_detail-page .art_how-step:hover { border-color: rgba(0,190,162,.5); box-shadow: 0 18px 36px rgba(1,63,84,.08); transform: translateY(-3px); }
.bl_detail-page .art_how-step-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--bl-turquoise), #00a98f);
    font-size: 19px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(0,190,162,.22);
}
.bl_detail-page .art_how-step h3 { margin: 0 0 8px; }
.bl_detail-page .art_how-step p { margin: 0 0 .8em; }
.bl_detail-page .art_how-step p:last-child { margin-bottom: 0; }

/* Feature cards / integrations -------------------------------------------- */
.bl_detail-page .art_features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl_detail-page .art_feature-icon,
.bl_detail-page .art_summary-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--bl-turquoise-dark);
    background: var(--bl-turquoise-soft);
}
.bl_detail-page .art_feature-icon svg,
.bl_detail-page .art_summary-icon svg { width: 21px; height: 21px; }

.bl_detail-page .art_example-card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 30px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--bl-navy-deep), #075f77);
    box-shadow: 0 22px 44px rgba(1,63,84,.22);
    overflow: hidden;
}
.bl_detail-page .art_example-card h3 { color: #fff; font-size: clamp(19px, 2.4vw, 24px); }
.bl_detail-page .art_example-card p { color: rgba(255,255,255,.75); }
/* Strong text sits on a dark card here; keep contrast without affecting light article cards. */
.bl_detail-page .art_container--narrow .art_example-card strong { color: #fff; }
.bl_detail-page .art_example-label { color: #a7f8ed; background: rgba(0,190,162,.15); }
.bl_detail-page .art_example-timeline { display: grid; gap: 18px; }
.bl_detail-page .art_timeline-item { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 14px; }
.bl_detail-page .art_timeline-dot { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #91f4e8; background: rgba(255,255,255,.08); }
.bl_detail-page .art_timeline-date { color: #9cefe5; font-size: 16px; font-weight: 600; }
.bl_detail-page .art_timeline-title { margin-top: 3px; color: #fff; font-weight: 600; line-height: 1.35; }
.bl_detail-page .art_timeline-desc { margin-top: 4px; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.5; }

/* Timeline changes --------------------------------------------------------- */
.bl_detail-page .art_changes-list { display: grid; gap: 14px; }
.bl_detail-page .art_change-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 21px; border: 1px solid var(--bl-line); border-radius: 16px; background: #fff; }
.bl_detail-page .art_change-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--bl-turquoise-dark); background: var(--bl-turquoise-soft); }
.bl_detail-page .art_change-icon svg { width: 20px; height: 20px; }
.bl_detail-page .art_change-title { margin: 8px 0 6px !important; font-size: 18px !important; }
.bl_detail-page .art_change-desc { margin: 0 !important; color: var(--bl-muted); font-size: 14px; line-height: 1.65; }

/* FAQ: works with plain HTML stored in DETAIL_TEXT ------------------------ */
.bl_detail-page .art_faq-list { display: grid; gap: 10px; }
.bl_detail-page .art_faq-item {
    overflow: hidden;
    border: 1px solid var(--bl-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bl_detail-page .art_faq-item.open { border-color: rgba(0,190,162,.62); background: linear-gradient(135deg,#fff,#f4fffd); box-shadow: 0 16px 30px rgba(1,63,84,.08); }
.bl_detail-page .art_faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 68px;
    padding: 17px 19px 17px 22px;
    border: 0;
    outline: none;
    color: var(--bl-ink);
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.bl_detail-page .art_faq-q-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--bl-turquoise-dark);
    background: var(--bl-turquoise-soft);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.bl_detail-page .art_faq-q-icon svg { display:block; width: 18px; height: 18px; }
.bl_detail-page .art_faq-item.open .art_faq-q-icon { color: #fff; background: var(--bl-turquoise); transform: rotate(180deg); }
.bl_detail-page .art_faq-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.2,.8,.2,1); }
.bl_detail-page .art_faq-a-inner { padding: 0 22px 21px; color: var(--bl-muted); font-size: 15px; line-height: 1.68; }

/* Sidebar ------------------------------------------------------------------ */
.bl_detail-page .bl_detail-sidebar { position: sticky; top: 22px; display: grid; gap: 14px; }
.bl_detail-page .bl_sidebar-widget { padding: 20px; border: 1px solid var(--bl-line); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(1,63,84,.045); }
.bl_detail-page .bl_sidebar-widget--cta { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--bl-navy), #076177); box-shadow: 0 18px 36px rgba(1,63,84,.18); }
.bl_detail-page .bl_sidebar-widget--cta h3 { margin: 12px 0 7px; color: #fff; font-size: 23px; }
.bl_detail-page .bl_sidebar-widget--cta p { margin: 0 0 18px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.bl_detail-page .bl_sidebar-cta-icon { display: grid; place-items:center; width: 42px; height:42px; border-radius: 13px; color: #aaf8ee; background: rgba(255,255,255,.1); }
.bl_detail-page .bl_sidebar-cta-icon svg { width: 21px; height: 21px; }
.bl_detail-page .bl_sidebar-cta-btn { width: 100%; min-height: 44px; }
.bl_detail-page .bl_sidebar-title { margin: 0 0 13px; color: var(--bl-ink); font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.bl_detail-page .bl_sidebar-tags { display:flex; flex-wrap:wrap; gap:8px; }
.bl_detail-page .bl_tag { padding: 6px 10px; border-radius: 999px; color: var(--bl-turquoise-dark); background: var(--bl-turquoise-soft); font-size:12px; font-weight:800; }

.bl_detail-page .bl_toc[hidden] { display: none; }
.bl_detail-page .bl_toc__links { display: grid; gap: 4px; }
.bl_detail-page .bl_toc__link { display: block; padding: 8px 9px; border-radius: 9px; color: var(--bl-muted); font-size: 13px; font-weight: 650; line-height: 1.35; text-decoration: none; transition: color .2s ease, background .2s ease; }
.bl_detail-page .bl_toc__link:hover,
.bl_detail-page .bl_toc__link.is-active { color: var(--bl-navy); background: var(--bl-turquoise-soft); }
.bl_detail-page .bl_toc__link.is-active { box-shadow: inset 3px 0 0 var(--bl-turquoise); }

/* Share / related ---------------------------------------------------------- */
.bl_detail-page .bl_share {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin: 44px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--bl-line);
    max-width:770px;
}
.bl_detail-page .bl_share-label {
    display:inline-flex;
    align-items:center;
    min-height:40px;
    margin:0 2px 0 0;
    padding:0 12px;
    border:1px solid var(--bl-line);
    border-radius:999px;
    color:var(--bl-muted);
    background:#f8fbfc;
    font-size:12px;
    font-weight:850;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
}
.bl_detail-page .bl_share-btn {
    display:inline-grid;
    place-items:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    border: 1px solid var(--bl-line);
    border-radius:12px;
    color:var(--bl-navy);
    background:#fff;
    cursor:pointer;
    text-decoration:none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.bl_detail-page .bl_share-btn:hover { color:#fff; background:var(--bl-navy); border-color:var(--bl-navy); transform: translateY(-2px); }
.bl_detail-page .bl_share-btn .bl_social-icon { width:18px; height:18px; }
.bl_detail-page .bl_share-btn .bl_social-mark { font-size:11px; }
.bl_detail-page .bl_share-btn.copied { color:#fff; background:var(--bl-turquoise); border-color:var(--bl-turquoise); }

.bl_detail-page .bl_related { padding: clamp(54px, 7vw, 88px) 0; background: #fff; }
.bl_detail-page .bl_related-title { max-width:1240px; margin:0 auto 28px; color:var(--bl-ink); font-size:clamp(30px,3.2vw,42px); letter-spacing:-.04em; }
.bl_detail-page .bl_grid--3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.bl_detail-page .bl_card { overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--bl-line); border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(1,63,84,.04); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.bl_detail-page .bl_card:hover { border-color:rgba(0,190,162,.52); box-shadow:0 18px 36px rgba(1,63,84,.1); transform:translateY(-5px); }
.bl_detail-page .bl_card-img-wrap { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#eaf2f4; }
.bl_detail-page .bl_card-img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bl_detail-page .bl_card:hover .bl_card-img { transform:scale(1.05); }
.bl_detail-page .bl_card-body { display:flex; flex:1; flex-direction:column; padding:18px; }
.bl_detail-page .bl_card-title { margin:8px 0 16px; color:var(--bl-ink); font-size:18px; line-height:1.32; }
.bl_detail-page .bl_card-title a { color:inherit; text-decoration:none; }
.bl_detail-page .bl_card-date { color:var(--bl-muted); font-size:12px; }
.bl_detail-page .bl_card-link { margin-top:auto; color:var(--bl-turquoise-dark); font-size:13px; font-weight:800; text-decoration:none; }

/* Contact section gets a quieter, more premium shell ---------------------- */
.bl_detail-page + .kontur_contact-section,
.bl_detail-page .kontur_contact-section { position:relative; overflow:hidden; }

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 1020px) {
    .bl_detail-page .bl_detail-hero-wrapper { grid-template-columns: 1fr; }
    .bl_detail-page .bl_detail-hero-right { max-width: 630px; width: 100%; margin: 0 auto; }
    .bl_detail-page .bl_detail-layout { grid-template-columns: 1fr; }
    .bl_detail-page .bl_detail-sidebar { position: static; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .bl_detail-page .bl_toc { display: none; }
}

@media (max-width: 760px) {
    .bl_detail-page .bl_container { width: min(100% - 32px, 1240px); }
    .bl_detail-page .bl_detail-hero { padding-top: 48px; }
    .bl_detail-page .bl_detail-title { font-size: clamp(30px, 8.8vw, 40px); }
    .bl_detail-page .bl_detail-hero-share-label { display: none; }
    .bl_detail-page .bl_detail-article { padding: 24px 18px; border-radius: 20px; }
    .bl_detail-page .bl_detail-text { font-size: 16px; line-height: 1.72; }
    .bl_detail-page .art_diff-grid,
    .bl_detail-page .art_features-grid,
    .bl_detail-page .art_summary-grid,
    .bl_detail-page .art_example-card,
    .bl_detail-page .bl_grid--3 { grid-template-columns: 1fr; }
    .bl_detail-page .art_how-step { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 18px; }
    .bl_detail-page .art_how-step-num { width: 40px; height: 40px; border-radius: 13px; }
    .bl_detail-page .art_example-card { gap: 26px; }
    .bl_detail-page .bl_detail-sidebar { grid-template-columns: 1fr; }
    .bl_detail-page .art_faq-q { min-height: 60px; padding: 15px 15px 15px 17px; font-size: 15px; }
    .bl_detail-page .art_faq-a-inner { padding: 0 17px 17px; font-size: 14px; }
}

@media (max-width: 420px) {
    .bl_detail-page .bl_detail-hero-actions { align-items:stretch; }
    .bl_detail-page .bl_detail-hero-btn { width:100%; }
    .bl_detail-page .bl_detail-hero-share { width:100%; justify-content:flex-start; }
    .bl_detail-page .bl_share { gap:8px; }
    .bl_detail-page .bl_share-label { flex-basis:100%; width:fit-content; min-height:32px; padding:0 10px; }
    .bl_detail-page .art_lead-law,
    .bl_detail-page .art_diff-note { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .bl_detail-page *,
    .bl_detail-page *::before,
    .bl_detail-page *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
