/*
 * Ask concept preview.
 *
 * Scoped below .nc-secondary--ask, same guarded-preview convention as
 * secondary-pages.css. Styles the real [wp_interactive_portfolio] shortcode
 * 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);
}

/* AskFolio 1.0.0 ships self-contained designs (classic, minimal, dark) whose
   selectors are deliberately doubled (section.wpip-portfolio.wpip-portfolio)
   so a host theme cannot restyle them by accident. The Ask page is the
   intended exception: it re-points the plugin's own --wpip-* variables at the
   Gallery Cabinet tokens. The selector below is tripled so it wins over every
   plugin design regardless of stylesheet order, and nothing in the plugin is
   edited. This is why the page had fallen back to the plain "classic" look. */
.nc-ask-interactive section.wpip-portfolio.wpip-portfolio.wpip-portfolio {
  --wpip-max: none;
  --wpip-bg: var(--nc-paper-raised);
  --wpip-ink: var(--nc-ink);
  --wpip-muted: var(--nc-ink-muted);
  --wpip-rule: var(--nc-rule-strong);
  --wpip-surface: var(--nc-stone-light);
  --wpip-hover: var(--nc-stone-light);
  --wpip-accent: var(--nc-ink);
  --wpip-on-accent: var(--nc-paper);
  --wpip-radius: 0;
  --wpip-frame-border: 0;
  --wpip-frame-pad: 0;
  --wpip-body-font: var(--nc-font-operational);
  --wpip-head-font: var(--nc-font-editorial);
  --wpip-head-weight: 400;
  --wpip-code-bg: var(--nc-stone-light);
  max-width: none;
  margin: 0;
  background: transparent;
  font-size: var(--nc-size-body);
}

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

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

/* The plugin's "Context is everything / Get better answers" strip is plugin
   self-promotion; the Ask page carries the "Powered by AskFolio" credit instead. */
.nc-ask-interactive section.wpip-portfolio.wpip-portfolio.wpip-portfolio .wpip-footer {
  display: none;
}

/* Small labels and suggestions use the theme's meta and body scale. */
.nc-ask-interactive section.wpip-portfolio.wpip-portfolio.wpip-portfolio .wpip-prompts-label,
.nc-ask-interactive section.wpip-portfolio.wpip-portfolio.wpip-portfolio .wpip-reset {
  font: 500 var(--nc-size-meta) / var(--nc-leading-meta) var(--nc-font-operational);
  letter-spacing: var(--nc-tracking-meta);
}

.nc-ask-interactive section.wpip-portfolio.wpip-portfolio.wpip-portfolio .wpip-suggestion {
  font-size: var(--nc-size-small);
}

/* "Powered by AskFolio by Niche Clever" credit, rendered by the theme under the box. */
.nc-ask-credit {
  margin: var(--nc-space-5) 0 0;
  font-family: var(--nc-font-operational);
  font-size: var(--nc-size-small);
  color: var(--nc-ink-muted);
}

.nc-ask-credit a {
  color: inherit;
  text-decoration: underline;
}

.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;
  }
}