/* ─────────────────────────────────────────────────────────────────
   css/row-renderer.css

   Wave 18 (2026-05-25) — REAL per-row column layout (Divi-style).
   Replaces the inline mock at row-layout-preview.js. The board
   canvas (#tileGrid) becomes a flex column of .row containers;
   each .row is its own CSS Grid with grid-template-columns set
   inline (per-row weights).

   .tile markup is identical to the legacy renderer so all sibling
   modules (tile-resize, multi-select, action-picker) keep working
   without edits.
───────────────────────────────────────────────────────────────── */

/* When the row-renderer takes over the canvas, switch the grid
   container into a vertical flex stack. Inline styles on #tileGrid
   from row-renderer.js win the cascade, but we duplicate here as
   defense-in-depth (a future CSS revision could otherwise strip
   the inline). */
.tile-grid.row-rendered,
#tileGrid.row-rendered {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

/* Each row carries its own grid-template-columns inline (per-row
   weights). Padding kept tight; the row is visually its own band. */
.tile-grid .row,
#tileGrid .row {
  display: grid;
  width: 100%;
  /* gap is inline per-row from row-renderer.js — fallback when missing */
  gap: 8px;
  position: relative;
}

/* Hover lights up a faint outline so the author can see the row
   boundaries while editing — the gear icon in row-settings.js also
   anchors to this hover state. */
.tile-grid .row:hover,
#tileGrid .row:hover {
  outline: 1px dashed rgba(99, 102, 241, 0.35);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The trailing "+ Add Tile" inside the LAST row sits at the row's
   end. Use the existing .add-tile-btn styling — no override. */

/* Special tile-kinds inside a row */
.tile-grid .row .row-divider,
#tileGrid .row .row-divider {
  grid-column: 1 / -1;     /* full-row */
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
  margin: 6px 0;
}
.tile-grid .row .row-header,
#tileGrid .row .row-header {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: 14px;
  color: #1c1917;
  padding: 4px 0;
}

/* ─────────────────────────────────────────────────────────────────
   Author affordances (row-settings, column-drag, row-drag) — see
   the matching CSS in each module's companion files. The gear-icon
   anchor sits at the row's top-right via absolute positioning, so
   .row needs position:relative (already declared above).
───────────────────────────────────────────────────────────────── */

/* ─── Row left-edge rail (gear + drag handle) ──────────────────────
   2026-05-27 (Codex r3 catch on 9c224f7): the always-visible gear at
   top-right of each row overlapped the top-right tile's ✕ delete +
   image-badge controls, breaking those interactions. Moved the gear
   AND a new drag handle into a dedicated LEFT gutter rail outside the
   row's tile area, where no per-tile controls live. Doubles as the
   drag-to-reorder handle Luke asked for: ⠿ at top, ⚙ below.
   ────────────────────────────────────────────────────────────────── */

/* 2026-05-27 (Luke caught: "drag is just moving the tile not the row").
   Previous left:-28px placement was INVISIBLE behind the device frame
   bezel + editor padding. Luke grabbed a tile thinking it was the
   handle → HTML5 tile drag fired instead of pointer row drag.
   New placement: TOP-LEFT corner of each row, INSIDE the visible area,
   overlapping the first tile's top-left corner slightly. Tiles use
   top-right for ✕ delete + bottom-right for image-badge, so top-left
   is free chrome real-estate. */
.row-settings-gear,
.row-drag-handle {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1.5px solid #6366f1;
  background: #fff;
  color: #312e81;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
  z-index: 8;
  padding: 0;
  opacity: 0.85;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease,
              transform 120ms ease;
}
.row-drag-handle {
  top: 6px;
  left: 6px;
  cursor: grab;
  font-size: 16px;
  /* Tell the browser the handle's touches are for OUR drag — don't
     hijack them for scroll/zoom. Without this, mobile Safari + Chrome
     swallow touchstart for native gestures and our drag never fires. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.row-drag-handle:active {
  cursor: grabbing;
}

/* Floating ghost that follows the pointer during a row drag.
   row-drag.js creates / positions / removes it. */
.row-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(99, 102, 241, 0.55);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
  color: #312e81;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.row-settings-gear {
  top: 6px;
  left: 38px;   /* sits to the right of the drag handle on the row's top-left */
}
.tile-grid .row:hover .row-settings-gear,
#tileGrid .row:hover .row-settings-gear,
.tile-grid .row:hover .row-drag-handle,
#tileGrid .row:hover .row-drag-handle,
.row-settings-gear:hover,
.row-drag-handle:hover,
.row-settings-gear:focus-visible,
.row-drag-handle:focus-visible,
.row-settings-gear.is-active,
.row-drag-handle.is-dragging {
  opacity: 1;
  background: #f4f4f5;
  color: #18181b;
  outline: 0;
}

/* While a row is being dragged, dim it so the drop targets are obvious. */
.tile-grid .row.row-is-dragging,
#tileGrid .row.row-is-dragging {
  opacity: 0.4;
  outline: 2px dashed rgba(99, 102, 241, 0.55);
}

/* Drop indicator: thin amber bar above the row currently in the drop
   zone. Owned by row-drag.js (toggles the class). */
.tile-grid .row.row-drop-above::before,
#tileGrid .row.row-drop-above::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -6px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber, #E89E5C);
  box-shadow: 0 0 0 4px rgba(232, 158, 92, 0.18);
  z-index: 6;
}
.tile-grid .row.row-drop-below::after,
#tileGrid .row.row-drop-below::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber, #E89E5C);
  box-shadow: 0 0 0 4px rgba(232, 158, 92, 0.18);
  z-index: 6;
}

/* Column resize handle — sits at the RIGHT edge of every tile EXCEPT
   the last in its row. column-drag.js paints these in.
   Width 14px so it's easy to hit; transparent so the .tile visual
   stays clean. Bottom 18px cushion keeps it clear of the corner-drag
   handle owned by tile-resize.js (24px). */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -7px;
  width: 14px;
  bottom: 18px;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
}
.col-resize-handle:hover,
.col-resize-handle.dragging {
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 40%,
    rgba(99, 102, 241, 0.4) 50%,
    transparent 60%,
    transparent 100%
  );
}

/* Column-drag ghost guide — shows the new boundary line while
   dragging. Painted at the page-coord boundary by column-drag.js. */
.col-resize-ghost {
  position: absolute;
  width: 2px;
  background: #6366f1;
  pointer-events: none;
  z-index: 999;
  opacity: 0.9;
}

/* Row-drag handle (optional row-drag.js) — anchors at the LEFT edge.
   Only shows on row hover; same UX contract as the gear icon. */
.row-drag-handle {
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: 14px;
  height: 28px;
  border-radius: 4px;
  background: #e4e4e7;
  color: #52525b;
  cursor: grab;
  font-size: 10px;
  line-height: 28px;
  text-align: center;
  display: none;
  z-index: 4;
}
.tile-grid .row:hover .row-drag-handle,
#tileGrid .row:hover .row-drag-handle {
  display: block;
}
.row-drag-handle:active {
  cursor: grabbing;
  background: #d4d4d8;
}