/* DM Ads v3 — Pinterest-style, fixed-box, zero-layout-shift ad units.
   Every unit reserves an exact box BEFORE the ad loads, so nothing on the
   page moves when it fills. Units stay hidden until the loader has switched
   ads on for this visitor (html.dm-ads-on), and collapse if unfilled. */

.dm-ad{display:none;box-sizing:border-box;position:relative}
html.dm-ads-on .dm-ad{display:block}
html.dm-ads-on .dm-ad.is-collapsed{display:none!important}

.dm-ad__frame{position:relative;width:100%;overflow:hidden;text-align:center}
.dm-ad__ins{display:block;width:100%;margin:0 auto}
.dm-ad__tag{display:block;margin:0 0 8px;font:600 10px/1 var(--dm-font,system-ui,-apple-system,sans-serif);letter-spacing:.09em;text-transform:uppercase;text-align:center;color:var(--dm-text-muted,#9ca3af)}

/* ── Banner units (in-content, after guide, before footer) ─────────────── */
.dm-ad--block{width:100%;max-width:760px;margin:28px auto;padding:12px 12px 14px;border-radius:16px;background:var(--dm-surface,#f6f7f9)}
.dm-ad--block .dm-ad__ins{height:280px}                      /* 336×280 / 300×250 */
.dm-ad--before_footer{max-width:1000px;margin:36px auto 28px}
.dm-ad--header .dm-ad__ins{height:100px}                     /* 320×100 */
@media (min-width:900px){
  .dm-ad--before_footer .dm-ad__ins{height:250px}            /* 970×250 billboard */
  .dm-ad--header .dm-ad__ins{height:90px}                    /* 728×90 */
}
/* Single prompt: sits under the author row in the right column */
.dm-right .dm-ad--in_content{max-width:none;margin:24px 0 6px}
@media (max-width:768px){
  .dm-ad--block{border-radius:0;padding:10px 0 12px;margin:22px 0}
  .dm-right .dm-ad--in_content{margin:20px -16px 4px;width:calc(100% + 32px)}
}

/* ── Feed: promoted pin (desktop) ──────────────────────────────────────── */
.dm-ad--pin{
  width:100%;margin:0 0 12px;border-radius:14px;overflow:hidden;
  background:var(--dm-card-bg,#fff);border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
}
.dm-ad--pin .dm-ad__frame{background:#f4f5f7;padding:8px 0}
.dm-ad--pin .dm-ad__ins{height:280px}
.dm-ad--pin .dm-ad__tag--row{display:none}
.dm-ad__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px 11px}
.dm-ad__sponsor{font:600 12.5px/1.2 var(--dm-font,system-ui,sans-serif);color:var(--dm-text-secondary,#6b7280)}
.dm-ad__pill{flex-shrink:0;padding:2px 7px;border-radius:4px;font:800 9px/1.4 var(--dm-font,system-ui,sans-serif);letter-spacing:.07em;text-transform:uppercase;background:#e9eaec;color:#6b7280}

/* Breakpoint routing — the runtime never requests a hidden unit. */
@media (min-width:681px){ html.dm-ads-on .dm-ad--pin:not(.dm-ad--d){display:none} }
@media (max-width:680px){
  html.dm-ads-on .dm-ad--pin:not(.dm-ad--m){display:none}
  .dm-ad--pin{margin-bottom:8px;border-radius:12px}
  .dm-ad--pin .dm-ad__ins{height:250px}
  /* Phone: full-width sponsored row between rows of pins. column-span splits
     the masonry into balanced blocks, so the row never overlaps a column. */
  .dm-ad--pin.dm-ad--mrow{
    -webkit-column-span:all;column-span:all;
    margin:6px 0 12px;border-radius:14px;box-shadow:none;
    background:var(--dm-surface,#f6f7f9);border-color:transparent;padding:10px 0 12px;
  }
  .dm-ad--pin.dm-ad--mrow .dm-ad__tag--row{display:block}
  .dm-ad--pin.dm-ad--mrow .dm-ad__meta{display:none}
  .dm-ad--pin.dm-ad--mrow .dm-ad__frame{background:transparent;padding:0}
  .dm-ad--pin.dm-ad--mrow .dm-ad__ins{height:280px}
}

/* ── Multiplex (native grid) ───────────────────────────────────────────── */
.dm-ad--multiplex{max-width:1200px;margin:8px auto 28px;padding:0 16px}
.dm-ad--multiplex .dm-ad__frame{overflow:visible}
.dm-ad--multiplex .dm-ad__ins{min-height:280px}
.dm-ad--multiplex.is-filled .dm-ad__ins{min-height:0}

/* ── Sidebar 300×250 ───────────────────────────────────────────────────── */
.dm-ad--sidebar{margin:16px 0;padding:10px;border-radius:12px;background:var(--dm-surface,#f6f7f9)}
.dm-ad--sidebar .dm-ad__ins{width:300px;max-width:100%;height:250px}
@media (max-width:899px){ html.dm-ads-on .dm-ad--sidebar{display:none} }

/* ── Dark mode ─────────────────────────────────────────────────────────── */
[data-theme=dark] .dm-ad--pin{background:#161616;border-color:rgba(255,255,255,.08);box-shadow:0 1px 4px rgba(0,0,0,.5)}
[data-theme=dark] .dm-ad--pin .dm-ad__frame,
[data-theme=dark] .dm-ad--block,
[data-theme=dark] .dm-ad--sidebar,
[data-theme=dark] .dm-ad--pin.dm-ad--mrow{background:#1c1c1e}
[data-theme=dark] .dm-ad--pin.dm-ad--mrow .dm-ad__frame{background:transparent}
[data-theme=dark] .dm-ad__pill{background:#2a2a2e;color:#9ca3af}

/* ── Admin preview (?dm_ads_preview=1) ─────────────────────────────────── */
.dm-ad__ph{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;border:2px dashed #E60023;border-radius:10px;background:repeating-linear-gradient(45deg,rgba(230,0,35,.04),rgba(230,0,35,.04) 10px,transparent 10px,transparent 20px);color:#9f1239;font:600 12px/1.3 system-ui,sans-serif;padding:10px}
.dm-ad__ph small{font-weight:500;color:#6b7280}
.dm-ad--multiplex .dm-ad__ph{min-height:280px}