/* public/css/blog.css — public blog (articles & case studies) */
:root {
    --bl-black: #000;
    --bl-blue: #0300f5;
    --bl-accent: #89ff47;
    --bl-soft: #f4f4f8;
    --bl-line: rgba(0,0,0,.14);
    --bl-max: 1280px;
    --bl-read: 740px;
}
.bl-page, .bl-page * { font-family: 'Inter', system-ui, sans-serif; }
.bl-page { color: #000; background: #fff; }
.bl-page a { color: inherit; }
.bl-wrapx { max-width: var(--bl-max); margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .bl-wrapx { padding: 0 20px; } }

/* preview banner */
.bl-preview { background: #fde68a; color: #000; text-align: center; font-weight: 700; font-size: .85rem; padding: 10px 16px; }

/* progress */
.bl-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--bl-blue); z-index: 2000; transition: width .1s linear; }

/* ───── HERO ───── */
.bl-hero { background: var(--bl-black); color: #fff; padding: 56px 0 64px; }
.bl-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 36px; }
.bl-crumbs a { color: #fff; text-decoration: none; opacity: .8; }
.bl-crumbs a:hover { opacity: 1; }
.bl-crumbs span { opacity: .4; }
.bl-kicker { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.bl-tag-pill { display: inline-block; padding: 6px 16px; border: 1px solid #fff; font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-decoration: none; }
.bl-tag-pill.is-fill { background: var(--bl-accent); border-color: var(--bl-accent); color: #000; }
.bl-title { font-size: clamp(2.1rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -1.5px; max-width: 980px; margin: 0 0 22px; }
[dir="rtl"] .bl-title { letter-spacing: 0; line-height: 1.3; }
.bl-lead { font-size: 1.2rem; line-height: 1.7; max-width: 760px; color: #fff; opacity: .92; margin: 0 0 30px; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .82rem; font-weight: 500; border-top: 1px dashed rgba(255,255,255,.4); padding-top: 22px; }
.bl-meta b { font-weight: 700; }
.bl-meta a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.bl-langlink { margin-inline-start: auto; }

/* ───── COVER ───── */
.bl-cover { margin-top: -36px; position: relative; z-index: 2; }
.bl-cover img { width: 100%; max-height: 640px; object-fit: cover; display: block; border: 1px solid var(--bl-line); background: var(--bl-soft); }

/* ───── CASE STUDY FACTS + METRICS ───── */
.bl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px dashed rgba(255,255,255,.45); margin-top: 8px; }
.bl-fact { padding: 18px 20px; border-inline-end: 1px dashed rgba(255,255,255,.45); }
.bl-fact:last-child { border-inline-end: 0; }
.bl-fact small { display: block; font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; opacity: .7; margin-bottom: 6px; font-weight: 700; }
.bl-fact span { font-weight: 700; font-size: .98rem; }
.bl-fact a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }

.bl-metrics { background: var(--bl-blue); color: #fff; }
.bl-metrics .bl-wrapx { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bl-metric { padding: 40px 24px; border-inline-end: 1px dashed rgba(255,255,255,.5); text-align: center; }
.bl-metric:last-child { border-inline-end: 0; }
.bl-metric strong { display: block; font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 800; letter-spacing: -1px; line-height: 1; }
.bl-metric span { display: block; margin-top: 10px; font-size: .85rem; font-weight: 600; letter-spacing: .5px; }

/* ───── BODY LAYOUT ───── */
.bl-body { display: grid; grid-template-columns: 250px minmax(0, var(--bl-read)); gap: 64px; justify-content: center; padding: 64px 0 40px; }
.bl-body.no-toc { grid-template-columns: minmax(0, var(--bl-read)); }
@media (max-width: 992px) { .bl-body { grid-template-columns: 1fr; gap: 28px; } }

.bl-toc { position: sticky; top: 90px; align-self: start; font-size: .85rem; }
@media (max-width: 992px) { .bl-toc { position: static; border: 1px dashed var(--bl-line); padding: 16px; } }
.bl-toc h6 { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin-bottom: 14px; }
.bl-toc ol { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--bl-line); }
.bl-toc li a { display: block; padding: 7px 0 7px 14px; text-decoration: none; font-weight: 500; line-height: 1.4; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
[dir="rtl"] .bl-toc li a { padding: 7px 14px 7px 0; }
.bl-toc li.lv3 a { padding-inline-start: 28px; font-size: .8rem; }
.bl-toc li a:hover { color: var(--bl-blue); }
.bl-toc li a.is-active { border-inline-start-color: var(--bl-blue); color: var(--bl-blue); font-weight: 700; }

/* ───── PROSE ───── */
.bl-prose { font-size: 1.12rem; line-height: 1.85; color: #000; overflow-wrap: break-word; }
.bl-prose > *:first-child { margin-top: 0; }
.bl-prose p { margin: 0 0 1.4em; }
.bl-prose h2 { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin: 2.2em 0 .6em; scroll-margin-top: 90px; }
.bl-prose h3 { font-size: 1.45rem; font-weight: 700; line-height: 1.3; margin: 1.9em 0 .5em; scroll-margin-top: 90px; }
.bl-prose h4 { font-size: 1.15rem; font-weight: 700; margin: 1.6em 0 .4em; }
.bl-prose a { color: var(--bl-blue); text-decoration: underline; text-underline-offset: 3px; }
.bl-prose ul, .bl-prose ol { padding-inline-start: 1.4em; margin: 0 0 1.5em; }
.bl-prose li { margin-bottom: .5em; }
.bl-prose img { max-width: 100%; height: auto; display: block; margin: 2em auto; border: 1px solid var(--bl-line); }
.bl-prose figure { margin: 2em 0; }
.bl-prose figcaption { font-size: .85rem; text-align: center; margin-top: 8px; font-weight: 500; }
.bl-prose blockquote { margin: 2em 0; padding: 6px 0 6px 24px; border-inline-start: 4px solid var(--bl-blue); font-size: 1.2rem; font-weight: 500; }
.bl-prose blockquote.pullquote { border: 0; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 28px 0; font-size: 1.7rem; font-weight: 800; line-height: 1.35; text-align: center; letter-spacing: -.5px; }
.bl-prose .callout { border: 1px dashed #000; border-inline-start: 6px solid var(--bl-blue); background: var(--bl-soft); padding: 20px 24px; margin: 2em 0; }
.bl-prose .callout p:last-child { margin-bottom: 0; }
.bl-prose .stat-highlight { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; color: var(--bl-blue); text-align: center; line-height: 1; margin: 1em 0; letter-spacing: -2px; }
.bl-prose pre { background: #0b0b0b; color: #e8e8e8; padding: 18px; overflow-x: auto; font-size: .9rem; border-radius: 4px; }
.bl-prose code { background: var(--bl-soft); padding: 2px 6px; font-size: .92em; }
.bl-prose pre code { background: transparent; padding: 0; }
.bl-prose hr { border: 0; border-top: 1px dashed #000; margin: 3em 0; }
.bl-prose .table-responsive { overflow-x: auto; margin: 2em 0; }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bl-prose th { background: #000; color: #fff; text-align: start; padding: 10px 14px; }
.bl-prose td { border: 1px solid var(--bl-line); padding: 10px 14px; }
.bl-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 2em 0; }

/* sections */
.bl-section { margin-bottom: 56px; }
.bl-section-label { display: inline-block; background: #000; color: #fff; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; padding: 6px 14px; margin-bottom: 18px; }
.bl-section.is-results .bl-section-label { background: var(--bl-blue); }

/* key points */
.bl-keypoints { border: 1px dashed #000; background: var(--bl-soft); padding: 26px 30px; margin-bottom: 44px; }
.bl-keypoints h6 { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin-bottom: 14px; }
.bl-keypoints ul { margin: 0; padding-inline-start: 1.2em; }
.bl-keypoints li { margin-bottom: .6em; line-height: 1.6; font-size: 1.02rem; font-weight: 500; }

/* testimonial */
.bl-testimonial { background: #000; color: #fff; padding: 80px 0; }
.bl-testimonial blockquote { font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.4; max-width: 980px; margin: 0 auto; text-align: center; letter-spacing: -.5px; }
.bl-testimonial cite { display: block; margin-top: 26px; font-style: normal; text-align: center; font-size: .9rem; font-weight: 600; letter-spacing: 1px; }
.bl-testimonial cite span { display: block; opacity: .7; font-weight: 400; margin-top: 4px; }

/* tags + share + author */
.bl-foot { border-top: 1px dashed #000; margin-top: 56px; padding-top: 28px; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bl-tags a { border: 1px dashed #000; padding: 5px 14px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.bl-tags a:hover { background: #000; color: #fff; }
.bl-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-share strong { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; margin-inline-end: 6px; }
.bl-share a, .bl-share button { border: 1px solid #000; background: #fff; color: #000; padding: 7px 16px; font-size: .78rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.bl-share a:hover, .bl-share button:hover { background: #000; color: #fff; }
.bl-author { display: flex; gap: 16px; align-items: center; margin-top: 30px; padding: 20px; background: var(--bl-soft); }
.bl-avatar { width: 52px; height: 52px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }

/* FAQ */
.bl-faq { margin-top: 56px; }
.bl-faq h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }
.bl-faq details { border-top: 1px dashed #000; padding: 18px 0; }
.bl-faq details:last-child { border-bottom: 1px dashed #000; }
.bl-faq summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; }
.bl-faq details[open] summary::after { content: '–'; }
.bl-faq details p { margin: 14px 0 0; line-height: 1.8; }

/* ───── CARDS / HUB ───── */
.bl-hubhead { background: #000; color: #fff; padding: 64px 0 56px; }
.bl-hubhead h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; letter-spacing: -3px; line-height: 1; margin: 0 0 16px; }
.bl-hubhead p { max-width: 640px; font-size: 1.1rem; line-height: 1.7; opacity: .9; margin: 0; }

.bl-filters { border-bottom: 1px dashed #000; padding: 22px 0; }
.bl-filters .bl-wrapx { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.bl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-pills a { border: 1px solid #000; padding: 7px 18px; font-size: .78rem; font-weight: 700; text-decoration: none; letter-spacing: .5px; }
.bl-pills a.is-active, .bl-pills a:hover { background: #000; color: #fff; }
.bl-search { display: flex; }
.bl-search input { border: 1px solid #000; border-inline-end: 0; padding: 8px 14px; font-size: .85rem; min-width: 220px; outline: 0; }
.bl-search button { border: 1px solid #000; background: #000; color: #fff; padding: 8px 16px; font-weight: 700; font-size: .8rem; }
.bl-select { border: 1px solid #000; padding: 8px 12px; font-size: .8rem; font-weight: 600; background: #fff; }

.bl-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px dashed #000; margin: 44px 0; text-decoration: none; color: #000; }
@media (max-width: 900px) { .bl-featured { grid-template-columns: 1fr; } }
.bl-featured .img { min-height: 340px; background: var(--bl-soft) center / cover no-repeat; }
.bl-featured .txt { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bl-featured h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin: 0; }
.bl-featured:hover h2 { color: var(--bl-blue); }

.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; margin: 44px 0 20px; }
@media (max-width: 992px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr; } }
.bl-card { display: flex; flex-direction: column; text-decoration: none; color: #000; }
.bl-card .img { aspect-ratio: 16 / 10; background: var(--bl-soft) center / cover no-repeat; border: 1px solid var(--bl-line); margin-bottom: 16px; position: relative; overflow: hidden; }
.bl-card .img::after { content: ''; position: absolute; inset: 0; background: var(--bl-blue); opacity: 0; transition: opacity .25s; mix-blend-mode: multiply; }
.bl-card:hover .img::after { opacity: .18; }
.bl-card .img.is-empty { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2rem; letter-spacing: -1px; background: #000; color: #fff; }
.bl-card .kick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bl-chip { font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; padding: 4px 10px; border: 1px solid #000; }
.bl-chip.is-case { background: var(--bl-accent); border-color: var(--bl-accent); }
.bl-card h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; margin: 0 0 10px; }
.bl-card:hover h3 { color: var(--bl-blue); }
.bl-card p { font-size: .95rem; line-height: 1.65; margin: 0 0 12px; }
.bl-card .by { margin-top: auto; font-size: .75rem; font-weight: 600; }

.bl-side-title { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin: 36px 0 12px; }
.bl-empty { text-align: center; padding: 90px 0; font-weight: 600; }

.bl-related { border-top: 1px dashed #000; padding: 64px 0; margin-top: 40px; }
.bl-related h2 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -1px; }

.bl-cta { background: #000; color: #fff; text-align: center; padding: 90px 20px; }
.bl-cta h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -1.5px; margin-bottom: 14px; }
.bl-cta p { margin-bottom: 30px; font-size: 1.05rem; }
.bl-cta a { display: inline-block; background: #fff; color: #000; padding: 18px 40px; font-size: .82rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: all .25s; }
.bl-cta a:hover { background: var(--bl-blue); color: #fff; }

/* Bootstrap pagination on the public site */
.bl-page .pagination { justify-content: center; gap: 6px; margin-top: 40px; }
.bl-page .page-link { border-radius: 0; border: 1px solid #000; color: #000; font-weight: 700; }
.bl-page .page-item.active .page-link { background: #000; border-color: #000; color: #fff; }