/* ============================================================
   product-edit-layout.css  ·  worker-3 (t-003)
   MACRO LAYOUT ONLY — two-pane grid, breakpoints, sticky.
   Owns: .pe-shell grid, .pe-form / .pe-preview placement,
         #pe-preview-card sticky, .pe-actionbar sticky, section
         stacking rhythm, mobile reflow + touch targets.
   Does NOT touch field internals (.pe-field*, inputs) — those
   belong to t-004/t-005/t-008. No colours/typography beyond the
   brand vars from colors_and_type.css needed to make sticky bars
   opaque.
   Loads 2nd (after base.css), so section/preview/polish partials
   can still override anything here.
   ============================================================ */

/* ---- Layout tuning knobs (base.css / w1 may override) ------
   Sticky offsets are variable-driven so they stay correct no
   matter the final topbar / actionbar height the shell ships. */
.pe-shell {
  --pe-max-w:       1280px;  /* content cap — kills the empty right gutter */
  --pe-gap:         2rem;    /* gutter between the two panes            */
  --pe-pad-x:       2rem;    /* page side padding (desktop)             */
  --pe-topbar-h:    64px;    /* height of the sticky .pf-topbar header  */
  --pe-actionbar-h: 72px;    /* height of the sticky .pe-actionbar      */
  --pe-form-col:    58fr;    /* left pane share                         */
  --pe-preview-col: 42fr;    /* right pane share                        */
}

/* ============================================================
   DESKTOP (default, >= 1024px) — true two-pane grid
   ============================================================ */
.pe-shell {
  display: grid;
  /* minmax(0,*) lets each column shrink instead of overflowing when
     a child (preview image, long title) is wider than its track. */
  grid-template-columns:
    minmax(0, var(--pe-form-col))
    minmax(0, var(--pe-preview-col));
  gap: var(--pe-gap);
  align-items: start;            /* critical: lets .pe-preview go sticky */
  width: 100%;
  max-width: var(--pe-max-w);
  margin-inline: auto;           /* centre the capped shell, no lone gutter */
  padding-inline: var(--pe-pad-x);
  box-sizing: border-box;
}

/* Left pane — the form. Stacks its sections with consistent rhythm.
   (Section *internals* are owned by the section workers; this is just
   the vertical gap between section blocks.) */
.pe-form {
  min-width: 0;                  /* allow grid child to shrink */
  display: flex;
  flex-direction: column;
  gap: var(--pe-gap);
  /* keep content clear of the sticky save bar at the bottom */
  padding-bottom: calc(var(--pe-actionbar-h) + var(--pe-gap));
}

.pe-section { min-width: 0; }

/* Right pane — sticky live preview. Sits below the topbar and never
   underlaps the sticky actionbar (its max-height reserves both). */
.pe-preview {
  min-width: 0;
  position: sticky;
  top: calc(var(--pe-topbar-h) + var(--pe-gap));
  z-index: 10;                   /* below actionbar (30), above form */
  max-height: calc(
    100vh
    - var(--pe-topbar-h)
    - var(--pe-actionbar-h)
    - (var(--pe-gap) * 2)
  );
  overflow: auto;                /* tall preview scrolls within its rail */
  overscroll-behavior: contain;
}

#pe-preview-card { min-width: 0; }

/* Preview collapse toggle — only meaningful when the preview rides
   above the form (single-column, ≤1023px). Hidden on the desktop
   two-pane layout; the ≤1023px block below reveals it. */
.pe-preview__toggle { display: none; }

/* ============================================================
   SAVE BAR — sticky to the viewport bottom, full-bleed, on top.
   Spans both columns so it never collides with the preview rail.
   ============================================================ */
.pe-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 30;                   /* above preview + form */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: var(--pe-actionbar-h);
  box-sizing: border-box;
  padding: 0.75rem var(--pe-pad-x);
  /* opaque so scrolling form content doesn't bleed through */
  background: var(--bg1, #FBF7F1);
  border-top: 1px solid var(--border, rgba(26, 20, 18, 0.10));
}

/* When the actionbar lives OUTSIDE .pe-shell (full-width footer in the
   shell), centre its inner content to the same cap as the panes. */
.pe-actionbar > .pe-actionbar__inner {
  width: 100%;
  max-width: var(--pe-max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ============================================================
   TABLET (640–1023px) — single column.
   42% rail gets too cramped below ~1024px, so the preview reflows
   to the TOP as a full-width card and gives the form the full width.
   It stays lightly sticky under the topbar so it's still glanceable.
   ============================================================ */
@media (max-width: 1023px) {
  .pe-shell {
    grid-template-columns: minmax(0, 1fr);
    --pe-gap: 1.5rem;
    --pe-pad-x: 1.5rem;
  }

  /* preview first, form after */
  .pe-preview { order: -1; }
  .pe-form    { order: 0; }

  .pe-preview {
    position: sticky;
    top: var(--pe-topbar-h);
    /* condensed: cap height so it never dominates the fold */
    max-height: min(46vh, 360px);
  }

  /* Collapse toggle (2026-06-10): visible wherever the preview sits
     above the form. ≥44px touch target; visual finish in polish.css. */
  .pe-preview__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Collapsed state works on tablet too, not just <640px — folds the
     panel to roughly the toggle's own height. */
  .pe-preview--collapsed {
    max-height: var(--pe-topbar-h);
    overflow: hidden;
  }
}

/* ============================================================
   MOBILE (< 640px) — single column, collapsible preview.
   The preview becomes a TOGGLEABLE panel pinned under the topbar.
   Rationale: on a phone the live preview is reassuring but should
   never bury the form — a collapse toggle lets the seller peek then
   hide it. CSS-only & JS-optional (see note below): the panel is a
   compact card by default; adding `.pe-preview--collapsed` (one-line
   class toggle from w1's button) folds it to just its header.
   ============================================================ */
@media (max-width: 639px) {
  .pe-shell {
    --pe-gap: 1.25rem;
    --pe-pad-x: 1rem;
    padding-inline: var(--pe-pad-x);
  }

  .pe-preview {
    position: sticky;
    top: var(--pe-topbar-h);
    max-height: min(42vh, 320px);
    z-index: 20;
    /* opaque background so form content scrolls cleanly behind it */
    background: var(--bg1, #FBF7F1);
  }

  /* Collapsed state — w1 toggles this class on tap. Folds to header
     only; the toggle control (.pe-preview__toggle) stays visible. */
  .pe-preview--collapsed {
    max-height: var(--pe-topbar-h);
    overflow: hidden;
  }

  /* Toggle control: layout + a guaranteed >=44px touch target.
     (Visual styling is polish/t-008; this only guarantees tap size
     and placement so it's never a sub-44px hit area on mobile.) */
  .pe-preview__toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Touch targets: the layout-owned actionbar controls must clear 44px
     on phones regardless of their visual padding. */
  .pe-actionbar { padding-inline: var(--pe-pad-x); }
  .pe-actionbar button,
  .pe-actionbar #pe-save,
  .pe-actionbar .pe-btn {
    min-height: 44px;
  }

  /* Stack the save bar controls full-width when they'd otherwise
     crowd on a narrow screen. */
  .pe-actionbar__inner { flex-wrap: wrap; }
}

/* ============================================================
   Sticky safety: if the browser lacks position:sticky support or the
   user is in a constrained context, nothing breaks — panes simply
   flow. Also respect reduced motion for any sticky-driven transitions
   declared by other partials.
   ============================================================ */
@supports not (position: sticky) {
  .pe-preview,
  .pe-actionbar { position: static; max-height: none; overflow: visible; }
}