/* === Sticky Ad Layout for CineVegas Linktree === */

/* Base sizes (Google recommended fixed sizes) */
:root{
  --rail-width: 300px;     /* 300x250 side boxes */
  --rail-height: 250px;
  --bottom-desktop-w: 728px;
  --bottom-desktop-h: 90px;
  --bottom-mobile-w: 320px;
  --bottom-mobile-h: 50px;
  --container-max: 550px;  /* matches .container in style.css */
  --gap: 24px;
}

/* Side rails (desktop only) */
.ad-fixed-rail{
  position: fixed;
  top: 16px; /* sticky start */
  width: var(--rail-width);
  height: var(--rail-height);
  z-index: 30;
  display: none;
}

/* Left rail: stick to the left of the centered container */
.ad-fixed-rail.left{
  left: calc(50% - (var(--container-max) / 2) - var(--gap) - var(--rail-width));
}

/* Right rail: stick to the right of the centered container */
.ad-fixed-rail.right{
  left: calc(50% + (var(--container-max) / 2) + var(--gap));
}

/* Bottom sticky banner */
.ad-fixed-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: var(--bottom-desktop-w);
  height: var(--bottom-desktop-h);
  z-index: 40;
}

/* Reserve space so the fixed bottom banner doesn't overlap content */
body.has-bottom-ad{
  padding-bottom: var(--bottom-desktop-h);
}

/* Show rails only on wide viewports */
@media (min-width: 1200px){
  .ad-fixed-rail{ display: block; }
}

/* Responsive bottom sizes */
@media (max-width: 768px){
  .ad-fixed-bottom{
    width: var(--bottom-mobile-w);
    height: var(--bottom-mobile-h);
  }
  body.has-bottom-ad{
    padding-bottom: var(--bottom-mobile-h);
  }
}

/* AdSense <ins> reset inside fixed boxes */
.ad-box{
  width: 100%;
  height: 100%;
  display: inline-block;
}

/* Optional subtle safe area under bottom ad (background fade) */
.ad-bottom-safe{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--bottom-desktop-h) + 8px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
  z-index: 35;
  display: none;
}
@media (max-width: 768px){
  .ad-bottom-safe{ height: calc(var(--bottom-mobile-h) + 8px); }
}
/* Enable if you want glow: .ad-bottom-safe{ display:block } */


/* === MOCK MODE: Solid red blocks while ads aren't live === */
.ad-box{
  background: red;
  border-radius: 6px;
}