/* symplr ad slots, on every page that has them (detail page, homepage). The markup comes from
   classified/_ad_slot.html.twig.

   This is the wrapper we own; the id div inside it belongs to their script,
   which re-parents it into a holder of its own and sizes that holder itself. So no height is
   enforced here — capping the wrapper would clip a creative their holder has already made
   room for — and --pdp-ad-height only tells the local placeholder how big the position is
   meant to get. Until something lands in the id div the wrapper collapses, so an unsold slot
   costs neither height nor one of the column's 20px gaps.

   The wrapper stays a plain block so the id div fills it: centring the creative is the ad
   script's own job, and its holder already does it. */
.pdp-ad:has(> div:empty) {
  display: none;
}

/* Exempt from the collapse above. Their script gives this holder 256px whether or not the
   slot sells, but only once it runs, and the content dropping by that much then was nearly
   all of the page's desktop CLS (0.29 measured live, 0.007 without the script). Reserved from
   the first paint instead; the class comes from the script tag's onerror (base.html.twig), so
   a visitor whose blocker stops the script gets no empty band. */
html:not(.ads-unavailable) .pdp-ad-bb {
  display: block;
  min-height: 256px;
}

.pdp-ad-bb,
.pdp-ad-bb-2 {
  --pdp-ad-height: 280px;
}

.pdp-ad-incontent-1,
.pdp-ad-incontent-2 {
  --pdp-ad-height: 300px;
}

.pdp-ad-sky-1,
.pdp-ad-sky-2 {
  --pdp-ad-height: 600px;
}

/* Local stand-in for an ad, behind the ads_placeholder flag. Fills the slot's full budget
   so the layout can be judged at the size a booking would actually take. */
.pdp-ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pdp-ad-height);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* The off-content skyscrapers. The rail is as wide as the space beside the content allows
   and no wider than symplr's 300px ceiling, so it simply has no box on a narrow window. What
   does not fit is cut off at the rail's edge rather than pushing the page sideways.

   No breakpoint of our own: symplr sets both the viewport from which a sky is requested and
   which widths may be delivered there, and asked us to simply build the positions. A gate here
   could only disagree with theirs. Below 1400px of content the rail is zero wide and nothing
   is rendered anyway.

   The rail sits in a box shaped like the content container (max-width, --padding-desktop),
   reaches into its side padding and stops --pdp-ad-rail-gap short of the content, so the whole
   margin outside the content is usable. What is left over at the far edge is that same gap,
   which also absorbs the error in 100vw: it counts a classic scrollbar the layout does not
   have, and half of one is well under 20px. */
.pdp-ad-rail {
  /* symplr's ceiling for the skyscrapers. Their script picks the actual format per
     viewport, so a rail is usually narrower than this and the ad inside gets cut. */
  --pdp-ad-rail-width: 300px;
  /* How close a rail comes to the content, matching the gap the detail page's grid uses
     between its own columns. */
  --pdp-ad-rail-gap: 20px;

  display: flex;
  align-items: flex-start;
  position: absolute;
  top: 0;
  /* The detail page's bottom padding: the travel ends where the content ends, otherwise the
     sticky slot comes to rest flush against the footer. */
  bottom: 48px;
  width: clamp(0px, calc((100vw - var(--max-width)) / 2), var(--pdp-ad-rail-width));
  /* clip, not hidden: hidden would make this a scroll container and strand the sticky slot
     inside it. */
  overflow: clip;
  pointer-events: none;
}

.pdp-ad-rail-left {
  right: calc(100% - var(--padding-desktop) + var(--pdp-ad-rail-gap));
}

.pdp-ad-rail-right {
  left: calc(100% - var(--padding-desktop) + var(--pdp-ad-rail-gap));
}

/* Fills the rail rather than claiming the full slot width. Which format lands here is decided
   per auction, not by the viewport: measured on the live site, the same window width
   delivered 120x600 once and 300x600 the next time. A fixed 300px box would centre a narrow
   creative inside it, and at a narrow rail that centre sits in the part that gets cut away. */
.pdp-ad-rail .pdp-ad {
  width: 100%;
  /* A flex item does not shrink below its own content by default, so on a phone the slot kept
     a few pixels of width inside a rail that has none. Clipped and without height, so nothing
     was visible, but the box should not be there at all. */
  min-width: 0;
  position: sticky;
  top: 20px;
  pointer-events: auto;
}