/* ==========================================================================
   Ad placements (top banner, bottom banner, in-page sticky)
   Loaded globally; rendered only when showAds is true.
   ========================================================================== */

.hub-ad {
    --hub-ad-accent: #d94b78;
    position: relative;
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--hub-ad-accent) 16%, transparent), transparent 16rem),
        linear-gradient(135deg, color-mix(in srgb, var(--bs-card-bg) 96%, transparent), color-mix(in srgb, var(--bs-secondary-bg) 70%, transparent));
}

.hub-ad--top {
    margin: 0.75rem 0 1rem;
}

.hub-ad--bottom {
    margin: 1.25rem 0 0.5rem;
}

/* The actual ad viewport. Network banner scripts / <div data-banner-id> drop
   in here. Min-heights keep layout stable before creatives load. */
.hub-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    padding: 0.9rem 1rem;
    text-align: center;
}

.hub-ad--top .hub-ad-slot,
.hub-ad--bottom .hub-ad-slot {
    min-height: 110px;
}

/* House creative shown when no paid banner is booked. */
.hub-ad-house {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    width: 100%;
    text-decoration: none;
    color: var(--bs-body-color);
}

.hub-ad-house i {
    font-size: 1.6rem;
    color: var(--hub-ad-accent);
}

.hub-ad-house-text {
    text-align: left;
}

.hub-ad-house-text strong {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
}

.hub-ad-house-text span {
    display: block;
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

.hub-ad-house .hub-ad-cta {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: var(--hub-ad-accent);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   In-page sticky unit (anchor). Sticks to a screen area while scrolling.
   Mobile: full-width bar pinned above the fixed bottom nav.
   Desktop: compact card in the bottom-left corner (clear of scroll-to-top).
   Appears after scrolling; dismissible with a 5-minute cooldown.
   -------------------------------------------------------------------------- */
.hub-ad-sticky {
    --hub-ad-accent: #d94b78;
    position: fixed;
    left: 8px;
    right: 8px;
    /* Bottom nav (~72px) + safe area, so the bar sits just above it. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    z-index: 1030;
    margin: 0 auto;
    max-width: 620px;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bs-card-bg) 97%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.hub-ad-sticky.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hub-ad-sticky-inner {
    position: relative;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
}

.hub-ad-sticky-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
}

/* Compact, single-row house creative inside the anchor. */
.hub-ad-sticky .hub-ad-house {
    justify-content: flex-start;
    gap: 0.65rem;
    flex-wrap: nowrap;
    text-align: left;
}

.hub-ad-sticky .hub-ad-house i {
    font-size: 1.3rem;
}

.hub-ad-sticky .hub-ad-house-text strong {
    font-size: 0.92rem;
}

.hub-ad-sticky .hub-ad-house-text span {
    font-size: 0.76rem;
}

.hub-ad-sticky .hub-ad-cta {
    margin-left: auto;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
}

.hub-ad-sticky-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-secondary-bg) 80%, transparent);
    cursor: pointer;
}

.hub-ad-sticky-close:hover {
    background: var(--bs-secondary-bg);
}

@media (max-width: 575.98px) {
    .hub-ad-sticky .hub-ad-house-text span {
        display: none; /* keep the bar to one tidy line on small phones */
    }
}

@media (min-width: 992px) {
    /* Compact card anchored to the bottom-center, with extra clearance above
       the fixed bottom nav so it never touches the menu on desktop. */
    .hub-ad-sticky {
        left: 0;
        right: 0;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
        width: 380px;
        max-width: 380px;
        margin: 0 auto;
    }
}