/**
 * minStructure CSS Utilities
 * All styling driven by data attributes — no inline styles.
 * Token-based spacing: s/m/l/xl map to CSS custom properties.
 *
 * Three levels:
 *   data-s-*  → Section wrapper
 *   data-g-*  → Grid layout
 *   data-i-*  → Item positioning (flex + grid)
 */

/* ════════════════════════════════════════════════════════════════
   TOKENS (fallback values — prototypes should define their own)
   ════════════════════════════════════════════════════════════════ */

:root {
  --ms-space-none: 0;
  --ms-space-s: var(--min-space-sm, clamp(0.5rem, 1vw, 0.75rem));
  --ms-space-m: var(--min-space-md, clamp(1rem, 2vw, 1.5rem));
  --ms-space-l: var(--min-space-lg, clamp(1.5rem, 3vw, 2.5rem));
  --ms-space-xl: var(--min-space-xl, clamp(2.5rem, 5vw, 4rem));
}


/* ════════════════════════════════════════════════════════════════
   SECTION (data-s-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Width ── */
[data-s-width="narrow"] > :is(.container, .min-container) { max-width: 640px; }
[data-s-width="medium"] > :is(.container, .min-container) { max-width: 960px; }
[data-s-width="wide"]   > :is(.container, .min-container) { max-width: 1200px; }
[data-s-width="full"]   > :is(.container, .min-container) { max-width: none; }

/* ── Padding: Block shorthand (top + bottom) ── */
[data-s-padding="none"] { padding-block: var(--ms-space-none); }
[data-s-padding="s"]    { padding-block: var(--ms-space-s); }
[data-s-padding="m"]    { padding-block: var(--ms-space-m); }
[data-s-padding="l"]    { padding-block: var(--ms-space-l); }
[data-s-padding="xl"]   { padding-block: var(--ms-space-xl); }

/* ── Padding: Individual directions (override block shorthand) ── */
[data-s-pt="none"] { padding-top: var(--ms-space-none); }
[data-s-pt="s"]    { padding-top: var(--ms-space-s); }
[data-s-pt="m"]    { padding-top: var(--ms-space-m); }
[data-s-pt="l"]    { padding-top: var(--ms-space-l); }
[data-s-pt="xl"]   { padding-top: var(--ms-space-xl); }

[data-s-pb="none"] { padding-bottom: var(--ms-space-none); }
[data-s-pb="s"]    { padding-bottom: var(--ms-space-s); }
[data-s-pb="m"]    { padding-bottom: var(--ms-space-m); }
[data-s-pb="l"]    { padding-bottom: var(--ms-space-l); }
[data-s-pb="xl"]   { padding-bottom: var(--ms-space-xl); }

/* ── Padding: Inline (left + right) ── */
[data-s-px="none"] { padding-inline: var(--ms-space-none); }
[data-s-px="s"]    { padding-inline: var(--ms-space-s); }
[data-s-px="m"]    { padding-inline: var(--ms-space-m); }
[data-s-px="l"]    { padding-inline: var(--ms-space-l); }
[data-s-px="xl"]   { padding-inline: var(--ms-space-xl); }

/* ── Margin: Block shorthand (top + bottom) ── */
[data-s-margin="none"] { margin-block: var(--ms-space-none); }
[data-s-margin="s"]    { margin-block: var(--ms-space-s); }
[data-s-margin="m"]    { margin-block: var(--ms-space-m); }
[data-s-margin="l"]    { margin-block: var(--ms-space-l); }
[data-s-margin="xl"]   { margin-block: var(--ms-space-xl); }

/* ── Margin: Individual directions (override block shorthand) ── */
[data-s-mt="none"] { margin-top: var(--ms-space-none); }
[data-s-mt="s"]    { margin-top: var(--ms-space-s); }
[data-s-mt="m"]    { margin-top: var(--ms-space-m); }
[data-s-mt="l"]    { margin-top: var(--ms-space-l); }
[data-s-mt="xl"]   { margin-top: var(--ms-space-xl); }

[data-s-mb="none"] { margin-bottom: var(--ms-space-none); }
[data-s-mb="s"]    { margin-bottom: var(--ms-space-s); }
[data-s-mb="m"]    { margin-bottom: var(--ms-space-m); }
[data-s-mb="l"]    { margin-bottom: var(--ms-space-l); }
[data-s-mb="xl"]   { margin-bottom: var(--ms-space-xl); }

/* ── Margin: Inline (left + right) ── */
[data-s-mx="none"] { margin-inline: var(--ms-space-none); }
[data-s-mx="s"]    { margin-inline: var(--ms-space-s); }
[data-s-mx="m"]    { margin-inline: var(--ms-space-m); }
[data-s-mx="l"]    { margin-inline: var(--ms-space-l); }
[data-s-mx="xl"]   { margin-inline: var(--ms-space-xl); }

/* ── Container Alignment ── */
[data-s-align="left"]   > :is(.container, .min-container) { margin-inline: 0 auto; }
[data-s-align="center"] > :is(.container, .min-container) { margin-inline: auto; }
[data-s-align="right"]  > :is(.container, .min-container) { margin-inline: auto 0; }


/* ════════════════════════════════════════════════════════════════
   FLEXBOX CONTAINER (data-s-display + data-s-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Display ── */
[data-s-display="flex"] > :is(.container, .min-container) { display: flex; }
[data-s-display="grid"] > :is(.container, .min-container) { display: grid; }
[data-s-display="block"] > :is(.container, .min-container) { display: block; }

/* ── Flex Direction ── */
[data-s-direction="row"]            > :is(.container, .min-container) { flex-direction: row; }
[data-s-direction="column"]         > :is(.container, .min-container) { flex-direction: column; }
[data-s-direction="row-reverse"]    > :is(.container, .min-container) { flex-direction: row-reverse; }
[data-s-direction="column-reverse"] > :is(.container, .min-container) { flex-direction: column-reverse; }

/* ── Justify Content (main axis) ── */
[data-s-justify="start"]   > :is(.container, .min-container) { justify-content: flex-start; }
[data-s-justify="center"]  > :is(.container, .min-container) { justify-content: center; }
[data-s-justify="end"]     > :is(.container, .min-container) { justify-content: flex-end; }
[data-s-justify="between"] > :is(.container, .min-container) { justify-content: space-between; }
[data-s-justify="around"]  > :is(.container, .min-container) { justify-content: space-around; }
[data-s-justify="evenly"]  > :is(.container, .min-container) { justify-content: space-evenly; }

/* ── Align Items (cross axis) ── */
[data-s-items="start"]    > :is(.container, .min-container) { align-items: flex-start; }
[data-s-items="center"]   > :is(.container, .min-container) { align-items: center; }
[data-s-items="end"]      > :is(.container, .min-container) { align-items: flex-end; }
[data-s-items="stretch"]  > :is(.container, .min-container) { align-items: stretch; }
[data-s-items="baseline"] > :is(.container, .min-container) { align-items: baseline; }

/* ── Flex Wrap ── */
[data-s-wrap="nowrap"]       > :is(.container, .min-container) { flex-wrap: nowrap; }
[data-s-wrap="wrap"]         > :is(.container, .min-container) { flex-wrap: wrap; }
[data-s-wrap="wrap-reverse"] > :is(.container, .min-container) { flex-wrap: wrap-reverse; }


/* ════════════════════════════════════════════════════════════════
   GRID (data-g-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Columns ── */
[data-g-cols]    > :is(.container, .min-container) { display: grid; }
[data-g-cols="1"]  > :is(.container, .min-container) { grid-template-columns: 1fr; }
[data-g-cols="2"]  > :is(.container, .min-container) { grid-template-columns: repeat(2, 1fr); }
[data-g-cols="3"]  > :is(.container, .min-container) { grid-template-columns: repeat(3, 1fr); }
[data-g-cols="4"]  > :is(.container, .min-container) { grid-template-columns: repeat(4, 1fr); }
[data-g-cols="6"]  > :is(.container, .min-container) { grid-template-columns: repeat(6, 1fr); }
[data-g-cols="12"] > :is(.container, .min-container) { grid-template-columns: repeat(12, 1fr); }

/* ── Gap ── */
[data-g-gap="none"] > :is(.container, .min-container) { gap: var(--ms-space-none); }
[data-g-gap="s"]    > :is(.container, .min-container) { gap: var(--ms-space-s); }
[data-g-gap="m"]    > :is(.container, .min-container) { gap: var(--ms-space-m); }
[data-g-gap="l"]    > :is(.container, .min-container) { gap: var(--ms-space-l); }
[data-g-gap="xl"]   > :is(.container, .min-container) { gap: var(--ms-space-xl); }

/* ── Flow (reverse order) ── */
[data-g-flow="row-reverse"] > :is(.container, .min-container) { direction: rtl; }
[data-g-flow="row-reverse"] > :is(.container, .min-container) > * { direction: ltr; }

/* ── Vertical Alignment ── */
[data-g-valign="top"]     > :is(.container, .min-container) { align-items: start; }
[data-g-valign="center"]  > :is(.container, .min-container) { align-items: center; }
[data-g-valign="bottom"]  > :is(.container, .min-container) { align-items: end; }
[data-g-valign="stretch"] > :is(.container, .min-container) { align-items: stretch; }


/* ════════════════════════════════════════════════════════════════
   ITEMS (data-i-*) — on child elements within sections
   ════════════════════════════════════════════════════════════════ */

/* ── Grid Span ── */
[data-i-span="1"]  { grid-column: span 1; }
[data-i-span="2"]  { grid-column: span 2; }
[data-i-span="3"]  { grid-column: span 3; }
[data-i-span="4"]  { grid-column: span 4; }
[data-i-span="5"]  { grid-column: span 5; }
[data-i-span="6"]  { grid-column: span 6; }
[data-i-span="7"]  { grid-column: span 7; }
[data-i-span="8"]  { grid-column: span 8; }
[data-i-span="9"]  { grid-column: span 9; }
[data-i-span="10"] { grid-column: span 10; }
[data-i-span="11"] { grid-column: span 11; }
[data-i-span="12"] { grid-column: span 12; }

/* ── Grid Start Position ── */
[data-i-start="1"]  { grid-column-start: 1; }
[data-i-start="2"]  { grid-column-start: 2; }
[data-i-start="3"]  { grid-column-start: 3; }
[data-i-start="4"]  { grid-column-start: 4; }
[data-i-start="5"]  { grid-column-start: 5; }
[data-i-start="6"]  { grid-column-start: 6; }
[data-i-start="7"]  { grid-column-start: 7; }
[data-i-start="8"]  { grid-column-start: 8; }
[data-i-start="9"]  { grid-column-start: 9; }
[data-i-start="10"] { grid-column-start: 10; }
[data-i-start="11"] { grid-column-start: 11; }
[data-i-start="12"] { grid-column-start: 12; }

/* ── Item Padding ── */
[data-i-pad="none"] { padding: var(--ms-space-none); }
[data-i-pad="s"]    { padding: var(--ms-space-s); }
[data-i-pad="m"]    { padding: var(--ms-space-m); }
[data-i-pad="l"]    { padding: var(--ms-space-l); }

/* ── Item Order ── */
[data-i-order="-1"] { order: -1; }
[data-i-order="0"]  { order: 0; }
[data-i-order="1"]  { order: 1; }
[data-i-order="2"]  { order: 2; }
[data-i-order="3"]  { order: 3; }
[data-i-order="4"]  { order: 4; }
[data-i-order="5"]  { order: 5; }

/* ── Align Self (cross axis, per item) ── */
[data-i-self="auto"]    { align-self: auto; }
[data-i-self="start"]   { align-self: flex-start; }
[data-i-self="center"]  { align-self: center; }
[data-i-self="end"]     { align-self: flex-end; }
[data-i-self="stretch"] { align-self: stretch; }

/* ── Justify Self (main axis, per item — grid only) ── */
[data-i-justify="auto"]    { justify-self: auto; }
[data-i-justify="start"]   { justify-self: start; }
[data-i-justify="center"]  { justify-self: center; }
[data-i-justify="end"]     { justify-self: end; }
[data-i-justify="stretch"] { justify-self: stretch; }

/* ── Flex Grow ── */
[data-i-grow="0"] { flex-grow: 0; }
[data-i-grow="1"] { flex-grow: 1; }

/* ── Flex Shrink ── */
[data-i-shrink="0"] { flex-shrink: 0; }
[data-i-shrink="1"] { flex-shrink: 1; }

/* ── Flex Basis ── */
[data-i-basis="auto"] { flex-basis: auto; }
[data-i-basis="0"]    { flex-basis: 0; }
[data-i-basis="25"]   { flex-basis: 25%; }
[data-i-basis="33"]   { flex-basis: 33.333%; }
[data-i-basis="50"]   { flex-basis: 50%; }
[data-i-basis="66"]   { flex-basis: 66.666%; }
[data-i-basis="75"]   { flex-basis: 75%; }
[data-i-basis="100"]  { flex-basis: 100%; }


/* ════════════════════════════════════════════════════════════════
   ELEMENT LEVEL (data-e-*) — content elements inside sections
   ════════════════════════════════════════════════════════════════ */

/* ── Internal Layout Variants ── */
[data-e-layout="2col"]             > :is(.container, .min-container) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space-m); align-items: start; }
[data-e-layout="heading-left"]     > :is(.container, .min-container) { display: grid; grid-template-columns: 1fr 2fr; gap: var(--ms-space-m); align-items: start; }
[data-e-layout="heading-right"]    > :is(.container, .min-container) { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ms-space-m); align-items: start; }
[data-e-layout="2col-wide-left"]   > :is(.container, .min-container) { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ms-space-m); align-items: start; }
[data-e-layout="2col-wide-right"]  > :is(.container, .min-container) { display: grid; grid-template-columns: 1fr 2fr; gap: var(--ms-space-m); align-items: start; }
[data-e-layout="stacked"]          > :is(.container, .min-container) { display: block; }

/* ── Grid Start Position (element within page grid) ── */
[data-e-start="1"]  { grid-column-start: 1; }
[data-e-start="2"]  { grid-column-start: 2; }
[data-e-start="3"]  { grid-column-start: 3; }
[data-e-start="4"]  { grid-column-start: 4; }
[data-e-start="5"]  { grid-column-start: 5; }
[data-e-start="6"]  { grid-column-start: 6; }
[data-e-start="7"]  { grid-column-start: 7; }
[data-e-start="8"]  { grid-column-start: 8; }
[data-e-start="9"]  { grid-column-start: 9; }
[data-e-start="10"] { grid-column-start: 10; }
[data-e-start="11"] { grid-column-start: 11; }
[data-e-start="12"] { grid-column-start: 12; }

/* ── Inset (equal margin from both sides, in grid columns) ── */
[data-e-inset="0"] { grid-column: 1 / -1; }
[data-e-inset="1"] { grid-column: 2 / -2; }
[data-e-inset="2"] { grid-column: 3 / -3; }
[data-e-inset="3"] { grid-column: 4 / -4; }

/* ── Text Alignment ── */
[data-e-textAlign="left"]    { text-align: left; }
[data-e-textAlign="center"]  { text-align: center; }
[data-e-textAlign="right"]   { text-align: right; }
[data-e-textAlign="justify"] { text-align: justify; }

/* ── Vertical Alignment (as flex child) ── */
[data-e-vAlign="top"]     { align-self: flex-start; }
[data-e-vAlign="center"]  { align-self: center; }
[data-e-vAlign="bottom"]  { align-self: flex-end; }
[data-e-vAlign="stretch"] { align-self: stretch; }

/* ── Order ── */
[data-e-order="-1"] { order: -1; }
[data-e-order="0"]  { order: 0; }
[data-e-order="1"]  { order: 1; }
[data-e-order="2"]  { order: 2; }
[data-e-order="3"]  { order: 3; }
[data-e-order="4"]  { order: 4; }
[data-e-order="5"]  { order: 5; }
[data-e-order="99"] { order: 99; }

/* ── Grid Span (element inside grid) ── */
[data-e-span="1"]  { grid-column: span 1; }
[data-e-span="2"]  { grid-column: span 2; }
[data-e-span="3"]  { grid-column: span 3; }
[data-e-span="4"]  { grid-column: span 4; }
[data-e-span="6"]  { grid-column: span 6; }
[data-e-span="12"] { grid-column: span 12; }

/* ── Flex Grow ── */
[data-e-grow="0"] { flex-grow: 0; }
[data-e-grow="1"] { flex-grow: 1; }

/* ── Flex Basis ── */
[data-e-basis="auto"] { flex-basis: auto; }
[data-e-basis="0"]    { flex-basis: 0; }
[data-e-basis="25"]   { flex-basis: 25%; }
[data-e-basis="33"]   { flex-basis: 33.333%; }
[data-e-basis="50"]   { flex-basis: 50%; }
[data-e-basis="66"]   { flex-basis: 66.666%; }
[data-e-basis="75"]   { flex-basis: 75%; }
[data-e-basis="100"]  { flex-basis: 100%; }

/* ── Max Width ── */
[data-e-maxWidth="narrow"] { max-width: 640px; }
[data-e-maxWidth="medium"] { max-width: 960px; }
[data-e-maxWidth="wide"]   { max-width: 1200px; }
[data-e-maxWidth="full"]   { max-width: none; }

/* ── Align Self ── */
[data-e-self="auto"]    { align-self: auto; }
[data-e-self="start"]   { align-self: flex-start; }
[data-e-self="center"]  { align-self: center; }
[data-e-self="end"]     { align-self: flex-end; }
[data-e-self="stretch"] { align-self: stretch; }


/* ════════════════════════════════════════════════════════════════
   STRUCTURE MODE — visual highlights in editor
   ════════════════════════════════════════════════════════════════ */

.ms-highlight {
  outline: 2px dashed transparent;
  outline-offset: -2px;
  transition: outline-color 0.15s;
}

.min-edit-structure-mode .ms-highlight--section  { outline-color: rgba(74, 144, 217, 0.4); }
.min-edit-structure-mode .ms-highlight--grid     { outline-color: rgba(123, 97, 255, 0.3); }
.min-edit-structure-mode .ms-highlight--element  { outline-color: rgba(94, 167, 123, 0.3); }

.ms-highlight:hover {
  outline-style: solid !important;
  cursor: pointer;
}

.ms-selected {
  outline: 3px solid var(--ms-selected-color, #4A90D9) !important;
  outline-offset: -3px;
}

/* Level badge in panel */
.ms-panel__level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Legend in hint */
.ms-hint__legend {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — collapse to single column on mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  [data-g-cols] > :is(.container, .min-container) {
    grid-template-columns: 1fr;
  }

  [data-i-span],
  [data-i-start] {
    grid-column: auto;
  }

  [data-s-display="flex"][data-s-direction="row"] > :is(.container, .min-container),
  [data-s-display="flex"][data-s-direction="row-reverse"] > :is(.container, .min-container) {
    flex-direction: column;
  }

  [data-i-basis="25"],
  [data-i-basis="33"],
  [data-i-basis="50"],
  [data-i-basis="66"],
  [data-i-basis="75"] {
    flex-basis: 100%;
  }

  /* Collapse element internal layouts to single column */
  [data-e-layout] > :is(.container, .min-container) {
    grid-template-columns: 1fr !important;
  }

  /* Reset grid positioning on mobile */
  [data-e-start],
  [data-e-inset] {
    grid-column: auto !important;
  }

  [data-e-span] {
    grid-column: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   LEGACY COMPAT — keep data-layout working
   ════════════════════════════════════════════════════════════════ */

[data-layout="narrow"] > :is(.container, .min-container) { max-width: 640px; }
[data-layout="wide"] > :is(.container, .min-container)   { max-width: 960px; }

[data-layout="split"] > :is(.container, .min-container) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

[data-layout="split-text-image"] > :is(.container, .min-container) {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: start;
}

[data-layout="split-image-text"] > :is(.container, .min-container) {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 2rem;
  align-items: start;
}

[data-layout="full-bleed"] { padding-left: 0; padding-right: 0; }
[data-layout="full-bleed"] > :is(.container, .min-container) { max-width: none; padding: 0; }

@media (max-width: 768px) {
  [data-layout="split"] > :is(.container, .min-container),
  [data-layout="split-text-image"] > :is(.container, .min-container),
  [data-layout="split-image-text"] > :is(.container, .min-container) {
    grid-template-columns: 1fr;
  }
}