/* Ad slots. Every slot has a fixed minimum height so nothing moves when ads arrive. Uses the hub tokens (black, #eee, volt, display font). */
.kj-ad{--ad-bg:var(--color-surface);--ad-fg:var(--fg-high);position:relative;display:block;overflow:hidden;background:var(--ad-bg);color:var(--ad-fg);border-radius:var(--radius-md)}
.kj-ad[hidden]{display:none}
.kj-ad__link{display:flex;align-items:center;gap:12px;width:100%;height:100%;color:inherit;text-decoration:none}
.kj-ad__link:hover .kj-ad__name,.kj-ad__link:focus-visible .kj-ad__name{text-decoration:underline;text-underline-offset:3px}
.kj-ad__link:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.kj-ad__text{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.kj-ad__tag{font:700 10px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border:1px solid currentColor;border-radius:var(--radius-full);opacity:.75;white-space:nowrap}
.kj-ad__lead{font-size:12px;opacity:.75}
.kj-ad__name{font:800 1.1rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.kj-ad__headline{font-size:13px;opacity:.9}
.kj-ad__img{display:block;object-fit:cover}
/* An open spot has to read as space for sale: lime dashed frame, lime title, price, lime pill. Bought ads keep their advertiser colours. */
.kj-ad--open{--ad-bg:rgba(212,255,55,.07);background:var(--ad-bg);border:2px dashed var(--volt);color:#f2f2f2}
.kj-ad--open .kj-ad__tag{color:var(--volt);border-color:var(--volt);opacity:1}
.kj-ad--open .kj-ad__name{color:var(--volt)}
.kj-ad--open .kj-ad__headline{color:#f2f2f2;opacity:1;font-weight:600}
.kj-ad__cta{flex:none;margin-left:auto;display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--radius-full);background:var(--volt);color:#000;font:800 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.kj-ad--open .kj-ad__link:hover .kj-ad__cta,.kj-ad--open .kj-ad__link:focus-visible .kj-ad__cta{background:#fff}
.kj-ad--open .kj-ad__link:hover .kj-ad__name{text-decoration:none}
.kj-ad--open .kj-ad__link{min-height:44px}

.kj-ad--strip{min-height:36px;border-radius:0;background:var(--ad-bg)}
.kj-ad--strip .kj-ad__link{justify-content:center;min-height:36px;padding:0 var(--gutter)}
.kj-ad--strip .kj-ad__text{flex-wrap:nowrap;align-items:center;overflow:hidden}
.kj-ad--strip .kj-ad__name,.kj-ad--strip .kj-ad__headline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kj-ad--strip .kj-ad__img{display:none}
.kj-ad--strip.kj-ad--open{border-width:0 0 2px;border-radius:0}
.kj-ad--strip.kj-ad--open .kj-ad__link{justify-content:center;gap:14px}
.kj-ad--strip .kj-ad__cta{margin-left:0;min-height:24px;padding:0 10px;font-size:11px}

.kj-ad--wire{display:block;min-height:24px;margin-top:6px;background:none;border-radius:0;overflow:visible;color:var(--fg-low)}
.kj-ad--wire .kj-ad__name{color:var(--volt)}
.kj-ad--wire .kj-ad__link,.kj-ad--wire .kj-ad__img{display:inline-flex}
.kj-ad--wire .kj-ad__img{display:none}
.kj-ad--wire.kj-ad--open{border-width:1.5px;border-radius:var(--radius-md);padding:2px 8px;margin-top:8px}
.kj-ad--wire .kj-ad__cta{margin-left:10px;min-height:22px;padding:0 9px;font-size:10px}
.kj-ad--wire .kj-ad__link{align-items:center;flex-wrap:wrap}

.kj-ad--feed{min-height:300px}
.kj-ad--feed .kj-ad__link{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0}
.kj-ad--feed .kj-ad__img{width:100%;height:auto;aspect-ratio:8/5;flex:none}
.kj-ad--feed .kj-ad__text{padding:14px;flex-direction:column;align-items:flex-start}

.kj-ad--rail{position:sticky;top:96px;width:300px;max-width:100%;height:600px;min-height:600px}
.kj-ad--rail .kj-ad__link{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0}
.kj-ad--rail .kj-ad__img{width:100%;height:auto;aspect-ratio:1;flex:none}
.kj-ad--rail .kj-ad__text{padding:16px;flex-direction:column;align-items:flex-start;margin-top:auto}
.kj-ad--rail .kj-ad__name{font-size:1.6rem}

.kj-ad--inline{max-width:728px;min-height:90px;margin:1.6em 0}
.kj-ad--inline .kj-ad__link{padding:12px 16px;min-height:90px}
.kj-ad--inline .kj-ad__img{width:120px;height:66px;flex:none;border-radius:6px}

.kj-ad--rankings,.kj-ad--fantasy{min-height:56px;margin:0 0 var(--space-l)}
.kj-ad--rankings .kj-ad__link,.kj-ad--fantasy .kj-ad__link{padding:10px 16px;min-height:56px}
.kj-ad--rankings .kj-ad__img,.kj-ad--fantasy .kj-ad__img{width:72px;height:40px;flex:none;border-radius:6px}

.kj-ad--hero{background:var(--ad-bg);color:var(--ad-fg)}
.kj-ad--hero .kj-ad__link{position:absolute;inset:0;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0}
.kj-ad--hero .kj-ad__img{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.kj-ad--hero .kj-ad__text{position:relative;flex-direction:column;align-items:flex-start;padding:0 var(--card-pad-x) 48px;gap:10px}
.kj-ad--hero .kj-ad__name{font-size:clamp(2rem,1.2rem + 3vw,3.5rem)}

/* Landing-page spots: tops and page banners lay out like the inline banner, card spots like the feed card, sport sponsors like the rankings line. */
.kj-ad[data-kj-slot$="-top"],.kj-ad[data-kj-slot$="-banner"]{max-width:none;min-height:90px;margin:0 0 var(--space-l)}
.kj-ad[data-kj-slot$="-top"] .kj-ad__link,.kj-ad[data-kj-slot$="-banner"] .kj-ad__link{padding:12px 16px;min-height:90px}
.kj-ad[data-kj-slot$="-top"] .kj-ad__img,.kj-ad[data-kj-slot$="-banner"] .kj-ad__img{width:120px;height:66px;flex:none;border-radius:6px}
.kj-ad[data-kj-slot$="-card"]{min-height:300px}
.kj-ad[data-kj-slot$="-card"] .kj-ad__link{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0}
.kj-ad[data-kj-slot$="-card"] .kj-ad__img{width:100%;height:auto;aspect-ratio:8/5;flex:none}
.kj-ad[data-kj-slot$="-card"] .kj-ad__text{padding:14px;flex-direction:column;align-items:flex-start}
.kj-ad[data-kj-slot$="-card"].kj-ad--open .kj-ad__link{justify-content:center;align-items:flex-start;gap:12px;padding:18px}
.kj-ad[data-kj-slot$="-card"].kj-ad--open .kj-ad__text{padding:0}
.kj-ad[data-kj-slot$="-card"] .kj-ad__cta{margin-left:0}
.kj-ad[data-kj-slot$="-card"] .kj-ad__name{font-size:1.8rem}
.kj-ad[data-kj-slot^="sport-"]{min-height:56px;margin:0 0 var(--space-l)}
.kj-ad[data-kj-slot^="sport-"] .kj-ad__link{padding:10px 16px;min-height:56px}
.kj-ad[data-kj-slot^="sport-"] .kj-ad__img{width:72px;height:40px;flex:none;border-radius:6px}
.kj-ad[hidden]{display:none}

@media(max-width:899px){.kj-ad--rail{display:none}.kj-ad--feed,.kj-ad[data-kj-slot$="-card"]{min-height:260px}}
@media(max-width:599px){.kj-ad__cta{margin-left:0}.kj-ad--strip .kj-ad__tag,.kj-ad--strip.kj-ad--open .kj-ad__headline{display:none}.kj-ad[data-kj-slot$="-top"] .kj-ad__link,.kj-ad[data-kj-slot$="-banner"] .kj-ad__link{flex-wrap:wrap}}
@media(prefers-reduced-motion:no-preference){.kj-ad__link{transition:opacity var(--duration-fast)}.kj-ad__link:hover{opacity:.92}}

/* Open home-carousel slide: pill sits under the text, inside the slide padding. */
.kj-ad--hero.kj-ad--open .kj-ad__text{padding-bottom:14px}
.kj-ad--hero .kj-ad__cta{position:relative;margin:0 0 48px var(--card-pad-x)}

/* Side banners: tall ads in the empty gutters either side of the 1304px container. Hidden unless the gutter fits them, so nothing overlaps or scrolls sideways.
   The rails sit in .kj-page (header to footer) and are sticky inside it, so they stop before the footer. */
.kj-page{position:relative}
.kj-side{display:none;position:absolute;top:0;bottom:0;width:160px;pointer-events:none}
.kj-side .kj-ad{pointer-events:auto;position:sticky;top:96px;width:100%;height:600px;min-height:600px;margin:0}
.kj-side .kj-ad__link{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0}
.kj-side .kj-ad__img{width:100%;height:auto;aspect-ratio:1;flex:none}
.kj-side .kj-ad__text{padding:12px;flex-direction:column;align-items:flex-start;margin-top:auto}
.kj-side .kj-ad--open .kj-ad__link{justify-content:center;align-items:flex-start;gap:14px;padding:14px;margin-top:0}
.kj-side .kj-ad--open .kj-ad__text{padding:0}
.kj-side .kj-ad__cta{margin-left:0}
.kj-side .kj-ad__name{font-size:1.3rem}
.kj-side--left{left:calc(50% - 652px - 24px - 160px)}
.kj-side--right{right:calc(50% - 652px - 24px - 160px)}
@media(min-width:1700px){.kj-side{display:block}}
@media(min-width:1970px){
 .kj-side{width:300px}
 .kj-side--left{left:calc(50% - 652px - 24px - 300px)}
 .kj-side--right{right:calc(50% - 652px - 24px - 300px)}
 .kj-side .kj-ad__name{font-size:1.8rem}
 .kj-side .kj-ad__text{padding:16px}
}