/* Rouse Refresh ESG page (Views/GrassRootNew.cshtml).
   Figma: "Environment, Social & Governance". Hero layout lives in hero.css;
   this file only owns the text sections below it.
   Sections stack full-width in a single column.
   Tiers: XLarge >=1440, Large 1000–<1440, Medium 750–<1000, Small <750.
   Section title is 40px down to 1000px, then 24px; always SemiBold. */
.rr-esg {
    --esg-navy: #171245;
    --esg-purple: #6a59fd;
    --esg-white: #f9f9f9;
    --esg-gutter: 72px;
    --esg-subtitle-size: 28px;
    --esg-heading-font: 'Archivo', sans-serif;
    --esg-body-font: 'Noto Sans', sans-serif;
    color: var(--esg-navy);
    background: var(--esg-white);
    font: 400 16px/1.15 var(--esg-body-font);
    letter-spacing: 0;
}

.rr-esg *,
.rr-esg *::before,
.rr-esg *::after {
    box-sizing: border-box;
}

.rr-esg__body {
    padding: 80px var(--esg-gutter);
}

.rr-esg__grid {
    --esg-section-gap: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--esg-section-gap);
    max-width: 1296px;
    margin: 0 auto;
}

.rr-esg__group > .rr-esg__block + .rr-esg__block {
    margin-top: var(--esg-section-gap);
}

.rr-esg__group > .rr-esg__block + .rr-esg__block--subsection {
    margin-top: 24px;
}

.rr-esg__block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    /* Keep anchored sections clear of the fixed header. */
    scroll-margin-top: 96px;
}

html.rr-refresh-page .rr-esg .rr-esg__title {
    margin: 0;
    color: inherit;
    font: 600 40px/1.05 var(--esg-heading-font) !important;
    letter-spacing: 0;
    text-transform: none;
}

html.rr-refresh-page .rr-esg .rr-esg__subtitle {
    margin: 0;
    color: inherit;
    font: 600 var(--esg-subtitle-size)/1.15 var(--esg-heading-font) !important;
    letter-spacing: 0;
    text-transform: none;
}

.rr-esg__rte {
    color: inherit;
    font: 400 16px/1.15 var(--esg-body-font);
    overflow-wrap: break-word;
}

    .rr-esg__rte > * {
        margin: 0;
    }

    .rr-esg__rte > * + * {
        margin-top: 24px;
    }

    .rr-esg__rte :is(p, li, span, strong) {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    /* Keep the navy colour for legacy paragraphs wrapped in <strong>. */
    .rr-esg__rte p > strong:only-child,
    .rr-esg__rte p > strong:only-child * {
        color: var(--esg-navy) !important;
    }

    .rr-esg__rte :is(ul, ol) {
        padding-left: 24px;
    }

    .rr-esg__rte ul {
        list-style: disc;
    }

    .rr-esg__rte li + li {
        margin-top: 12px;
    }

    /* "Our priorities" lists (a <ul> right after the "Our priorities:" paragraph) show as
       two balanced columns like the design. The Mitrataa lists have no preceding paragraph,
       so they stay single-column. Collapses to one column below 750px (see media query). */
    .rr-esg__rte p + ul {
        columns: 2;
        column-gap: 64px;
    }

    .rr-esg__rte p + ul li {
        break-inside: avoid;
    }

    /* Headings inside the body content use Noto Sans. */
    .rr-esg__rte :is(h3, h4, h5, h6) {
        color: inherit;
        font: 500 20px/1.05 var(--esg-body-font) !important;
    }

    /* Inner <h2> (e.g. an editor's column headers) — smaller than the section title. */
    .rr-esg__rte h2 {
        color: inherit;
        font: 600 24px/1.1 var(--esg-body-font) !important;
    }

    /* Editor-controlled multi-column layout: a <div class="row"> with child column
       divs renders as equal, responsive columns. Supports both the Bootstrap ".col"
       and a plain ".column" convention; collapses to one column on narrow screens. */
    .rr-esg__rte .row {
        display: flex;
        flex-wrap: wrap;
        gap: 48px;
        margin: 0;
    }

    .rr-esg__rte .row > * {
        flex: 1 1 300px;
        min-width: 0;
        padding: 0;
    }

    /* Lists inside an editor column stay single-column (the column is already narrow). */
    .rr-esg__rte .row p + ul {
        columns: 1;
    }

    .rr-esg__rte a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color .2s ease;
    }

        .rr-esg__rte a:hover,
        .rr-esg__rte a:focus-visible {
            color: var(--esg-purple) !important;
        }

        .rr-esg__rte a:focus-visible {
            outline: 2px solid var(--esg-purple);
            outline-offset: 2px;
        }

    .rr-esg__rte img {
        max-width: 100%;
        height: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .rr-esg__rte a {
        transition: none;
    }
}

@media (max-width: 1439.98px) {
    .rr-esg {
        --esg-gutter: 40px;
        --esg-subtitle-size: 24px;
    }

    .rr-esg__body {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media (max-width: 999.98px) {
    .rr-esg {
        --esg-gutter: 20px;
        --esg-subtitle-size: 20px;
    }

    .rr-esg__body {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    html.rr-refresh-page .rr-esg .rr-esg__title {
        font-size: 24px !important;
    }
}

@media (max-width: 749.98px) {
    .rr-esg {
        --esg-gutter: 16px;
        --esg-subtitle-size: 18px;
    }

    .rr-esg__body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .rr-esg__grid {
        --esg-section-gap: 48px;
    }

    .rr-esg__block {
        gap: 16px;
    }

    .rr-esg__rte :is(h3, h4, h5, h6) {
        font-size: 18px !important;
    }

    .rr-esg__rte p + ul {
        columns: 1;
    }
}