@charset "UTF-8";
/* ============================================================
   SportsLink PK — front-end ad slots
   Only terms that carry ads are present in the HTML, so every
   rule here is inert while the units are switched off.
   ============================================================ */

/* Wrapper shared by every unit. Margin collapses to nothing when a slot is
   the last child of its column, and the slot itself never renders when the
   unit is off (see Ads::render), so a disabled unit leaves no gap behind. */
.tie-ad-slot {
    margin: 0 0 30px;
    text-align: center;
    overflow: hidden;
}

.tie-ad-slot:last-child {
    margin-bottom: 0;
}

/* Editorial label — small, quiet, and the same on placeholders and live ads. */
.tie-ad-label {
    display: block;
    margin-bottom: 6px;
    color: #9aa0a6;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

/* AdSense injects an iframe; make sure it can never exceed the slot. */
.tie-ad-slot .adsbygoogle,
.tie-ad-slot iframe {
    max-width: 100%;
}

.tie-ad-slot .adsbygoogle {
    margin: 0 auto;
}

/* ---------- Placeholder box (test mode) ---------- */

.tie-ad-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: calc(var(--ad-w) * 1px);
    aspect-ratio: var(--ad-w) / var(--ad-h);
    margin: 0 auto;
    padding: 8px;
    border: 1px dashed rgba(0, 0, 0, 0.22);
    border-radius: 3px;
    background: repeating-linear-gradient(45deg, #f7f7f7, #f7f7f7 10px, #fdfdfd 10px, #fdfdfd 20px);
    color: #8a9199;
}

.tie-ad-box-title {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #6b7178;
}

.tie-ad-box-size {
    font-size: 11px;
    line-height: 1.3;
}

/* ---------- Placement widths ---------- */

/* Header / footer / homepage banners sit in a full-width container. */
.tie-ad-container .tie-ad-slot {
    margin-bottom: 0;
}

.tie-ad-container {
    padding: 20px 15px;
}

/* Sidebar units are capped at their real width so AdSense does not stretch a
   300px creative across the 370px column. */
.sidebar .tie-ad-slot {
    max-width: 300px;
    margin-inline: auto;
}

.sidebar .tie-ad-box {
    max-width: 100%;
}

/* In-content units live inside a 782px article column. */
.entry-content .tie-ad-slot,
.main-content > .tie-ad-slot {
    margin-bottom: 24px;
}

/* The article card has no horizontal padding of its own (the header/content
   blocks supply it), so the in-article slot carries the same gutter. */
.post-content > .tie-ad-slot {
    padding-inline: 30px;
}

/* Archive / search: keep the ad flush with the title card above and the list
   card below, matching the two-card stack used by the theme. */
.archive .main-content > .tie-ad-slot,
.search-results .main-content > .tie-ad-slot {
    margin: 0;
    padding: 20px 15px;
    border-inline: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
}

@media (max-width: 767px) {
    .post-content > .tie-ad-slot {
        padding-inline: 15px;
    }
}

/* ---------- Mobile anchor (phones only) ---------- */

.tie-ad-slot--anchor {
    display: none;
}

@media (max-width: 767px) {
    .tie-ad-slot--anchor {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 999997;
        margin: 0;
        padding: 4px 0 2px;
        background: #fff;
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.14);
    }

    .tie-ad-slot--anchor .tie-ad-label {
        display: none;
    }

    .tie-ad-slot--anchor .tie-ad-box {
        width: 320px;
        max-width: 94%;
        height: 50px;
        aspect-ratio: auto;
        padding: 0;
    }

    .tie-ad-slot--anchor .tie-ad-box-title {
        font-size: 11px;
    }

    .tie-ad-slot--anchor .tie-ad-box-size {
        display: none;
    }

    /* The theme's fixed share bar (single posts) sits at bottom:0 with a very
       high z-index. Lift it above the anchor instead of letting it cover the ad. */
    body.has-ad-anchor {
        padding-bottom: 56px;
    }

    body.has-ad-anchor #share-buttons-mobile {
        bottom: 56px;
    }

    /* The theme's back-to-top button sits at bottom:45px; lift it clear of the
       anchor instead of letting the ad cover its lower edge. */
    body.has-ad-anchor #go-to-top {
        bottom: 100px;
    }
}

/* ---------- Mobile box sizes ---------- */

@media (max-width: 767px) {
    .tie-ad-slot:not(.tie-ad-slot--anchor) .tie-ad-box {
        max-width: calc(var(--ad-wm) * 1px);
        aspect-ratio: var(--ad-wm) / var(--ad-hm);
    }
}

/* ---------- Top billboard (above the header, every page) ----------

   The creative decides the size: the box fills the strip edge to edge and takes
   its height from whatever is inside it, instead of being locked to a fixed
   aspect ratio. The only constraint is the floor — 1400 × 250 — expressed as
   `min(1400px, 100%)`, so a viewport narrower than the floor scales the box
   down to the full available width instead of growing a horizontal scrollbar.

   The selector deliberately carries four classes: the generic mobile rule
   `.tie-ad-slot:not(.tie-ad-slot--anchor) .tie-ad-box` above sets
   `max-width: var(--ad-wm)` at (0,3,0) and would otherwise cap this unit at
   320px on phones and tablets. */

.tie-ad-container--top {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tie-ad-slot--top_billboard {
    margin: 0;
    padding: 10px 15px;
}

.tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .tie-ad-box,
.tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .adsbygoogle {
    width: 100%;
    max-width: none;
    min-width: min(1400px, 100%);
    height: auto;
    min-height: 250px;
    aspect-ratio: auto;
}

/* Phones and tablets: still edge to edge, just without the desktop gutter. */
@media (max-width: 991px) {
    .tie-ad-slot--top_billboard {
        padding-inline: 0;
    }
}

@media (max-width: 767px) {
    .tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .tie-ad-box,
    .tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .adsbygoogle {
        min-height: 100px;
    }
}

/* ---------- Custom code (second network or a direct banner) ----------

   `.tie-ad-slot--custom` wraps an administrator-supplied snippet, so the only
   job here is to keep somebody else's markup inside the column: media shrinks
   to fit and never overhangs, while the slot's own centring is inherited.
   No height is imposed — the creative keeps its natural size. */

.tie-ad-custom {
    display: block;
    max-width: 100%;
}

.tie-ad-custom img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.tie-ad-custom iframe,
.tie-ad-custom video {
    max-width: 100%;
    border: 0;
}

/* A library image ad: the anchor wraps the <img>, so it has to be a block of
   its own inside the flex-centred strip (otherwise the inline anchor leaves a
   baseline gap under the banner). */
.tie-ad-image a {
    display: block;
    max-width: 100%;
    line-height: 0;
}

/* The billboard strip and the fixed phone anchor both need an explicit width
   for a snippet that is not intrinsically sized. The strip also keeps the
   unit's 250px floor, so rotating direct creatives never change the page
   height; the floor only ever grows, a taller creative keeps its own size. */
.tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .tie-ad-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px;
    margin-inline: auto;
}

@media (max-width: 767px) {
    .tie-ad-slot--anchor .tie-ad-custom {
        width: 320px;
        max-width: 94%;
        margin-inline: auto;
    }

    .tie-ad-container--top .tie-ad-slot.tie-ad-slot--top_billboard .tie-ad-custom {
        min-height: 100px;
    }
}