/**
 * GS Stack — Block styles for gs-core/stack.
 * Vertical stack. Layout fixed, content editable.
 * Layout properties via CSS classes, NOT inline styles.
 *
 * @package GS_Core_Framework
 */

/* ── WRAPPER ISOLATION RESET ── */
.gs-stack-canvas-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.wp-block-gs-core-stack,
.gs-stack {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Gap scale */
.gs-stack.stack-gap-none, .wp-block-gs-core-stack.stack-gap-none { gap: 0; }
.gs-stack.stack-gap-xs, .wp-block-gs-core-stack.stack-gap-xs { gap: var(--space-2xs); }
.gs-stack.stack-gap-sm, .wp-block-gs-core-stack.stack-gap-sm { gap: var(--space-xs); }
.gs-stack.stack-gap-md, .wp-block-gs-core-stack.stack-gap-md { gap: var(--space-sm); }
.gs-stack.stack-gap-lg, .wp-block-gs-core-stack.stack-gap-lg { gap: var(--space-md); }
.gs-stack.stack-gap-xl, .wp-block-gs-core-stack.stack-gap-xl { gap: var(--space-lg); }
.gs-stack.stack-gap-2xl, .wp-block-gs-core-stack.stack-gap-2xl { gap: var(--space-xl); }

/* Align variants */
.gs-stack.stack-align-start, .wp-block-gs-core-stack.stack-align-start { align-items: flex-start; }
.gs-stack.stack-align-center, .wp-block-gs-core-stack.stack-align-center { align-items: center; }
.gs-stack.stack-align-end, .wp-block-gs-core-stack.stack-align-end { align-items: flex-end; }
.gs-stack.stack-align-stretch, .wp-block-gs-core-stack.stack-align-stretch { align-items: stretch; }

/* Reset WordPress layout interference */
.wp-block-gs-core-stack > *,
.gs-stack > * {
  margin: 0;
}

/* ── PRO INSPECTOR TAB BAR & SEGMENTED CONTROLS ── */
.gs-pro-inspector-tabs .components-tab-panel__tabs {
  display: flex;
  background: var(--canvas-2);
  border-bottom: 0.0625rem solid var(--border-subtle);
  margin-bottom: 1rem;
}

.gs-pro-inspector-tabs .components-tab-panel__tabs button {
  flex: 1;
  text-align: center;
  padding: 0.85rem 0.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 0.125rem solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gs-pro-inspector-tabs .components-tab-panel__tabs button:hover {
  color: var(--white);
  background: var(--surface);
}

.gs-pro-inspector-tabs .components-tab-panel__tabs button.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.gs-segmented-group {
  display: flex;
  width: 100%;
  background: oklch(21% 0.006 286);
  border-radius: var(--radius-md);
  border: 0.0625rem solid oklch(37% 0.012 286);
  overflow: hidden;
}

.gs-segmented-group .components-button {
  flex: 1;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  background: oklch(27% 0.005 286);
  color: oklch(71% 0.013 286);
  border: none;
  border-right: 0.0625rem solid oklch(37% 0.012 286);
  border-radius: 0;
  height: 2rem;
}

.gs-segmented-group .components-button:last-child {
  border-right: none;
}

.gs-segmented-group .components-button.is-primary {
  background: oklch(55% 0.215 263) !important;
  color: oklch(100% 0 0) !important;
}

/* ── INTENT TOKENS ── */
.gs-stack[data-intent="brand"] {
  --local-intent-color: var(--blue);
  --local-intent-bg: var(--brand);
  --local-intent-text: var(--white);
}

.gs-stack[data-intent="teal"] {
  --local-intent-color: var(--teal);
  --local-intent-bg: var(--teal);
  --local-intent-text: oklch(14% 0.004 286);
}

.gs-stack[data-intent="ember"] {
  --local-intent-color: var(--ember);
  --local-intent-bg: var(--ember);
  --local-intent-text: var(--white);
}

.gs-stack[data-intent="emerald"] {
  --local-intent-color: var(--emerald);
  --local-intent-bg: var(--emerald);
  --local-intent-text: oklch(14% 0.004 286);
}

.gs-stack[data-intent="surface"] {
  --local-intent-color: var(--border-subtle);
  --local-intent-bg: var(--surface);
  --local-intent-text: var(--white);
}

.gs-stack[data-intent="inverse"] {
  --local-intent-color: var(--ink);
  --local-intent-bg: var(--gs-light);
  --local-intent-text: var(--ink);
}

/* ── SIZES (data-size) ── */
.gs-stack[data-size="sm"] {
  --local-size-pad: 0.5rem;
  --local-size-font: var(--font-size-sm);
  --local-size-gap: 0.375rem;
}

.gs-stack[data-size="md"] {
  --local-size-pad: 1rem;
  --local-size-font: var(--font-size-md);
  --local-size-gap: 0.5rem;
}

.gs-stack[data-size="lg"] {
  --local-size-pad: 1.5rem;
  --local-size-font: var(--font-size-lg);
  --local-size-gap: 0.75rem;
}

.gs-stack[data-size="xl"] {
  --local-size-pad: 2rem;
  --local-size-font: var(--font-size-2xl);
  --local-size-gap: 1rem;
}

/* ── PRESETS MATRIX ── */
.gs-stack[data-preset="solid"] {
  background: var(--local-intent-bg);
  color: var(--local-intent-text);
  border: 0.0625rem solid transparent;
}

.gs-stack[data-preset="outline"] {
  background: transparent;
  color: var(--local-intent-color);
  border: 0.0625rem solid var(--local-intent-color);
}

.gs-stack[data-preset="cyber-stroke"],
.gs-stack[data-preset="cyber"] {
  background: color-mix(in oklch, var(--canvas-2) 90%, transparent);
  color: var(--white);
  border: 0.3125rem solid var(--local-intent-color);
  box-shadow: inset 0 0.0625rem 0 color-mix(in oklch, 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4), 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4)), 0 0.25rem 0.75rem oklch(0% 0 0 / 0.25);
}

.gs-stack[data-preset="glass"] {
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  color: var(--white);
  border: 0.0625rem solid color-mix(in oklch, var(--white) 15%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}

.gs-stack[data-preset="bordered"] {
  border: 0.0625rem solid var(--border-subtle);
  background: var(--surface);
}

.gs-stack[data-preset="minimal"] {
  background: transparent;
  border: none;
  box-shadow: none;
}