/*
 * 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: 'Lacquer', cursive;
    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: 'Lacquer', cursive;
    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; }