/* =========================
   ads.css — Observ ads system
   ✅ Desktop: 2 sticky side columns (no overlay)
   ✅ Tablet: 1 sticky (left)
   ✅ Phone: bottom fixed dock + session close
   ✅ Inline ads for article/search/list/related
   ========================= */

:root{
  --ad-w: 240px;
  --ad-gap: 16px;
  --ad-top-sticky: 140px;
  --ad-bottom-gap: 16px;

  /* mobile dock */
  --mobile-dock-side-gap: 8px;
  --mobile-dock-bottom: 8px;
  --mobile-dock-height: 144px;

  /* inline ads */
  --inline-ad-radius: 16px;
  --inline-ad-border: 1px solid rgba(255,255,255,.08);
  --inline-ad-bg: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  --inline-ad-label: #8ea2c9;

  --inline-ad-list-h: 170px;
  --inline-ad-article-h: 150px;
  --inline-ad-related-h: 150px;
}

/* =========================
   DESKTOP GRID COLUMNS
   ========================= */
.grid{
  display: grid;
  grid-template-columns: var(--ad-w) minmax(0, 1fr) var(--ad-w);
  gap: var(--ad-gap);
  align-items: start;
}

.grid > section.panel.main{
  min-width: 0;
}

/* =========================
   SIDE AD PANEL
   ========================= */
.panel.ad{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
  overflow: hidden;

  position: sticky;
  top: var(--ad-top-sticky);

  height: calc(100vh - var(--ad-top-sticky) - var(--ad-bottom-gap));
  max-height: 780px;
  min-height: 360px;

  z-index: 5;
}

/* inside side ad */
.ad-box{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius);
  background: rgba(0,0,0,.14);
  padding: 14px 10px;
  text-align:center;
  box-sizing: border-box;
}

.ad-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.ad-note{
  margin-top: 10px;
  opacity: .7;
  font-size: 12px;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 1024px){
  :root{
    --ad-w: 220px;
    --ad-top-sticky: 120px;
  }

  .grid > aside.panel.ad.ad-right{
    display:none;
  }

  .grid{
    grid-template-columns: var(--ad-w) minmax(0, 1fr);
  }
}

/* =========================
   MOBILE BOTTOM FIXED DOCK
   ========================= */
.mobile-ad-dock{
  display:none;
}

@media (max-width: 768px){

  .grid > aside.panel.ad{
    display:none !important;
  }

  .grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mobile-ad-dock{
    display:block;
    position: fixed;
    left: var(--mobile-dock-side-gap);
    right: var(--mobile-dock-side-gap);
    bottom: calc(var(--mobile-dock-bottom) + env(safe-area-inset-bottom));
    transform: none;

    width: auto;
    max-width: none;
    min-width: 0;
    height: var(--mobile-dock-height);

    z-index: 9990;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,14,26,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px rgba(0,0,0,.42);

    overflow: visible;
    box-sizing: border-box;
  }

  .mobile-ad-dock.is-hidden{
    display:none !important;
  }

  .mobile-ad-close{
    position:absolute;
    top: -12px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.92);
    color: rgba(255,255,255,.98);
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .mobile-ad-inner{
    width: 100%;
    height: 100%;
    padding: 8px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    box-sizing: border-box;
  }

  .mobile-ad-inner .ad-box{
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: 100%;
    padding: 10px 8px;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mobile-ad-inner .ad-title{
    font-size: 14px;
    margin-bottom: 4px;
  }

  .mobile-ad-inner .ad-note{
    margin-top: 6px;
    font-size: 11px;
  }

  .mobile-ad-inner ins.adsbygoogle{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
  }

  .mobile-ad-inner iframe{
    width:100% !important;
    max-width:100% !important;
  }

  body.has-mobile-ad{
    padding-bottom: calc(var(--mobile-dock-height) + 28px + env(safe-area-inset-bottom));
  }
}

/* =========================
   VERY SMALL PHONES
   ========================= */
@media (max-width: 480px){
  :root{
    --mobile-dock-side-gap: 6px;
    --mobile-dock-bottom: 6px;
    --mobile-dock-height: 140px;

    --inline-ad-list-h: 145px;
    --inline-ad-article-h: 140px;
    --inline-ad-related-h: 140px;
  }

  .mobile-ad-dock{
    border-radius: 14px;
  }

  .mobile-ad-inner{
    padding: 6px;
  }

  .mobile-ad-inner .ad-box{
    border-radius: 12px;
    padding: 8px 6px;
  }

  .mobile-ad-close{
    right: 6px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 16px;
  }

  .news-inline-ad,
  .news-article-inline-ad,
  .news-related-ad-card{
    margin: 16px 0 18px;
    padding: 8px;
  }

  .news-inline-ad__label,
  .news-article-inline-ad__label,
  .news-related-ad-card__label{
    font-size: 10px;
    margin-bottom: 6px;
  }

  .news-views-badge{
    padding: 4px 8px;
    gap: 5px;
  }

  .news-views-badge__icon{
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

/* =========================
   GENERIC OBSERV ADS WRAP
   ========================= */
.observ-ad-wrap{
  width:100%;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   INLINE ADS — GLOBAL STYLE
   ========================= */
.news-inline-ad,
.news-article-inline-ad,
.news-related-ad-card{
  margin: 22px 0 24px;
  padding: 12px;
  border: var(--inline-ad-border);
  border-radius: var(--inline-ad-radius);
  background: var(--inline-ad-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* labels */
.news-inline-ad__label,
.news-article-inline-ad__label,
.news-related-ad-card__label{
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inline-ad-label);
  opacity: .95;
  font-weight: 700;
}

/* inner boxes */
.news-inline-ad__box,
.news-article-inline-ad__box,
.news-related-ad-card__inner{
  border-radius: 12px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  width: 100%;
  box-sizing: border-box;
}

/* Adsense block reset */
.news-inline-ad ins.adsbygoogle,
.news-article-inline-ad ins.adsbygoogle,
.news-related-ad-card ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:inherit;
}

/* =========================
   LIST / SEARCH INLINE ADS
   ========================= */
.news-inline-ad--wide{
  margin: 20px 0 22px;
  padding: 10px;
}

.news-inline-ad--wide .news-inline-ad__box{
  min-height: var(--inline-ad-list-h);
  padding: 6px;
}

/* empty search state ad */
.news-empty .news-inline-ad{
  margin-top: 18px;
}

/* loading / finish state */
.news-inline-ad__title{
  font-size: 18px;
  font-weight: 800;
  color: #eef3ff;
  text-align: center;
}

.news-inline-ad__text{
  margin-top: 6px;
  font-size: 14px;
  color: #aebddd;
  text-align: center;
}

/* =========================
   ARTICLE INLINE AD
   ========================= */
.news-article-inline-ad{
  margin: 20px 0 24px;
  padding: 10px;
}

.news-article-inline-ad__box{
  min-height: var(--inline-ad-article-h);
  padding: 6px;
}

/* =========================
   RELATED AD
   ========================= */
.news-related-ad-card{
  margin: 10px 0 0;
  padding: 10px;
}

.news-related-ad-card__inner{
  min-height: var(--inline-ad-related-h);
  padding: 6px;
}

/* =========================
   VIEWS BADGE
   ========================= */
.news-views-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#dbe7ff;
  line-height:1;
  vertical-align:middle;
}

.news-views-badge__icon{
  width:16px;
  height:16px;
  display:block;
  flex:0 0 16px;
  opacity:.95;
}

.news-views-badge__count{
  display:inline-block;
  line-height:1;
  font-weight:600;
}

/* =========================
   ARTICLE META ALIGNMENT
   ========================= */
.news-article__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.news-list-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

/* =========================
   INLINE AD POLISH
   ========================= */
.news-inline-ad:hover,
.news-article-inline-ad:hover,
.news-related-ad-card:hover{
  border-color: rgba(255,255,255,.11);
}

/* =========================
   MOBILE TUNING
   ========================= */
@media (max-width: 768px){
  .news-inline-ad,
  .news-article-inline-ad,
  .news-related-ad-card{
    border-radius: 14px;
  }

  .news-inline-ad__box,
  .news-article-inline-ad__box,
  .news-related-ad-card__inner{
    border-radius: 10px;
  }

  .news-inline-ad__title{
    font-size: 16px;
  }

  .news-inline-ad__text{
    font-size: 13px;
  }
}