/*
 * The AI Assistant marketing blocks (home, Features, Pro, Pricing bridge).
 *
 * SOURCE: boards M1–M7 of `docs/design/WPBR AI Assistant Packet`. ADDITIVE:
 * every selector is `wpbr-ai*`, every colour is a token, and the sheet loads
 * only while the launch switch is on (`wpbr_ai_is_open()`), so closed pages
 * carry none of it. Mobile first; the two-column layouts start at 900px.
 */
.wpbr-ai__mark { color: var(--wpbr-blue-type); font-weight: var(--wpbr-weight-bold); }
.wpbr-ai__note { margin: var(--wpbr-space-3) 0 0; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }

/* Home: copy, then the steps. Stacked on a phone, side by side from 900px. */
.wpbr-ai--home .wpbr-ai__grid { display: grid; gap: var(--wpbr-space-6); align-items: center; padding: var(--wpbr-space-6); border-radius: 24px; background: var(--wpbr-mist); }
.wpbr-ai--home h2 { margin: 0 0 var(--wpbr-space-3); }
.wpbr-ai--home .wpbr-rd-actions .wpbr-btn { min-height: 48px; }
.wpbr-ai__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpbr-space-3); }
.wpbr-ai__steps li { display: flex; gap: var(--wpbr-space-3); align-items: flex-start; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-ai__steps strong { display: block; }

/* Features: the two-way comparison. Both sides are positive. */
.wpbr-ai__pair { list-style: none; margin: var(--wpbr-space-6) 0 0; padding: 0; display: grid; gap: var(--wpbr-space-4); }
.wpbr-ai__pair li { padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-ai__pair li.is-ask { background: var(--wpbr-mist); border-color: rgba(0, 109, 245, .3); }
.wpbr-ai__pair h3 { margin: 0 0 var(--wpbr-space-2); }
.wpbr-ai__pair p:last-child { margin-bottom: 0; }
.wpbr-ai__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wpbr-space-4); margin: var(--wpbr-space-6) 0 0; justify-content: center; }
.wpbr-ai__cta .wpbr-ai__note { margin: 0; }

/* Pro callout and the Pricing bridge share one shape. */
.wpbr-ai__callout { display: grid; gap: var(--wpbr-space-4); align-items: center; padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-mist); border: 1px solid rgba(0, 109, 245, .25); }
.wpbr-ai__callout h2 { margin: 0 0 var(--wpbr-space-2); }
.wpbr-ai__callout p { margin: 0; }
.wpbr-ai--bridge { padding-top: 0; }

@media (min-width: 900px) {
  .wpbr-ai--home .wpbr-ai__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--wpbr-space-8); }
  .wpbr-ai__pair { grid-template-columns: 1fr 1fr; }
  .wpbr-ai__callout { grid-template-columns: minmax(0, 1.4fr) auto; }
}
@media (max-width: 640px) {
  .wpbr-ai--home .wpbr-rd-actions { flex-direction: column; align-items: stretch; }
  .wpbr-ai--home .wpbr-rd-actions .wpbr-btn { text-align: center; }
  .wpbr-ai__cta { flex-direction: column; align-items: stretch; text-align: center; }
  .wpbr-ai__cta .wpbr-btn { min-height: 48px; }
}

/* Links on the mist panels need the darker blue to reach 4.5:1 (axe: #006df5 on #eaf4ff is 4.19). */
.wpbr-ai .wpbr-actionlink { color: var(--wpbr-blue-type); }

/* The add-on page body (board M6). */
.wpbr-ai-page__asst { display: grid; gap: var(--wpbr-space-6); align-items: start; }
.wpbr-ai-page__asst h2 { margin: 0 0 var(--wpbr-space-3); }
.wpbr-ai-page__asks { padding: var(--wpbr-space-5); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-mist); border: 1px solid rgba(0, 109, 245, .25); }
.wpbr-ai-page__asks h3 { margin: 0 0 var(--wpbr-space-3); }
.wpbr-ai-page__asks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpbr-space-3); }
.wpbr-ai-page__asks li { padding: var(--wpbr-space-3) var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-ai-page__asks q { quotes: "“" "”"; }
.wpbr-ai-page__modes { list-style: none; margin: var(--wpbr-space-4) 0 0; padding: 0; display: grid; gap: var(--wpbr-space-3); }
.wpbr-ai-page__modes li { display: flex; flex-direction: column; gap: 4px; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-ai-page__either { margin: var(--wpbr-space-4) 0 0; font-weight: var(--wpbr-weight-semi); }
.wpbr-ai-page__dev { display: grid; gap: var(--wpbr-space-4); align-items: center; }
.wpbr-ai-page__dev h2, .wpbr-ai-page__dev p { margin: 0 0 var(--wpbr-space-2); }
@media (min-width: 900px) {
  .wpbr-ai-page__asst { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .wpbr-ai-page__modes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .wpbr-ai-page__dev { grid-template-columns: minmax(0, 1fr) auto; }
}
.wpbr-ai-page__modes { margin-bottom: var(--wpbr-space-4); }

/* Guides band and the end-of-article line (plan §2.7, §2.8). */
.wpbr-ai--guides .wpbr-docs__paths { margin: var(--wpbr-space-5) 0 0; }
.wpbr-ai--guides .wpbr-docs__paths > div { padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); border-top: 4px solid var(--wpbr-rule); }
.wpbr-ai--guides .wpbr-docs__paths > div.is-assistant { border-top-color: var(--wpbr-blue); }
.wpbr-ai--guides .wpbr-docs__paths > div.is-developers { border-top-color: var(--wpbr-navy); }
.wpbr-ai--guides ul { list-style: none; margin: 0; padding: 0; }
.wpbr-ai--guides li { margin: 0 0 var(--wpbr-space-2); }
.wpbr-ai--endcard { max-width: var(--wpbr-page-max, 760px); margin: var(--wpbr-space-6) auto; padding: var(--wpbr-space-4) var(--wpbr-gutter); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-mist); }
.wpbr-ai--endcard p { margin: 0; }
.wpbr-ai--guides .wpbr-docs__paths { display: grid; gap: var(--wpbr-space-4); }
@media (min-width: 900px) { .wpbr-ai--guides .wpbr-docs__paths { grid-template-columns: 1fr 1fr; } }
/* Product screenshots: figures appear only when the capture file exists (wpbr_ai_shot). */
.wpbr-ai__shot { margin: 0; max-width: var(--shot-w, none); }
.wpbr-ai__shot picture, .wpbr-ai__shot img { display: block; width: 100%; height: auto; }
.wpbr-ai__shot img { border-radius: var(--wpbr-radius-lg); border: 1px solid var(--wpbr-rule); box-shadow: var(--wpbr-shadow-screen); background: var(--wpbr-white); }
.wpbr-ai__shot figcaption { margin-top: var(--wpbr-space-2); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-ai--features .wpbr-ai__shot { max-width: min(var(--shot-w, 1040px), 1040px); margin: var(--wpbr-space-6) auto 0; }
.wpbr-ai--pro .wpbr-ai__shot--s3 { max-width: min(var(--shot-w, 520px), 520px); margin: var(--wpbr-space-5) auto 0; }

/* The finished hero illustration (replaces the text flow): responsive, no layout shift. */
.wpbr-ai-hero, .wpbr-ai-hero img { display: block; width: 100%; height: auto; }
.wpbr-ai-hero__cap { margin: var(--wpbr-space-2) 0 0; }
.wpbr-ai-page__side { display: grid; gap: var(--wpbr-space-4); align-content: start; }
.wpbr-ai-page__side .wpbr-ai__shot { max-width: min(var(--shot-w, 560px), 560px); }
.wpbr-ai-page__modes + .wpbr-ai-page__either + .wpbr-ai__shot--s2 { max-width: min(var(--shot-w, 640px), 640px); margin-top: var(--wpbr-space-4); }

/* The sidebar strip on the add-on page: figures appear only when their capture exists; one centred column, at most 720px each. */
.wpbr-ai-page__gallery { display: grid; gap: var(--wpbr-space-7, 40px); justify-items: center; }
.wpbr-ai-page__gallery .wpbr-ai__shot { margin: 0; width: 100%; max-width: min(100%, var(--shot-w, 720px)); }
.wpbr-ai-page__gallery .wpbr-ai__shot--s5 { max-width: min(100%, 300px); }