/* EdgeRift — page CSS for /advertising (for ad buyers; Company in the menu). A white hero over the card-art
   strip (as Company and Careers; the strip's rules are in company.css, loaded first), three numbered steps in
   text columns, each under its spot illustration, the placement IDs in the Specs list with each app's icon,
   and a white contact band.
   Tokens only (no colour values); uppercase only through the shared classes. */

@layer pages {
  /* Phones crop the strip to its middle: keep the iPad, its banner ad and the last dealt cards in view. */
  @media (max-width: 767px) { .art-strip--advertising img { object-position: 50% 50%; } }

  .steps {
    display: grid; gap: 40px; max-width: var(--w-content); margin: var(--gap-cta-media) auto 0;
    padding: 0; list-style: none; counter-reset: step;
  }
  @media (min-width: 1024px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: left; }
  }
  .steps li { counter-increment: step; display: flex; flex-direction: column; }
  /* The spot art leads each step (order: -1 puts it above the counter, which is the li's ::before). Each
     drawing stands on a ground line at 10%–90% of its width, so from 1024 (text left-aligned) it moves out by
     that 10% to line up with the text. */
  .steps__art { order: -1; display: block; width: min(100%, 320px); height: auto; margin: 0 auto 20px; }
  @media (min-width: 1024px) {
    .steps__art { width: 100%; max-width: none; margin: 0 0 24px -10%; }
  }
  .steps li::before {
    content: counter(step); display: block; margin-bottom: 8px;
    font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
  }
  .steps p { max-width: 24em; margin: 8px auto 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  @media (min-width: 1024px) { .steps p { margin-inline: 0; } }

  .placements dt { display: flex; align-items: center; gap: 14px; }
  .placements__icon { display: block; flex: none; width: 44px; height: 44px; }
  .placements__icon picture { display: contents; }
  .placements__icon img { display: block; width: 100%; height: 100%; border-radius: 22.37%; }
  .placements code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .94em; overflow-wrap: anywhere; }
  .placements .body-lg { margin-top: 20px; }
}