/* Banners Ads frontend */
.ab-banner-grid {
  --ab-desktop-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--ab-desktop-cols), 1fr);
  gap: 26px;
  margin: 20px 0;
}
.ab-banner-grid[data-position="header"],
.ab-banner-grid[data-position="in-content"] { grid-template-columns: 1fr; max-width: min(970px, 100%); margin-left: auto; margin-right: auto; }
.ab-banner-grid[data-position="sidebar"],
.ab-banner-grid[data-position="footer"] { grid-template-columns: 1fr; max-width: min(300px, 100%); margin-left: auto; margin-right: auto; }

.ab-banner-item {
  background: #fff;
  border: 1px solid #e4e0da;
  border-radius: 14px;
  overflow: hidden;
  max-width: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ab-banner-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,24,40,.1); }
.ab-banner-link { display: block; text-decoration: none; max-width: 100%; }
.ab-banner-image { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 100%; }

/* Fixed aspects to avoid CLS. Mobile gets a shorter, less letterboxed
   ratio for header/in-content (see @media 640px) since 970:120 becomes
   illegibly thin on phone widths. */
.ab-banner-grid[data-position="header"] .ab-banner-link,
.ab-banner-grid[data-position="in-content"] .ab-banner-link { aspect-ratio: 970 / 120; max-width: min(970px, 100%); }
.ab-banner-grid[data-position="sidebar"] .ab-banner-link,
.ab-banner-grid[data-position="footer"] .ab-banner-link { aspect-ratio: 300 / 250; max-width: min(300px, 100%); margin: 0 auto; }
.ab-banner-grid[data-position="header"] .ab-banner-image,
.ab-banner-grid[data-position="in-content"] .ab-banner-image { aspect-ratio: 970 / 120; object-fit: cover; }
.ab-banner-grid[data-position="sidebar"] .ab-banner-image,
.ab-banner-grid[data-position="footer"] .ab-banner-image { aspect-ratio: 300 / 250; object-fit: cover; }

/* Slider */
.ab-banner-slider { position: relative; max-width: 970px; margin: 20px auto; overflow: hidden; border-radius: 14px; }
.ab-slider-track { display: flex; transition: transform .35s ease; }
.ab-slider-track .ab-banner-item { flex: 0 0 100%; border-radius: 0; border: none; }
.ab-slider-prev, .ab-slider-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border: 1px solid #e4e0da;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 20px; z-index: 2;
}
.ab-slider-prev { left: 12px; }
.ab-slider-next { right: 12px; }
.ab-slider-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.ab-slider-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); cursor: pointer; padding: 0; }
.ab-slider-dot.is-active { background: #fff; }

@media (max-width: 1024px) {
  .ab-banner-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ab-banner-grid[data-position="header"] .ab-banner-link,
  .ab-banner-grid[data-position="in-content"] .ab-banner-link { width: 100%; height: auto; aspect-ratio: 970 / 120; }
}
@media (max-width: 640px) {
  .ab-banner-grid { grid-template-columns: 1fr; gap: 16px; }
  .ab-banner-grid[data-position="header"] .ab-banner-link,
  .ab-banner-grid[data-position="in-content"] .ab-banner-link,
  .ab-banner-grid[data-position="header"] .ab-banner-image,
  .ab-banner-grid[data-position="in-content"] .ab-banner-image {
    /* 970:120 (~8:1) becomes an illegible sliver on phone widths; switch
       to a standard mobile banner ratio (~3.2:1) instead. */
    aspect-ratio: 320 / 100;
  }
  .ab-banner-grid[data-position="sidebar"] .ab-banner-link,
  .ab-banner-grid[data-position="footer"] .ab-banner-link { width: 100%; max-width: min(300px, 100%); }
}