/* ─────────────────────────────────────────────────────────────────────
   Shared ad system for every non-SPA page (watch pages, type/tag hubs,
   fight-of-the-week, static pages): side rails that scroll with the page
   and keep repopulating (driven by /js/promos.js), plus the pinned bottom
   bar. Mirrors the homepage's ad styles — pages that load this do NOT
   load the SPA's style.css.
   ───────────────────────────────────────────────────────────────────── */

/* Molten-red WebGL background — mirrors the SPA's structure (these pages
   load promos.css INSTEAD of style.css): fixed #bg host at z-index:0, a
   transparent body, a solid #060606 html fallback, and a reduced-motion
   hide. The shader (owner's molten-oil-spill /js/molten-metal.js, the same
   one live clipraider.com uses, run on every device) shows through the
   gutters. */
html {
  background: #060606;
}
body {
  /* Transparent so the WebGL molten background (#bg) shows through. */
  background: transparent;
}
#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#bg canvas {
  display: block;
}
main,
header,
footer {
  position: relative;
  z-index: 1;
}
/* Reduced motion: collapse the shader to the solid html fallback. */
@media (prefers-reduced-motion: reduce) {
  #bg {
    display: none;
  }
}
/* Shell that flanks the page content with the two side rails. Lifted
   (position:relative + z-index:1) so it stays above the fixed molten
   background. */
.promo-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.promo-shell main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Side rails — a strict alternating ladder (10 01 10 01): the left rail
   starts with the first box; the right rail's first box sits exactly one
   band BELOW it, and each later box lands one band below the previous
   one on its own rail. Going down the page you pass a left ad, then a
   right ad, then a left ad, and so on — never two boxes on the same side
   in a row, never side-by-side at the same height. promos.js appends the
   next box (strictly alternating sides) as the previous one scrolls
   past. Rail boxes are a FIXED 300px tall so the band math holds. */
.promo-rail {
  flex: 0 0 160px;
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}
/* One band lower than the left rail (28px + 600px box + 24px gap). */
.promo-rail-right {
  margin-top: 652px;
}
/* Fixed box height = the ladder's band height, sized to the 160x600 house
   creative that fills the slot (a 300px box cut the skyscraper off).
   box-sizing: border-box is scoped here because these pages load promos.css
   instead of style.css (no global reset), so 600px is the RENDERED height. */
.promo-rail .promo-box {
  height: 600px;
  min-height: 600px;
  box-sizing: border-box;
}
/* Every box after the first on its rail skips one band (600px + 24px
   gap), so consecutive boxes on the SAME side land two bands apart and
   interleave cleanly with the other rail's boxes. */
.promo-rail .promo-box + .promo-box {
  margin-top: 624px;
}

/* Leaderboard strips above and below the content column on the
   server-rendered pages (watch, type/tag index, hubs, foot). style.css has
   the same block for the SPA homepage; these pages load promos.css instead. */
.promo-strip {
  display: flex;
  justify-content: center;
  /* Full width even when the page body is a centred flex column (the
     server-rendered shells are) — otherwise the strip shrink-to-fits to its
     own 32px padding and a not-yet-loaded creative collapses it to 0. */
  width: 100%;
  max-width: 1440px;
  margin: 16px auto;
  padding: 0 16px;
}
.promo-strip .promo-box {
  width: 100%;
  max-width: 728px;
}
.promo-strip-top { margin-top: 18px; }
.promo-strip-bottom { margin: 30px auto 6px; }

/* In-content strip on watch pages (slot "mid") — sits between the fight
   card and the retention grids INSIDE the main column, so it's the one ad
   surface mobile/1200px-and-less visitors see. Tighter than the page-edge
   strips; the banner scales to the column width via the shared max-width
   rules (`max-width:100%` keeps 728px art inside a 640px column). */
.promo-strip-mid { margin: 20px auto 8px; }
.promo-strip-mid .promo-box { margin: 0 auto; }
@media (max-width: 560px) {
  .promo-strip-mid { padding: 0 12px; margin: 14px auto 8px; }
}
@media (max-width: 560px) {
  .promo-strip { padding: 0 12px; margin: 12px auto; }
}

/* Shared ad box. */
.promo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #232326;
  border-radius: 12px;
  background: #111113;
  text-align: center;
  padding: 22px 14px;
  transition: opacity 0.35s ease, min-height 0.45s ease, border-color 0.2s, box-shadow 0.2s;
}
.promo-box:hover {
  border-color: #e50914;
  box-shadow: 0 0 34px rgba(229, 9, 20, 0.2);
}

.promo-box-v .promo-copy { font-size: 11px; letter-spacing: 1px; }
.promo-box-v .promo-contact { font-size: 9px; letter-spacing: 0.2px; }

.promo-box-h {
  flex-direction: row;
  gap: 22px;
  padding: 20px 32px;
}
.promo-box-h .promo-copy { font-size: 20px; }
.promo-box-h .promo-contact { font-size: 15px; }

.promo-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8b8b93;
  border: 1px solid #232326;
  border-radius: 4px;
  padding: 2px 7px;
}
.promo-copy {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  letter-spacing: 2px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.promo-contact {
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  word-break: break-all;
}

/* Sponsor image banner (AD_IMG / per-slot img) — fills the box's frame. */
.promo-art {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.promo-box-v .promo-art { width: 100%; height: auto; }
.promo-box-h .promo-art { max-height: 120px; }

/* ── Site-wide sponsor strip (AD_SPONSOR) ───────────────────────────────
   One advertiser, every page. Injected under the header by /js/promos.js and
   /js/app.js — on desktop AND mobile, because the rails are hidden below
   1200px. Nothing exists in the HTML when unsold, so this never puts a
   house placeholder above the fold. */
.sponsor-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-height: 62px;
  padding: 9px 20px;
  background: linear-gradient(90deg, #0d0d0f 0%, #17171c 50%, #0d0d0f 100%);
  border-bottom: 1px solid #232326;
  text-align: center;
  text-decoration: none;
}
.sponsor-bar:hover,
.sponsor-bar:focus-visible {
  border-bottom-color: #e50914;
  background: linear-gradient(90deg, #12090b 0%, #1b171c 50%, #12090b 100%);
}
.sponsor-bar-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8b8b93;
  text-transform: uppercase;
}
.sponsor-bar-name {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: #fff;
  text-transform: uppercase;
}
.sponsor-bar-tagline {
  font-size: 12px;
  font-weight: 600;
  color: #b9b9c2;
}
.sponsor-bar-img {
  display: block;
  max-width: min(100%, 970px);
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Fade phase while a rotating ad swaps its creative. */
.promo-fading { opacity: 0; }

/* Rotating creative size variants. */
.promo-size-v1 { min-height: 300px; }
.promo-size-v2 { min-height: 380px; }
.promo-size-v3 { min-height: 460px; }
.promo-size-h1 { min-height: 64px; }
.promo-size-h2 { min-height: 96px; }
.promo-size-h3 { min-height: 128px; }

/* Rotating creative color themes. */
.promo-theme-classic { background: #111113; }
.promo-theme-sponsored {
  border-color: #b0060f;
  background: linear-gradient(180deg, #1a0d0e, #111113);
}
.promo-theme-sponsored .promo-tag { border-color: #e50914; color: #fff; }
.promo-theme-promoted {
  border-color: #8a6d00;
  background: linear-gradient(180deg, #171503, #111113);
}
.promo-theme-promoted .promo-tag { border-color: #ffd400; color: #ffd400; }
.promo-theme-gradient {
  border-color: #7a1f2a;
  background: linear-gradient(135deg, #1c0d10, #141419 55%, #1d0f06);
}
.promo-theme-gradient .promo-tag { border-color: #c2303e; color: #ff5a66; }

/* Once the viewport is too narrow for 160px rails + a usable column,
   drop the rails. */
@media (min-width: 561px) and (max-width: 1199px) {
  .promo-rail { display: none; }
  .promo-shell { display: block; padding: 0; }
}
/* Phones: rails stay hidden (3 boxes × 84px each eat 43% of a 390px
   screen and forced the video grid to a single column — see style.css).
   The in-between section ads carry the load instead, with smaller text
   so they don't shout over the feed. */
@media (max-width: 560px) {
  .promo-rail { display: none; }
  .promo-shell { display: block; padding: 0; }
  .promo-box-h { flex-direction: column; gap: 8px; text-align: center; padding: 14px 16px; }
  .promo-box-h .promo-copy { font-size: 13px; letter-spacing: 0.5px; }
  .promo-box-h .promo-contact { font-size: 10.5px; }
  .ad-in-grid .promo-copy { font-size: 13px; letter-spacing: 0.5px; }
  .ad-in-grid .promo-contact { font-size: 10.5px; }
  /* Sponsor strip is one of the few units that actually shows on phones. */
  .sponsor-bar { min-height: 54px; gap: 6px 10px; padding: 7px 12px; }
  .sponsor-bar-tag { font-size: 8px; letter-spacing: 1.6px; }
  .sponsor-bar-name { font-size: 13px; letter-spacing: 1px; }
  .sponsor-bar-tagline { font-size: 10.5px; }
  .sponsor-bar-img { max-height: 46px; }
}

/* ─────────────────────────────────────────────────────────────────────
   House creatives — a real shop banner pre-rendered into the slot by
   functions/_shared/house-ads.js (stamp time for the static pages, render
   time for the server-rendered ones).

   The creative fills the box edge to edge instead of a text placeholder,
   and the AD label overlays its top-left corner. That label is absolutely
   positioned INSIDE the box: `overflow: hidden` clips it there, so it can
   never sit over page content, and it is pointer-events:none. The <img>
   ships width/height (or max-height in a fixed-height rail), so the space
   is reserved before first paint — filling a slot costs zero CLS.
   ───────────────────────────────────────────────────────────────────── */
.promo-box.promo-house {
  position: relative;
  padding: 0;
  gap: 0;
  /* The creative's own reserved box is the height — the rotating
     .promo-size-* min-heights must not pad it out with empty background. */
  min-height: 0;
  border: 0;
  background: #0b0b0c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #1c1c20;
}
.promo-box.promo-house .promo-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
  background: rgba(6, 6, 6, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8d8de;
}
.promo-box.promo-house .promo-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
}
/* Fixed-height rail box (160px wide, 600px tall): keep the skyscraper at its
   natural 160x600 inside the box instead of stretching it to the rail width. */
.promo-rail .promo-box.promo-house .promo-art {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}