/* 首屏底部广告位布局
 * 广告位于首屏可视区底部，随页面滚动一起移走，不吸底、不跟随滚动。
 * 全部在正常文档流内，不使用 fixed / sticky / absolute。
 * --mca-first-screen-offset 由 /libs/firstScreenAd.js 实测头部偏移后写入，
 * 默认值 114px 仅作为 JS 执行前的兜底。
 */

.mca-first-screen {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  padding-bottom: 0;
  /* 用固定高度而不是 min-height：否则「内容 + 广告」会把盒子撑高、把广告顶出首屏。
     渐进回退 100vh -> 100svh -> 100dvh，100dvh 适配手机地址栏收展。 */
  height: calc(100vh - var(--mca-first-screen-offset, 114px));
  height: calc(100svh - var(--mca-first-screen-offset, 114px));
  height: calc(100dvh - var(--mca-first-screen-offset, 114px));
}

/* 内容区给广告让位：可收缩，内容超长时裁剪内容、不裁剪广告 */
.mca-first-screen-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 广告位：不收缩，始终完整贴在首屏底部 */
.mca-fs-ad {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 8px;
  /* 适配刘海屏 */
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid #e74c3c;
  background: #f8f8f8;
  font-family: inherit;
}

.mca-fs-ad-label {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888888;
}

/* 桌面 728x90 */
.mca-fs-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 728px;
  min-height: 90px;
  margin: 0 auto;
  border: 1px dashed #e74c3c;
}

/* 移动端 320x50 */
@media (max-width: 767px) {
  .mca-fs-ad-slot {
    max-width: 320px;
    min-height: 50px;
  }
}

/* 首页：首屏内的文章卡片始终保持两列（含移动端）。
   移动端如果跟随主题变成单列，两张卡片会超出首屏高度被裁掉，
   那两篇文章的入口就彻底不可点击了。 */
.mca-first-screen .posts-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
}

.mca-first-screen .posts-wrap > article {
  width: auto;
  float: none;
  margin: 0;
}