/* In-house ads (admin-managed)
   - Slots stay hidden unless an ad image exists.
   - Desktop: fixed-position margin slots (do not affect layout)
   - Mobile: bottom slot within page flow (above footer)
*/

:root{
  --ng-ad-margin-w: 160px;
  --ng-ad-gap: 16px;

  --ng-ad-radius: 14px;
}

.ng-ad-slot{
  border: 0;
  border-radius: var(--ng-ad-radius);
  background: transparent;
  color: inherit;
  display: block;
  overflow: hidden;
}

.ng-ad-slot.is-hidden{ display:none !important; }

.ng-ad-slot .ng-ad-link{
  display:block;
  width:100%;
  height:100%;
  border-radius: inherit;
  overflow: hidden;
}

.ng-ad-slot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: inherit;
}

/* Desktop margin slots are positioned by JS so they never create horizontal scroll.
   Required image ratio: 4:15. Recommended uploads: 160x600 or 320x1200. */
.ng-ad-margin{
  position: fixed;
  top: 120px;
  width: var(--ng-ad-margin-w);
  aspect-ratio: 4 / 15;
  height: auto;
  z-index: 80;
  user-select: none;
}

/* Mobile bottom slot lives inside .app and can push the footer down.
   Required image ratio: 16:5. Recommended uploads: 320x100 or 640x200. */
.ng-ad-mobile-bottom{
  width: 100%;
  aspect-ratio: 16 / 5;
  height: auto;
  margin: 16px 0 0;
}

.ng-ad-mobile-bottom[data-placement-id="mobile_index_bottom"]{
  margin: 4px 0 8px;
}

.ng-ad-mobile-bottom[data-placement-id="mobile_private_room_bottom"]{
  margin: 0 0 16px;
}

@media (max-height: 740px){
  :root{ --ng-ad-margin-w: 140px; }
}

@media (max-height: 660px){
  :root{ --ng-ad-margin-w: 120px; }
}

@media (min-width: 721px){
  .ng-ad-mobile-bottom{ display:none; }
}

@media (max-width: 720px){
  .ng-ad-margin{ display:none; }
}