/* ==========================================================
   TEEMEE 添蜜 · 广告招商位 tm-ad.css v1.0（定稿方案 B 风格）
   依赖：../tokens.css + ../tm-fx.css（.tm-btn / .tm-sh / .tm-fade 与降级规则），不另起颜色。
   规则：只动画 transform / opacity；box-shadow 静态；唯一渐变 = 底部渐隐（.tm-fade，html.fx-fade 默认开）。
   占位 .tm-ad-ph 与真实素材 .tm-ad-media 二选一，同一个广告位里只放其中一个。
   ========================================================== */
.tm-ad-slot{position:relative;container-type:inline-size;overflow:hidden;border-radius:var(--tm-r-lg);background:var(--tm-surface-1b);color:var(--tm-text-1);isolation:isolate}
.tm-ad-slot--splash{aspect-ratio:9/16;border-radius:0}
.tm-ad-slot--banner{aspect-ratio:7/2}
.tm-ad-slot--feed{aspect-ratio:3/4;border-radius:var(--tm-r-md)}
.tm-ad-slot--preroll{aspect-ratio:16/9;border-radius:0;background:var(--tm-bg-0)}
.tm-ad-slot--popup{aspect-ratio:4/5;width:min(86%,400px);box-shadow:var(--tm-shadow-3)}
.tm-ad-slot--bar{position:fixed;z-index:var(--tm-z-toast);left:12px;right:12px;bottom:calc(var(--tm-ad-bar-bottom,12px) + env(safe-area-inset-bottom));max-width:960px;height:64px;margin:0 auto;box-shadow:var(--tm-shadow-3);border:1px solid var(--tm-line-2)}
/* 可点区域（整块跳招商联系页 / 真实落地页） */
.tm-ad-hit{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tm-ad-hit:focus-visible{outline:2px solid var(--tm-honey-300);outline-offset:-2px;border-radius:inherit}
/* 真实素材 */
.tm-ad-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 招商占位 */
.tm-ad-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,2.4cqi,14px);padding:clamp(10px,6cqi,40px);text-align:center}
.tm-ad-ph::before{content:"";position:absolute;inset:clamp(6px,2.4cqi,12px);border:1px dashed var(--tm-line-honey);border-radius:var(--tm-r-md);pointer-events:none}
.tm-ad-mk{display:grid;place-items:center;flex:none;width:clamp(28px,16cqi,72px);aspect-ratio:1;border-radius:50%;background:var(--tm-honey-400);color:var(--tm-on-honey);box-shadow:var(--tm-glow-honey-1)}
.tm-ad-mk svg{width:56%;height:56%}
.tm-ad-t{font-size:clamp(13px,6.4cqi,30px);font-weight:800;line-height:1.25;letter-spacing:.02em}
.tm-ad-t b{color:var(--tm-honey-400);display:inline-block}
.tm-ad-s{font-size:clamp(11px,3.4cqi,15px);color:var(--tm-text-3);line-height:1.4}
.tm-ad-ph .tm-btn{margin-top:clamp(2px,1.6cqi,10px)}
/* 广告标识：每个广告位必带，素材态也保留 */
.tm-ad-tag{position:absolute;z-index:2;left:8px;top:8px;height:18px;padding:0 6px;border-radius:var(--tm-r-xs);background:var(--tm-scrim);border:1px solid var(--tm-line-2);color:var(--tm-text-2);font-size:11px;line-height:16px;font-weight:700;pointer-events:none}
/* 跳过 / 关闭（视觉 28px，热区 44px） */
.tm-ad-x,.tm-ad-skip{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;border:1px solid var(--tm-line-2);background:var(--tm-scrim);color:var(--tm-text-1);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--tm-d-instant) var(--tm-ease-press),opacity var(--tm-d-fast)}
.tm-ad-x{right:8px;top:8px;width:28px;height:28px;padding:0;border-radius:50%}
.tm-ad-x svg{width:14px;height:14px}
.tm-ad-x::before,.tm-ad-skip::before{content:"";position:absolute;inset:-8px}
.tm-ad-skip{right:12px;top:12px;height:28px;padding:0 12px;border-radius:var(--tm-r-pill);font-size:12px;font-weight:700}
.tm-ad-skip[aria-disabled=true]{opacity:.6;cursor:default}
.tm-ad-x:active,.tm-ad-skip:active{transform:scale(var(--tm-press-scale))}
.tm-ad-x:focus-visible,.tm-ad-skip:focus-visible{outline:2px solid var(--tm-honey-300);outline-offset:2px}
/* 各尺寸版式 */
.tm-ad-slot--splash .tm-ad-ph{gap:clamp(8px,4cqi,20px)}
.tm-ad-slot--banner .tm-ad-ph,.tm-ad-slot--bar .tm-ad-ph{flex-direction:row;justify-content:flex-start;text-align:left;padding:0 clamp(14px,4cqi,40px)}
.tm-ad-slot--banner .tm-ad-mk{width:clamp(32px,9cqi,84px)}
.tm-ad-slot--banner .tm-ad-t{font-size:clamp(14px,3.6cqi,34px)}
.tm-ad-slot--banner .tm-ad-s{font-size:clamp(11px,1.8cqi,16px)}
.tm-ad-slot--banner .tm-btn,.tm-ad-slot--bar .tm-btn{margin:0 0 0 auto;flex:none}
.tm-ad-slot--feed .tm-ad-ph{justify-content:flex-end;padding:10px}
.tm-ad-slot--feed .tm-ad-mk{width:clamp(28px,22cqi,52px);margin-bottom:auto;margin-top:clamp(18px,18cqi,56px)}
.tm-ad-slot--feed .tm-ad-t{font-size:clamp(12px,8cqi,17px)}
.tm-ad-slot--feed .tm-ad-s{font-size:clamp(10px,6cqi,12px)}
.tm-ad-slot--feed .tm-ad-tag{left:0;top:0;border-radius:var(--tm-r-md) 0 var(--tm-r-md) 0;border:0;height:20px;line-height:20px;padding:0 8px}
.tm-ad-slot--preroll .tm-ad-tag{left:12px;top:12px}
.tm-ad-slot--preroll .tm-ad-mk{width:clamp(28px,9cqi,64px)}
.tm-ad-slot--preroll .tm-ad-t{font-size:clamp(14px,4.4cqi,30px)}
.tm-ad-slot--splash .tm-ad-tag{left:16px;top:calc(16px + env(safe-area-inset-top))}
.tm-ad-slot--splash .tm-ad-skip{right:16px;top:calc(16px + env(safe-area-inset-top))}
.tm-ad-slot--preroll .tm-ad-skip{top:auto;bottom:12px}
.tm-ad-slot--bar .tm-ad-ph{gap:10px;padding:0 48px 0 48px}
.tm-ad-slot--bar .tm-ad-ph::before{display:none}
.tm-ad-slot--bar .tm-ad-mk{width:36px}
.tm-ad-slot--bar .tm-ad-t{font-size:14px}
.tm-ad-slot--bar .tm-ad-s{font-size:11px}
.tm-ad-slot--bar .tm-ad-tag{top:50%;margin-top:-9px}
.tm-ad-slot--bar .tm-ad-x{top:50%;margin-top:-14px}
@container (max-width:150px){.tm-ad-s{display:none}}
@container (max-width:360px){.tm-ad-slot--banner .tm-ad-s{display:none}}
@container (max-width:560px){.tm-ad-slot--bar .tm-ad-s{display:none}}
/* 弹窗遮罩 + 入场（只动 opacity / transform） */
.tm-ad-pop{position:fixed;inset:0;z-index:var(--tm-z-modal);display:grid;place-items:center;background:var(--tm-scrim)}
.tm-ad-pop,.tm-ad-slot--bar{animation:tm-ad-in var(--tm-d-slow) var(--tm-ease-out) both}
.tm-ad-pop .tm-ad-slot{animation:tm-ad-up var(--tm-d-slow) var(--tm-ease-spring) both}
.tm-ad-slot--bar{animation-name:tm-ad-up}
@keyframes tm-ad-in{from{opacity:0}}
@keyframes tm-ad-up{from{opacity:0;transform:translate3d(0,16px,0) scale(.98)}}
[hidden].tm-ad-slot,[hidden].tm-ad-pop{display:none}
/* 招商联系页 */
.tm-ad-contact{container-type:inline-size;color:var(--tm-text-body);padding:20px 16px 32px}
.tm-ad-contact h1{font-size:22px;color:var(--tm-text-1);display:flex;align-items:center;gap:8px}
.tm-ad-contact h2{font-size:15px;color:var(--tm-text-1);margin-bottom:10px}
.tm-ad-contact .tm-ad-lead{font-size:13px;color:var(--tm-text-3);margin:6px 0 16px}
.tm-ad-grid{display:grid;gap:12px}
.tm-ad-card{padding:16px;border-radius:var(--tm-r-lg);background:var(--tm-surface-1);border:1px solid var(--tm-line)}
.tm-ad-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--tm-line);font-size:13px}
.tm-ad-row:last-child{border-bottom:0}
.tm-ad-row>span:first-child{color:var(--tm-text-2);flex:none}
.tm-ad-row small{display:block;font-size:11px;color:var(--tm-text-4)}
.tm-ad-fill{padding:4px 10px;border:1px dashed var(--tm-line-honey);border-radius:var(--tm-r-sm);color:var(--tm-text-champagne);font-size:12px;text-align:right}
.tm-ad-note{font-size:12px;line-height:20px;color:var(--tm-text-3);padding-left:16px}
@container (min-width:720px){.tm-ad-contact{padding:32px 40px}.tm-ad-contact h1{font-size:28px}.tm-ad-grid{grid-template-columns:1fr 1.4fr}.tm-ad-grid>.tm-ad-card:last-child{grid-column:1/-1}}
/* 降级：沿用 tm-fx 的 data-fx / 减少动态；扫光 .tm-sh 已由 tm-fx.css 处理 */
@media (prefers-reduced-motion:reduce){.tm-ad-pop,.tm-ad-pop .tm-ad-slot,.tm-ad-slot--bar{animation:none}}
html[data-fx=off] .tm-ad-pop,html[data-fx=off] .tm-ad-pop .tm-ad-slot,html[data-fx=off] .tm-ad-slot--bar{animation:none}
html[data-fx=lite] .tm-ad-pop .tm-ad-slot,html[data-fx=lite] .tm-ad-slot--bar{animation-name:tm-ad-in}
html[data-fx=lite] .tm-ad-mk{box-shadow:none}