/* Advertising slots.
 *
 * Two rules decide everything here, and they are Ben's: an advertiser
 * has to be happy with where their creative lands, and a reader has to
 * be able to finish what they came to do without fighting it.
 *
 * So: the rail is beside the content and never over it, nothing is
 * sticky on a phone, nothing is fixed to the viewport, nothing covers
 * a control, and no slot sits between somebody and the result of the
 * work they just asked for. The interstitial pattern advertisers ask
 * for - a panel over the page with a close button - is not here and
 * should not be added to the web client. The phone has a place where
 * that trade makes sense, because there is already a wait to fill.
 */

/* The rail column.
 *
 * Only on a viewport with genuine room beside the content. Below that
 * the grid collapses to one column and the rail is gone, rather than
 * squeezed in under the article where it would be the last thing
 * before the footer and worth nothing to anybody.
 */
.pf-rail-layout {
  display: block;
}

/* Two classes, not one, and this matters.
 *
 * ads.js adds .pf-ad to every slot, and .pf-ad sets display:flex. A
 * plain `.pf-rail { display: none }` is the same specificity and loses
 * to whichever comes later in the file - so on a 375px phone the rail
 * came back as a 600px empty box below the article, which is the exact
 * thing a narrow screen must not get. Scoping both rules to
 * `.pf-rail.pf-ad` makes the breakpoint, not the source order, decide.
 */
.pf-rail,
.pf-rail.pf-ad {
  display: none;
}

@media (min-width: 1280px) {
  .pf-rail-layout {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 160px;
    margin: 0 auto;
    max-width: 1180px;
  }

  .pf-rail.pf-ad {
    display: flex;
    /* Follows the reader down a long article, which is what makes the
     * position worth selling, and stops well clear of the header. */
    position: sticky;
    top: 92px;
  }

  /* Collapsed for a subscriber: beats the rule above, which is why it
   * carries the same two classes plus one. */
  .pf-rail.pf-ad.is-empty {
    display: none;
  }

  /* Nobody is getting an advert here, so the page goes back to being
   * the page it was before the rail existed: one centred column, no
   * reserved track, no offset. Set by ads.js once it knows. */
  .pf-rail-layout.is-railless {
    display: block;
    max-width: none;
  }
}

/* The slot itself. */
.pf-ad {
  align-items: center;
  border: 1px dashed var(--pf-line);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--pf-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  /* Fill the space reserved for it, up to the format's max-width
   * below. Without this a flex box sizes to its content, and the rail
   * - whose explanatory line is hidden because the column is narrow -
   * came out 115px wide inside its 160px column. An advertiser is
   * buying 160x600, so the box has to actually be it. */
  width: 100%;
}

/* Collapsed: a paying reader, or a slot we chose not to fill. It takes
 * no space at all, rather than leaving a gap where an advert was. */
.pf-ad.is-empty {
  border: 0;
  display: none;
  margin: 0;
  padding: 0;
}

.pf-ad[data-pf-ad="rail"] { max-width: 160px; }
.pf-ad[data-pf-ad="rectangle"] { max-width: 300px; }
.pf-ad[data-pf-ad="leaderboard"] { max-width: 728px; }

/* The responsive strip, used between blocks of content. Shorter on a
 * phone, where vertical space is the thing in shortest supply. */
.pf-ad[data-pf-ad="strip"] {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 560px) {
  .pf-ad[data-pf-ad="strip"] { min-height: 90px !important; }
}

/* An advert has to be labelled as one. This is not decoration: a
 * placement a reader mistakes for our own content is the kind that
 * gets a site distrusted, and in several markets it is also the law.
 */
.pf-ad-tag {
  color: var(--pf-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pf-ad-size {
  font-size: 13px;
  font-weight: 600;
}

.pf-ad-note {
  font-size: 11px;
  line-height: 1.4;
  max-width: 34ch;
  opacity: 0.75;
}

/* The rail is narrow, so the explanatory line does not fit in it. */
.pf-ad[data-pf-ad="rail"] .pf-ad-note {
  display: none;
}

/* Spacing when a slot sits in the flow of a page rather than in the
 * rail. Generous on purpose: an advert jammed against the paragraph
 * above it reads as part of the paragraph. */
.pf-ad[data-pf-ad="strip"],
.pf-ad[data-pf-ad="leaderboard"],
.pf-ad[data-pf-ad="rectangle"] {
  margin-bottom: 32px;
  margin-top: 32px;
}

@media (prefers-reduced-motion: no-preference) {
  .pf-ad.is-placeholder {
    transition: opacity 0.2s ease;
  }
}