/* =========================================================================
 * Low-income countries (page 1830), rulebook P-27. Page layout only.
 * RS model: about-us/who-we-are/mission-priorities (SiteShell with no
 * hero): breadcrumb, H1 48/40 and a 24/1.2 lead on white, left aligned on
 * the content edge, then the body. Here the body is the intro line, the
 * 132-country list in text columns and the source line. Nothing else.
 * Markup: [eam_low_income_countries], eam-core/includes/low-income-countries.php
 * (the breadcrumb is printed there while the redesign is on):
 *   .eam-lowinc-page
 *     header.eam-lowinc-hero > .eam-lowinc-hero__inner
 *       nav.rd-breadcrumb, .eam-lowinc-hero__eyebrow, h1.eam-lowinc-hero__title,
 *       p.eam-lowinc-hero__lede
 *     .eam-lowinc > p.eam-lowinc__intro, ul.eam-lowinc__list, p.eam-lowinc__source
 * Type of the H1, lede and eyebrow: components.css (code-rendered heroes).
 * This file turns the components.css tint band (components.css:191-198,
 * :283-286) into the no-hero head and puts everything on the shared content
 * edge: the old page CSS (low-income-countries.css, still loading) broke
 * the page out to full width and centred a 1040px column (H1 at x=200, list
 * at x=224 at 1440px). Every rule here is (0,3,1) or more and wins by
 * specificity over that file ((0,1,0) to (0,2,1)) and components.css
 * ((0,2,1) to (0,3,1)).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Frame: no full-bleed break-out (low-income-countries.css:62-66). The
 * Kadence content container already is the shared container (1364px, gutter
 * --rd-gutter, base.css), so the page sits on the logo / breadcrumb edge:
 * x = 62 / 32 / 16 at 1440 / 820 / 390.
 * ------------------------------------------------------------------------- */
body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page {
  margin-inline: 0;
}

/* Kadence's boxed layout pulls the page box 1rem past the gutter on both
 * sides at <= 719px (kadence content.min.css: .content-style-boxed
 * .content-bg:not(.loop-entry), (0,3,0)); the old full-bleed hid that.
 * Back on the gutter, so the text keeps the 16px phone edge. */
body.eam-redesign.rd-page-low-income-countries .content-wrap > .entry.content-bg {
  margin-inline: 0;
}

/* -------------------------------------------------------------------------
 * 2. Head: no hero band (RS SiteShell noHero). White, and the breadcrumb
 * starts at --rd-no-hero-top (201px, 144px <= 820px) like RS, minus the
 * header height the content already clears (same as our-mission.css and
 * contact-us.css).
 * ------------------------------------------------------------------------- */
body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc-hero {
  padding: calc(var(--rd-no-hero-top) - var(--rd-header-h)) 0 0;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  overflow: visible;
}

body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc-hero__inner {
  max-width: none;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * 3. Body: intro, list, source. Lede to intro: the lede's own 24px margin
 * (components.css), as RS lead to body text.
 * ------------------------------------------------------------------------- */
body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--rd-space-xl);
}

body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__intro {
  max-width: var(--rd-measure);
  margin: 0 0 var(--rd-space-m);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-text);
}

/* The country list: alphabetical, read down each column (CSS columns keep
 * that order), hairline rows. 4 columns on desktop, 3 below 1080px, 2 at
 * 600px and below (3 columns there are ~125px wide and wrap a dozen names;
 * one column was a 4,400px scroll at 390px). */
body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__list {
  columns: 4;
  column-gap: var(--rd-space-m);
  margin: 0 0 var(--rd-space-base);
  padding: 0;
  list-style: none;
}

body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__list li {
  break-inside: avoid;
  margin: 0;
  padding: calc(var(--rd-space-2xs) * 2) 0;
  border-bottom: var(--rd-border-width) solid var(--rd-border-light);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-text);
}

/* Deferred fix: the source line was #718096 at 13.6px (4.02:1). Now the
 * secondary text token (ink 70%, 6.2:1) at the small size. The link keeps
 * the content link look from base.css. */
body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__source {
  margin: 0;
  font-size: var(--rd-fs-small);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-text-70);
}

body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__source a {
  color: var(--rd-color-link);
  font-weight: var(--rd-fw-semibold);
}

/* -------------------------------------------------------------------------
 * 4. Breakpoints
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__list {
    columns: 3;
  }
}

@media (max-width: 820px) {
  /* components.css:283-286 gives the old band 56px top / 32px bottom here. */
  body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc-hero {
    padding: calc(var(--rd-no-hero-top) - var(--rd-header-h)) 0 0;
  }

  body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc {
    padding-bottom: var(--rd-space-l);
  }
}

@media (max-width: 600px) {
  body.eam-redesign.rd-page-low-income-countries .eam-lowinc-page .eam-lowinc__list {
    columns: 2;
    column-gap: var(--rd-space-s);
  }
}