/**
 * Content - Gutenberg Editor Styles
 *
 * 这套样式规范了普通页面 (page.php) 中原生 Gutenberg 块的排版，
 * 代替原本的 text/spacer 模块，赋予用户最大灵活度。
 */

/* ── 基础容器控制 ─────────────────────── */
.site-main {
  width: 100%;
  max-width: var(--en-page-content-max, 100%);
  margin-left: auto;
  margin-right: auto;
  /* 显式消费色彩变量，使页面级内联覆盖生效 */
  background-color: var(--en-color-bg);
  color: var(--en-color-text);
}

.entry-content {
  width: 100%;
}

/* 默认直接子元素具备基础边距最大宽度 */
.entry-content > * {
  max-width: var(--en-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--en-page-pad);
  padding-right: var(--en-page-pad);
}

/* 宽幅块 (Wide) */
.entry-content > .alignwide {
  max-width: 1400px;
}

/* 全宽块 (Full) 始终无边距 */
.entry-content > .alignfull {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 模块包裹层：跨全宽 + 左右边距（和页眉相同的盒模型） */
.entry-content > .page-module {
  max-width: none;
  width: 100%;
  padding-left: var(--en-page-pad);
  padding-right: var(--en-page-pad);
}

/* 声明了全宽的模块：消除两侧边距 */
.entry-content > .page-module.is-full-width {
  padding-left: 0;
  padding-right: 0;
}

/* 轮播模块始终全屏无边距 */
.entry-content > .page-module-portfolio-slider {
  padding-left: 0;
  padding-right: 0;
}

/* ── 顶部与底部留白 ────────────────────── */
/*
   布局留白体系说明：
   1. 标准页眉（sticky）：entry-content 拥有 page_pad_y 的上下 padding，
      页眉占位由 sticky 的文档流自动处理。
   2. 透明页眉（absolute 脱流）：entry-content 的 padding-top 需要
      同时补偿页眉高度 + 视觉上边距 = header_h + page_pad_y。
   3. 全屏轮播首元素：用负 margin 完全抵消 padding-top，让内容顶到 0px。
      无论 header_h 和 page_pad_y 的值是否相等，公式都能正确计算。
*/

.entry-content {
  padding-top: var(--en-page-pad-y);
  padding-bottom: var(--en-page-pad-y);
}

/* ── 标准页眉下全宽块首屏处理 ─────────── */
/*
   标准页眉下，全宽首元素向上拉伸抵消 page_pad_y，
   使其紧贴页眉底部（页眉本身在文档流中占位）。
*/
.entry-content > .alignfull:first-child,
.entry-content > .page-module-portfolio-slider:first-child,
.entry-content > .wp-block-shortcode:first-child:has(> .page-module-portfolio-slider) {
  margin-top: calc(-1 * var(--en-page-pad-y));
}

/* 兼容 Gutenberg 可能产生的不可见空段落 */
.entry-content > p:empty:first-child + .alignfull,
.entry-content > p:empty:first-child + .page-module-portfolio-slider,
.entry-content > p:empty:first-child + .wp-block-shortcode:has(> .page-module-portfolio-slider) {
  margin-top: calc(-1 * var(--en-page-pad-y));
}

/* ── 如果全宽块/轮播刚好是页面最后一个元素，抵消下方距 ─────────── */
.entry-content > .alignfull:last-child,
.entry-content > .page-module-portfolio-slider:last-child,
.entry-content > .wp-block-shortcode:last-child:has(> .page-module-portfolio-slider) {
  margin-bottom: calc(-1 * var(--en-page-pad-y));
}

.entry-content > .alignfull:nth-last-child(2):has(+ p:empty),
.entry-content > .page-module-portfolio-slider:nth-last-child(2):has(+ p:empty),
.entry-content > .wp-block-shortcode:nth-last-child(2):has(+ p:empty):has(> .page-module-portfolio-slider) {
  margin-bottom: calc(-1 * var(--en-page-pad-y));
}

/* ── 透明页眉模式 ─────────────────────── */
/*
   透明页眉 (position: absolute) 脱离文档流，
   需要 padding-top = header_h + page_pad_y 来同时补偿：
   - 页眉高度（避免内容被遮挡）
   - 视觉上边距（与标准页眉下保持一致的留白）
*/
.transparent-header ~ main .entry-content {
  padding-top: calc(var(--en-header-h) + var(--en-page-pad-y));
}

/*
   透明页眉 + 全屏轮播首元素：
   完全抵消 header_h + page_pad_y，使轮播顶到浏览器 0px 位置。
   无论 header_h 与 page_pad_y 的值是否相等，公式都成立。
*/
.transparent-header ~ main .entry-content > .page-module-portfolio-slider:first-child,
.transparent-header ~ main .entry-content > .wp-block-shortcode:first-child:has(> .page-module-portfolio-slider),
.transparent-header ~ main .entry-content > p:empty:first-child + .page-module-portfolio-slider,
.transparent-header ~ main .entry-content > p:empty:first-child + .wp-block-shortcode:has(> .page-module-portfolio-slider) {
  margin-top: calc(-1 * var(--en-transparent-offset));
}

/* 隐藏可能由于 Gutenberg 产生的空段落 */
.entry-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 移动端留白 */
@media (max-width: 778px) {
  .entry-content > * {
    padding-left: var(--en-page-pad-mobile);
    padding-right: var(--en-page-pad-mobile);
  }

  /* 模块外层在移动端切换至移动端边距 */
  .entry-content > .page-module {
    padding-left: var(--en-page-pad-mobile);
    padding-right: var(--en-page-pad-mobile);
  }

  /* 声明了全宽的模块在移动端依然消除边距 */
  .entry-content > .page-module.is-full-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 轮播始终全屏无边距 */
  .entry-content > .page-module-portfolio-slider {
    padding-left: 0;
    padding-right: 0;
  }

  .entry-content {
    padding-top: var(--en-page-pad-y-mobile);
    padding-bottom: var(--en-page-pad-y-mobile);
  }

  .entry-content > .alignfull:first-child,
  .entry-content > .page-module-portfolio-slider:first-child,
  .entry-content > .wp-block-shortcode:first-child:has(> .page-module-portfolio-slider),
  .entry-content > p:empty:first-child + .alignfull,
  .entry-content > p:empty:first-child + .page-module-portfolio-slider,
  .entry-content > p:empty:first-child + .wp-block-shortcode:has(> .page-module-portfolio-slider) {
    margin-top: calc(-1 * var(--en-page-pad-y-mobile));
  }

  .transparent-header ~ main .entry-content {
    padding-top: calc(var(--en-header-h-mobile) + var(--en-page-pad-y-mobile));
  }

  .transparent-header ~ main .entry-content > .page-module-portfolio-slider:first-child,
  .transparent-header ~ main .entry-content > .wp-block-shortcode:first-child:has(> .page-module-portfolio-slider),
  .transparent-header ~ main .entry-content > p:empty:first-child + .page-module-portfolio-slider,
  .transparent-header ~ main .entry-content > p:empty:first-child + .wp-block-shortcode:has(> .page-module-portfolio-slider) {
    margin-top: calc(-1 * var(--en-transparent-offset-mobile));
  }
}

/* ── Gutenberg 原生块适配 ──────────────── */
.entry-content figure {
  margin-bottom: var(--en-space-lg);
}

.entry-content p, 
.entry-content ul, 
.entry-content ol {
  font-size: var(--en-font-size-md);
  color: var(--en-color-text);
  line-height: var(--en-line-height);
  margin-bottom: var(--en-space-md);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--en-space-xl);
  margin-bottom: var(--en-space-md);
  font-weight: 500;
  color: var(--en-color-heading, var(--en-color-text));
}

.entry-content h1 { font-size: 2.5rem; }
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.75rem; }
.entry-content h4 { font-size: 1.5rem; }

/* 组块如果加了背景色，添加一点内边距以美化 */
.entry-content > .wp-block-group.has-background {
  padding: var(--en-space-xl) var(--en-page-pad);
}

.entry-content img {
  border-radius: 0;
}

/* 强制全宽图片拉伸至屏幕宽度，避免被自身像素分辨率限制 */
.entry-content .alignfull img,
.entry-content .alignfull video,
.entry-content .alignwide img,
.entry-content .alignwide video {
  width: 100%;
  height: auto;
  display: block;
}


/* 修复 WordPress 中原生 SVG 被插入时尺寸塌缩的问题（保留内联宽高） */
.entry-content img[src$=".svg"],
.entry-content img[src$=".SVG"] {
  width: 100%;
  height: auto;
  min-height: 50px; /* 兜底防塌缩 */
  object-fit: contain;
}
.entry-content .wp-block-image.is-resized img[src$=".svg"],
.entry-content .wp-block-image.is-resized img[src$=".SVG"] {
  height: 100%;
}


/* ── 全局边框衬线 (Global Outlined Frame) ──
 * 开启作品网格线框时生效，作为整个站点的内衬锚定框，完美解决视觉落差
 */
.site-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  display: flex;
  justify-content: center;
}
.site-frame::after {
  content: "";
  display: block;
  /* 取消缩进边距，顶到浏览器最边缘（Full 模式） */
  width: 100%;
  max-width: 100%;
  border-left: 1px solid var(--en-grid-border-color, #E5E5E5);
  border-right: 1px solid var(--en-grid-border-color, #E5E5E5);
  box-sizing: border-box;
}

@media (max-width: 778px) {
  .site-frame::after {
    width: 100%;
    max-width: 100%;
  }
}