/* ============================================================
   cybersafe.news - ad slots (static placeholders + house ads)
   ============================================================ */
.ad{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:24px auto; width:100%; max-width:100%;
}
.ad--billboard{ max-width:970px; }
.ad--mrec{ max-width:300px; }
.ad__label{
  font:600 10px/1 "Nunito",system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#9aa3b2;
}
.ad__slot{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#f3f4f7; border:1px solid #e4e7ef; border-radius:10px;
  color:#aab0bf; font:700 13px "Nunito",system-ui,sans-serif; letter-spacing:.02em;
  overflow:hidden; position:relative;
}
.ad__slot > img,
.ad__slot > ins,
.ad__slot > iframe,
.ad__slot > a > img{ display:block; width:100%; height:100%; object-fit:cover; border:0; }

/* ---- sizes ---- */
.ad--billboard .ad__slot{ width:970px; height:250px; max-width:100%; }   /* 970 x 250 */
.ad--mrec      .ad__slot{ width:300px; height:250px; }                   /* 300 x 250 */

@media (max-width:1000px){
  .ad--billboard .ad__slot{ width:100%; height:auto; aspect-ratio:970/250; }
}
@media (max-width:640px){
  .ad--billboard .ad__slot{ aspect-ratio:320/100; }
}

/* ============================================================
   House ad creative (filled by ads.js on .ad--house slots)
   ============================================================ */
.ad--house .ad__slot{ background:#0b1020; border-color:#1c2338; }
.ad__slot .ha{
  position:absolute; inset:0; display:flex; text-decoration:none; color:#fff;
  background:radial-gradient(130% 150% at 85% 15%, #16204a 0%, #0c1230 55%, #080b1e 100%);
  opacity:1; transition:opacity .45s ease;
}
.ad__slot .ha.is-out{ opacity:0; }
.ha__text{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:26px 30px; flex:1 1 auto; z-index:2;
}
.ha__kicker{
  font:800 11px/1 "Nunito",sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color:transparent; background:linear-gradient(90deg,#ffe9b0,#e8c87e,#b8882c);
  -webkit-background-clip:text; background-clip:text;
}
.ha__name{ font:800 clamp(20px,3.2vw,30px)/1.06 "Nunito",sans-serif; color:#fff; }
.ha__tag{ font:400 14px/1.45 "Nunito",sans-serif; color:#c7cfe0; max-width:44ch; }
.ha__cta{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px; width:fit-content;
  font:800 13px "Nunito",sans-serif; color:#0b1020;
  background:linear-gradient(90deg,#ffe9b0,#e8c87e); padding:9px 16px; border-radius:6px;
}
.ha__cta svg{ width:15px; height:15px; }
.ha__art{ position:relative; flex:0 0 220px; display:flex; align-items:center; justify-content:center; }
.ha__art svg{ width:178px; height:178px; }
.ha-glow{ transform-origin:100px 100px; animation:ha-pulse 4.5s ease-in-out infinite; }
.ha-ring{ transform-origin:100px 100px; animation:ha-spin 24s linear infinite; }
@keyframes ha-pulse{ 0%,100%{opacity:.5;transform:scale(.95)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes ha-spin{ to{transform:rotate(360deg)} }

.ad--mrec .ha{ flex-direction:column; }
.ad--mrec .ha__text{ justify-content:flex-end; padding:22px 20px 20px; gap:5px; }
.ad--mrec .ha__name{ font-size:21px; }
.ad--mrec .ha__tag{ font-size:12.5px; max-width:none; }
.ad--mrec .ha__cta{ margin-top:12px; }
.ad--mrec .ha__art{ position:absolute; inset:auto -26px auto auto; top:14px; flex:none; opacity:.45; }
.ad--mrec .ha__art svg{ width:140px; height:140px; }

@media (max-width:640px){
  .ha__text{ padding:18px 20px; }
  .ha__name{ font-size:19px; }
  .ha__tag{ font-size:12.5px; }
  .ha__art{ flex-basis:112px; }
  .ha__art svg{ width:96px; height:96px; }
}

@media (prefers-color-scheme:dark){
  .ad__slot{ background:#141926; border-color:#262c3b; color:#5e6678; }
  .ad__label{ color:#6b7488; }
}
.ad--on-dark .ad__slot{ background:#141926; border-color:#262c3b; color:#5e6678; }
.ad--on-dark .ad__label{ color:#8b93a6; }