/* ── Article content: force Inter font regardless of inline styles */
.article-block__content * { font-family: "Inter", sans-serif !important; }

/* ── Article content: table — card-grid style ────────────────── */
.article-block__content table {
    border-collapse: separate !important;
    border-spacing: 8px !important;
    border: none !important;
    width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    table-layout: fixed !important;
}
.article-block__content table td,
.article-block__content table th {
    padding: 20px 22px !important;
    border: none !important;
    border-radius: 10px !important;
    background: var(--clr-bg-soft) !important;
    vertical-align: top !important;
    line-height: 155% !important;
    font-size: 15px !important;
}
.article-block__content table td strong,
.article-block__content table th strong {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--clr-accent);
    line-height: 130%;
}
.article-block__content table tr:hover td { background: var(--clr-bg-soft) !important; }

/* ── Article: numbered list — title p on same row as badge, desc p below ── */
/* CKEditor wraps <strong> in <p>, so first-child p = title, rest = description */
.article-block__content ol > li > p:first-child {
    flex: 1;
    min-width: 0;
    margin: 0;
    opacity: 1;
    font-weight: 700;
}
.article-block__content ol > li > p:not(:first-child) {
    flex: 0 0 100%;
    margin-left: 40px;
    margin-top: 4px;
    opacity: 0.85;
    font-weight: 400;
}

/* ── Article: Conclusion block ───────────────────────────────── */
.article-conclusion {
    border-left: 3px solid var(--clr-accent);
    padding: 22px 30px;
    background: rgba(167, 57, 188, 0.05);
    border-radius: 0 12px 12px 0;
    margin: 0;
}
.article-conclusion__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 122%;
    margin-bottom: 14px;
}
.article-conclusion p { line-height: 160%; opacity: 0.9; }

/* ── Hero background: remove pink tint, show video as-is ─────── */
.hero__bg { background: #000; }
.hero__bg video, .hero__bg img { mix-blend-mode: normal; }

/* ── Roadmap background: remove pink tint, show video as-is ──── */
.roadmap__bg { background: #000; }
.roadmap__bg video, .roadmap__bg img { mix-blend-mode: normal; }

/* ── Catalog (blog/cases): AJAX filter loading state ──────────── */
.catalog.is-loading .catalog__items {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── Departments mega menu photo gradient ────────────────────── */
.submenu__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}
.submenu__img-text { z-index: 2; }

/* ── Departments mega menu icons ─────────────────────────────── */
/* White icon variants in the nav menu are not needed — hide them */
.submenu__info-icon.icon--white { display: none !important; }

/* On hover (is-active), invert the black icon to white */
.submenu__info-link.is-active .submenu__info-icon {
    filter: brightness(0) invert(1) !important;
}

/* ── Solutions / Departments / Industries slider (home page) ─── */
/* Inactive cards: show black icon grayed out */
.solutions__slide-icon.icon--white { display: none; }
.solutions__slide .solutions__slide-icon.icon--dark { filter: invert(1) brightness(0.706); }

/* Active (dark bg) card: hide dark icon, show white icon */
.solutions__slide.swiper-slide-active .solutions__slide-icon.icon--dark { display: none; }
.solutions__slide.swiper-slide-active .solutions__slide-icon.icon--white { display: flex; }

/* ── Blog article: ordered list — numbers in purple square ───── */
.article-block__content ol {
    padding-left: 0;
    counter-reset: article-ol;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Only direct li children get the counter — nested ul/ol li are unaffected */
.article-block__content ol > li {
    list-style: none;
    counter-increment: article-ol;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}
.article-block__content ol > li::before {
    content: counter(article-ol);
    min-width: 28px;
    height: 28px;
    background-color: var(--clr-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
/* Nested list inside ol li — push it to its own row, indented under the text */
.article-block__content ol > li > ul,
.article-block__content ol > li > ol {
    flex: 0 0 100%;
    margin-left: 40px; /* 28px box + 12px gap */
}

/* ── Blog article: unordered list — / as bullet ──────────────── */
.article-block__content ul {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.article-block__content ul > li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.article-block__content ul > li::before {
    content: '•';
    color: var(--clr-accent);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.5;
}

/* ── Blog article: blockquote ────────────────────────────────── */
.article-block__content blockquote {
    position: relative;
    padding: 16px 32px 24px;
    margin: 0;
    border-left: none;
}
.article-block__content blockquote::before {
    content: '\201C\201C';
    font-size: 56px;
    line-height: 1;
    color: var(--clr-accent);
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
    letter-spacing: -4px;
}
.article-block__content blockquote p {
    font-size: 18px;
    font-style: italic;
    line-height: 150%;
}
.article-block__content blockquote cite,
.article-block__content blockquote footer {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    opacity: 0.6;
}