/* ==========================================================================
   Ad units (includes/ads.php) – only loaded on pages that show ads.
   Every unit reserves its height (min-height) so the page doesn't jump when the ad loads.
   ========================================================================== */

.ad-slot {
  display: block;
  max-width: 100%;
  margin: 32px auto;
  text-align: center;
  clear: both;
}

/* "Advertisement" label above every unit */
.ad-label {
  margin: 0 0 6px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7b80;
}

.ad-unit { display: block; width: 100%; min-height: 250px; }

/* 150px clear of the keyboard, text boxes and action buttons on that side */
.ad-slot--gap-before { margin-top: 150px; }
.ad-slot--gap-after  { margin-bottom: 150px; }

/* top: below the navigation */
.ad-slot--top { margin-top: 16px; margin-bottom: 0; }
.ad-slot--top.ad-slot--gap-after { margin-bottom: 150px; }

/* inside text content */
.ad-slot--in-article { margin: 28px auto; }

/* above the footer */
.ad-slot--multiplex { margin-top: 72px; margin-bottom: 24px; }
.ad-slot--multiplex .ad-unit { min-height: 300px; }

/* top / bottom: a leaderboard-height box on desktop, a rectangle on phones */
@media (min-width: 768px) {
  .ad-slot--top .ad-unit,
  .ad-slot--bottom .ad-unit { min-height: 90px; }
}

/* sidebar: next to the content on desktop (≥ 1024px), not shown on smaller screens */
.ad-slot--sidebar { display: none; }
@media (min-width: 1024px) {
  .ad-layout { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; align-items: start; }
  .ad-layout-main { min-width: 0; }
  .ad-slot--sidebar { display: block; position: sticky; top: 80px; margin: 0; }
  .ad-slot--sidebar .ad-unit { min-height: 600px; }
}
@media (min-width: 1200px) {
  .ad-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* side rails: fixed in the empty space left and right of the page (.container-xl is 1100px wide).
   Shown only when that space fits the 160px ad + 150px clear of the content (≥ 1760px wide)
   and the window is tall enough for the whole ad; hidden again when the window gets smaller. */
.ad-rail { display: none; }
@media (min-width: 1760px) and (min-height: 760px) {
  .ad-rail {
    display: block;
    position: fixed;
    top: 96px;           /* below the site header */
    z-index: 10;         /* under menus, fullscreen editor and toasts */
    width: 160px;
  }
  .ad-rail--left  { left:  calc(50% - 860px); }   /* 550px half page + 150px gap + 160px ad */
  .ad-rail--right { right: calc(50% - 860px); }
  .ad-rail .ad-slot { margin: 0; }
  .ad-rail .ad-unit { width: 160px; min-height: 600px; }
}

/* preview boxes (ADS_PREVIEW in config/ads.php, ads switched off) */
.ad-unit--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c5d3d6;
  border-radius: 8px;
  background: #f3f7f8;
  color: #6b7b80;
  font-size: .8rem;
}

/* not printed */
@media print { .ad-slot { display: none !important; } }