/* layout.css — P2 页面布局语法
   6 种布局：stacked(默认) / sidebar-left / sidebar-right / editorial / bento / full-bleed / catalog
   stacked 与 sidebar 的样式在 sidebar.css，本文件只管 4 种新布局。
   本文件最后加载，此处的侧栏布局规则覆盖 sidebar.css / products.css 中的同名规则。 */

/* ===== 侧栏不挤压主区域（覆盖层，确保所有页面类型生效） =====
   有侧栏时占满浏览器宽度，主区域拿剩余全部空间，图片/商品卡片不再被挤窄 */
.article-page > .container,
.product-detail-page > .container { max-width: none; }
.content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 30px; }
.page-cols {
  display: grid; gap: 32px; padding: 40px 20px; align-items: start;
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
}
.page-cols--right { grid-template-columns: 1fr 320px; }
.page-cols--left  { grid-template-columns: 320px 1fr; }
.page-cols--both  { grid-template-columns: 320px 1fr 320px; }
/* 侧栏 sticky：跟随滚动，消除下方空白 */
.page-cols-side {
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (min-width: 992px) {
  .product-layout { grid-template-columns: 1fr 320px; }
}
/* 侧栏布局内 .container 不再限制宽度，内容随主区域伸展 */
.page-cols-main .container,
.content-main .container,
.product-main .container { max-width: 100%; }

/* ===== 分段布局：wide 区块独立全宽，不进侧栏 grid =====
   宽区块（商品网格/内容正文）在模板中独立渲染在 page-cols 之外，
   自然占满浏览器宽度，不会盖住侧栏。非 wide 区块继续在 page-cols 内与侧栏同栏。 */
.page-segment {
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
  padding: 0 20px 2rem;
}

/* ===== brand-story：无图片时单列占满 ===== */
.brand-story-inner > :only-child { grid-column: 1 / -1; }
/* brand-story-body 是 markdownify 的内容，内部 h2 降级为正文样式 */
.brand-story-body h2 { font-size: inherit; font-weight: inherit; margin: 0; color: inherit; }

/* ================================================================
   editorial — 杂志式布局
   全宽区块与窄阅读栏交替排列，营造杂志排版节奏
   ================================================================ */
.page-editorial {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 2rem 20px 4rem;
}
.page-editorial-row {
  margin-bottom: 3rem;
}
.page-editorial-row--wide {
  max-width: 100%;
}
.page-editorial-row--narrow {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.page-editorial-row--narrow section h2 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.75rem;
  line-height: 1.3;
}
.page-editorial-row--narrow section p {
  font-size: 1.05rem;
  line-height: 1.85;
}
/* 窄栏里的图片区块全宽显示，不被 680px 限制 */
.page-editorial-row--narrow .sec-gallery,
.page-editorial-row--narrow .sec-gallery-masonry,
.page-editorial-row--narrow .sec-gallery-carousel {
  max-width: 100%;
}
.page-editorial-aside {
  max-width: 280px;
  margin: 2rem 0 0 auto;
}
.page-editorial-aside .sidebar-widget {
  background: var(--light, #f8f9fa);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* ================================================================
   bento — 便当盒网格
   不等宽区块拼贴，首块大格、次块中格、其余小格
   ================================================================ */
.page-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1.25rem;
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 2rem 20px 4rem;
}
.page-bento-cell {
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #eef0f2);
}
.page-bento-cell--lg {
  grid-column: span 2;
  grid-row: span 2;
}
.page-bento-cell--md {
  grid-column: span 2;
}
.page-bento-cell--sm {
  grid-column: span 1;
}
/* bento 格子内区块压缩间距 */
.page-bento-cell section {
  padding: 1.5rem;
  height: 100%;
}
.page-bento-cell section .container {
  max-width: 100%;
  padding: 0;
}
.page-bento-side {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ================================================================
   full-bleed — 全出血布局
   区块突破容器 max-width，边到边铺满视口
   ================================================================ */
.page-fullbleed {
  width: 100%;
}
.page-fullbleed-row {
  width: 100%;
}
/* 区块内部 container 仍限制文本宽度，但背景铺满 */
.page-fullbleed-row section {
  padding-inline: 0;
}
.page-fullbleed-row section > .container {
  max-width: var(--container-width, 1200px);
}
/* 交替区块：偶数行浅色背景铺满 */
.page-fullbleed-row:nth-child(even) {
  background: var(--light, #f8f9fa);
}
.page-fullbleed-row:nth-child(odd) {
  background: var(--background, #fff);
}
.page-fullbleed-aside {
  padding: 2rem 20px 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
}

/* ================================================================
   catalog — 目录式布局
   顶部 hero/搜索条 + 左侧筛选 + 右侧密集网格
   ================================================================ */
.page-catalog {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 2rem 20px 4rem;
}
.page-catalog-header {
  margin-bottom: 2rem;
}
/* 首块（通常是 hero/search）去掉多余间距 */
.page-catalog-header section {
  padding: 0 0 1.5rem;
}
.page-catalog-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.page-catalog-filters {
  flex: 0 0 260px;
  position: sticky;
  top: 80px;
}
.page-catalog-filters .sidebar-widget {
  background: var(--light, #f8f9fa);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.page-catalog-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  min-width: 0;
}
.page-catalog-item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #eef0f2);
  transition: box-shadow 0.2s, transform 0.2s;
}
.page-catalog-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
/* 网格内区块压缩为卡片 */
.page-catalog-item section {
  padding: 0;
}
.page-catalog-item section .container {
  max-width: 100%;
  padding: 1rem;
}
.page-catalog-item section h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 768px) {
  /* 侧栏布局：窄屏堆叠 */
  .product-layout,
  .content-layout,
  .page-cols {
    grid-template-columns: 1fr !important;
  }
  /* 窄屏侧栏不 sticky，正常流排列 */
  .page-cols-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  /* 分段布局窄屏 */
  .page-segment {
    padding: 0 16px 1.5rem;
  }

  /* editorial */
  .page-editorial-row--narrow {
    max-width: 100%;
  }
  .page-editorial-aside {
    max-width: 100%;
    margin-inline-start: 0;
  }

  /* bento */
  .page-bento {
    grid-template-columns: 1fr;
  }
  .page-bento-cell--lg,
  .page-bento-cell--md {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* catalog */
  .page-catalog-body {
    flex-direction: column;
  }
  .page-catalog-filters {
    flex: none;
    width: 100%;
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}