/* BIOFIN Investment Compendium: country library and single profile.
   Built on the BIOFIN Design System: zero radius, no shadows, flat colour bands,
   red as the only interactive colour, Söhne Breit for hero titles and stat numerals. */
@font-face { font-family: "Proxima Nova"; src: url("../fonts/ProximaNova-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../fonts/ProximaNova-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../fonts/ProximaNova-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../fonts/ProximaNova-Extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sohne Breit"; src: url("../fonts/TestSohneBreit-Fett.otf") format("opentype"); font-weight: 800; font-display: swap; }

.ip-app {
    /* Design system colour tokens */
    --red-600: rgb(192, 58, 29);
    --red-500: rgb(220, 79, 58);
    --navy-800: rgb(27, 64, 116);
    --mint-400: rgb(41, 205, 155);
    --yellow-300: rgb(252, 235, 79);
    --black: #000;
    --grey-950: rgb(15, 15, 15);
    --grey-900: rgb(48, 48, 48);
    --grey-750: rgb(65, 65, 65);
    --grey-500: rgb(148, 148, 148);
    --grey-400: rgb(193, 193, 193);
    --grey-300: rgb(217, 217, 217);
    --grey-100: rgb(247, 247, 247);
    --white: #fff;
    --rule-hairline: rgba(0, 0, 0, .24);
    --font-body: "Proxima Nova", "ProximaNova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Sohne Breit", "SohneBreit", "Proxima Nova", Arial, sans-serif;
    /* Layout tokens (1436px content, 100px section padding), scaled down on small screens */
    --content-width: 1436px;
    --section-pad-y: 100px;
    --gap-card: 21px;
    --gap-grid: 28px;
    --button-h: 48px;

    box-sizing: border-box;
    width: 100%;
    background: var(--white);
    color: var(--black);
    font: 400 18px/25px var(--font-body);
}

.ip-app *, .ip-app *::before, .ip-app *::after { box-sizing: border-box; border-radius: 0; }
.ip-app h1, .ip-app h2, .ip-app h3 { margin: 0; color: var(--grey-950); text-transform: none; letter-spacing: normal; }
.ip-app p { margin: 0; }
.ip-app img { display: block; max-width: 100%; height: auto; }
.ip-app a { color: inherit; background-image: none; text-decoration: none; }
.ip-app a:focus-visible, .ip-app button:focus-visible, .ip-app input:focus-visible, .ip-app select:focus-visible {
    outline: 3px solid var(--red-500);
    outline-offset: 2px;
}

.ip-wrap {
    width: 100%;
    max-width: calc(var(--content-width) + 80px);
    margin: 0 auto;
    padding-right: 40px;
    padding-left: 40px;
}

/* ---- Type roles ---- */
.ip-app .ip-eyebrow {
    font: 600 16px/1.2 var(--font-body);
    text-transform: uppercase;
    color: var(--black);
}
.ip-stat {
    font: 800 clamp(44px, 4.6vw, 72px)/1 var(--font-display);
    letter-spacing: .03em;
    color: var(--black);
}
.ip-stat--small { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; }

/* ---- Buttons: 48px sharp rectangles, uppercase Bold 16, chevron after the label ---- */
.ip-button, .ip-text-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--button-h);
    border: 0;
    font: 700 16px/36px var(--font-body);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.ip-app .ip-button { padding: 6px 24px; background: var(--red-600); color: var(--white); }
.ip-app .ip-button:hover { background: var(--red-500); color: var(--white); }
.ip-button .ip-chevron { fill: var(--black); flex-shrink: 0; }
.ip-app .ip-text-button { padding: 6px 24px 6px 0; background: transparent; color: var(--grey-750); }
.ip-text-button .ip-chevron { fill: var(--red-500); flex-shrink: 0; transition: transform .2s ease; }
.ip-app a.ip-text-button:hover { color: var(--red-500); }

/* ---- Bands ---- */
.ip-band { padding: var(--section-pad-y) 0; }
.ip-band--grey { background: var(--grey-100); }
.ip-library { scroll-margin-top: 115px; }
.ip-band--mint { background: var(--mint-400); }
.ip-band--navy { background: var(--navy-800); color: var(--white); }
.ip-app .ip-band--navy h2, .ip-app .ip-band--navy .ip-section-head p { color: var(--white); }

/* ---- Section header: title left, lede right ---- */
.ip-section-head {
    display: flex;
    justify-content: space-between;
    gap: 40px 108px;
    align-items: flex-start;
    padding: 17px 0 50px;
}
.ip-section-head h2 { flex: 0 1 479px; font: 800 clamp(34px, 3.6vw, 55px)/1.09 var(--font-body); }
.ip-app .ip-section-head p { flex: 0 1 761px; font: 400 clamp(20px, 2vw, 29px)/1.25 var(--font-body); color: var(--grey-900); }
.ip-hairline { height: 1px; margin-bottom: 50px; background: var(--rule-hairline); }

/* ---- Hero: photo behind white type with a dark scrim ---- */
.ip-hero {
    position: relative;
    overflow: hidden;
    background: var(--navy-800);
    color: var(--white);
}
.ip-hero__media { position: absolute; inset: 0; }
.ip-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ip-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ip-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 560px;
    padding-top: 88px;
    padding-bottom: 88px;
}
/* The site's own breadcrumb (undp_breadcrumbs) in its white hero variant
   (.hero-container); only the current item needs white on the photo. */
/* On small screens the site pads and pushes the breadcrumb below its fixed
   header; the hero already clears the header, so undo that here. */
.ip-app .ip-breadcrumb nav.breadcrumb { margin: 0; padding: 0; }
.ip-breadcrumb .breadcrumb ul { flex-wrap: wrap; line-height: 1.4; }
.ip-breadcrumb .breadcrumb ul li[aria-current] { color: var(--white); }
.ip-app .ip-hero .ip-eyebrow { margin-top: 34px; color: var(--white); }
.ip-app .ip-hero h1 {
    max-width: 900px;
    margin-top: 34px;
    font: 800 clamp(34px, 3.8vw, 55px)/1.09 var(--font-display);
    text-transform: uppercase;
    color: var(--white);
}
.ip-app .ip-hero .ip-eyebrow + h1 { margin-top: 16px; }
.ip-app .ip-hero__lead { max-width: 640px; margin-top: 26px; font: 400 clamp(20px, 1.8vw, 25px)/1.3 var(--font-body); color: var(--white); }
.ip-app .ip-hero__ambition { max-width: 640px; margin-top: 16px; font: 700 18px/25px var(--font-body); color: var(--white); }
.ip-hero .ip-button { margin-top: 36px; }

.ip-app .ip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ip-app .ip-chip { display: inline-block; padding: 8px 12px; background: var(--white); color: var(--black); font: 600 12px/1 var(--font-body); text-transform: uppercase; }
.ip-app .ip-chip:hover { color: var(--red-500); }
.ip-app .ip-chip--quiet { background: var(--white); color: var(--grey-750); }

/* ---- Filters ---- */
.ip-filters {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px var(--gap-grid);
    align-items: center;
    margin-bottom: 20px;
}
.ip-field input, .ip-field select {
    width: 100%;
    height: var(--button-h);
    padding: 0 16px;
    border: 1px solid var(--rule-hairline);
    background-color: var(--white);
    color: var(--black);
    font: 400 18px var(--font-body);
}
.ip-field select { appearance: none; padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23dc4f3a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.ip-field--search input {
    padding-left: 48px;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23080808' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='7'/%3E%3Cpath d='m14 14 5 5'/%3E%3C/svg%3E") no-repeat 16px center;
}
.ip-field input::placeholder { color: var(--grey-750); }
.ip-field--sort { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 600 16px var(--font-body); text-transform: uppercase; }
.ip-field--sort select { width: auto; min-width: 190px; text-transform: none; }
.ip-filters.is-live .ip-filters__submit { display: none; }

.ip-results-bar { display: flex; gap: 24px; align-items: baseline; min-height: 28px; margin-bottom: 28px; font: 600 16px var(--font-body); text-transform: uppercase; color: var(--grey-900); }
.ip-app .ip-reset { color: var(--red-600); }
.ip-app .ip-reset:hover { color: var(--red-500); }
.ip-reset[hidden] { display: none; }

/* ---- Country cards: flat white blocks, hard-cropped photo, no borders ---- */
.ip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.ip-card { position: relative; display: flex; flex-direction: column; background: var(--white); }
.ip-card[hidden] { display: none; }
.ip-card__media { aspect-ratio: 3 / 2; background: var(--grey-300); overflow: hidden; }
.ip-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ip-card__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 26px 30px 20px; }
.ip-app .ip-card__title { font: 600 26px/1.1 var(--font-body); color: var(--black); }
.ip-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clicks through */
.ip-app .ip-card__need { display: flex; flex-direction: column; gap: 6px; }
.ip-card__need .ip-stat { font-size: clamp(30px, 2.4vw, 40px); }
.ip-card__need span:last-child { font: 400 18px/1.2 var(--font-body); }
.ip-card .ip-text-button { margin-top: auto; }
.ip-card:hover .ip-card__title, .ip-card:hover .ip-text-button { color: var(--red-500); }
.ip-card:hover .ip-chevron { transform: translateX(4px); }

/* ---- Navy band steps ---- */
.ip-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); margin: 0 0 50px; padding: 0; list-style: none; counter-reset: ip-step; }
.ip-steps li { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--grey-500); counter-increment: ip-step; }
.ip-steps li::before { content: counter(ip-step, decimal-leading-zero) "."; font: 800 clamp(40px, 3.6vw, 56px)/1 var(--font-display); letter-spacing: .03em; color: var(--white); }
.ip-steps strong { font: 600 26px/1.1 var(--font-body); color: var(--white); }
.ip-steps span { font: 400 18px/25px var(--font-body); color: var(--grey-400); }
.ip-actions { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.ip-band--navy .ip-text-button { color: var(--white); }
.ip-app .ip-band--navy a.ip-text-button:hover { color: var(--yellow-300); }
.ip-page-content { padding: var(--section-pad-y) 0; }

/* ---- Single: Results on the mint band ---- */
.ip-app .ip-band--mint .ip-section-head p { color: var(--black); }
.ip-overview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-grid); align-items: start; }
.ip-stat-card { display: flex; flex-direction: column; gap: var(--gap-card); padding: 46px 30px; background: var(--grey-100); }
.ip-stat-card--highlight { background: var(--yellow-300); }
.ip-stat-card .ip-stat { padding-top: 14px; }
.ip-stat-card__label { font: 400 25px/1.1 var(--font-body); }
.ip-stat-card__note { font: 400 18px/25px var(--font-body); }
.ip-result { padding: 30px 0; font: 400 18px/25px var(--font-body); }
.ip-app .ip-result h3 { margin-bottom: var(--gap-card); font: 700 20px/1.2 var(--font-body); color: var(--black); }
.ip-app .ip-result .ip-stat { margin-bottom: 10px; }
.ip-app .ip-result p + p { margin-top: 12px; }

/* ---- Single: priority investment needs ---- */
.ip-opps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.ip-opp { display: flex; flex-direction: column; gap: var(--gap-card); padding: 46px 30px 30px; background: var(--grey-100); }
.ip-app .ip-opp h3 { font: 700 clamp(24px, 2.2vw, 32px)/1.15 var(--font-body); color: var(--black); }
.ip-opp__num { color: var(--red-500); }
.ip-opp__desc { color: var(--grey-900); }
.ip-app .ip-opp__desc p + p { margin-top: 12px; }
.ip-opp__figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); margin: auto 0 0; padding-top: 24px; border-top: 1px solid var(--rule-hairline); }
.ip-opp__figures dt { margin-bottom: 10px; font: 600 12px/1.2 var(--font-body); text-transform: uppercase; color: var(--grey-750); }
.ip-opp__figures dd { margin: 0; font: 700 20px/1.2 var(--font-body); }
.ip-opp__figures dd.ip-stat { font: 800 clamp(22px, 1.8vw, 28px)/1.15 var(--font-display); }
.ip-opp .ip-chips { margin-top: 0; }
.ip-app .ip-opp .ip-chip--quiet { background: var(--white); }

/* ---- Single: original poster (Key Documents layout) ---- */
.ip-poster { padding-top: 0; }
.ip-poster__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px 108px; align-items: center; }
.ip-poster__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ip-app .ip-poster__text h2 { font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--font-body); }
.ip-poster__image { display: block; background: var(--grey-100); }
.ip-more__head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-bottom: 50px; }
/* "See all": the homepage's cta__link cta--arrow (bold uppercase, red underline, no arrow). */
.ip-app .ip-more__head a.cta__link.cta--arrow { padding: 0 0 5px; border-bottom: 2px solid var(--red-600); font: 700 16px/16px var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--black); }
.ip-app .ip-more__head a.cta__link.cta--arrow:hover { color: var(--red-600); }
.ip-more__head a.cta__link.cta--arrow i { display: none; }
.ip-app .ip-more__head h2 { font: 700 clamp(28px, 3vw, 47px)/1.1 var(--font-body); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .ip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .ip-app { --section-pad-y: 64px; --gap-grid: 20px; }
    .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-section-head { flex-direction: column; padding-bottom: 32px; }
    .ip-section-head h2, .ip-app .ip-section-head p { flex-basis: auto; }
    .ip-hairline { margin-bottom: 32px; }
    .ip-opps, .ip-poster__grid { grid-template-columns: 1fr; }
    .ip-filters { grid-template-columns: 1fr 1fr; }
    .ip-field--search { grid-column: 1 / -1; }
    .ip-field--sort { justify-content: flex-start; }
    /* The site header is fixed (75px) at this size and the hero starts under it. */
    .ip-hero__inner { min-height: 0; padding-top: calc(75px + 40px); padding-bottom: 56px; }
    .ip-library { scroll-margin-top: 75px; }
}
@media (max-width: 600px) {
    .ip-app { --section-pad-y: 48px; }
    .ip-wrap { padding-right: 16px; padding-left: 16px; }
    .ip-grid, .ip-filters, .ip-steps, .ip-opp__figures { grid-template-columns: 1fr; }
    .ip-field--sort select { flex: 1; min-width: 0; }
    .ip-card__body, .ip-opp, .ip-stat-card { padding-right: 20px; padding-left: 20px; }
    .ip-button { white-space: normal; height: auto; min-height: var(--button-h); line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
    .ip-text-button .ip-chevron { transition: none; }
}