/* Shared public/admin carousel. Keep the supplied artwork intact on phones. */
.admin-promo-carousel {
  aspect-ratio: 1000 / 270;
  min-height: 100px;
  box-sizing: border-box;
  background: #123d24;
  border-color: #405066;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: height 480ms cubic-bezier(.22, .61, .36, 1);
}

.admin-promo-carousel:hover {
  transform: translateX(-50%);
}

/* Letterboxing belongs to this artwork, not the green Kavkaz slide. */
.admin-promo-carousel[data-active-promo="progrise_vpn_top"],
.admin-promo-slide[data-promo-key="progrise_vpn_top"] {
  background: #000;
}

/* Paint this artwork as a contained background. It must not depend on the
   replaced-element/object-fit path inside Safari's animated clipping layer. */
.admin-promo-slide[data-promo-key="progrise_vpn_top"] {
  background-image: url("/src/assets/ads/progrise-vpn.jpg?v=20261022-1");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Retain the image's load/error signals for impression tracking, but do not
   paint a second, potentially cropped copy over the background artwork. */
.admin-promo-carousel .admin-promo-slide[data-promo-key="progrise_vpn_top"] img {
  visibility: hidden;
}

.admin-promo-slide {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 270;
  min-height: 100px;
  box-sizing: border-box;
  text-decoration: none;
}

.admin-promo-slide[hidden] { display: none !important; }
.admin-promo-slide.admin-promo-banner--advertise { display: flex; }
.admin-promo-slide.admin-promo-banner--advertise[hidden] { display: none !important; }
.admin-promo-slide.admin-promo-banner--advertise:hover { transform: none; }
.admin-promo-slide:focus-visible { outline: 3px solid #7dd3fc; outline-offset: -3px; }
/* Keep intrinsic image dimensions out of the auto-height slide calculation.
   This also makes percentage sizing unambiguous in mobile WebKit. */
.admin-promo-carousel .admin-promo-slide img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.admin-promo-carousel .promo-ad-copy strong,
.admin-promo-carousel .promo-ad-subtitle { white-space: normal; overflow: visible; text-overflow: clip; }

.admin-promo-slide.is-leaving { animation: promo-slide-left-out 480ms cubic-bezier(.22, .61, .36, 1) both; }
.admin-promo-slide.is-entering { animation: promo-slide-left-in 480ms cubic-bezier(.22, .61, .36, 1) both; }
.admin-promo-carousel.is-sliding .admin-promo-slide { pointer-events: none; }

@keyframes promo-slide-left-out {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes promo-slide-left-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (min-width: 861px) {
  .admin-promo-carousel[data-active-promo="manager_ad_top"] { min-height: 0; aspect-ratio: 728 / 104; background: #111b2a; }
  .admin-promo-slide.admin-promo-banner--advertise { min-height: 0; aspect-ratio: 728 / 104; }
}

@media (min-width: 861px) and (max-width: 1440px) {
  .admin-promo-carousel:hover { transform: none; }
  .admin-promo-slide.admin-promo-banner--advertise { padding: 9px 12px; }
  .admin-promo-carousel .promo-ad-copy strong { font-size: clamp(13px, 1.3vw, 20px); }
  .admin-promo-carousel .promo-ad-subtitle { font-size: clamp(9px, .85vw, 12px); }
}

@media (max-width: 860px) {
  /* A 100px minimum height plus the 1000/270 aspect ratio can transfer into
     a ~370px minimum width in mobile layout. Keep phone geometry explicit. */
  .admin-promo-carousel {
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    height: 102px;
  }
  .admin-promo-carousel .admin-promo-slide {
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    height: 100px;
  }
  .admin-promo-carousel:hover { transform: translateX(-50%); }
  .admin-promo-slide.admin-promo-banner--advertise { height: 100px; min-height: 100px; aspect-ratio: auto; }
}

@media (max-width: 480px) {
  /* Same 16px/64px clearance for the filter and right-hand map tools, without
     percentage translation or sticky :hover transforms in iPhone webviews. */
  .admin-promo-banner.admin-promo-carousel,
  .admin-promo-banner.admin-promo-carousel:hover {
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: calc(64px + env(safe-area-inset-right, 0px));
    width: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-promo-carousel { transition: none; }
  .admin-promo-slide.is-leaving,
  .admin-promo-slide.is-entering { animation: none; }
}