/* ==========================================================================
   COMPONENT: blog-inline-affiliate (banner style)
   Full-width background image with text + CTA overlay.

   Custom properties (set via inline style per affiliate):
     --aff-text-color     : text color (default #fff)
     --aff-backdrop-alpha : overlay opacity 0–1 (default 0.7)
   ========================================================================== */
.bc-inline-affiliate {
    display: block;
    position: relative;
    margin: 2.5rem 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--aff-text-color, #fff);
    min-height: 200px;
    transition: transform var(--duration-base), box-shadow var(--duration-base);
}
.bc-inline-affiliate::before {
    content: 'SPONSORED';
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: var(--tracking-widest);
    color: var(--aff-text-color, #fff);
    opacity: 0.6;
    font-weight: var(--fw-extrabold);
    z-index: 3;
}
.bc-inline-affiliate:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Background image — covers the entire card */
.bc-inline-affiliate__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform var(--duration-slow, 600ms) var(--ease-in-out, ease);
}
.bc-inline-affiliate:hover .bc-inline-affiliate__bg {
    transform: scale(1.04);
}

/* Gradient overlay — opacity controlled by --aff-backdrop-alpha */
.bc-inline-affiliate__overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 2rem 1.5rem 1.5rem;
    min-height: 200px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--aff-backdrop-alpha, 0.7)) 0%,
        rgba(0, 0, 0, calc(var(--aff-backdrop-alpha, 0.7) * 0.5)) 50%,
        rgba(0, 0, 0, calc(var(--aff-backdrop-alpha, 0.7) * 0.1)) 100%
    );
}

/* No image fallback — use glass panel style */
.bc-inline-affiliate:not(:has(.bc-inline-affiliate__bg)) {
    background: var(--glass-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.bc-inline-affiliate:not(:has(.bc-inline-affiliate__bg)) .bc-inline-affiliate__overlay {
    background: none;
    min-height: auto;
    padding: 1.5rem;
}

.bc-inline-affiliate__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    line-height: var(--leading-snug);
}
.bc-inline-affiliate__desc {
    font-size: var(--text-sm);
    opacity: 0.85;
    line-height: var(--leading-normal);
    max-width: 480px;
}
.bc-inline-affiliate__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.6rem 1.25rem;
    background: var(--gradient-gold);
    color: #000;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    white-space: nowrap;
    margin-top: 0.25rem;
    transition: transform var(--duration-fast);
}
.bc-inline-affiliate:hover .bc-inline-affiliate__cta {
    transform: translateY(-2px);
}

/* Image-only mode — no overlay, image is the entire ad */
.bc-inline-affiliate--image-only {
    min-height: 0;
}
.bc-inline-affiliate--image-only .bc-inline-affiliate__bg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}
.bc-inline-affiliate--image-only::before {
    /* Keep SPONSORED label but make it more subtle on image-only */
    background: rgba(0, 0, 0, 0.4);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    .bc-inline-affiliate {
        margin: 1.5rem -1rem;
        border-radius: 0;
    }
    .bc-inline-affiliate__overlay {
        padding: 1.5rem 1rem 1.25rem;
        min-height: 160px;
    }
    .bc-inline-affiliate__title {
        font-size: var(--text-lg);
    }
    .bc-inline-affiliate__desc {
        font-size: var(--text-xs);
    }
}