/*
 * Affiliate placements: banners, sidebar cards and the hotel map block.
 *
 * These rules used to live in a <style> block inside _affiliate_banner.html,
 * which meant rendering the partial twice on one page emitted the CSS twice.
 * They are here so a placement can appear anywhere, any number of times.
 */

/* --- Shared disclosure pill ------------------------------------------- */

.affiliate-banner-adtag,
.aff-hotels-adtag {
    background: rgba(0, 0, 0, .6);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #999;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 3px;
}

/* --- Banner ------------------------------------------------------------ */

.affiliate-banner {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: linear-gradient(120deg, #0d0d0d 0%, #101018 55%, #16162a 100%);
    text-decoration: none;
    color: #fff;
    transition: border-color .2s ease, transform .2s ease;
}
.affiliate-banner:hover { border-color: #ff0000; transform: translateY(-2px); }

.affiliate-banner-adtag {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
}

.affiliate-banner-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #ff0000, #7a0000 60%, transparent);
}

.affiliate-banner-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding: 1.25rem 1.75rem;
}

.affiliate-banner-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.affiliate-banner-eyebrow {
    font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
    color: #ff4444; font-weight: 700;
}
.affiliate-banner-headline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    line-height: 1.05;
    text-shadow: 0 0 12px rgba(255, 0, 0, .45);
}
.affiliate-banner-sub { color: #bbb; font-size: .85rem; }
.affiliate-banner-cta {
    margin-top: .5rem; align-self: flex-start;
    background: #ff0000; color: #fff; font-weight: 700; font-size: .85rem;
    padding: .5rem 1.1rem; border-radius: 4px;
    transition: background .2s ease;
}
.affiliate-banner:hover .affiliate-banner-cta { background: #d51007; }

.affiliate-banner-media { flex-shrink: 0; padding-right: .5rem; }
.affiliate-banner-img {
    width: 120px; height: 120px; object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
    transition: transform .2s ease;
}
.affiliate-banner:hover .affiliate-banner-img { transform: scale(1.05); }

@media (max-width: 640px) {
    .affiliate-banner-inner { padding: 1rem 1.25rem; }
    .affiliate-banner-img { width: 84px; height: 84px; }
}
@media (max-width: 420px) {
    .affiliate-banner-media { display: none; }
}

/* --- Hotel block -------------------------------------------------------- */

.aff-hotels {
    margin: 2rem 0;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: #0d0d0d;
    overflow: hidden;
}

.aff-hotels-head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: 1rem 1.25rem .75rem;
}
.aff-hotels-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 1.25rem; color: #fff; margin: 0;
}
.aff-hotels-note {
    width: 100%; margin: 0; color: #999; font-size: .78rem; line-height: 1.5;
}

/*
 * The iframe is injected on scroll, so this box has to hold its height from
 * first paint or the page shifts under the reader. Event pages are the main
 * organic surface here — a layout shift on them is a ranking problem, not just
 * an annoyance.
 */
.aff-hotels-frame {
    position: relative;
    min-height: 420px;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.aff-hotels-frame iframe {
    display: block; width: 100%; height: 420px; border: 0;
}

.aff-hotels-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; text-align: center; padding: 1rem;
    color: #777; font-size: .9rem;
}
.aff-hotels-placeholder i { font-size: 1.75rem; color: #444; }

@media (max-width: 640px) {
    .aff-hotels-frame { min-height: 360px; }
    .aff-hotels-frame iframe { height: 360px; }
}

/* --- Sidebar card ------------------------------------------------------- */

.aff-card {
    display: block; position: relative;
    padding: 1rem; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #101018;
    color: #fff; text-decoration: none;
    transition: border-color .2s ease;
}
.aff-card:hover { border-color: #ff0000; }
.aff-card-eyebrow {
    display: block; font-size: .65rem; letter-spacing: .2em;
    text-transform: uppercase; color: #ff4444; font-weight: 700;
}
.aff-card-headline { display: block; margin: .35rem 0; font-weight: 700; line-height: 1.2; }
.aff-card-sub { display: block; color: #999; font-size: .8rem; }
.aff-card-adtag { position: absolute; top: .5rem; right: .5rem; }

/* --- AdSense unit (partials/_ad_slot.html) ------------------------------ */

/* One unit at the foot of the page content. The min-height reserves the space
   before the ad fills, so nothing jumps when it arrives (no layout shift for
   the reader, none for Core Web Vitals). Capped width and height keep it a
   banner rather than a wall. */
.ad-slot {
    max-width: 970px;
    margin: 2.5rem auto 1.5rem;
    padding: 0 16px;
    text-align: center;
}
.ad-slot-label {
    display: block;
    margin-bottom: .35rem;
    color: #777;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.ad-slot .adsbygoogle {
    display: block;
    min-height: 100px;
    max-height: 280px;
    overflow: hidden;
}
/* AdSense marks a unit it couldn't fill; collapse it instead of leaving a gap. */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
/* Ezoic gives no such mark, and the slot must stay displayed for its ad to
   load, so until a creative's iframe lands the label and margins go instead:
   an unfilled slot leaves no stray "Advertisement" behind. */
.ad-slot--ezoic:not(:has(iframe)) { margin: 0; }
.ad-slot--ezoic:not(:has(iframe)) .ad-slot-label { display: none; }

/* --- Adsterra native banner (partials/_adsterra_native.html) ------------- */

/* Inside a tool page's own column rather than at the foot of the page, so it
   takes the column's width with no gutter of its own, and its ads keep their
   own alignment. Adsterra gives no mark when a unit goes unfilled, or when an
   ad blocker eats the script, so the label and margins wait for something to
   land in the container. */
.ad-slot--adsterra { padding: 0; text-align: left; }
.ad-slot--adsterra:not(:has(div:not(:empty))) { margin: 0; }
.ad-slot--adsterra:not(:has(div:not(:empty))) .ad-slot-label { display: none; }