/* Advert slots (ads.js): empty until an advert is live */
[data-ad-slot]:not(.lf-ad-slot-on) { display: none; }
.lf-ad-slot-on { display: flex; flex-direction: column; gap: 10px; margin: 18px auto; max-width: 1200px; }
.lf-ad { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; text-decoration: none;
    color: var(--text-main, inherit); background: var(--bg-card, rgba(255,255,255,.03));
    border: 1px solid var(--border-glass, rgba(148,163,184,.3)); transition: border-color .15s, transform .15s; }
.lf-ad:hover, .lf-ad:focus-visible { border-color: var(--color-accent, #3b82f6); transform: translateY(-1px); outline: none; }
.lf-ad img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.lf-ad-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-ad-by { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-muted, #94a3b8); }
.lf-ad-by > span:last-child:not(.lf-ad-tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Standard ad label: small outlined badge, normal case */
.lf-ad-tag, .lf-sponsored-tag { flex: none; display: inline-block; align-self: flex-start; padding: 0 5px; border: 1px solid currentColor;
    border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 16px; color: var(--text-muted, #94a3b8); }
.lf-ad-text strong { font-size: 15px; overflow-wrap: anywhere; }
.lf-ad-text small { font-size: 13px; color: var(--text-muted, #94a3b8); overflow-wrap: anywhere; }
.lf-ad-cta { flex: none; font-size: 13px; font-weight: 700; color: var(--color-accent, #3b82f6); white-space: nowrap; }
/* Wide image (about 3:1): full-width banner above the text */
.lf-ad-banner { flex-wrap: wrap; }
.lf-ad-banner img { order: -1; width: 100%; height: auto; max-height: 200px; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 560px) {
    .lf-ad { flex-wrap: wrap; padding: 12px; }
    .lf-ad:not(.lf-ad-banner) img { width: 48px; height: 48px; }
    .lf-ad-cta { width: 100%; }
    /* Line the button up with the text, not the image (48px image + 14px gap) */
    .lf-ad-img:not(.lf-ad-banner) .lf-ad-cta { padding-left: 62px; }
}
@media (prefers-reduced-motion: reduce) { .lf-ad { transition: none; } .lf-ad:hover { transform: none; } }