/* ==========================================================================
   QUACKMARK — advertising units
   Layers on top of style.css. Every unit is native to the page it sits on:
   deep-sea cards in the site, parchment boxes in the IP Pages.
   ========================================================================== */

/* Reserve height so a filled slot never pushes the page around (no layout shift) */
.adzone { display: block; }
.adzone[data-ad-state] { animation: adFade .4s ease both; }
@keyframes adFade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .adzone[data-ad-state] { animation: none } }

/* ---------- vacant units: quieter than sold ones, never embarrassing ---------- */
.ad-slot.ad-vacant,
.ad-inline.ad-vacant { text-decoration: none; display: block; }
.ad-slot.ad-vacant b { color: var(--plum-soft); }
.ad-slot.ad-vacant:hover b { color: var(--plum); }

/* ---------- IP Pages box ad (parchment, double rule) ---------- */
.yp-ad { display: block; text-decoration: none; }
.yp-ad .yp-meta {
  display: block; margin-top: 8px;
  font: 500 .78rem 'Bricolage Grotesque', sans-serif; color: #6b5330; letter-spacing: .01em;
}
.yp-ad .yp-cta {
  display: inline-block; margin-top: 10px;
  font: 700 .74rem 'Bricolage Grotesque', sans-serif; color: #8E1B1F; letter-spacing: .06em; text-transform: uppercase;
}
.yp-ad.ad-vacant b { color: #5f4a20; }

/* ---------- IP Pages classifieds (cheap, thematic, self-serve) ---------- */
.ad-classifieds {
  border-top: 2px solid #33240F; border-bottom: 2px solid #33240F;
  background: #FBF0C8; padding: 12px 16px; margin: 38px 0;
}
.ad-classifieds .adlbl {
  font: 700 .58rem 'Bricolage Grotesque', sans-serif; letter-spacing: .34em; color: #5f4a20;
  text-transform: uppercase; display: block; margin-bottom: 6px;
}
.ad-classified {
  display: block; text-decoration: none; color: #33240F;
  font: 400 .9rem 'Bricolage Grotesque', sans-serif; line-height: 1.5;
}
.ad-classified b { font-family: 'Fraunces', serif; color: #8E1B1F; }
.ad-classified:hover { background: #FDF6DC; }
.ad-cta-inline { color: #8E1B1F; font-weight: 600; }

/* ---------- Sponsorship strip (quizzes, graveyard) ---------- */
.ad-sponsor {
  display: block; text-decoration: none;
  background: linear-gradient(120deg, var(--card), rgba(12,49,64,.55));
  border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: 18px 22px; margin: 26px auto 0;
  max-width: 860px; transition: border-color .25s, transform .25s;
}
.ad-sponsor:hover { border-left-color: var(--primary-deep); transform: translateY(-2px); }
.ad-sponsor .adlbl {
  font: 700 .58rem 'Bricolage Grotesque', sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: var(--plum-soft); display: block; margin-bottom: 8px; opacity: .8;
}
.ad-sponsor b { font-family: 'Space Grotesk', sans-serif; font-size: 1.02rem; color: var(--plum); display: block; }
.ad-sponsor p { font-size: .87rem; color: var(--plum-soft); margin-top: 5px; }
.ad-sponsor .ad-cta { display: inline-block; margin-top: 10px; font: 600 .82rem 'Bricolage Grotesque', sans-serif; color: var(--primary); }
.ad-sponsor.ad-vacant { border-left-style: dashed; }

/* ---------- In-content unit (Basics, Useful Links) ---------- */
.ad-inline {
  display: block; text-decoration: none;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin: 30px auto; max-width: 780px;
  transition: border-color .25s, background .25s;
}
.ad-inline:not(.ad-vacant) { border-style: solid; }
.ad-inline:hover { border-color: var(--primary); background: rgba(95,212,200,.04); }
.ad-inline .adlbl {
  font: 700 .56rem 'Bricolage Grotesque', sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: var(--plum-soft); display: block; margin-bottom: 6px; opacity: .75;
}
.ad-inline b { font-family: 'Space Grotesk', sans-serif; font-size: .98rem; color: var(--plum); display: block; }
.ad-inline p { font-size: .85rem; color: var(--plum-soft); margin-top: 4px; }
.ad-inline .ad-cta { display: inline-block; margin-top: 8px; font: 600 .8rem 'Bricolage Grotesque', sans-serif; color: var(--primary); }

@media (max-width: 620px) {
  .ad-sponsor, .ad-inline { padding: 14px 16px; }
}

/* label always on its own line, including inside the parchment box */
.yp-ad .adlbl, .ad-classifieds .adlbl { display: block; margin-bottom: 6px; }
.yp-ad b { display: block; }

/* end-of-page unit sits away from the last content block */
.adzone--endcap{margin-top:52px}

/* ---------- the reserved space ------------------------------------------
   Each vacant unit already draws its own dashed rule - .ad-inline, the
   dashed left bar on .ad-sponsor, the parchment box in the directory. An
   outline on .adzone as well put two lines round every empty slot, so the
   zone draws nothing and the unit speaks for itself. One line is enough. */