/* ---------------------------------------------------------
   BANNER PLACEMENTS (/swp/ banner manager)
   Markup comes from includes/banners.php; /swp/p.js fills each slot
   and un-hides it once it has a live creative. Loaded only on pages
   that carry a placement (never the shop).

   Class names are deliberately neutral (swp-…, no "ad", "banner" or
   "sponsor"): ad-blockers hide elements with those names on every
   site, and a hidden placement also means missing test stats.
   --------------------------------------------------------- */

.swp-footer[hidden], .swp-box[hidden], .swp-rail[hidden] { display: none; }

/* The small "Sponsored" label, linked to the disclosure page. */
.swp-label {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
  text-decoration: none;
}
a.swp-label:hover { color: var(--text-dim); text-decoration: underline; }

/* Every creative scales down to fit a phone and keeps its shape. */
.swp-footer a[data-sw-slot],
.swp-box a[data-sw-slot],
.swp-rail a[data-sw-slot] { display: inline-block; max-width: 100%; line-height: 0; }
.swp-footer img,
.swp-box img,
.swp-rail img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 4px; }

/* ---- Footer banner: between the page and the site footer ---- */
.swp-footer {
  max-width: 1240px;
  margin: 8px auto 48px;
  padding: 0 24px;
  text-align: center;
}

/* ---- Square: mid-guide, and between a tool's write-up and its FAQ ---- */
.swp-box {
  max-width: 340px;
  margin: 36px auto;
  padding: 12px 18px 18px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.blog-body .swp-box { clear: both; }

/* ---- Skyscraper rail: wide desktops only ----
   Lives inside <main>, pinned to its right edge and as tall as <main>;
   the inner box is sticky, so the 160x600 follows the reader down but
   always stays below the (sticky) header and stops where <main> ends,
   above the footer banner and the footer.

   It needs a 200px gutter beside the content. At 1640px and up the
   1240px container already leaves that; between 1360px and 1640px the
   containers on rail pages are narrowed (width, not max-width, so wider
   layouts like the comparison table keep their own cap). Below 1360px,
   or on a window shorter than 700px, there is no rail at all — and p.js
   never counts an impression for a slot that is not displayed. */
.swp-rail { display: none; }

@media (min-width: 1360px) and (min-height: 700px) {
  body.has-rail main {
    position: relative;
    min-height: 700px;
  }
  body.has-rail main .container {
    width: min(100%, calc(100vw - 400px));
  }
  .swp-rail {
    display: block;
    position: absolute;
    top: 24px;
    bottom: 24px;
    right: 20px;
    width: 160px;
    z-index: 5;
  }
  .swp-rail-inner {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
  .swp-rail img { width: 160px; height: auto; }
}

@media print {
  .swp-rail, .swp-footer, .swp-box { display: none !important; }
}