/* 网格摆放(grid mode)—— 与 Odoo19 的 .o_grid_mode 同构。
 *
 * 这份文件是网格布局的**唯一权威**:前台访客页与建站器画布用的是同一份。
 * 画布是 srcdoc iframe,about:srcdoc 继承父页面的 base URL,所以 base layout 里
 * 这条 <link> 在编辑器里照样生效 —— 编辑态与访客态因此不可能对不上。
 *
 * 建站器只把**每个格子的位置**(grid-column / grid-row)写成内联样式,布局本身
 * 全在这里。位置是数据,布局是规则,分开放才能让下面那条断点规则生效:内联样式
 * 没法上 media query,当初把 display:grid 写成内联,窄屏就永远回落不了。
 *
 * 对应 Odoo:addons/html_editor/static/src/scss/html_editor.frontend.scss
 *          addons/html_builder/static/src/utils/grid_layout_utils.js
 */

/* 任何断点下都成立的:网格子项不该因为内容撑破格子 */
.o_we_grid_item {
  min-width: 0;
}

/* 网格只在 lg 及以上生效(Bootstrap $grid-breakpoint-lg = 992px)。
 *
 * 窄屏回落到普通 Bootstrap 栅格:容器还是 .row / 普通块,子项凭自己的
 * col-lg-N 类堆叠成整行。这就是"不必规定字号也能对齐"的最后一环 ——
 * 手机上没有 12 列 × 50px 的格子可言,硬套只会把内容挤成条。
 * 子项上残留的 grid-column / grid-row 内联样式在非网格容器里会被忽略,无害。 */
@media (min-width: 992px) {
  .o_we_grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    /* 行高:Odoo rowSize = 50。整套网格唯一的纵向量化单位,不要改 */
    grid-auto-rows: 50px;
    /* 间距一律归零,格距因此恒等于格宽 —— "12 列 + 定高行"才真是唯一的量化
       单位。视觉间距改由下面子项的 padding 承担 */
    row-gap: 0 !important;
    column-gap: 0 !important;
    /* Bootstrap .row 的 gutter 靠负外边距 + 子项内边距实现,会和网格打架 */
    --gutter-x: 0px;
  }

  .o_we_grid > * {
    /* 中和掉跟 display:grid 打架的既有布局声明。col-* 是 "flex:0 0 auto;
       width:50%",只在 .row 的 flex 上下文里成立;到了网格里那个 width 变成
       "占我这片格子的一半",元素当场缩水 —— 这就是搬完之后"变形了" */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0;
    /* 格子内的统一留白,替代 gap(Odoo 的 --grid-item-padding-x/y = 10px) */
    padding: 10px !important;
  }
}