/* ==========================================================================
   Hitngo — oglasni sloti MINUS33 (La Hiška Čatež)
   Dva slota na stran, oba v zgornjih 60 % strani:
     [top] takoj pod hero / podnavigacijo
     [mid] po prvih dveh vsebinskih sklopih

   Format izbere ta datoteka, ne JavaScript: spremenljivke --hng-src / --hng-w
   / --hng-h so edini vir resnice. hng-ads.js jih samo prebere in vstavi okvir,
   zato je razmerje slota znano že pred nalaganjem (nič premikanja vsebine).

   Izbira formata je narejena za mobilne obiskovalce, ki so večina:
     top  < 768 px   rectangle 300×250   — standardni mobilni format, lahek
          ≥ 768 px   leaderboard 728×90  — nizek pas nad vsebino
          ≥ 1200 px  billboard 970×250   — največja vidnost na namizju
     mid  povsod     video 1280×720      — 16:9 se prilagodi širini; na
                                           telefonu je nižji od kvadrata,
                                           zato manj moti branje
   ========================================================================== */

.hng-ad {
  --hng-src: "rectangle-300x250";
  --hng-w: 300;
  --hng-h: 250;
  display: block;
  width: 100%;
  max-width: 1030px;
  margin: 46px auto;
  box-sizing: border-box;
}

/* Slot je neposredni otrok <main> in potrebuje enake robove kot sekcije. */
.hng-ad--wide { width: min(calc(100% - 40px), 1030px); }

/* Slot je v že omejenem stolpcu (article-content, trust-content …). */
.hng-ad--inline { margin: 38px auto; }

.hng-ad-label {
  margin: 0 0 8px;
  color: var(--muted, #65777a);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.hng-ad-frame {
  position: relative;
  width: min(100%, calc(var(--hng-w) * 1px));
  aspect-ratio: var(--hng-w) / var(--hng-h);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #05070d;
  box-shadow: 0 18px 46px rgba(9, 44, 50, .16);
}

/* Kreativ ima fiksne mere; --hng-scale nastavi hng-ads.js glede na širino. */
.hng-ad-frame > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--hng-w) * 1px);
  height: calc(var(--hng-h) * 1px);
  border: 0;
  display: block;
  transform-origin: top left;
  transform: scale(var(--hng-scale, 1));
}

/* Nadomestna statična različica (reduced-motion, Save-Data, 2G). */
.hng-ad-frame > a { display: block; width: 100%; height: 100%; }
.hng-ad-frame > a > img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .hng-ad[data-hng-ad="top"] {
    --hng-src: "leaderboard-728x90";
    --hng-w: 728;
    --hng-h: 90;
  }
}

@media (min-width: 1200px) {
  .hng-ad[data-hng-ad="top"] {
    --hng-src: "billboard-970x250";
    --hng-w: 970;
    --hng-h: 250;
  }
}

.hng-ad[data-hng-ad="mid"] {
  --hng-src: "video-1280x720";
  --hng-w: 1280;
  --hng-h: 720;
}

/* Na namizju 16:9 pas ne sme prerasti besedila, ki ga prekinja. */
@media (min-width: 900px) {
  .hng-ad[data-hng-ad="mid"] .hng-ad-frame { width: min(100%, 760px); }
}

@media print {
  .hng-ad { display: none; }
}