/* ==========================================================================
   Blog Block CMS — content-block styling.
   Cohesive with the .bx editorial system (public/css/content.css). The design
   tokens are redeclared on .blk-content so blocks also render correctly on
   their own (e.g. the admin editor preview) where the .bx scope is absent;
   inside .bx they simply inherit the same values.
   ========================================================================== */

.blk-content{
    --bx-primary:#5867DF; --bx-primary-50:#EEF0FF; --bx-ink:#16182F; --bx-soft:#5B6478;
    --bx-line:#E7E9F2; --bx-panel:#F6F7FB;
    --blk-info:#5867DF;    --blk-info-bg:#EEF0FF;
    --blk-success:#178A5B; --blk-success-bg:#E7F6EF;
    --blk-warning:#B7791F; --blk-warning-bg:#FBF1DE;
    --blk-danger:#D64560;  --blk-danger-bg:#FDECEF;
    color:#2C3142; font-size:16.5px; line-height:1.75;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.blk-content > :first-child{margin-top:0}
.blk-content > :last-child{margin-bottom:0}

/* ---------- Headings ---------- */
.blk-heading{font-family:"Space Grotesk","Inter",sans-serif;color:var(--bx-ink);font-weight:700;line-height:1.25;scroll-margin-top:96px}
.blk-heading--h2{font-size:24px;margin:36px 0 14px}
.blk-heading--h3{font-size:19px;margin:28px 0 12px}

/* ---------- Paragraph + inline ---------- */
.blk-paragraph{margin:0 0 18px}
.blk-content a{color:var(--bx-primary);text-decoration:underline;text-underline-offset:2px}
.blk-content strong,.blk-content b{color:var(--bx-ink);font-weight:600}
.blk-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--bx-panel);border:1px solid var(--bx-line);border-radius:6px;padding:.12em .38em}

/* ---------- List ---------- */
.blk-list{margin:0 0 18px;padding-left:22px}
.blk-list li{margin-bottom:8px}

/* ---------- Image ---------- */
.blk-image{margin:24px 0}
.blk-image img{width:100%;border-radius:14px;display:block}
.blk-image__caption{margin-top:10px;font-size:13.5px;color:var(--bx-soft);text-align:center}

/* ---------- Table of contents ---------- */
.blk-toc{background:var(--bx-panel);border:1px solid var(--bx-line);border-radius:14px;padding:18px 10px;margin:24px 0}
.blk-toc__title{display:flex;align-items:center;gap:8px;font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;color:var(--bx-ink);font-size:12.5px;margin:0 0 10px;padding-bottom:12px;border-bottom:1px solid var(--bx-line);text-transform:uppercase;letter-spacing:.05em}
.blk-toc__title .blk-ico{color:var(--bx-primary);flex-shrink:0}
.blk-toc__list{list-style:none;margin:0;padding:0}
.blk-toc__item{margin:0;padding-left: 6px;padding-right: 6px;}
.blk-toc__item--l3{padding-left:16px}
.blk-toc__item a{display:block;padding:5px 0;color:var(--bx-soft);text-decoration:none;font-size:14.5px;line-height:1.4;overflow-wrap:break-word;transition:all.15s ease}
.blk-toc__item a:hover{color:var(--bx-primary)}

/* ---------- CTA ---------- */
.blk-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;border-radius:16px;padding:24px 26px;margin:28px 0}
.blk-cta__title{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:19px;margin:0 0 4px}
.blk-cta__text{margin:0;font-size:14.5px;line-height:1.55}
.blk-content .blk-cta__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:11px;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:opacity .15s ease}
.blk-cta__btn:hover{opacity:.94}
.blk-cta--primary{background:linear-gradient(135deg,#20184E,#3a2f7a);color:#fff}
.blk-cta--primary .blk-cta__text{color:#C9CDEC}
.blk-cta--primary .blk-cta__btn{background:#fff;color:var(--bx-primary)}
.blk-cta--secondary{background:var(--bx-primary-50);color:var(--bx-ink);border:1px solid #DADEFA}
.blk-cta--secondary .blk-cta__text{color:var(--bx-soft)}
.blk-cta--secondary .blk-cta__btn{background:var(--bx-primary);color:#fff}

/* ---------- Callout ---------- */
.blk-callout{display:flex;gap:14px;border:1px solid var(--bx-line);border-left-width:4px;border-radius:12px;padding:16px 18px;margin:24px 0;background:var(--bx-panel)}
.blk-callout__icon{flex-shrink:0;line-height:0;margin-top:1px}
.blk-callout__content{min-width:0}
.blk-callout__title{font-weight:700;color:var(--bx-ink);margin:0 0 4px;font-size:15.5px}
.blk-callout__body{margin:0}
.blk-callout__body > :last-child{margin-bottom:0}
.blk-callout--info{border-left-color:var(--blk-info);background:var(--blk-info-bg)}
.blk-callout--info .blk-callout__icon{color:var(--blk-info)}
.blk-callout--success{border-left-color:var(--blk-success);background:var(--blk-success-bg)}
.blk-callout--success .blk-callout__icon{color:var(--blk-success)}
.blk-callout--warning{border-left-color:var(--blk-warning);background:var(--blk-warning-bg)}
.blk-callout--warning .blk-callout__icon{color:var(--blk-warning)}
.blk-callout--danger{border-left-color:var(--blk-danger);background:var(--blk-danger-bg)}
.blk-callout--danger .blk-callout__icon{color:var(--blk-danger)}

/* ---------- Note ---------- */
.blk-note{display:flex;gap:12px;background:var(--bx-panel);border:1px solid var(--bx-line);border-radius:12px;padding:15px 17px;margin:22px 0}
.blk-note__icon{flex-shrink:0;color:var(--bx-soft);line-height:0;margin-top:1px}
.blk-note__title{font-weight:600;color:var(--bx-ink);margin:0 0 3px;font-size:15px}
.blk-note__body{margin:0}
.blk-note__body > :last-child{margin-bottom:0}

/* ---------- Quote ---------- */
.blk-quote{margin:26px 0;padding:6px 0 6px 24px;border-left:3px solid var(--bx-primary)}
.blk-quote__text{font-family:"Space Grotesk","Inter",sans-serif;font-size:19px;line-height:1.5;color:var(--bx-ink);font-weight:500;margin:0}
.blk-quote__author{margin-top:12px;font-size:14px;color:var(--bx-soft)}
.blk-quote__author::before{content:"— "}
.blk-quote__author a{color:var(--bx-primary);text-decoration:none}
.blk-quote__author a:hover{text-decoration:underline}

/* ---------- Editor's note ---------- */
.blk-editors-note{background:var(--bx-primary-50);border:1px solid #DADEFA;border-radius:12px;padding:18px 20px;margin:24px 0}
.blk-editors-note__label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-primary);margin:0 0 8px}
.blk-editors-note__body{margin:0;font-style:italic;color:#3A3F57}
.blk-editors-note__body > :last-child{margin-bottom:0}

/* ---------- Pro tip ---------- */
.blk-pro-tip{background:var(--blk-success-bg);border:1px solid #CDEBDD;border-radius:12px;padding:18px 20px;margin:24px 0}
.blk-pro-tip__label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blk-success);margin:0 0 8px}
.blk-pro-tip__body{margin:0}
.blk-pro-tip__body > :last-child{margin-bottom:0}

/* ---------- Key takeaways ---------- */
.blk-takeaways{background:var(--bx-panel);border:1px solid var(--bx-line);border-radius:14px;padding:22px 24px;margin:28px 0}
.blk-takeaways__title{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:17px;color:var(--bx-ink);margin:0 0 14px}
.blk-takeaways__title .blk-ico{color:var(--bx-primary)}
.blk-takeaways__list{list-style:none;margin:0;padding:0}
.blk-takeaways__list li{position:relative;padding-left:30px;margin-bottom:11px}
.blk-takeaways__list li:last-child{margin-bottom:0}
.blk-takeaways__list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--bx-primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235867DF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") no-repeat center}

/* ---------- FAQ (reuses the service pages' .qa accordion design) ---------- */
.blk-faq{margin:30px 0}
.blk-faq__title{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:22px;color:var(--bx-ink);margin:0 0 16px}
.blk-faq__title .blk-ico{color:var(--bx-primary)}
.blk-faq .faq{display:flex;flex-direction:column;gap:12px}
.blk-faq .qa{border:1px solid var(--bx-line);border-radius:14px;background:#fff;overflow:hidden}
.blk-faq .qa-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;font-size:16px;color:var(--bx-ink);cursor:pointer}
.blk-faq .qa-q:focus-visible{outline:2px solid var(--bx-primary);outline-offset:-2px}
.blk-faq .qa-ic{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;font-size:24px;line-height:1;color:var(--bx-primary);transition:transform .25s ease}
.blk-faq .qa.open .qa-ic{transform:rotate(45deg)}
.blk-faq .qa-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.blk-faq .qa-a p{margin:0;padding:0 22px 20px;font-size:14.5px;line-height:1.65;color:var(--bx-soft)}
.blk-faq .qa-a p a{color:var(--bx-primary)}

/* ---------- Focus + motion ---------- */
.blk-content a:focus-visible,.blk-cta__btn:focus-visible{outline:2px solid var(--bx-primary);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.blk-content *{transition:none !important}}

/* ---------- Responsive ---------- */
@media (max-width:560px){
    .blk-content{font-size:16px}
    .blk-cta{flex-direction:column;align-items:flex-start}
    .blk-cta__btn{width:100%}
}

/* ==========================================================================
   Blog post page layout — ToC lives in the right column (desktop) and moves
   to the top (mobile). Grid areas keep the main body on the left across both
   rows while the ToC and the related/CTA sidebar stack on the right. On desktop
   the ToC and the CTA box are affixed by JS (blog-post.js) so they stay beside
   the article while you read; on mobile they collapse to normal blocks in flow.
   ========================================================================== */
.bx-post{
    display:grid;
    grid-template-columns:minmax(0,1fr) 326px;
    grid-template-areas:"main toc" "main side";
    /* Row 1 = ToC height, row 2 = the rest. With the side box aligned to the
       start of row 2 this pulls "Related reading" right under the ToC instead
       of leaving a large gap (the tall main column otherwise stretches rows). */
    grid-template-rows:auto 1fr;
    column-gap:48px;
    padding:34px 0 72px;
    align-items:start;
}
.bx-post__main{grid-area:main;min-width:0}
.bx-post__side{grid-area:side;position:static;align-self:start}
.bx-post--no-toc{grid-template-areas:"main side"}

/* The ToC cell is the placeholder for the JS affix — while pinned the inner
   panel gets position:fixed and the cell holds the column open (see blog-post.js). */
.bx-post__toc{grid-area:toc;margin-bottom:26px}
.bx-post__toc-inner{box-sizing:border-box;width:100%}
.bx-post__toc .blk-content > :only-child{margin:0}
.bx-post__toc .blk-toc{display:flex;flex-direction:column}

@media (max-width:980px){
    .bx-post,
    .bx-post--no-toc{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"toc" "main" "side";row-gap:28px}
    .bx-post--no-toc{grid-template-areas:"main" "side"}
    .bx-post__toc{margin-bottom:0}
}

/* ---------- Bottom "More in {category}" topic-cluster ---------- */
.bx-more{border-top:1px solid var(--bx-line,#E7E9F2);margin-top:8px;padding:44px 0 12px}
.bx-more__title{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:24px;color:var(--bx-ink,#16182F);margin:0 0 22px}

/* ---------- Reading progress bar ---------- */
.bx-readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9500;pointer-events:none;background:transparent}
.bx-readbar__fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--bx-primary,#5867DF),#8b78ff);will-change:transform}

/* ---------- ToC scroll-spy active state ---------- */
.blk-toc__item.is-active a{color:var(--bx-primary,#5867DF);font-weight:600;padding-left: 10px;}
.bx-post__toc .blk-toc__item{transition:border-color .15s ease}
.bx-post__toc .blk-toc__item.is-active{box-shadow:inset 2px 0 0 var(--bx-primary,#5867DF)}

/* ---------- "Was this helpful?" ---------- */
.bx-helpful{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:34px 0;padding:18px 22px;border:1px solid var(--bx-line,#E7E9F2);border-radius:14px;background:var(--bx-panel,#F6F7FB)}
.bx-helpful__q{font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;color:var(--bx-ink,#16182F);font-size:15.5px}
.bx-helpful__actions{display:inline-flex;gap:10px}
.bx-helpful__btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 18px;border:1px solid var(--bx-line,#E7E9F2);border-radius:10px;background:#fff;color:var(--bx-soft,#5B6478);font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.bx-helpful__btn:hover{border-color:var(--bx-primary,#5867DF);color:var(--bx-primary,#5867DF)}
.bx-helpful__btn:focus-visible{outline:2px solid var(--bx-primary,#5867DF);outline-offset:2px}
.bx-helpful__thanks{display:none;font-weight:600;color:#178A5B}
.bx-helpful.is-voted .bx-helpful__actions{display:none}
.bx-helpful.is-voted .bx-helpful__thanks{display:inline}

@media (prefers-reduced-motion:reduce){.bx-readbar__fill{will-change:auto}}

/* ==========================================================================
   EDITORIAL POLISH — scoped to .bx--editorial (blog index + post only) so it
   never touches the shared Trends/Proviews pages. Magazine-grade typography,
   rhythm and micro-interactions on top of the existing .bx system.
   ========================================================================== */

/* ---- Hero: refined kicker + tighter display type ---- */
.bx--editorial .bx-hero{padding-top:112px}
.bx--editorial .bx-hero .eyebrow{display:inline-flex;align-items:center}
.bx--editorial .bx-hero .eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--bx-primary);margin-right:11px}
.bx--editorial .bx-hero h1{letter-spacing:-.022em}
.bx--editorial .bx-hero p.lead{font-size:18px}

/* ---- Category filter bar (reuses .bx-chip) — scales to many categories ----
   A single-row horizontal scroller (compact no matter how many categories) with
   discoverability affordances: soft edge fades + desktop arrow buttons that show
   ONLY on the side that still has more to scroll. Paired with the small scroll
   script in blog/index.blade.php that toggles .is-of-left / .is-of-right. */
.bx-catbar{background:#fff;border-bottom:1px solid var(--bx-line)}
.bx-catbar__viewport{position:relative}
.bx-catbar .bx-cats{margin:0;padding:14px 0;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.bx-catbar .bx-cats::-webkit-scrollbar{display:none}
.bx-catbar .bx-chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
    padding:8px 14px;scroll-snap-align:start}
.bx-catbar .bx-chip:hover{background:var(--bx-primary-50);border-color:var(--bx-primary);color:var(--bx-primary)}
.bx-catbar .bx-chip.active{box-shadow:0 6px 16px -7px rgba(88,103,223,.65)}
.bx--editorial .bx-chip:focus-visible{outline:2px solid var(--bx-primary);outline-offset:2px}

/* Per-category post-count badge */
.bx-catbar .bx-chip__n{padding:1px 8px;border-radius:999px;background:var(--bx-primary-50);color:var(--bx-primary);
    font-size:11.5px;font-weight:700;line-height:1.6;letter-spacing:0}
.bx-catbar .bx-chip:hover .bx-chip__n{background:#fff}
.bx-catbar .bx-chip.active .bx-chip__n{background:rgba(255,255,255,.22);color:#fff}

/* Edge fades — 0 opacity until that side overflows (class toggled in JS) */
.bx-catbar__viewport::before,
.bx-catbar__viewport::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;
    pointer-events:none;opacity:0;transition:opacity .2s var(--bx-ease)}
.bx-catbar__viewport::before{left:0;background:linear-gradient(to right,#fff 24%,rgba(255,255,255,0))}
.bx-catbar__viewport::after{right:0;background:linear-gradient(to left,#fff 24%,rgba(255,255,255,0))}
.bx-catbar__viewport.is-of-left::before{opacity:1}
.bx-catbar__viewport.is-of-right::after{opacity:1}

/* Scroll arrows — pointer devices only, and only on the overflowing side */
.bx-catbar__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:36px;height:36px;border-radius:50%;border:1px solid var(--bx-line);background:#fff;color:var(--bx-ink);
    display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;
    box-shadow:0 4px 14px -6px rgba(16,22,44,.4);transition:.15s var(--bx-ease)}
.bx-catbar__nav:hover{border-color:var(--bx-primary);color:var(--bx-primary);box-shadow:0 6px 18px -6px rgba(88,103,223,.5)}
.bx-catbar__nav svg{width:18px;height:18px}
.bx-catbar__nav--prev{left:-4px}
.bx-catbar__nav--next{right:-4px}
@media (hover:hover) and (pointer:fine){
    .bx-catbar__viewport.is-of-left .bx-catbar__nav--prev,
    .bx-catbar__viewport.is-of-right .bx-catbar__nav--next{display:inline-flex}
}

/* ---- Author avatar chip in card meta ---- */
.bx--editorial .bx-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:inline-grid;place-items:center;font-weight:700;font-size:11px;color:#fff;background:linear-gradient(135deg,var(--bx-primary),#8b97f0)}

/* ---- Featured lead story: read-more affordance + type ---- */
.bx--editorial .bx-feature{border-radius:20px}
.bx--editorial .bx-feature h3{letter-spacing:-.015em}
.bx--editorial .bx-readmore{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600;font-size:13.5px;color:var(--bx-primary)}
.bx--editorial .bx-readmore svg{transition:transform .2s var(--bx-ease)}
.bx--editorial .bx-feature:hover .bx-readmore svg{transform:translateX(4px)}
.bx--editorial .bx-feature:focus-visible,
.bx--editorial .bx-card:focus-visible{outline:2px solid var(--bx-primary);outline-offset:3px}

/* ---- Card grid: crisper headline + gentle entrance ---- */
.bx--editorial .bx-card h3{letter-spacing:-.01em}
@media (prefers-reduced-motion:no-preference){
    .bx--editorial .bx-grid>.bx-card{animation:bxUp .5s var(--bx-ease) both}
    .bx--editorial .bx-grid>.bx-card:nth-child(2){animation-delay:.06s}
    .bx--editorial .bx-grid>.bx-card:nth-child(3){animation-delay:.12s}
    .bx--editorial .bx-grid>.bx-card:nth-child(4){animation-delay:.18s}
    .bx--editorial .bx-grid>.bx-card:nth-child(5){animation-delay:.24s}
    .bx--editorial .bx-grid>.bx-card:nth-child(n+6){animation-delay:.3s}
}
@keyframes bxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- Article header ---- */
.bx--editorial .bx-article h1{letter-spacing:-.024em;font-size:clamp(28px,4vw,42px)}
.bx--editorial .bx-article .bx-badge{margin-bottom:2px}
.bx--editorial .bx-artmeta{gap:12px 16px}

/* ---- Prose: magazine drop cap + refined links ---- */
.bx--editorial .bx-post__main .blk-content>.blk-paragraph:first-child::first-letter{
    float:left;font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;
    font-size:3.2em;line-height:.8;margin:8px 12px 0 0;color:var(--bx-primary);
}
.bx--editorial .blk-content a{text-underline-offset:3px;text-decoration-thickness:1px}
.bx--editorial .blk-heading--h2{letter-spacing:-.012em}

/* ---- "More in {category}" cluster head ---- */
.bx--editorial .bx-more__head{margin:0 0 24px}
.bx--editorial .bx-more__kicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bx-primary);margin-bottom:7px}
.bx--editorial .bx-more__title{margin:0;letter-spacing:-.015em}

@media (max-width:560px){
    .bx--editorial .bx-hero{padding-top:96px}
    .bx--editorial .bx-post__main .blk-content>.blk-paragraph:first-child::first-letter{font-size:2.8em}
}

/* ==========================================================================
   Button block — lightweight inline CTA button (Wise-style), placed anywhere
   in the flow, can be repeated. Distinct from the "cta" card block.
   ========================================================================== */
.blk-btnblock{margin:26px 0;display:flex}
.blk-btnblock--center{justify-content:center}
.blk-btnblock--left{justify-content:flex-start}
.blk-btnblock--right{justify-content:flex-end}
.blk-content .blk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
    padding:12px 26px;border-radius:999px;font-weight:600;font-size:15.5px;line-height:1.1;
    text-decoration:none;text-align:center;transition:transform .12s ease,box-shadow .15s ease,opacity .15s ease}
.blk-content .blk-btn:hover{transform:translateY(-1px)}
/* variant selectors carry .blk-content so they outrank ".blk-content a" (link colour) */
.blk-content .blk-btn--primary{background:var(--bx-primary);color:#fff;box-shadow:0 10px 22px -12px rgba(88,103,223,.9)}
.blk-content .blk-btn--primary:hover{box-shadow:0 14px 28px -12px rgba(88,103,223,1)}
.blk-content .blk-btn--success{background:#1e9e57;color:#fff;box-shadow:0 10px 22px -12px rgba(30,158,87,.9)}
.blk-content .blk-btn--success:hover{box-shadow:0 14px 28px -12px rgba(30,158,87,1)}
.blk-content .blk-btn--secondary{background:var(--bx-primary-50);color:var(--bx-primary);border:1px solid #DADEFA}
.blk-content .blk-btn--secondary:hover{background:#e4e7ff}
.blk-content .blk-btn:focus-visible{outline:2px solid var(--bx-primary);outline-offset:3px}

/* ==========================================================================
   Booking block — seller consultation calendar. Reuses the service-page
   <x-svc.booking> markup + JS, restyled here for the LIGHT editorial blog
   (the original .svc-book styles are dark and scoped to .svc). All rules are
   scoped under .blk-booking so nothing leaks to other blocks/pages.
   ========================================================================== */
.blk-booking{--bk-primary:var(--bx-primary);border:1px solid var(--bx-line);border-radius:16px;
    background:var(--bx-panel);padding:24px 26px;margin:30px 0}
.blk-booking__title{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:20px;
    color:var(--bx-ink);margin:0 0 6px}
.blk-booking__text{color:var(--bx-soft);font-size:15px;line-height:1.6;margin:0 0 18px}
.blk-booking__ph{display:flex;align-items:center;gap:10px;color:var(--bx-soft);font-size:14px;
    background:#fff;border:1px dashed #C9CFE8;border-radius:12px;padding:16px 18px}
.blk-booking__ph strong{color:var(--bx-ink)}

/* calendar + slots + lead form (light theme) */
.blk-booking .svc-book__cal{margin-bottom:18px}
.blk-booking .svc-book__calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.blk-booking .svc-book__month{font-weight:700;font-size:16px;color:var(--bx-ink)}
.blk-booking .svc-book__nav{width:34px;height:34px;border-radius:10px;border:1px solid var(--bx-line);
    background:#fff;color:var(--bx-soft);display:grid;place-items:center;cursor:pointer;transition:.15s}
.blk-booking .svc-book__nav:hover{border-color:var(--bk-primary);color:var(--bk-primary)}
.blk-booking .svc-book__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.blk-booking .svc-book__week span{text-align:center;font-size:11px;font-weight:600;color:var(--bx-soft);
    text-transform:uppercase;letter-spacing:.04em}
.blk-booking .svc-book__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.blk-booking .svc-book__day{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:#fff;
    color:var(--bx-ink);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:.12s}
.blk-booking .svc-book__day:hover:not(:disabled){border-color:var(--bk-primary);color:var(--bk-primary)}
.blk-booking .svc-book__day.is-empty{background:none;border:0;pointer-events:none}
.blk-booking .svc-book__day.is-disabled{color:#B7BDD2;cursor:not-allowed;background:none;border:0}
.blk-booking .svc-book__day.is-selected{background:var(--bk-primary);border-color:var(--bk-primary);color:#fff;font-weight:700}
.blk-booking .svc-book__slots{margin-bottom:14px}
.blk-booking .svc-book__slabel,.blk-booking .svc-book__dlabel{font-size:13px;font-weight:600;color:var(--bx-ink);margin-bottom:9px}
.blk-booking .svc-book__dlabel{margin-top:4px}
.blk-booking .svc-book__slotlist{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.blk-booking .svc-book__slot{padding:10px 6px;border-radius:10px;border:1px solid var(--bx-line);background:#fff;
    color:var(--bx-ink);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:.12s}
.blk-booking .svc-book__slot:hover{border-color:var(--bk-primary);color:var(--bk-primary)}
.blk-booking .svc-book__slot.is-selected{background:var(--bk-primary);border-color:var(--bk-primary);color:#fff}
.blk-booking .svc-book__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.blk-booking .fld{margin-bottom:14px;display:flex;flex-direction:column}
.blk-booking .fld label{font-size:12.5px;font-weight:600;color:var(--bx-soft);margin-bottom:5px}
.blk-booking .fld input{border:1px solid var(--bx-line);border-radius:10px;padding:11px 13px;font-size:14.5px;
    font-family:inherit;color:var(--bx-ink);background:#fff;outline:none;transition:.12s}
.blk-booking .fld input:focus{border-color:var(--bk-primary);box-shadow:0 0 0 3px rgba(88,103,223,.14)}
.blk-booking .svc-book__submit{width:100%;border:0;border-radius:11px;background:var(--bk-primary);color:#fff;
    font-weight:600;font-size:15.5px;font-family:inherit;padding:13px 18px;cursor:pointer;transition:.15s}
.blk-booking .svc-book__submit:hover:not(:disabled){box-shadow:0 12px 26px -12px rgba(88,103,223,1)}
.blk-booking .svc-book__submit:disabled{opacity:.5;cursor:not-allowed}
.blk-booking .svc-book__hint{font-size:12px;color:var(--bx-soft);margin-top:10px;text-align:center}
.blk-booking .svc-book__err{margin-top:12px;font-size:13px;color:#b02a45;background:#fdecef;border:1px solid #f6cdd6;
    padding:10px 12px;border-radius:10px;text-align:center}
.blk-booking .svc-book__success{text-align:center;padding:18px 6px}
.blk-booking .svc-book__check{width:64px;height:64px;border-radius:50%;background:#e8f7ee;color:#1e9e57;
    display:grid;place-items:center;margin:0 auto 16px}
.blk-booking .svc-book__success h3{font-size:20px;color:var(--bx-ink);margin-bottom:10px}
.blk-booking .svc-book__successtext{font-size:15px;color:var(--bx-soft);line-height:1.6}
@media (max-width:480px){
    .blk-booking{padding:18px 16px}
    .blk-booking .svc-book__slotlist{grid-template-columns:repeat(3,1fr)}
    .blk-booking .svc-book__row{grid-template-columns:1fr}
}

/* ==========================================================================
   Blog listing — gradient cover fallback + seller sidebar rail
   Scoped to .bx--editorial so the shared .bx-* base (Trends/Proview) is untouched.
   ========================================================================== */

/* ---- Designed cover (shown when a post has no / a broken image) ----
   Editorial "cover": hue gradient + dot grid + glass initial + category label.
   Reads as an intentional cover, not an empty fallback. */
.bx--editorial .bx-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:14px;overflow:hidden;
    background:linear-gradient(140deg,hsl(var(--h,230) 64% 58%),hsl(calc(var(--h,230) + 44) 68% 43%))}
.bx--editorial .bx-ph__grid{position:absolute;inset:0;opacity:.55;
    background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.5px);background-size:15px 15px}
.bx--editorial .bx-ph::after{content:"";position:absolute;inset:0;
    background:radial-gradient(130% 100% at 82% 116%,rgba(3,6,32,.34),transparent 58%)}
.bx--editorial .bx-ph__mark{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
    font-family:"Space Grotesk","Inter",sans-serif;font-weight:800;font-size:28px;line-height:1;color:#fff;
    box-shadow:0 10px 30px -12px rgba(3,6,32,.5)}
.bx--editorial .bx-ph__cat{position:relative;z-index:2;max-width:82%;text-align:center;
    font:700 11px/1.2 "Inter",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.bx--editorial .bx-feature .bx-ph{gap:18px}
.bx--editorial .bx-feature .bx-ph__mark{width:86px;height:86px;border-radius:24px;font-size:42px}
.bx--editorial .bx-feature .bx-ph__cat{font-size:12.5px}
.bx--editorial .bx-card:hover .bx-ph__mark{transform:translateY(-2px);transition:transform .25s var(--bx-ease)}
/* Broken images: suppress the alt-text flash (screen readers still read alt);
   the neutral .ph panel shows until the onerror JS swaps in the designed cover. */
.bx--editorial .ph img{color:transparent}

/* ---- Card / featured editorial polish ---- */
.bx--editorial .bx-card{box-shadow:0 1px 2px rgba(16,22,44,.04)}
.bx--editorial .bx-card:hover{box-shadow:0 18px 40px -22px rgba(16,22,44,.5);border-color:var(--bx-line)}
.bx--editorial .bx-card .body{gap:0}
.bx--editorial .bx-card h3{letter-spacing:-.01em}
.bx--editorial .bx-card .meta{padding-top:13px;margin-top:13px;border-top:1px solid var(--bx-line)}
.bx--editorial .bx-feature{box-shadow:0 1px 2px rgba(16,22,44,.04)}
.bx--editorial .bx-feature:hover{box-shadow:0 26px 54px -26px rgba(16,22,44,.55)}
.bx--editorial .bx-feature h3{letter-spacing:-.015em}
.bx--editorial .bx-feature .meta{padding-top:15px;margin-top:4px;border-top:1px solid var(--bx-line)}
/* Read-story CTA reads like an affordance, animates its arrow on hover */
.bx--editorial .bx-readmore{margin-top:18px;gap:8px;font-weight:700}
.bx--editorial .bx-readmore svg{transition:transform .18s var(--bx-ease)}
.bx--editorial .bx-feature:hover .bx-readmore svg{transform:translateX(4px)}
/* Avatar chip a touch more refined */
.bx--editorial .bx-av{background:linear-gradient(135deg,var(--bx-primary),#7C4DFF);color:#fff}

/* ---- Seller sidebar rail ---- */
/* The seller rail carries many boxes (Start here, Most views, newsletter, tools,
   CTA) — taller than the viewport, so it flows with the page instead of sticking
   (a sticky rail that tall would clip its lower boxes). */
.bx--editorial .bx-side--seller{position:static}
/* Shared side-box helper note */
.bx--editorial .bx-side-note{font-size:12.5px;line-height:1.5;color:var(--bx-soft);margin:-8px 0 14px}

/* Side-box heading with a Tabler icon chip (replaces the default accent bar) */
.bx--editorial .bx-sbx h4::before{display:none}
.bx--editorial .bx-sbx h4{gap:10px}
.bx--editorial .bx-sbx__ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:28px;height:28px;border-radius:8px;background:var(--bx-primary-50);color:var(--bx-primary)}
.bx--editorial .bx-sbx__ic svg{width:16px;height:16px}

/* Numbered lists (Start here + Most read) — one unified number token */
.bx--editorial .bx-path{list-style:none;margin:0;padding:0}
.bx--editorial .bx-path li{border-top:1px solid var(--bx-line)}
.bx--editorial .bx-path li:first-child{border-top:0}
.bx--editorial .bx-path a{display:flex;gap:12px;align-items:center;padding:11px 0;color:var(--bx-ink);
    font-size:13.5px;font-weight:600;line-height:1.4;text-decoration:none;transition:color .15s var(--bx-ease)}
.bx--editorial .bx-path a:hover{color:var(--bx-primary)}
.bx--editorial .bx-num{flex-shrink:0;width:24px;height:24px;border-radius:8px;background:var(--bx-primary-50);
    color:var(--bx-primary);font-family:"Space Grotesk","Inter",sans-serif;font-size:12.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s var(--bx-ease),color .15s var(--bx-ease)}
.bx--editorial .bx-path a:hover .bx-num{background:var(--bx-primary);color:#fff}
.bx--editorial .bx-path__t{flex:1;min-width:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx--editorial .bx-path__v{flex-shrink:0;align-self:center;font-size:11.5px;font-weight:600;color:var(--bx-soft);
    font-variant-numeric:tabular-nums}

/* Newsletter form */
.bx--editorial .bx-news__form{display:flex;flex-direction:column;gap:9px}
.bx--editorial .bx-news__form input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--bx-line);
    background:var(--bx-panel);font-size:13.5px;font-family:inherit;color:var(--bx-ink)}
.bx--editorial .bx-news__form input:focus{outline:2px solid var(--bx-primary);outline-offset:1px;border-color:var(--bx-primary);background:#fff}
.bx--editorial .bx-news__form input::placeholder{color:#9AA1B8}
.bx--editorial .bx-news__form button{padding:11px 16px;border-radius:10px;border:0;background:var(--bx-primary);color:#fff;
    font-weight:600;font-size:14px;cursor:pointer;transition:filter .15s var(--bx-ease)}
.bx--editorial .bx-news__form button:hover{filter:brightness(1.07)}

/* Seller tools list */
.bx--editorial .bx-tool{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--bx-line);
    color:var(--bx-ink);font-size:13.5px;font-weight:600;text-decoration:none;transition:color .15s var(--bx-ease)}
.bx--editorial .bx-tool:first-of-type{border-top:0;padding-top:0}
.bx--editorial .bx-tool:hover{color:var(--bx-primary)}
.bx--editorial .bx-tool__ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--bx-primary-50);
    color:var(--bx-primary);display:flex;align-items:center;justify-content:center}
.bx--editorial .bx-tool__ic svg{width:17px;height:17px}
.bx--editorial .bx-tool__arr{margin-left:auto;width:15px;height:15px;color:#CBD0E0;flex-shrink:0;
    transition:transform .15s var(--bx-ease),color .15s var(--bx-ease)}
.bx--editorial .bx-tool:hover .bx-tool__arr{color:var(--bx-primary);transform:translateX(2px)}

/* ==========================================================================
   Featured lead story — premium editorial body. Scoped to .bx--editorial so
   the shared .bx-feature base (Trends/Proview) is untouched. Sets the hero card
   apart from the regular grid cards: gradient "Featured" chip + category kicker,
   larger display headline with a hover colour shift, a 3-line-clamped dek, a
   two-line author block and a divided "Read story" affordance.
   ========================================================================== */
.bx--editorial .bx-feature .body{padding:34px 36px 32px}

/* Eyebrow row: Featured chip + category kicker */
.bx--editorial .bx-feature__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* "Featured" chip — filled gradient, clearly ahead of the plain category pills */
.bx--editorial .bx-badge--feature{align-self:auto;gap:6px;color:#fff;
    background:linear-gradient(135deg,var(--bx-primary),#7C4DFF);
    box-shadow:0 6px 16px -9px rgba(88,103,223,.9)}
.bx--editorial .bx-badge--feature svg{width:13px;height:13px}
/* Category kicker beside the chip, separated by a dot */
.bx--editorial .bx-feature__cat{position:relative;min-width:0;padding-left:13px;font-size:11.5px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--bx-soft);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
.bx--editorial .bx-feature__cat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:4px;border-radius:50%;background:#C3C8D6}

/* Display headline + hover affordance */
.bx--editorial .bx-feature h3{font-size:clamp(23px,2.7vw,30px);line-height:1.18;margin:0 0 14px;
    letter-spacing:-.02em;transition:color .15s var(--bx-ease)}
.bx--editorial .bx-feature:hover h3{color:var(--bx-primary)}

/* Dek: comfortable measure, clamped to 3 lines for a stable card height */
.bx--editorial .bx-feature p{font-size:15.5px;line-height:1.62;color:var(--bx-soft);margin:0 0 22px;
    max-width:54ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Author block: avatar + name (ink) over the date (muted); no top divider */
.bx--editorial .bx-feature .meta{padding-top:0;margin-top:0;border-top:0;gap:12px;align-items:center}
.bx--editorial .bx-feature .bx-av{width:40px;height:40px;font-size:14px;border-radius:13px}
.bx--editorial .bx-feature__by{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.bx--editorial .bx-feature__by b{color:var(--bx-ink);font-weight:700;font-size:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx--editorial .bx-feature__by span{font-size:12.5px;color:var(--bx-soft)}

/* Read-story: sits under a hairline divider, stronger weight, arrow animates */
.bx--editorial .bx-feature .bx-readmore{margin-top:22px;padding-top:20px;
    border-top:1px solid var(--bx-line);font-size:14px;font-weight:700}

@media (max-width:680px){
    .bx--editorial .bx-feature .body{padding:24px 22px 26px}
    .bx--editorial .bx-feature h3{font-size:22px}
}