/* ============================================================
   Ad boxes, sponsor strips and the push button. Loaded after
   app.css, whose tokens (colours, radius, label face) it uses.
   The page layout around them (.with-rail, .main-col, .rail,
   .rail-stick) and the shared label look (.ad-label, .nav-ad)
   belong to app.css.

   Every box has its size before its ad arrives, so the page
   never jumps when one does. render.php sets the size per zone
   as --dw/--dh (desktop) and --mw/--mh (phone); ads.sizes in the
   settings changes them. Every box says "Ad" above the creative,
   never on top of it: nothing may cover part of an ad.
   ============================================================ */

.ad {
  --w: var(--dw, 300px);
  --h: var(--dh, 250px);
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: min(100%, var(--w));
  margin: 22px auto;
}
@media (max-width: 760px) {
  .ad { --w: var(--mw, var(--dw, 300px)); --h: var(--mh, var(--dh, 250px)); }
}
.ad-box {
  display: grid; place-items: center;
  width: 100%; height: var(--h);
  overflow: hidden;
}
.ad-box > * { max-width: 100%; }

/* A placeholder (site.preview with no code yet): the reserved box, drawn. */
.ad-empty .ad-box {
  padding: 6px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  color: var(--muted); text-align: center;
  font: 600 .72rem/1.3 var(--label); letter-spacing: .08em; text-transform: uppercase;
}

/* A directly sold creative: one picture, scaled to its box. */
.ad-house .ad-box a { display: block; width: 100%; height: 100%; }
.ad-house .ad-box img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- zones ---------- */

.ad-top { margin: 14px auto 8px; }

/* The native tile sits in the video grid, but it is not a video card and
   must not pass for one: a dashed edge, a hatched ground and the label. */
.grid > .ad-native, .ad-native {
  width: auto; margin: 0; padding: 8px; gap: 6px;
  align-self: stretch;
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--bg-3) 60%, transparent) 10px 20px);
}
.ad-native .ad-box { height: auto; aspect-ratio: 16 / 10; }

/* ExoClick's native widget (its "Recommendation Widget", 1 x 1) draws
   itself 800 px wide, black titles on a fixed 90 px text block, with its
   own stylesheet under an id. In a tile it takes the tile's width, a text
   block only as tall as its two lines, and the site's colours in either
   theme. The tile grows rather than cut the ad off (overflow visible lets
   the 16:10 box stretch to its content). Checked on the live site
   2026-10-03. */
.ad-native .ad-box { grid-template-columns: minmax(0, 1fr); overflow: visible; }
.ad-native .exo-native-widget { display: flex !important; width: 100% !important; }
.ad-native .exo-native-widget-header:empty { display: none !important; }
.ad-native .exo-native-widget-item-content { height: auto !important; max-height: none !important; padding: 5px 0 0 !important; }
.ad-native .exo-native-widget-item-content-box { position: static !important; }
.ad-native .exo-native-widget-item-title {
  color: var(--text) !important;
  font: 500 .86rem/1.3 var(--body) !important;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.ad-native .exo-native-widget-item:hover .exo-native-widget-item-title { color: var(--crimson) !important; }
.ad-native .exo-native-widget-item-brand {
  margin-top: 1px; color: var(--muted) !important;
  font: 400 .74rem/1.35 var(--body) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Outstream video: 16:9, as wide as it may be. */
.ad.ad-mid { width: min(100%, var(--dw, 640px)); margin-top: 36px; }
.ad-mid .ad-box { height: auto; aspect-ratio: 16 / 9; }
/* The one box that is not reserved: ExoClick's outstream stays at zero
   height when it has no video to play, which on a new zone is often, and a
   labelled empty 16:9 hole mid-list is worse than a late push-down below
   the reader (the slot fills 600 px before it scrolls into view). Folded
   until something is drawn in it; app.js adds .ad-live then. 2026-10-03. */
.ad-mid:not(.ad-empty):not(.ad-house) .ad-box { aspect-ratio: auto; overflow: visible; }
.ad-mid:not(.ad-empty):not(.ad-house):not(.ad-live) { margin: var(--row-gap) auto 0; gap: 0; }
.ad-mid:not(.ad-empty):not(.ad-house):not(.ad-live) .ad-label { display: none; }

/* The rail shows from 1280 px (app.css). The boxes are hidden below that
   themselves too, so the script never fills a box nobody can see. */
.rail .ad { margin: 0 auto; }
/* While the desktop video slider shows in the bottom corner, the tall unit
   stays in place instead of following the reader under it: an ad covered
   by another ad is an impression nobody saw. */
.slider-on .rail-stick { position: static; }
@media (max-width: 1279px) {
  .ad-side, .ad-side_tall { display: none; }
}

.ad-footer { margin: 32px auto 0; }

/* The phone anchor: 320x50 on phones only, with our own close button and
   the label sitting above the bar, so neither covers the creative. It is
   about 8 % of a phone screen (Better Ads allows up to 30 %). */
.ad-sticky { display: none; }
@media (max-width: 760px) {
  .ad.ad-sticky {
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    width: 100%; margin: 0; padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2); border-top: 1px solid var(--line);
  }
  .ad-sticky .ad-box { width: min(100%, var(--mw, 320px)); height: var(--mh, 50px); }
  .ad-sticky .ad-label { position: absolute; left: 8px; top: -22px; background: var(--bg-2); }
  html:not(.ads-off) body:has(> .ad-sticky) { padding-bottom: 64px; }
}
.ad-x {
  position: absolute; right: 8px; top: -36px;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--bg-2); color: var(--text); cursor: pointer;
}
.ad-x .i { width: 14px; height: 14px; }

/* No ads will come (refused, or the browser's privacy signal): fold the
   empty network boxes away. House ads are the site's own and stay. */
.ads-off .ad:not(.ad-house) { display: none; }
/* ...and with them the desktop rail, unless a house ad is in it, so the
   videos get the whole width back instead of an empty column. */
.ads-off .with-rail > .rail:not(:has(.ad-house)) { display: none; }
@media (min-width: 1280px) {
  .ads-off .with-rail:not(:has(> .rail .ad-house)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- sponsor strip ---------- */

.sponsor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 10px 0 18px; padding: 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--bg-2); font-size: .9rem;
}
.sponsor-i a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sponsor-i a:has(img) { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.sponsor-i a:has(img) .sponsor-l { text-decoration: underline; text-underline-offset: 3px; }
.sponsor-i img { display: block; max-width: 100%; height: auto; }

/* ---------- web push (off unless configured) ---------- */

.push-box {
  position: fixed; left: 16px; bottom: 16px; z-index: 25;
  display: flex; align-items: center; gap: 2px; padding: 3px 3px 3px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.push-box[hidden] { display: none; }
.push-btn {
  padding: 8px 10px; border: 0; background: none; color: var(--text); cursor: pointer;
  font: 600 .8rem/1 var(--label); letter-spacing: .08em; text-transform: uppercase;
}
.push-x {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.push-x .i { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .push-box { position: static; width: fit-content; margin: 16px auto 24px; box-shadow: none; }
}

@media print {
  .ad, .sponsor, .push-box { display: none; }
}