/* =========================================================
   AI Design articles — one design shared by every post that
   sets 'shared' => '_ai-design' in its blog.php. Same look as
   the AI News articles (blogs/_ai-news/style.css: the nw-*
   classes), plus the parts longer guides need (ad-*): short
   answer, contents list, tables, tool cards, image grids.
   Colour, type and radius come from the site's tokens
   (assets/css/main.css). Every section is wrapped in .bmb.
   ========================================================= */
.bmb{
  --nw-ink:var(--text-primary);
  --nw-body:#3F3E39; /* a shade darker than --text-secondary: Helvetica is light at reading sizes */
  --nw-muted:#6E6C64;
  --nw-line:var(--border);
  --nw-brand:var(--accent);
  --nw-brand-strong:var(--accent-strong);
  --nw-tint:#FDF0F2;
  --nw-underline:#FBE6EA;
  color:var(--nw-body);font-family:var(--font-body);font-size:1.125rem;line-height:1.7;
}
.bmb p{margin:0 0 1.05em;}

/* Header */
.bmb .nw-head{padding-top:var(--space-5);margin-bottom:var(--space-5);border-bottom:2px solid var(--nw-ink);}
.bmb .nw-kick{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.9rem;font-family:var(--font-ui);}
.bmb .nw-when{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nw-muted);}
.bmb .nw-head h1{font-size:clamp(2.1rem, 2.4vw + 1.2rem, 3.2rem);max-width:24ch;margin:0 0 .9rem;}
.bmb .nw-dek{font-family:var(--font-display);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--nw-body);max-width:60ch;margin:0 0 .9rem;}
.bmb .nw-by{font-family:var(--font-ui);font-size:.82rem;color:var(--nw-muted);margin:0;padding-bottom:1.1rem;}
.bmb .nw-by b{color:var(--nw-ink);font-weight:600;}

/* Story sections */
.bmb .nw-sec{margin-top:var(--space-6);}
.bmb .nw-sec--lead{margin-top:0;}
.bmb .nw-sec > h2{font-size:clamp(1.5rem, 1.2vw + 1.1rem, 1.9rem);margin:0 0 .6em;}
.bmb .nw-sec > * + *{margin-top:1.05em;}
.bmb .nw-sec > h2 + *{margin-top:0;}

/* Running text */
.bmb .nw-rich > :last-child{margin-bottom:0;}
.bmb .nw-rich:empty{display:none;}
/* Comfortable reading measure (~75 characters a line); charts and images
   keep the full container width. */
.bmb .nw-rich,.bmb .nw-box,.bmb .nw-faq-list{max-width:72ch;}
.bmb .nw-rich a,.bmb .nw-fig figcaption a,.bmb .nw-faq a{color:var(--nw-brand-strong);font-weight:600;box-shadow:inset 0 -2px 0 var(--nw-underline);transition:box-shadow .2s var(--ease);}
.bmb .nw-rich a:hover,.bmb .nw-fig figcaption a:hover,.bmb .nw-faq a:hover{box-shadow:inset 0 -9px 0 var(--nw-underline);}
.bmb .nw-rich b,.bmb .nw-rich strong{color:var(--nw-ink);}
.bmb .nw-rich ul{list-style:none;padding:0;margin:0 0 1.1em;}
.bmb .nw-rich ul li{position:relative;padding:.4rem 0 .4rem 1.4rem;border-bottom:1px solid var(--nw-line);}
.bmb .nw-rich ul li::before{content:"";position:absolute;left:2px;top:1.05em;width:8px;height:8px;background:var(--nw-brand);}
.bmb .nw-rich ol{list-style:decimal;padding-left:1.25em;margin:0 0 1.1em;}
.bmb .nw-rich ol li{margin:.35em 0;}

/* Chart / image */
.bmb .nw-fig{margin:1.6rem 0;}
.bmb .nw-fig img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--nw-line);border-radius:var(--radius-md);}
.bmb .nw-fig figcaption{margin-top:.55rem;font-family:var(--font-ui);font-size:.84rem;line-height:1.5;color:var(--nw-muted);}

/* Highlight box */
.bmb .nw-box{background:var(--nw-tint);border-left:4px solid var(--nw-brand);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.1rem 1.4rem;}
.bmb .nw-box h3{font-size:1.2rem;margin:0 0 .4rem;}
.bmb .nw-num{display:block;font-family:var(--font-display);font-size:3.4rem;line-height:1;font-weight:700;color:var(--nw-brand);margin:.2rem 0 .4rem;}

/* FAQ */
.bmb .nw-faq-list{border-top:2px solid var(--nw-ink);}
.bmb .nw-faq details{border-bottom:1px solid var(--nw-line);}
.bmb .nw-faq summary{cursor:pointer;list-style:none;padding:.9rem 2.2rem .9rem 0;position:relative;}
.bmb .nw-faq summary::-webkit-details-marker{display:none;}
.bmb .nw-faq summary::after{content:"+";position:absolute;right:4px;top:.55rem;font-family:var(--font-ui);font-size:1.4rem;color:var(--nw-brand);}
.bmb .nw-faq details[open] summary::after{content:"\2212";}
.bmb .nw-faq summary h3{display:inline;font-size:1.1rem;margin:0;}
.bmb .nw-faq details p{margin:0 0 .9rem;font-size:1rem;}

/* Sources */
.bmb .nw-sources{margin-top:var(--space-7);font-family:var(--font-ui);font-size:.86rem;color:var(--nw-muted);}
.bmb .nw-sources h2{font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .65rem;padding-bottom:.4rem;border-bottom:1px solid var(--nw-ink);}
.bmb .nw-sources ol{list-style:decimal;padding-left:1.4em;margin:0;}
.bmb .nw-sources li{margin-bottom:.35rem;word-break:break-word;}
.bmb .nw-sources a{color:var(--nw-brand-strong);}
.bmb .nw-sources a:hover{text-decoration:underline;}

/* In-page jumps land below the sticky site header */
.bmb [id]{scroll-margin-top:110px;}

/* Breadcrumb */
.bmb .ad-crumbs{display:flex;flex-wrap:wrap;gap:.45rem;padding-top:var(--space-4);font-family:var(--font-ui);font-size:.8rem;color:var(--nw-muted);}
.bmb .ad-crumbs a{transition:color .2s var(--ease);}
.bmb .ad-crumbs a:hover{color:var(--nw-brand-strong);}
.bmb .ad-crumbs + .nw-head{padding-top:var(--space-4);}

/* Small uppercase label used by the answer box and contents */
.bmb .ad-label{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nw-brand-strong);margin:0 0 .55rem;}

/* Short answer */
.bmb .ad-answer{max-width:72ch;background:var(--nw-tint);border-left:4px solid var(--nw-brand);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.15rem 1.4rem;margin:0 0 var(--space-4);}

/* In this article */
.bmb .ad-toc{max-width:72ch;border:1px solid var(--nw-line);border-radius:var(--radius-md);padding:1rem 1.4rem;margin:0 0 var(--space-5);font-family:var(--font-ui);font-size:.95rem;}
.bmb .ad-toc .ad-label{color:var(--nw-muted);}
.bmb .ad-toc ol{list-style:decimal;padding-left:1.3em;margin:0;columns:2 18rem;column-gap:2rem;}
.bmb .ad-toc li{margin:.2rem 0;break-inside:avoid;}
.bmb .ad-toc a{color:var(--nw-ink);transition:color .2s var(--ease);}
.bmb .ad-toc a:hover{color:var(--nw-brand-strong);}

/* Sub-headings inside running text */
.bmb .nw-rich h3{font-size:1.3rem;margin:1.6em 0 .45em;}
.bmb .nw-rich > h3:first-child{margin-top:.4em;}

/* Tables */
.bmb .ad-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0;border:1px solid var(--nw-line);border-radius:var(--radius-md);}
.bmb .ad-table:focus-visible{outline:2px solid var(--nw-brand);outline-offset:2px;}
.bmb .ad-table table{width:100%;min-width:560px;border-collapse:collapse;font-family:var(--font-ui);font-size:.92rem;line-height:1.5;}
.bmb .ad-table th{background:var(--nw-ink);color:#fff;text-align:left;font-weight:600;padding:.7rem .9rem;}
.bmb .ad-table td{padding:.7rem .9rem;border-top:1px solid var(--nw-line);vertical-align:top;color:var(--nw-body);}
.bmb .ad-table tbody tr:nth-child(even) td{background:var(--bg-1);}
.bmb .ad-table b,.bmb .ad-table strong{color:var(--nw-ink);}

/* Image grid */
.bmb .ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0;}
.bmb .ad-grid--1{grid-template-columns:1fr;}
.bmb .ad-grid--3,.bmb .ad-grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.bmb .ad-grid .nw-fig{margin:0;}

/* Tool card */
.bmb .ad-card{max-width:72ch;border:1px solid var(--nw-line);border-radius:var(--radius-md);padding:1.3rem 1.5rem;margin:1.4rem 0;background:var(--bg-0);}
.bmb .ad-card h3{font-size:1.35rem;margin:0 0 .6rem;}
.bmb .ad-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem;}
.bmb .ad-pc{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem;font-family:var(--font-ui);font-size:.92rem;line-height:1.55;}
.bmb .ad-pc > div{background:var(--bg-1);border-radius:var(--radius-sm);padding:.75rem .9rem;}
.bmb .ad-pc b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nw-muted);margin-bottom:.25rem;}
.bmb .ad-pc p{margin:0;}
.bmb .ad-card-link{display:inline-block;margin-top:1rem;font-family:var(--font-ui);font-size:.88rem;font-weight:700;color:var(--nw-brand-strong);box-shadow:inset 0 -2px 0 var(--nw-underline);transition:box-shadow .2s var(--ease);}
.bmb .ad-card-link:hover{box-shadow:inset 0 -9px 0 var(--nw-underline);}

/* Note */
.bmb .ad-note{background:var(--bg-1);border-radius:var(--radius-md);padding:1rem 1.3rem;font-family:var(--font-ui);font-size:.95rem;line-height:1.6;}

/* The FAQ answers in these guides can be long */
.bmb .nw-faq details p{line-height:1.65;}

@media (max-width:640px){
  .bmb .ad-pc{grid-template-columns:1fr;}
  .bmb .ad-grid{grid-template-columns:1fr;}
  .bmb .ad-card{padding:1.1rem 1.1rem;}
  .bmb{font-size:1.0625rem;}
  .bmb .nw-num{font-size:2.8rem;}
}

/* =========================================================
   Sidebar contents (desktop). blog-single.php adds
   .bm-blog--ai-design to the article. On wide screens the
   sections sit in a two-column grid: the header spans both
   columns, the "In this article" list takes the right column
   and sticks below the navbar while the article scrolls.
   script.js marks the section being read (.is-active).
   Works with Elementor (grid on its container) and without
   it (grid on the article itself).
   ========================================================= */
@media (min-width:1100px){
  .bm-blog--ai-design{--ad-side-top:calc(var(--wp-admin--admin-bar--height, 0px) + 104px);}

  .bm-blog--ai-design > .elementor > .e-con,
  .bm-blog--ai-design:not(:has(> .elementor)){
    display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:clamp(2.5rem, 4vw, 4.5rem);align-items:start;
  }
  .bm-blog--ai-design > .elementor > .e-con > *,
  .bm-blog--ai-design > .bmb{grid-column:1;min-width:0;width:auto;}

  /* Breadcrumb + headline run the full width */
  .bm-blog--ai-design > .elementor > .e-con > :has(.bmb-header),
  .bm-blog--ai-design > .bmb-header{grid-column:1 / -1;}

  /* The contents list: right column, from the row under the header to the end */
  .bm-blog--ai-design > .elementor > .e-con > :has(.bmb-contents),
  .bm-blog--ai-design > .bmb-contents{
    grid-column:2;grid-row:2 / span 80;align-self:start;
    position:sticky;top:var(--ad-side-top);
  }

  .bm-blog--ai-design .ad-toc{
    max-height:calc(100vh - var(--ad-side-top) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;
    margin:0;padding:0 .25rem 0 0;border:0;border-radius:0;font-size:.86rem;max-width:none;
    scrollbar-width:none;-ms-overflow-style:none; /* still scrolls, no visible bar */
  }
  .bm-blog--ai-design .ad-toc::-webkit-scrollbar{display:none;width:0;height:0;}
  .bm-blog--ai-design .ad-toc .ad-label{
    position:sticky;top:0;z-index:1;margin:0;padding:.1rem 0 .7rem;background:var(--bg-0);
    color:var(--nw-ink);border-bottom:2px solid var(--nw-ink);
  }
  .bm-blog--ai-design .ad-toc ol{columns:auto;list-style:none;padding:0;margin:0;counter-reset:ad-toc;}
  .bm-blog--ai-design .ad-toc li{counter-increment:ad-toc;margin:0;border-bottom:1px solid var(--nw-line);}
  .bm-blog--ai-design .ad-toc a{
    display:grid;grid-template-columns:1.6rem 1fr;gap:.2rem;padding:.6rem .5rem .6rem .7rem;line-height:1.4;
    color:var(--nw-muted);border-left:3px solid transparent;
    transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  }
  .bm-blog--ai-design .ad-toc a::before{
    content:counter(ad-toc, decimal-leading-zero);font-size:.72rem;font-weight:700;letter-spacing:.04em;
    color:var(--text-tertiary);padding-top:.12rem;
  }
  .bm-blog--ai-design .ad-toc a:hover{color:var(--nw-ink);background:var(--bg-1);}
  .bm-blog--ai-design .ad-toc a.is-active{color:var(--nw-ink);font-weight:600;background:var(--nw-tint);border-left-color:var(--nw-brand);}
  .bm-blog--ai-design .ad-toc a.is-active::before{color:var(--nw-brand);}

  /* The answer box is the first thing in the left column */
  .bm-blog--ai-design .ad-answer{margin-top:0;}
}