/* 365 ad slots: reserved space so content never jumps. Docs: docs/ADS.md.
   Mobile first. The 768px breakpoint is the same one ads-loader.js uses to pick the zone.
   --w / --h = reserved width / height. Defaults per slot below; override per container with
   data-size-desktop="728x90" / data-size-mobile="320x100" (heights listed at the end work
   without JavaScript, any other size is applied by ads-loader.js). */

.ad365 {
  --w: 300px;
  --h: 250px;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--w);
  max-width: 100%;
  min-height: var(--h);
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

/* Defaults: 300x250 on both devices (sidebar, content_top, content_inline, content_bottom,
   custom_ad_1..5, post_style_1, smart_list_6..8). Only the leaderboard slots differ. */
.ad365[data-slot="header"],
.ad365[data-slot="footer_top"] {
  --w: 320px;
  --h: 50px;
}

@media (min-width: 768px) {
  .ad365[data-slot="header"],
  .ad365[data-slot="footer_top"] {
    --w: 728px;
    --h: 90px;
  }
}

/* What Revive puts inside. <ins> is the Revive async placeholder, replaced by a clone holding the banner. */
.ad365 ins {
  display: block;
  text-decoration: none;
}

.ad365 iframe {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
}

/* Newsmag positions banner images inside its own ad boxes (absolute in the header, width:100% elsewhere); undo that here. */
.ad365[data-slot] ins img {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* No zone for this device, hidden by CSS, or ads consent refused: no request is made, so collapse the slot
   and, where :has() exists, the Newsmag wrapper with its margins and "Реклама" label. */
.ad365[data-state="skip"],
.ad365[data-state="off"] {
  display: none;
}

.td-a-rec:has(> .ad365[data-state="skip"]),
.td-a-rec:has(> .ad365[data-state="off"]) {
  display: none;
}

/* Staging placeholders: <html class="ad365-ph"> is set by ads365cfg.staging = true. Never on production. */
.ad365-ph .ad365:empty,
.ad365-ph .ad365[data-state="skip"] {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #b3261e;
  background: #fdf1f0;
  color: #b3261e;
  font: 600 12px/1.3 system-ui, sans-serif;
}

.ad365-ph .ad365:empty::before,
.ad365-ph .ad365[data-state="skip"]::before {
  content: "РЕКЛАМА · пробна позиција (staging) · " attr(data-slot);
}

.ad365-ph .ad365[data-state="off"] {
  display: none;
}

.ad365-ph .td-a-rec:has(> .ad365[data-state="skip"]) {
  display: block;
}

@media print {
  .ad365,
  .td-a-rec:has(> .ad365) {
    display: none;
  }
}

/* Height overrides from data-size-*: (width is set by ads-loader.js, only the height matters for layout shift) */
@media (max-width: 767.98px) {
  .ad365[data-slot][data-size-mobile$="x50"] { --h: 50px; }
  .ad365[data-slot][data-size-mobile$="x60"] { --h: 60px; }
  .ad365[data-slot][data-size-mobile$="x90"] { --h: 90px; }
  .ad365[data-slot][data-size-mobile$="x100"] { --h: 100px; }
  .ad365[data-slot][data-size-mobile$="x250"] { --h: 250px; }
  .ad365[data-slot][data-size-mobile$="x280"] { --h: 280px; }
  .ad365[data-slot][data-size-mobile$="x600"] { --h: 600px; }
}

@media (min-width: 768px) {
  .ad365[data-slot][data-size-desktop$="x50"] { --h: 50px; }
  .ad365[data-slot][data-size-desktop$="x60"] { --h: 60px; }
  .ad365[data-slot][data-size-desktop$="x90"] { --h: 90px; }
  .ad365[data-slot][data-size-desktop$="x100"] { --h: 100px; }
  .ad365[data-slot][data-size-desktop$="x250"] { --h: 250px; }
  .ad365[data-slot][data-size-desktop$="x280"] { --h: 280px; }
  .ad365[data-slot][data-size-desktop$="x600"] { --h: 600px; }
}