/* Ad slots on the public site.
   Every slot reserves its height before the creative loads. Without that,
   an ad arriving late shoves the paragraph the reader is halfway through
   down the page -- which is both the most irritating thing a site can do
   and the single biggest contributor to a bad CLS score. */

.mf-ad{
  position:relative;
  margin:22px auto;
  padding:0;
  text-align:center;
  max-width:100%;
  overflow:hidden;
}
.mf-ad img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:6px;}
.mf-ad a{display:block; text-decoration:none;}
.mf-ad ins{display:block; margin:0 auto;}

/* The label is a legal and a trust requirement both -- an ad that reads as
   editorial is the fastest way to lose a reader for good. */
.mf-ad-label{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#9a9890; margin-bottom:6px; line-height:1;
}

/* ---- per slot ---- */
.mf-ad-header{
  min-height:96px; margin:14px auto 4px; padding:10px 12px;
  max-width:1000px;
}
.mf-ad-in-article,
.mf-ad-article-end{min-height:262px; margin:26px auto; clear:both;}
.mf-ad-sidebar{min-height:262px; margin:0 0 18px;}
.mf-ad-list{min-height:110px; margin:16px 0;}
.mf-ad-footer{min-height:106px; margin:26px auto 0; max-width:1000px;}

/* Mobile sticky. Pinned, with the safe-area inset so it clears the home
   bar on an iPhone, and a close button -- a sticky unit with no way out is
   what Google's intrusive-interstitial rules are aimed at. */
.mf-ad-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  margin:0; padding:5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97); border-top:1px solid #eceae5;
  min-height:58px; display:none;
  backdrop-filter:saturate(140%) blur(6px);
}
.mf-ad-sticky .mf-ad-label{margin-bottom:3px;}
html.dark-mode .mf-ad-sticky{background:rgba(20,21,24,.97); border-top-color:#2c2d31;}

@media (max-width:760px){
  .mf-ad-sticky{display:block;}
  .mf-ad-header{min-height:64px; margin:10px auto 2px; padding:8px;}
  .mf-ad-footer{min-height:64px;}
  .mf-ad-in-article,
  .mf-ad-article-end{min-height:262px; margin:20px auto;}
  /* Room at the end of the page so the sticky unit never covers the last
     paragraph or the footer links. */
  body{padding-bottom:62px;}
}

/* ---- device targeting ---- */
.mf-ad-desktop{display:block;}
.mf-ad-mobile{display:none;}
@media (max-width:760px){
  .mf-ad-desktop{display:none;}
  .mf-ad-mobile{display:block;}
  .mf-ad-mobile.mf-ad-sticky{display:block;}
}

@media print{
  .mf-ad{display:none !important;}
}