/* ──────────────────────────────────────────────────────────────────────────
   Friendse — advertising system styles.

   Every ad sits in a themed card that inherits the active theme's surface,
   border and text colours, so ads never look bolted on. All placements are
   fully responsive: the side rails simply disappear on narrower screens
   instead of squeezing the feed, and every ad body scales to its container
   with no horizontal scrolling.

   FIX (sizes / ratio): a unit with a standard format (300x250, 728x90,
   160x600 …) now gets a slot box of exactly that size and aspect ratio,
   reserved BEFORE the banner or the network script loads. On phones the slot
   switches to the unit's mobile format and never grows past the screen, so
   ads look right on desktop and mobile and the page never jumps (the same
   behaviour an AdSense-optimised page has).
   ────────────────────────────────────────────────────────────────────────── */

.fp-ad {
    position: relative;
    margin: 0 0 16px;
    padding: 10px;
    border-radius: 14px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e5e7eb);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.fp-ad__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .45;
    color: var(--c-text, #111827);
}

.fp-ad__sponsor {
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary, #2563eb) 14%, transparent);
    color: var(--c-primary, #2563eb);
    opacity: .9;
    letter-spacing: .02em;
    text-transform: none;
}

.fp-ad__body {
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

/* ── The slot: the box the ad actually lives in ─────────────────────────── */

.fp-ad__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
}

/* A fixed-format unit reserves its exact box, scaled down proportionally
   whenever the column is narrower than the format. */
.fp-ad--fixed .fp-ad__slot {
    width: var(--fp-ad-w);
    max-width: 100%;
    aspect-ratio: var(--fp-ad-ratio);
}

/* Responsive units keep the old behaviour: height follows the content. */
.fp-ad--responsive .fp-ad__slot {
    width: 100%;
    display: block;
}

.fp-ad__slot > a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.fp-ad__slot img,
.fp-ad__slot iframe,
.fp-ad__slot ins,
.fp-ad__slot video,
.fp-ad__slot embed,
.fp-ad__slot canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    border: 0;
    border-radius: 10px;
    object-fit: contain;
}

/* Responsive units must not be force-stretched to a height they don't have. */
.fp-ad--responsive .fp-ad__slot img,
.fp-ad--responsive .fp-ad__slot iframe,
.fp-ad--responsive .fp-ad__slot ins,
.fp-ad--responsive .fp-ad__slot video {
    height: auto;
    min-height: 40px;
}

/* Pasted network code is often a fixed-width block: keep it centred and
   never let it push a horizontal scrollbar onto the page. */
.fp-ad__slot > * { max-width: 100%; }
.fp-ad__slot ins.adsbygoogle { display: block !important; }

/* ── Mobile: switch to the unit's mobile format ─────────────────────────── */

@media (max-width: 640px) {
    .fp-ad--fixed .fp-ad__slot {
        width: min(100%, var(--fp-ad-mw, var(--fp-ad-w)));
        aspect-ratio: var(--fp-ad-mratio, var(--fp-ad-ratio));
    }

    /* A tall skyscraper would eat a whole phone screen — cap it. */
    .fp-ad--size-160x600 .fp-ad__slot,
    .fp-ad--size-120x600 .fp-ad__slot,
    .fp-ad--size-300x600 .fp-ad__slot {
        max-height: 60vh;
    }

    .fp-ad { padding: 8px; border-radius: 12px; }
}

/* Header / above-footer full-width strips */
.fp-ad--header,
.fp-ad--footer-above {
    max-width: 1440px;
    margin: 12px auto;
    padding-inline: 12px;
}

@media (max-width: 640px) {
    .fp-ad--header,
    .fp-ad--footer-above {
        margin: 10px 12px;
        border-radius: 12px;
    }
}

/* Side rails.
   FIX: they used to be `display:none` below 1600px, so a left/right side ad
   was invisible on almost every real screen — that is why "the ad images do
   not show". Now the rail always renders: as a normal full-width card in the
   page flow on smaller screens, and as the sticky rail on wide desktops. */
.fp-ad-rail {
    display: block;
    max-width: 1440px;
    margin: 12px auto;
    padding-inline: 12px;
}

.fp-ad-rail:empty { display: none; }

@media (min-width: 1400px) {
    .fp-ad-rail {
        display: block;
        position: fixed;
        top: 96px;
        width: 180px;
        margin: 0;
        padding-inline: 0;
        z-index: 20;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .fp-ad-rail::-webkit-scrollbar { display: none; }
    .fp-ad-rail--left  { left: 12px; }
    .fp-ad-rail--right { right: 12px; }
    .fp-ad-rail .fp-ad { margin-bottom: 12px; padding: 8px; }
}

@media (min-width: 1800px) {
    .fp-ad-rail { width: 220px; }
}

/* A wide format placed in a narrow rail or sidebar simply scales down —
   the aspect-ratio box keeps it perfectly proportioned. */
.fp-ad-rail .fp-ad--fixed .fp-ad__slot,
.fp-ad--widget.fp-ad--fixed .fp-ad__slot { width: min(100%, var(--fp-ad-w)); }

/* Sidebar widget ads sit flush inside the right column card stack. */
.fp-ad--widget { margin-bottom: 12px; }

/* In-feed ads match the post-card rhythm. */
.fp-ad--in-feed { margin: 0 0 16px; }

/* Admin preview boxes */
.fp-ad-admin-preview {
    border: 1px dashed var(--c-border, #e5e7eb);
    border-radius: 12px;
    padding: 10px;
    background: color-mix(in srgb, var(--c-surface, #fff) 70%, transparent);
}

.fp-ad-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--c-primary, #2563eb) 12%, transparent);
    color: var(--c-primary, #2563eb);
}

/* FIX: an empty rail (no live ad for that side) must take no space at all,
   even though the <aside> wrapper contains whitespace. */
.fp-ad-rail:not(:has(.fp-ad)) { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   FIX (in-feed banners between posts).

   An in-feed ad now behaves like a post card: it fills the feed column,
   keeps the 728 × 90 leaderboard ratio on desktop and automatically becomes
   a 320 × 100 mobile banner on a phone. The box is reserved before the
   banner loads, so the feed never jumps while the user is scrolling.
   ────────────────────────────────────────────────────────────────────────── */

.fp-ad--in-feed.fp-ad--fixed .fp-ad__slot {
    width: min(100%, var(--fp-ad-w));
}

.fp-ad--in-feed .fp-ad__slot img {
    object-fit: contain;
}

/* AdSense unit in the feed: reserve a sensible height so the slot does not
   collapse to 0px before Google fills it. */
.fp-ad--adsense .fp-ad__slot,
.fp-ad--adsense ins.adsbygoogle {
    display: block;
    width: 100%;
    min-height: 90px;
}

@media (max-width: 640px) {
    .fp-ad--in-feed.fp-ad--fixed .fp-ad__slot {
        width: min(100%, var(--fp-ad-mw, var(--fp-ad-w)));
        aspect-ratio: var(--fp-ad-mratio, var(--fp-ad-ratio));
    }

    .fp-ad--adsense .fp-ad__slot,
    .fp-ad--adsense ins.adsbygoogle { min-height: 100px; }
}