/* 移植自 Go 原站 (mdgw.com) 的广告位样式: gridAdvBox / textAdv / advBanner / gridAdvPop
   图片路径已由 /static/images/ 调整为 PHP 主题 /themes/mdgw/static/images/ */

/* ---------- gridAdvBox (热门/最新/必备 网格, 含进入按钮) ---------- */
.gridAdvBox { margin: 0 16px 18px; }
.gridAdvBox .gridAdvTitle {
  padding: 0 16px; box-sizing: border-box; height: 49px;
  display: flex; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px; font-weight: 600; line-height: 24px;
}
.gridAdvList {
  padding: 20px 6px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; row-gap: 12px;
  background: #212121;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.gridAdvList .advItem {
  width: 20%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gridAdvList .advCover { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 6px; object-fit: contain; }
.gridAdvList .advName {
  font-size: 14px; line-height: 20px; color: #FAFAFA; margin-bottom: 4px;
  text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gridAdvList .advBtn {
  height: 25px; display: flex; align-items: center; justify-content: center;
  color: #1ABC9C; font-size: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); text-align: center; padding: 0 8px;
}
.gridAdvBox .gridAdvList .advBtn .rightArrow { width: 5px; height: 8px; margin-left: 4px; margin-bottom: 2px; }
@media screen and (min-width: 768px) {
  .gridAdvList .advItem { width: 10%; }
}

/* ---------- textAdv (标题广告 文字链, 4 列描边) ---------- */
.textAdvList {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 12px;
  padding: 0 16px; box-sizing: border-box;
}
.textAdvList .advItem {
  border-radius: 3px; border: 1px solid #757575;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; padding: 9px 0; color: #BDBDBD;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
@media screen and (min-width: 768px) { .textAdvList .advItem { font-size: 16px; } }

/* ---------- advBanner (顶部/底部 横幅) ---------- */
.bannerList {
  padding: 0 16px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px;
}
/* 🔴 高度必须由素材比例定, 不能写死 —— 素材是 950x110(8.64:1), 写死高度(旧: H5 43px / 桌面 90px)
   会让 object-fit:contain 被高度卡住: 列宽 > 列高x950/110 时图只画到 777px 宽, 富余宽度均分成
   左右两条黑缝(1600 视口下每边 44.7px, 列越宽缝越大)。aspect-ratio 让盒子跟着素材比例走,
   contain 于是宽高同时贴合 → 不留缝 + 不裁切 + 不变形; 顺带给 .bannerAdv(lazy 占位图)预留高度防抖动。 */
.bannerList .bannerItem { aspect-ratio: 950 / 110; border-radius: 5px; overflow: hidden; }
.bannerList .bannerItem .bannerAdv { width: 100%; height: 100%; object-fit: contain; }
@media screen and (min-width: 768px) {
  .bannerList { padding: 0; }
  /* 桌面端去掉左右 16px gutter, 与上方横幅/标题文字链/正文同宽。同批广告块里 .bannerList 用上面这条、
     .textAdvList 用 mdgw_override v28 那条, 唯独 .gridAdvBox 一直漏了 → 热门应用/必备精品比同级块多缩 16px。
     H5(<768px)不动: 那里横幅 padding 和本块 margin 都是 16px, 内容边本来就是齐的。 */
  .gridAdvBox { margin-left: 0; margin-right: 0; }
}

/* ---------- gridAdvPop (9宫格弹窗) ----------
   2026-10-16 移植前端 mdbdy-web 946cc3b「优化九宫格广告弹窗并压缩半透明顶部切图」(按 Figma 定稿,
   PC 640px / H5 750px 画板的 2 倍尺寸对齐; 取代 10-14 d5e52ba 的 340/400px 版本), 数值逐项照搬:
   - 面板: PC 640px、H5 320px, 不再有整体底色, 由头图 + 列表(#1f1f1f 圆角底)拼成; 遮罩 0.8
   - 头图: 换无字底图 nineGridHead-bg.webp(126KB, 原 nineGridHead.png 256KB 带字), 「麻豆不打烊」「下载送好礼」
     用 ::before / ::after 叠字, 字号按头图宽度(cqw)缩放; 列表上移(负 margin)垫在头图下沿后面
   - 图标: PC 104px / H5 52px 定宽 4 列, object-fit 改 cover(定宽方块铺满, 非方图会裁边, 不变形)
   - 关闭按钮 30px, 仍在面板下方正中
   结构由 AdScriptBuilder gridPop() 生成(头图 a > .nineGridHead、.nineGridList、.nineClose 依次追加), 只改样式不动 JS。
   🔴 列表 max-height 仍受视口高度约束(calc(100vh - …)): 面板垂直居中、下方挂关闭按钮,
      矮屏(横屏手机/小窗口)若只按行数限高, 关闭按钮会被挤出视口点不到。
   ⚠️ cqw 无兜底: iOS<16 不支持容器查询单位, 头图叠字字号会失效(退回默认字号), 待前端确认。 */
.gridAdvoOerlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8); z-index: 20000;
}
.gridAdvoOerlay.active { display: block; }
.gridAdvContent {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 28px)); z-index: 20001;
  width: 640px; max-width: calc(100vw - 20px);
}
.gridAdvContent > a { display: block; }
.gridAdvContent .nineClose {
  width: 30px; height: 30px; display: block; margin: 0; cursor: pointer;
  position: absolute; top: auto; bottom: -48px; left: 50%; transform: translateX(-50%);
  background: url("/themes/mdgw/static/images/closeIcon.png"); background-size: 100% 100%;
}
.gridAdvContent.active { display: block; }
.nineGridHead {
  width: 100%; aspect-ratio: 640 / 214; position: relative; z-index: 1; container-type: inline-size;
  background: url("/themes/mdgw/static/images/nineGridHead-bg.webp") center / 100% 100% no-repeat;
}
.nineGridHead::before,
.nineGridHead::after {
  position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.nineGridHead::before {
  content: "麻豆不打烊";
  left: 17.8%; top: 36.5%; width: 48.4%; height: 43.2%;
  font-family: "Arial Black", "PingFang SC", sans-serif; font-size: 9.375cqw; font-weight: 900; font-style: italic;
  letter-spacing: -0.04em; color: #f6dc8e; -webkit-text-stroke: .5px #9e3500;
  text-shadow: 1px 1px #b12a02, 0 4px 4px rgba(0, 0, 0, 0.66); transform: rotate(-1.33deg);
}
.nineGridHead::after {
  content: "下载送好礼";
  left: 68%; top: 50%; width: 18.75%; height: 14%;
  font-family: "PingFang SC", sans-serif; font-size: 3.75cqw; font-weight: 900;
  background: linear-gradient(178.773deg, #fffbeb 1.608%, #ffdd88 65.837%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 2px rgba(97, 0, 0, 0.5);
}
.nineGridList {
  width: 622px; max-width: 100%; max-height: min(677px, calc(100vh - 210px)); display: grid;
  grid-template-columns: repeat(4, 104px); justify-content: center; align-content: start; gap: 39px 42px;
  margin: -77px auto 0; padding: 94px 40px 43px; box-sizing: border-box;
  background: #1f1f1f; border-radius: 0 0 16px 16px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.nineGridItem { width: 104px; height: 154px; display: flex; flex-direction: column; align-items: center; }
.nineGridCover {
  width: 104px; height: 104px; margin-bottom: 16px; object-fit: cover;
  border-radius: 16px; background: #d9d9d9;
}
.nineGridName {
  max-width: 100%; margin: 0;
  font-size: 22px; line-height: 30px; color: #fff; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .gridAdvContent { width: 320px; transform: translate(-50%, calc(-50% - 70px)); }
  .nineGridList {
    width: 311px; max-height: min(339px, calc(100vh - 120px)); grid-template-columns: repeat(4, 52px);
    gap: 19.5px 21px; margin-top: -38.5px; padding: 47px 20px 21.5px; border-radius: 0 0 8px 8px;
  }
  .nineGridItem { width: 52px; height: 77px; }
  .nineGridCover { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 8px; }
  .nineGridName { font-size: 11px; line-height: 15px; }
}