/* /low-income-countries/: hero + list layout for [eam_low_income_countries]. */

.eam-lowinc {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.5rem;
}

.eam-lowinc__intro {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #2d3748;
    max-width: 720px;
    margin: 0 0 2rem;
}

.eam-lowinc__list {
    columns: 4 200px;
    column-gap: 2rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.eam-lowinc__list li {
    break-inside: avoid;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(45, 55, 72, 0.12);
    font-size: 0.95rem;
}

.eam-lowinc__source {
    color: #718096;
    font-size: 0.85rem;
}

.eam-lowinc__source a {
    color: #5a64ad;
}

/* ---------- Page frame (page 1830) ----------
 * The page uses Kadence's boxed layout; drop the box so the indigo hero runs
 * edge to edge like the other page heroes and the list sits on white. */
body.page-id-1830 .content-area {
    margin-top: 0;
}

body.page-id-1830 .content-bg,
body.page-id-1830 .site-main .content-wrap > article {
    background: var(--global-palette9, #fff);
    box-shadow: none;
}

body.page-id-1830 .entry-content-wrap {
    padding: 0;
}

/* ---------- Hero ---------- */
.eam-lowinc-page {
    /* break out of the theme content container to a full-bleed band */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.eam-lowinc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4.5rem 1.25rem 3.25rem;
    background: var(--global-palette1, #5a64ad);
    color: #fff;
}

.eam-lowinc-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 60%;
    background: url("../img/eam-bell-curve.svg") no-repeat center bottom / 100% 100%;
    opacity: .16;
    pointer-events: none;
}

.eam-lowinc-hero__inner {
    max-width: 1040px;
    margin: 0 auto;
}

.eam-lowinc-hero__eyebrow {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .35rem .75rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eam-lowinc-hero__title {
    margin: 0 0 .75rem;
    font-family: var(--global-heading-font-family, Georgia, serif);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}

.eam-lowinc-hero__lede {
    max-width: 620px;
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.13rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

.eam-lowinc-hero__lede a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .eam-lowinc-hero {
        padding: 3rem 1rem 2.5rem;
    }

    .eam-lowinc {
        padding: 2rem 1rem 3rem;
    }
}

/* Below 1088px the full-bleed list ran past the white article box: the
 * intro started 4px left of it on tablet and the theme's list indent
 * pushed the country columns 36px right of the intro. White page, the
 * site's 24px edge gutter for hero and list, and no list indent. */
body.page-id-1830 {
    background: var(--global-palette9, #fff);
}

.eam-lowinc-hero,
.eam-lowinc {
    padding-right: var(--global-content-edge-padding, 1.5rem);
    padding-left: var(--global-content-edge-padding, 1.5rem);
}

.eam-lowinc .eam-lowinc__list {
    padding-left: 0;
}