/* ============================================================
   AUTO SOCIAL PRODUCT SECTIONS — /tools/goji-auto-social/
   Registered with page_css() from partials/tool-autosocial.php, so it loads on ONE page and
   nowhere else. Everything here is prefixed .asx- and nests no further than one level, so it
   cannot reach a shared component.

   ⚠ MOBILE-FIRST. Every query below WIDENS (min-width). The base rules are the phone layout;
     a max-width query would have to undo them.

   ⚠ Every var() carries a literal fallback. An undefined custom property inside a shorthand is
     invalid at computed-value time and drops the WHOLE declaration — a border disappears
     entirely rather than falling back to a colour.

   ⚠ NO NEW COLOURS. The purple is the brand token, grounds and text come from the same tokens
     every other section uses, and there are no gradients, no glass and no lifted cards: these are
     surfaces to read, and the page already has a price table competing for attention.
   ============================================================ */

.asx .gs-sec-hdr { margin-bottom: 2rem; }

/* ---------- how it works: four steps -------------------------------
   Numbered because the order is real — you cannot choose destinations before connecting a site.
   A list, not a row of cards: four bordered boxes on a phone is four screens of scrolling. */
.asx-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  counter-reset: asx;
}
.asx-step { position: relative; padding-left: 3.25rem; }
.asx-step-n {
  position: absolute; left: 0; top: -.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 12px;
  background: var(--gs-cp-s, #f5f3ff);
  color: var(--gs-cp, #5b21b6);
  font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.asx-step-h { font-size: 1.02rem; font-weight: 700; margin: 0 0 .3rem; color: var(--gs-tx0, #0f172a); }
.asx-step-p { font-size: .9375rem; line-height: 1.65; color: var(--gs-tx1, #334155); margin: 0; max-width: 34rem; }

/* the pipeline, as one quiet line — it restates the steps, so it must not compete with them */
.asx-flow {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem .15rem;
  font-size: .8125rem; font-weight: 600;
  color: var(--gs-tx2, #64748b);
}
.asx-flow li {
  display: inline-flex; align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--gs-sf1, #f1f5f9);
  white-space: nowrap;
}
.asx-flow li + li::before {
  content: "\2192";
  margin: 0 .5rem 0 -.35rem;
  color: var(--gs-cp, #5b21b6);
  font-weight: 700;
}

/* ---------- capability grid ---------------------------------------
   Eight short cards. No shadow and no hover lift: this is a list of facts, and movement under the
   pointer on eight tiles at once reads as restless. */
.asx-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.asx-cap {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--gs-bd0, #e5e7eb);
  border-radius: 14px;
  background: var(--gs-sf0, #fff);
}
.asx-cap-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 11px;
  background: var(--gs-cp-s, #f5f3ff);
  color: var(--gs-cp, #5b21b6);
  font-size: 1.1rem;
  margin-bottom: .7rem;
}
.asx-cap-h { font-size: .975rem; font-weight: 700; margin: 0 0 .35rem; color: var(--gs-tx0, #0f172a); text-wrap: balance; }
.asx-cap-p { font-size: .875rem; line-height: 1.6; color: var(--gs-tx1, #334155); margin: 0; }

/* ---------- works with your site ---------------------------------- */
.asx-two { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: start; }
.asx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0 0; padding: 0; }
.asx-chip {
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--gs-bd0, #e5e7eb);
  background: var(--gs-sf0, #fff);
  font-size: .8125rem; font-weight: 600;
  color: var(--gs-tx0, #0f172a);
  white-space: nowrap;
}
.asx-note {
  padding: 1.35rem;
  border-radius: 16px;
  background: var(--gs-cp-s, #f5f3ff);
  border: 1px solid var(--gs-cp-b, #ddd6fe);
}
.asx-note-h { font-size: .975rem; font-weight: 700; margin: 0 0 .6rem; color: var(--gs-tx0, #0f172a); }
.asx-note-h > i { color: var(--gs-cp, #5b21b6); margin-right: .35rem; }
.asx-note-p { font-size: .875rem; line-height: 1.65; color: var(--gs-tx1, #334155); margin: 0 0 .65rem; }
.asx-note-p:last-child { margin-bottom: 0; }

/* ---------- closing CTA -------------------------------------------
   One band, centred, no artwork. It is the last thing asked before the page hands over to a
   different product, so it has to read as a full stop rather than another card. */
.asx-cta-box {
  max-width: 44rem; margin: 0 auto; text-align: center;
  padding: 2.25rem 1.25rem;
  border-radius: 20px;
  background: var(--gs-cp-s, #f5f3ff);
  border: 1px solid var(--gs-cp-b, #ddd6fe);
}
.asx-cta-h {
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .6rem; color: var(--gs-tx0, #0f172a);
  text-wrap: balance;
}
.asx-cta-p { font-size: 1rem; line-height: 1.65; color: var(--gs-tx1, #334155); margin: 0 auto 1.35rem; max-width: 33rem; }
.asx-cta-acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.asx-cta-acts .gs-btn { min-height: 46px; }
.asx-cta-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--gs-tx2, #64748b); }
.asx-cta-note > i { color: var(--gs-cs, #3d8b37); margin-right: .2rem; }

/* ---------- wider ---------------------------------------------------
   768: the steps and the capability grid can hold two columns.
   992: four steps read as a flow across the page, and the grid takes four. */
@media (min-width: 768px) {
  .asx-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
  .asx-grid  { grid-template-columns: 1fr 1fr; }
  .asx-two   { grid-template-columns: 1.15fr .85fr; gap: 2.5rem; }
}
@media (min-width: 992px) {
  .asx-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
  .asx-step  { padding-left: 0; padding-top: 3.1rem; }
  .asx-step-n { top: 0; }
  .asx-grid  { grid-template-columns: repeat(4, 1fr); }
  .asx-cta-box { padding: 2.75rem 2rem; }
}

/* ---------- dark ----------------------------------------------------
   Three states, not two: an explicit choice stamps data-theme and the DEFAULT "system" setting
   stamps nothing, so the un-stamped document needs prefers-color-scheme, guarded with
   :not([data-theme="light"]) so an explicit light choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .asx-cap { background: var(--gs-sf1, #161a1f); }
  :root:not([data-theme="light"]) .asx-step-n,
  :root:not([data-theme="light"]) .asx-cap-i { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
  :root:not([data-theme="light"]) .asx-note,
  :root:not([data-theme="light"]) .asx-cta-box { background: rgba(167, 139, 250, .08); border-color: rgba(167, 139, 250, .22); }
  :root:not([data-theme="light"]) .asx-flow li { background: rgba(255, 255, 255, .06); }
  :root:not([data-theme="light"]) .asx-chip { background: var(--gs-sf1, #161a1f); }
}
:root[data-theme="dark"] .asx-cap { background: var(--gs-sf1, #161a1f); }
:root[data-theme="dark"] .asx-step-n,
:root[data-theme="dark"] .asx-cap-i { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
:root[data-theme="dark"] .asx-note,
:root[data-theme="dark"] .asx-cta-box { background: rgba(167, 139, 250, .08); border-color: rgba(167, 139, 250, .22); }
:root[data-theme="dark"] .asx-flow li { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .asx-chip { background: var(--gs-sf1, #161a1f); }