/* ============================================================================
   gef-ads.css — Global Energy Flow affiliate banner slot scaffolding (Awin)
   Goal: reserve ad space NOW (no layout shift later), stay invisible on any
   page/visitor combination where no creative actually fills the slot, and
   match the GEF design system.

   Why this differs from a typical AdSense scaffold: AdSense fills ~100% of
   slots, so "enabled" and "visible" were the same thing. Awin affiliate
   banners are geo-restricted per advertiser — most visitors on a given page
   will NOT match any campaign, especially early on with a single US/CA-only
   advertiser. So visibility is keyed off a PER-SLOT "filled" state that
   gef-ads.js adds only once it has actually injected a matching creative —
   never off a page-wide "ads are on" flag. An empty grey box with just an
   "Advertisement" label and nothing in it looks broken; this avoids that.

   THREE STATES:
     (default)                 -> slot is display:none (nothing injected yet,
                                  or visitor's geo matched no campaign).
     .gef-ad.gef-ad--filled    -> a creative was injected; box reveals.
     body.gef-ads-preview      -> (QA only, via ?ads=preview) every slot shows
                                  a labelled placeholder regardless of geo, so
                                  you can check layout before real traffic /
                                  campaigns resolve it.
   Put this in assets/css/ and link it AFTER gef.css.
   ============================================================================ */

/* Base slot — hidden until gef-ads.js marks it filled, or preview mode is on */
.gef-ad{
  display:none;
  width:100%;
  margin:28px auto;
  text-align:center;
  box-sizing:border-box;
}
.gef-ad.gef-ad--filled,
body.gef-ads-preview .gef-ad{ display:block; }

/* The "Advertisement" disclosure label — required regardless of ad network;
   affiliate banners must be labelled as clearly as any other paid placement. */
.gef-ad::before{
  content:"Advertisement";
  display:block;
  font:500 9px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3,#62666D);
  margin-bottom:6px;
  text-align:center;
}

/* The container that reserves height. min-height = the unit we expect, so the
   page does not jump when the banner image paints. The real <a><img></a> (or
   preview placeholder) lives inside .gef-ad__inner. */
.gef-ad__inner{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  margin:0 auto;
  overflow:hidden;
}

.gef-ad__inner img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Preview placeholder (only rendered in preview mode by gef-ads.js) */
.gef-ad__ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border-s,rgba(255,255,255,.08));
  border-radius:10px;
  background:
     repeating-linear-gradient(135deg,
       transparent 0 14px,
       rgba(94,106,210,.04) 14px 28px),
     var(--surface,#0F1011);
  color:var(--text-3,#62666D);
  font:500 11px/1.4 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.04em;
  text-align:center;
  padding:8px;
}

/* Once a real banner is in, let its own image show through cleanly */
.gef-ad--filled .gef-ad__inner{ background:transparent; }

/* ----------------------------------------------------------------------------
   VARIANTS — each reserves a sensible min-height per breakpoint, matching the
   Awin creative sizes actually in rotation for that slot type. See
   ADS-PLACEMENT.md for which size(s) to request per variant.
   ---------------------------------------------------------------------------- */

/* Leaderboard / billboard — 728x90 desktop, swaps to a mobile creative below
   600px. Mobile height isn't fixed: it comes from --gef-ad-mobile-h, which
   gef-ads.js sets per-slot to match whichever regional creative filled it
   (320x50 for US/CA, 320x100 for rest-of-world). Falls back to 50px in
   preview mode / before JS sets it, so the box never collapses to 0. */
.gef-ad--leaderboard .gef-ad__inner{ min-height:90px;  max-width:970px; }
@media (max-width:900px){ .gef-ad--leaderboard .gef-ad__inner{ min-height:90px; max-width:468px; } }
@media (max-width:600px){ .gef-ad--leaderboard .gef-ad__inner{ min-height:var(--gef-ad-mobile-h, 50px); max-width:320px; } }

/* In-content rectangle — 300x250, the workhorse. Flows between cards and
   article sections; this is the size to prioritise requesting from Awin
   advertisers since almost every slot on the site is this variant. */
.gef-ad--inline .gef-ad__inner{ min-height:250px; max-width:300px; }

/* Sidebar rail — 300x600 half-page, desktop only. Hidden below the breakpoint
   so mobile visitors never even load the (larger) creative. */
.gef-ad--rail{ display:none; }
@media (min-width:1100px){
  body.gef-ads-preview  .gef-ad--rail,
  .gef-ad--rail.gef-ad--filled{ display:block; position:sticky; top:84px; margin:0; }
  .gef-ad--rail .gef-ad__inner{ min-height:600px; max-width:300px; }
}

/* Anchor — sticky bottom banner, 320x50, MOBILE ONLY, dismissible. */
.gef-ad--anchor{ display:none; }
@media (max-width:700px){
  .gef-ad--anchor.gef-ad--filled,
  body.gef-ads-preview .gef-ad--anchor{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    margin:0; padding:4px 0 calc(4px + env(safe-area-inset-bottom));
    background:var(--bg,#08090A);
    border-top:1px solid var(--border,rgba(255,255,255,.05));
  }
  .gef-ad--anchor .gef-ad__inner{ min-height:50px; max-width:320px; }
  .gef-ad--anchor::before{ display:none; }
  body.gef-has-anchor{ padding-bottom:64px; }
}
.gef-ad--anchor .gef-ad__close{
  position:absolute; top:-22px; right:8px;
  width:22px; height:22px; border-radius:50% 50% 0 0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg,#08090A); border:1px solid var(--border,rgba(255,255,255,.05));
  border-bottom:none; color:var(--text-2,#8A8F98); cursor:pointer; font-size:13px; line-height:1;
}

/* Respect reduced-data / print */
@media print{ .gef-ad{ display:none !important; } }