/*
 * Ask concept preview.
 *
 * Scoped below .nc-secondary--ask, same guarded-preview convention as
 * secondary-pages.css. Styles the real NCI panel ([ncip_panel] / [ncli_interactive])
 * output (rendered unmodified by nicheclever_secondary_preview_ask_a()) to
 * sit beside a context/status panel, translating a separate reference
 * project's "ask box" layout into the existing Gallery Cabinet vocabulary
 * (.nc-callout, .nc-eyebrow, .nc-display, .nc-prose) rather than new colours.
 */

.nc-secondary-hero--ask {
  grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
}

.nc-ask-context {
  position: sticky;
  top: var(--nc-space-6);
}

.nc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-space-2);
  margin-top: var(--nc-space-6);
  padding: var(--nc-space-2) var(--nc-space-4);
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  font-family: var(--nc-font-machine);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
}

.nc-status-pill--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nc-blue);
}

/* NCI Core ships self-contained panel designs (classic, minimal, dark) as
   section.ncli-panel[--minimal|--dark], driven by --ncli-* variables. The Ask
   page re-points those variables at the Gallery Cabinet tokens. The selector
   is tripled so it wins over every design regardless of stylesheet order, and
   nothing in the plugin is edited. */
.nc-ask-interactive section.ncli-panel.ncli-panel.ncli-panel {
  --ncli-max: none;
  --ncli-bg: var(--nc-paper-raised);
  --ncli-ink: var(--nc-ink);
  --ncli-muted: var(--nc-ink-muted);
  --ncli-rule: var(--nc-rule-strong);
  --ncli-surface: var(--nc-stone-light);
  --ncli-hover: var(--nc-stone-light);
  --ncli-accent: var(--nc-ink);
  --ncli-on-accent: var(--nc-paper);
  --ncli-focus: var(--nc-ink);
  --ncli-radius: 0;
  --ncli-frame-border: 0;
  --ncli-frame-pad: 0;
  --ncli-body-font: var(--nc-font-operational);
  --ncli-head-font: var(--nc-font-editorial);
  --ncli-heading-font: var(--nc-font-editorial);
  --ncli-head-weight: 400;
  max-width: none;
  margin: 0;
  background: transparent;
  font-size: var(--nc-size-body);
}

/* The panel's own bordered "frame" is for standalone embeds; here it fills
   the hero's second column. */
.nc-ask-interactive section.ncli-panel.ncli-panel.ncli-panel .ncli-panel__frame {
  border: 0;
  padding: 0;
}

/* The context panel already states the page's identity and lead copy; the
   panel's own internal title would otherwise duplicate that heading. */
.nc-ask-interactive section.ncli-panel.ncli-panel.ncli-panel .ncli-panel__header {
  display: none;
}

/* The panel's generic footer strip is replaced by the theme's own
   "Powered by Niche Clever Interactive" credit beneath the interface. */
.nc-ask-interactive section.ncli-panel.ncli-panel.ncli-panel .ncli-panel__footer {
  display: none;
}

/* Small labels and suggestions use the theme's meta and body scale. */
.nc-ask-interactive section.ncli-panel.ncli-panel.ncli-panel .ncli-panel__reset {
  font: 500 var(--nc-size-meta) / var(--nc-leading-meta) var(--nc-font-operational);
  letter-spacing: var(--nc-tracking-meta);
}

.nc-ask-interactive .ncip-ask__button {
  font-size: var(--nc-size-small);
}

.nc-secondary--ask > .nc-note {
  margin-top: var(--nc-space-6);
  padding-bottom: var(--nc-space-8);
}

@media (max-width: 900px) {
  .nc-secondary-hero--ask {
    grid-template-columns: 1fr;
  }

  .nc-ask-context {
    position: static;
  }
}

.nc-ask-tryasking {
  margin-top: var(--nc-space-6);
}

/* Two columns, as the AskFolio "Try asking" list was laid out; one column on narrow screens. */
.nc-ask-tryasking .ncip-ask__list {
  display: grid;
  gap: var(--nc-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: var(--nc-space-3) 0 0;
  padding: 0;
}

.nc-ask-tryasking .ncip-ask__button {
  display: block;
  height: 100%;
  width: 100%;
}

@media (max-width: 600px) {
  .nc-ask-tryasking .ncip-ask__list {
    grid-template-columns: 1fr;
  }
}