:root {
     /* SIZING UNITS */
    --Sizing-Units-XL: 88px;
    --Sizing-Units-L: 66px;
    --Sizing-Units-M: 44px;
    --Sizing-Units-S: 36px;
    --Sizing-Units-XS: 26px;
    --Sizing-Units-2XS: 16px;
    --Sizing-Units-3XS: 8px;
    --Number-Scale-Margins-Desktop: 72px;
    --Number-Scale-Margins-Small-Desktop: 60px;
    --Number-Scale-Margins-Tablet: 36px;
    --Number-Scale-Margins-Mobile: 18px;

    /* BORDER RADII */
    --border-radius-btn: 20px;
    --border-radius-btn-mobile: 18px;
    --border-radius-img: 24px;
    --border-radius-img-mobile: 16px;

    /* BOX SHADOW */
    --box-shadow: 0 4px 4px rgba(12, 12, 13, .05), 0 16px 16px rgba(12, 12, 13, .10);

    /* CONTENT PADDING */
    --content-padding: var(--Number-Scale-Margins-Desktop);
    --content-margin-top: 26px;
    --content-padding-top: 200px;
    --content-padding-bottom: 50px;
    
    /* COLORS */
    --black: #000;
    --white: #fff;
    --gray: #aaa;
    --light: #ddd;

    /* --Electric-Green: #C3F800;
        --green: var(--Electric-Green); */
    --GivePower-Palette-Sweet-Water: #4ABFBF;
        --sweet-water: var(--GivePower-Palette-Sweet-Water);
    --GivePower-Palette-Sun-Yellow: #FFC300;
        --yellow: var(--GivePower-Palette-Sun-Yellow);
        --sun: var(--GivePower-Palette-Sun-Yellow);
    --GivePower-Palette-Ocean: #1A3242;
        --ocean: var(--GivePower-Palette-Ocean);
    --GivePower-Palette-Charcoal: #2B2B2B;
        --charcoal: var(--GivePower-Palette-Charcoal);
    --GivePower-Palette-Warm-White: #F6F2EF;
        --cream: var(--GivePower-Palette-Warm-White);

    /*
    --linear-gradient: linear-gradient(90deg, var(--sweet-water) 0%, #FEE900 56.73%, #F6F2EF 100%);
    --text-gradient: linear-gradient(90deg, var(--sweet-water), #FEE900);
    */
    
    --linear-gradient: linear-gradient(90deg, #FFC300 0%, #FFF5AD 79.81%);
    --text-gradient: linear-gradient(90deg, #FFC300, #FFF5AD);
    --Gradients-Button-Gradient-Blue: linear-gradient(0deg, #4ABFBF -0.65%, #71DCDC 99.35%);
        --btn-gradient-blue: var(--Gradients-Button-Gradient-Blue);
    --Gradients-Yellow-Button-Gradient: linear-gradient(0deg, #FFC300 -0.65%, #FFD753 99.35%);
        --btn-gradient-yellow: var(--Gradients-Yellow-Button-Gradient);

    /* FONTS */
    --font-headline: "futura-pt", sans-serif;
    --font-content: "Lato", sans-serif;

}

.foldable li.people-list_item {
    padding:0;
    background-color: transparent;
}

.foldable li.people-list_item div.people--img {
    justify-content: flex-start;
}

.foldable li.people-list_item div.item--details .h4,
.foldable li.people-list_item div.item--details p,
.foldable .item--details {
    text-align: left;
}

.foldable .moreDetails {
    display: none;
    margin: 0 0 26px;
    text-align: left;
}
.foldable .moreDetails *{
    color:var(--black);
}

.foldable li.people-list_item div.item--details > div {
    justify-content: flex-end;
}
.item--details.noheight{
    max-height:unset!important;
}

ul.people-list {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
    grid-column-gap: 22px;
    grid-row-gap: 56px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
    

.people-list_item .item--details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

li.people-list_item div.people--img {
    height: 188px;
    width: 188px;
    margin-bottom: 36px;
    display: flex;
    justify-content: center;
    border-radius: 188px;
}
li.people-list_item div.people--img img {
    width: 188px;
    height: 188px;
    object-fit: cover;
    border-radius: 188px;
}
li.people-list_item div.item--details > div {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
}

li.people-list_item div.item--details .h4 {
    color: var(--GivePower-Palette-Ocean);
    font-family: var(--font-content);
    font-size: 24px;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    line-height: 2.25rem;
}

li.people-list_item div.item--details p.title {
    margin-bottom: 26px;
    margin-top: 16px;
    font-family: var(--font-content);
    font-size: 18px;
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    line-height: 1.88rem;
    color: var(--GivePower-Palette-Ocean);
}
.morecontent span {
    display: none;
}

li.people-list_item .moreBtn,
li.people-list_item .lessBtn {
    color: var(--sweet-water);
    font-family: var(--font-content);
    font-size: 19px;
    font-size: 1.19rem;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    line-height: 1.88rem;
    letter-spacing: 0.57px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 0px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    position: relative;
    background-image: linear-gradient(var(--GivePower-Palette-Sweet-Water), var(--GivePower-Palette-Sweet-Water));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
    transition: all .2s ease, underline .5s ease-in-out;
    align-items: center;
}

li.people-list_item .moreBtn::after {
    content: "";
    background: url(/wp-content/uploads/Plus-Icon.svg) center center / contain no-repeat;
    height: 14px;
    width: 14px;
}

li.people-list_item .lessBtn::after {
    content: "";
    background: url(/wp-content/uploads/Minus-Icon.svg) center center / contain no-repeat;
    height: 14px;
    width: 14px;
}


@media only screen and (max-width: 1366px) {
    ul.people-list {
        grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
    }
}

@media only screen and (max-width: 992px) {
    ul.people-list {
        grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
    }
}
@media only screen and (max-width: 768px) {
    ul.people-list {
        grid-template-columns: minmax(0, 1fr);
        /* BugHerd 515 - 36px between See Bio and the next photo read as no
           break at all; 66px row gap, column gap unchanged. */
        gap: 66px 36px;
    }
    .foldable .moreDetails {
        margin: 0 0 16px;
    }
    /* BugHerd 418 - "MOBILE: Everything should be center aligned. See Figma screenshot"
       (/who-we-are/team/, Meet Leadership).
       At this breakpoint css/style.css:1162 gives .item--details align-items:center, which
       shrink-wraps the name and role blocks so single lines LOOK centred - but the text inside
       still inherits text-align:left from lines 77-87 above, so any line that wraps stays
       left-ragged. .moreDetails sits OUTSIDE .item--details, so it never shrink-wraps at all
       and renders full-width, fully left-aligned. Both are corrected here.
       Scoped with .people-container (emitted only by components/people/people.php:17) so it
       cannot reach the unrelated .foldable class that components/post-grids/post-grids.php:56
       also emits. Specificity beats the base rules without !important.
       The See Bio / Close toggle is deliberately NOT centred - the Figma keeps its label left
       and the +/- glyph right across the full card width. Desktop is untouched. */
    .people-container.foldable li.people-list_item div.item--details .h4,
    .people-container.foldable li.people-list_item div.item--details p.title,
    .people-container.foldable li.people-list_item .moreDetails {
        text-align: center;
    }
    li.people-list_item div.people--img img{
        /* BugHerd 514 - photos read small on phones; 246px is 164 * 1.5 and
           still clears the 342px grid track. */
        width: 246px;
        height: 246px;
    }
    li.people-list_item div.people--img {
        width: 246px;
        height: 246px;
        margin-bottom: 26px;
    }
    li.people-list_item div.item--details p.title{
        margin-bottom:16px;
        margin-top:16px;
    }
}