/* Ad panels beside the recipes (js/ads.js). The page column (.pwrap) is at most 1060 px;
   the rail segments sit outside it, so the recipe never narrows or shifts for an ad.

   THE STICKY STACK: each segment is an absolutely placed box as tall as the page section it
   sits beside; the ad inside is position:sticky, so it stays in view while that section is on
   screen and leaves with it, and the next segment's ad takes over. */
.ad-seg{display:none;position:absolute;z-index:1;pointer-events:none}
.ad-seg .ad-slot{position:sticky;top:110px;pointer-events:auto}
.ad-slot{box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-ph{font:600 .72rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.ad-slot:has(.ad-ph){border:1.5px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:10px;
  background:color-mix(in srgb,currentColor 4%,transparent)}
.ad-slot:has(.ad-ph)::after{content:attr(data-size);position:absolute;margin-top:2.4em;font:.68rem system-ui;opacity:.45}
.ad-inline-wrap{display:none;margin:22px auto;justify-content:center}
.ad-inline-wrap .ad-slot{width:300px;height:250px;position:relative}

/* medium screens: 160 x 600 skyscrapers */
@media (min-width:1440px){
  body.ads-on .ad-seg:not([hidden]){display:block}
  .ad-seg{width:160px}
  .ad-seg .ad-slot{width:160px;height:600px}
}
/* wide screens: 300 x 600 half-pages */
@media (min-width:1720px){
  .ad-seg{width:300px}
  .ad-seg .ad-slot{width:300px}
}
/* no room for rails: slots in the content instead -- by screen width, or because the page's
   column is too wide for a rail to fit beside it (js/ads.js measures and sets ads-rails-off) */
@media (max-width:1439px){
  body.ads-on .ad-inline-wrap{display:flex}
}
body.ads-on.ads-rails-off .ad-inline-wrap{display:flex}
.ad-seg.ad-nofit{display:none !important}
@media print{.ad-seg,.ad-inline-wrap{display:none !important}}