/* Site ads — responsive banner placements */
.site-ad {
    --site-ad-radius: 12px;
    --site-ad-border: color-mix(in srgb, var(--C1, #0d9488) 22%, var(--C4, #e2e8f0));
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.site-ad__link {
    display: block;
    border-radius: var(--site-ad-radius);
    overflow: hidden;
    border: 1px solid var(--site-ad-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--C1, #0d9488) 8%, transparent) 0%, transparent 65%),
        var(--C2, #fff);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--C6, #0f172a) 8%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.site-ad__link:hover,
.site-ad__link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--C1, #0d9488) 45%, var(--C4, #e2e8f0));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--C1, #0d9488) 18%, transparent);
    outline: none;
}

.site-ad__picture {
    display: block;
    width: 100%;
}

.site-ad__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .site-ad {
        margin: 0.75rem auto;
        padding: 0 0.5rem;
    }

    .site-ad__img {
        max-height: 160px;
    }
}

/* Dark surfaces (when theme sets dark C2) */
html[data-bs-theme="dark"] .site-ad__link,
body.theme-dark .site-ad__link,
.dark-mode .site-ad__link {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--C1, #0d9488) 14%, transparent) 0%, transparent 70%),
        color-mix(in srgb, var(--C2, #1e293b) 92%, #000);
    border-color: color-mix(in srgb, var(--C1, #0d9488) 35%, rgba(255, 255, 255, 0.12));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}