/*
 * Columns layout tool — responsive stacking.
 *
 * The flex children of a column_list are the block-holder wrappers
 * ([data-blok-element]), not the [data-blok-column] elements the Column tool
 * renders. Target the holders directly so flex-wrap forces vertical stacking
 * on narrow viewports and restores side-by-side distribution above the
 * project's mobile breakpoint (651px, matching the `not-mobile` variant).
 */
[data-blok-columns] {
  /* Gutter width matches Notion: min(32px, 4vw) — a constant 32px on wide
   * viewports, tracking 4vw on narrower ones. The gap stays the same for two,
   * three, four or more columns. In editing mode the resizer flex items carry
   * this width; in read-only the container's column-gap does. */
  --blok-column-gutter: min(2rem, 4vw);
}

[data-blok-columns] > [data-blok-element] {
  flex-basis: 100%;
  flex-shrink: 0;
  /* A flex item defaults to min-width:auto (min-content), which would hold a
   * column open at its widest word. Public hook, declared here rather than
   * inline on the holder: an inline value outranked every host rule. The
   * FALLBACK is the default — no default on the container, which would shadow
   * a host setting the token on an outer wrapper. The drag maths reads the
   * resolved value back (see resolvePairMinWidth), so a raised floor clamps
   * the resize instead of desynchronising from it. */
  min-width: var(--blok-column-min-width, 0);
}

@media (min-width: 651px) {
  [data-blok-columns] > [data-blok-element] {
    flex-basis: 0;
    flex-shrink: 1;
  }
}

/*
 * Read-only gutter. In editing mode the gutter is a resizer flex item between
 * columns (see below); read-only strips those, so the container supplies the
 * horizontal gap itself. Same width — min(32px, 4vw) — so edit and published
 * views line up. Only above the stacking breakpoint, where columns sit
 * side-by-side; below it they stack and the vertical gap-y takes over.
 */
@media (min-width: 651px) {
  [data-blok-columns][data-blok-columns-static-gutter] {
    column-gap: var(--blok-column-gutter);
  }
}

/*
 * Resize separator — a fixed-width flex item that forms the gutter between two
 * columns. The visible bar is hidden until the gutter is hovered or dragged,
 * matching Notion. The bar is wider than its hit feel via the full-width
 * col-resize cursor zone.
 */
[data-blok-column-resizer] {
  /* The resizer IS the gutter in editing mode — same width as the read-only
   * container gap (see --blok-column-gutter). Extra columns just add more
   * gutters; each stays this constant width. */
  flex: 0 0 var(--blok-column-gutter);
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}

[data-blok-column-resizer]::before {
  content: '';
  position: absolute;
  inset-block: 0.25rem;
  left: 50%;
  width: 3px;
  border-radius: 9999px;
  /* Theme-aware so the handle stays visible on both light and dark surfaces. */
  background-color: var(--blok-border-strong);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}

[data-blok-column-resizer]:hover::before,
[data-blok-column-resizer][data-dragging]::before {
  opacity: 1;
}

/* Accent the handle while actively dragging for clear feedback. */
[data-blok-column-resizer][data-dragging]::before {
  background-color: var(--blok-active-icon);
}

/*
 * While a block is being dragged, suppress the gutter handle entirely. Otherwise
 * the cursor passing over a separator triggers :hover and reveals the gray handle
 * bar right next to the blue drop indicator — reading as two drop targets in the
 * gutter. Higher specificity than the :hover rule (three attributes), so it wins
 * without !important. A real resize drag sets [data-dragging] on the resizer, not
 * data-blok-dragging on the interface, so this never hides the active resize.
 */
[data-blok-interface][data-blok-dragging="true"] [data-blok-column-resizer]::before {
  opacity: 0;
}

/*
 * Structural backstop — a resize separator is ONLY ever valid BETWEEN two
 * columns (buildColumnResizers inserts one before each column after the first).
 * A separator that is the row's first or last child, or sits directly next to
 * another separator, is therefore ALWAYS a stale artifact of a column-set change
 * that didn't rebuild the separators (a removed column leaves its separator
 * behind; a raw DOM mutation or undo/redo can restore a mismatched set). Such a
 * separator must never render: as a 32px flex item it would push the columns
 * across and flash a gray gutter bar at the row's edge — the "phantom extra
 * column" users report. Collapsing it to display:none removes both the bar AND
 * its width, so a misplaced separator is inert no matter how it got there. The
 * live rebuild (rebuildColumnListResizers) still corrects the set for real
 * resizing; this rule guarantees the VISUAL symptom can never appear regardless.
 */
[data-blok-columns] > [data-blok-column-resizer]:first-child,
[data-blok-columns] > [data-blok-column-resizer]:last-child,
[data-blok-columns] > [data-blok-column-resizer] + [data-blok-column-resizer] {
  display: none;
}

/* Columns stack vertically below the breakpoint, so the gutter handle hides. */
@media (max-width: 650px) {
  [data-blok-column-resizer] {
    display: none;
  }
}