/* ==========================================================
   CODE-BUILT ARTWORK (posts, ads, stories, outdoor). Client tokens only.
   Everything in container units: one template fits any ratio.
   ========================================================== */
.ad{ position:relative; width:100%; height:100%; overflow:hidden; container-type:size; isolation:isolate;
  background:var(--ad-bg); color:var(--ad-fg); font-family:var(--c-body); }
.ad p{ margin:0; }
.ad-media{ position:absolute; inset:0; z-index:-1; }
.ad-media-top{ bottom:auto; height:58%; }
.ad-scrim{ position:absolute; inset:40% 0 0; z-index:-1; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.ad-scrim-full{ inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)); }
.ad-photo, .ad-carousel{ color:var(--c-on-photo); }

.ad-top{ position:absolute; left:7cqmin; right:7cqmin; top:7cqmin; display:flex; justify-content:space-between; align-items:center; }
.ad-foot{ position:absolute; left:7cqmin; right:7cqmin; bottom:7cqmin; display:flex; flex-direction:column; align-items:flex-start; gap:2.6cqmin; }
.ad-bottom{ position:absolute; left:7cqmin; bottom:7cqmin; }

.ad-brand{ display:inline-flex; align-items:center; gap:1.6cqmin; font:800 4.2cqmin/1 var(--c-display); letter-spacing:-.03em; }
.ad-sym{ width:5.4cqmin; height:5.4cqmin; display:block; }
.ad-sym svg{ width:100%; height:100%; display:block; fill:currentColor; }
.ad-sym svg path{ fill:currentColor; }
/* an integrated logo: the supplied wordmark alone, sized from the brand's font size */
.ad-wmf{ display:block; height:1.3em; }
.ad-wmf svg{ height:100%; width:auto; display:block; fill:currentColor; overflow:visible; }

.ad-h{ font:800 9.4cqmin/1 var(--c-display); letter-spacing:-.04em; text-wrap:balance; }
.ad-h-xl{ position:absolute; left:7cqmin; right:7cqmin; top:30%; font-size:13cqmin; line-height:.94; }
.ad-s{ font:500 3.6cqmin/1.35 var(--c-body); opacity:.86; max-width:80cqw; }
.ad-cta{ display:inline-flex; align-items:center; gap:1.4cqmin; padding:2.2cqmin 3.6cqmin; border-radius:999px;
  background:var(--ad-fg); color:var(--ad-bg); font:600 3.4cqmin/1 var(--c-body); }
.ad-photo .ad-cta, .ad-carousel .ad-cta{ background:var(--c-on-photo); color:var(--c-brand-1); }
.ad-cta svg{ width:3.2cqmin; height:3.2cqmin; }

.ad-panel{ position:absolute; left:0; right:0; bottom:0; height:42%; padding:6cqmin 7cqmin; display:flex; flex-direction:column; gap:2cqmin; }
.ad-panel .ad-h{ font-size:7.6cqmin; }
.ad-row{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; width:100%; }

.ad-qmark{ position:absolute; left:6cqmin; top:2cqmin; font:800 36cqmin/1 var(--c-display); color:var(--c-accent); }
.ad-q{ position:absolute; left:7cqmin; right:9cqmin; top:30%; font-size:8.4cqmin; line-height:1.04; }
.ad-by{ position:absolute; left:7cqmin; bottom:17cqmin; font:500 3.4cqmin/1.3 var(--c-body); opacity:.7; }

.ad-date{ position:absolute; left:7cqmin; top:22%; display:flex; flex-direction:column; font-family:var(--c-display); }
.ad-date b{ font:800 30cqmin/.82 var(--c-display); letter-spacing:-.05em; }
.ad-date span{ font:700 6cqmin/1 var(--c-display); color:var(--c-accent); margin-top:2cqmin; letter-spacing:-.02em; }

.ad-h-list{ position:absolute; left:7cqmin; right:7cqmin; top:20%; font-size:8cqmin; }
.ad-items{ position:absolute; left:7cqmin; right:7cqmin; bottom:7cqmin; margin:0; padding:0; list-style:none; }
.ad-items li{ display:flex; gap:3cqmin; padding:2.6cqmin 0; border-top:1px solid color-mix(in srgb, var(--ad-fg) 18%, transparent); font:500 4cqmin/1.25 var(--c-body); }
.ad-items li span{ font:700 4cqmin/1.25 var(--c-display); color:var(--c-accent); min-width:4cqmin; }

.ad-h-top{ position:absolute; left:7cqmin; right:7cqmin; top:7cqmin; font-size:7.4cqmin; }
.ad-phone{ position:absolute; right:9cqmin; bottom:-6cqh; width:48cqmin; height:74cqh; border-radius:7cqmin 7cqmin 0 0;
  background:#0d0d0f; padding:1.8cqmin 1.8cqmin 0; box-shadow:0 4cqmin 8cqmin -4cqmin rgba(0,0,0,.4); }
.ad-screen{ height:100%; border-radius:5.4cqmin 5.4cqmin 0 0; background:var(--c-background); color:var(--c-text); padding:10cqmin 4cqmin; display:flex; flex-direction:column; gap:1.2cqmin; }
.ad-screen small{ font:500 2.6cqmin/1 var(--c-body); opacity:.6; }
.ad-screen strong{ font:800 5.4cqmin/1 var(--c-display); letter-spacing:-.03em; }
.ad-screen em{ font:500 2.8cqmin/1 var(--c-body); font-style:normal; opacity:.7; }
.ad-screen i{ align-self:flex-start; margin-top:2cqmin; font:600 2.8cqmin/1 var(--c-body); font-style:normal; padding:1.6cqmin 3cqmin; border-radius:99px; background:var(--c-brand-1); color:var(--c-on-brand-1); }

.ad-n{ font:500 3.2cqmin/1 var(--c-body); opacity:.8; }
.ad-foot .ad-h-xl{ position:static; }   /* in a footer the headline flows above the swipe cue */
.ad-swipe{ display:inline-flex; align-items:center; gap:1.4cqmin; font:600 3.4cqmin/1 var(--c-body); opacity:.9; }
.ad-swipe svg{ width:3.2cqmin; height:3.2cqmin; }

/* wide formats (leaderboards, billboards): headline and brand side by side */
@container (aspect-ratio > 2.2){
  .ad-h{ font-size:34cqh; }
  .ad-h-xl{ top:auto; bottom:12cqh; right:34cqw; font-size:34cqh; }
  .ad-foot{ left:auto; right:5cqh; bottom:12cqh; align-items:flex-end; }
  .ad-brand{ font-size:14cqh; } .ad-sym{ width:17cqh; height:17cqh; }
  .ad-top{ left:5cqh; top:10cqh; }
  .ad-s{ font-size:12cqh; } .ad-cta{ font-size:12cqh; padding:6cqh 10cqh; }
}
/* tall formats (skyscrapers, stories): a little more air */
@container (aspect-ratio < .6){
  .ad-h-xl{ top:34%; font-size:15cqw; }
  .ad-h{ font-size:11cqw; }
}

/* supplied, finished artwork: shown whole, nothing drawn over it */
.ad--img img{ display:block; width:100%; height:100%; object-fit:cover; }
/* a layered source, live: the design is built at 1080 wide; the story card is 390 */
.ad--html iframe{ position:absolute; left:0; top:0; width:1080px; height:1920px; border:0; transform-origin:0 0; scale:calc(390 / 1080); pointer-events:none; background:#111; }
.mf-media .ad--html iframe{ height:1350px; }   /* a 4:5 feed ad: 1080 × 1350, the same 390 width */