body { color: var(--text-primary); font-family: var(--font-ar); margin: 0; padding-bottom: calc(90px + var(--sab)); }
.container { max-width: 1000px; margin: 0 auto; padding: 24px 16px 40px; }

.content-hero {
    position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 24px;
    min-height: 150px; box-shadow: var(--shadow-lg);
    background: url('/assets/images/campaign-hero.webp') center/cover;
}
:root[dir="ltr"] .content-hero { background-image: url('/assets/images/campaign-hero-ltr.webp'); }
.content-hero::before {
    content: ''; position: absolute; inset: 0;
    display: none;
}
.content-hero-inner { position: relative; z-index: 1; padding: 26px 22px; color: #fff; }
.content-hero h1 { margin: 0 0 8px; font-size: var(--text-2xl); font-weight: 800; }
.content-hero p { margin: 0; font-size: var(--text-sm); opacity: 0.92; max-width: 480px; }

.sec-title { font-size: var(--text-base); font-weight: 800; margin: 0 0 14px;
             display: flex; align-items: center; gap: 8px; }

.campaign-card {
    display: grid; grid-template-columns: 140px 1fr;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
    overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease;
}
.campaign-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.campaign-img { background-size: cover; background-position: center; min-height: 120px; position: relative; }
.campaign-body { padding: 16px 18px; display: flex; flex-direction: column; }
.campaign-body h3 { margin: 0 0 6px; color: var(--primary-ink); font-size: var(--text-base); font-weight: 800; }
.campaign-body p { margin: 0 0 10px; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { font-size: var(--text-xs); font-weight: 800; padding: 4px 11px; border-radius: var(--radius-full);
        background: var(--bg-surface-hover); color: var(--text-secondary); white-space: nowrap;
        display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 640px) {
    .campaign-card { grid-template-columns: 1fr; }
    .campaign-img { min-height: 130px; }
}