/* Campaigns list page */

.cl-campaigns-page {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4rem);
    background: linear-gradient(165deg, #eef6f1 0%, #f8faf9 48%, #fff 100%);
    overflow: hidden;
    border-top: 1px solid rgba(0, 200, 104, 0.12);
}

.cl-campaigns-page__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 38% at 12% 18%, rgba(0, 200, 104, 0.1), transparent 55%),
        radial-gradient(ellipse 38% 32% at 88% 82%, rgba(255, 170, 0, 0.08), transparent 50%);
}

.cl-campaigns-page .container {
    position: relative;
    z-index: 1;
    max-width: 1320px;
}

.cl-campaigns-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    position: relative;
    z-index: 3;
    isolation: isolate;
}

.cl-campaigns-page__head-main {
    flex: 1 1 480px;
    max-width: 720px;
}

.cl-campaigns-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9a7209 !important;
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.28);
}

.cl-campaigns-page__head h1 {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    color: #0f172a !important;
}

.cl-campaigns-page__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #475569 !important;
}

.cl-campaigns-page__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    color: #087a42 !important;
    border: 1px solid rgba(0, 168, 85, 0.35);
    background: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.cl-campaigns-page__back:hover {
    background: #00a855;
    border-color: #00a855;
    color: #fff !important;
}

.cl-campaigns-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    clear: both;
}

.cl-campaigns-page__grid .hp-campaign-card {
    flex: unset;
    height: 100%;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}