/* fixes.css */

/* =========================================================
   FXV Gridstack – Fixes & Layout Primitives
   (containers, gutters, panel fill, overlap/hero, preview flags)
   ========================================================= */


/* ========== GLOBAL GAPS — START ========== */
:root {
  --fxv-panel-gap: 0;   /* 0 = panels touch; increase to add gutters */
  --fxv-side-gap: 0;    /* page left/right padding */
  --fxv-top-gap: 0;     /* gap below navbar */
}
/* GLOBAL GAPS — END */


/* ========== PAGE CONTAINER & GRID GUTTERS — START ========== */
.container-fluid {
  padding-left: var(--fxv-side-gap) !important;
  padding-right: var(--fxv-side-gap) !important;
}
.grid-stack { padding-top: var(--fxv-top-gap); }

/* Remove Bootstrap row gutters if grid is inside a .row */
.js-gridstack .row { --bs-gutter-x: 0; }

/* Gridstack: force no gaps from library CSS */
.grid-stack { --gs-gutter: 0px !important; }
.grid-stack > .grid-stack-item { padding: 0 !important; margin: 0 !important; }
/* PAGE CONTAINER & GRID GUTTERS — END */


/* ========== PANEL CONTAINER LOOK (NON-OVERLAYS) — START ========== */
/* Default look for normal grid items; exclude overlays to avoid borders on videos */
/* Remove borders from the grid container */
.grid-stack-item > .grid-stack-item-content {
  background: transparent !important; /* ← key change */
  color: var(--bs-body-color, #212529);
  border: none !important;
  border-radius: 0;
}


/* Overlays: no container border/background (video/image overlays stay clean) */
.grid-stack-item.fxv-abs > .grid-stack-item-content {
  border: 0 !important;
  background: transparent !important;
}
/* PANEL CONTAINER LOOK — END */


/* ========== DRAG/RESIZE AFFORDANCES — START ========== */
.js-gridstack .grid-handle,
.js-gridstack .card .card-header { cursor: move; }

.grid-stack .ui-resizable-handle { position: absolute; z-index: 20; }
.grid-stack .ui-resizable-e,
.grid-stack .ui-resizable-w { width: 10px; }
.grid-stack .ui-resizable-n,
.grid-stack .ui-resizable-s { height: 10px; }
/* DRAG/RESIZE AFFORDANCES — END */


/* ========== OVERLAP MODE & HERO — START ========== */
.js-gridstack.fxv-allow-overlap { position: relative; overflow: visible; }

/* Hero underlay paints behind everything; size via CSS var per-page */
.js-gridstack.fxv-allow-overlap .grid-stack-item.fxv-hero {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important;
  height: var(--fxv-hero-h, 420px) !important;
  z-index: 0 !important;
  pointer-events: none; /* click-through */
}

/* Other items above hero */
.js-gridstack.fxv-allow-overlap .grid-stack-item:not(.fxv-hero) { z-index: 1; }
/* OVERLAP MODE & HERO — END */


/* ========== CORE FILL (PANEL & MEDIA) — START ========== */
/* Make the grid content fill the grid item */
.js-gridstack .grid-stack-item > .grid-stack-item-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Make the panel and its body fill the content host */
.js-gridstack .grid-stack-item-content > .fxv-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.js-gridstack .grid-stack-item-content > .fxv-panel > .fxv-panel-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Media wrappers & elements */
.fxv-fit-wrap { width: 100%; height: 100%; overflow: hidden; }
.fxv-img, .fxv-vid { display: block; width: 100%; height: 100%; }

/* Beat Bootstrap’s img{height:auto} if needed */
img.fxv-img, video.fxv-vid { height: 100% !important; max-width: none; }
/* CORE FILL — END */


/* ========== UTILITIES — START ========== */
.fxv-hidden { display: none !important; }
/* UTILITIES — END */


/* ========== ADMIN PREVIEW FLAGS — START ========== */
/* These classes are applied to the grid root (.js-gridstack). */

/* 1) Hide PANELS (keep overlays visible) */
.js-gridstack.fxv-preview-panels-off .grid-stack-item { visibility: hidden !important; }
.js-gridstack.fxv-preview-panels-off .grid-stack-item.fxv-abs { visibility: visible !important; }

/* 2) Hide OVERLAYS entirely */
.js-gridstack.fxv-preview-ov-off .fxv-abs,
.js-gridstack.fxv-preview-ov-off .fxv-overlay-layer,
.js-gridstack.fxv-preview-ov-off #fxv-overlays { display: none !important; }

/* 3) Z-order flipping between panels & overlays */
.js-gridstack.fxv-preview-ov-top  .fxv-abs,
.js-gridstack.fxv-preview-ov-top  .fxv-overlay-layer,
.js-gridstack.fxv-preview-ov-top  #fxv-overlays { position: relative; z-index: 2000 !important; }

.js-gridstack.fxv-preview-panels-top .fxv-abs,
.js-gridstack.fxv-preview-panels-top .fxv-overlay-layer,
.js-gridstack.fxv-preview-panels-top #fxv-overlays { position: relative; z-index: 0 !important; }
/* ADMIN PREVIEW FLAGS — END */


/* === Overlay panels: never show borders or forced backgrounds === */
.grid-stack-item.fxv-abs > .grid-stack-item-content,
.fxv-panel.fxv-abs {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fxv-abs .fxv-panel {
  border: none !important;
}


/* ensure fills + no accidental min-size constraints */
.grid-stack-item-content, .fxv-panel, .fxv-panel-body { width:100%; height:100%; min-width:0; min-height:0; }


/* Prevent Chrome/Firefox "scroll anchoring" from fighting our dynamic min-height */
.js-gridstack { overflow-anchor: none; }

/* Keep the scrollbar gutter reserved so the page width doesn't change when it appears */
html { scrollbar-gutter: stable; }

/* If you want a belt-and-suspenders fallback (older browsers), uncomment:
html { overflow-y: scroll; }  /* always show vertical gutter */

/* Constrain fixed/absolute overlays to the simulated frame */
body[class*="sim-vp-"]{
  /* use 100% (layout width excluding the scrollbar) to avoid horizontal nudge when the gutter toggles */
  --sim-left: max(0px, calc((100% - var(--sim-width)) / 2));
}
.fxv-panel{
  border-radius: var(--fxv-panel-radius, 0);
}

/* hide just the rich text surface when in appearance-only mode */
#fxv-editor-panel.fxv-hide-text .fxv-rich { display: none; }