/*
 * Member Stories
 *
 * Colours and radii are the site's own, measured off /health-journey/longevity/
 * on 2026-08-21 rather than picked: #3E908A primary, #194C47 deep, #D0EBE9 card
 * border, #363636 body, #1E1E1E headings. Cards use the site's 20px radius and
 * buttons its 500px pill - the two are deliberately far apart on this site, and
 * anything in between reads as a mistake.
 *
 * Nesting matches the other sections in this theme (see review-carousel.css).
 */

.member_stories_section {

    & .section_top {
        max-width: 80rem;
        margin: 0 auto 4rem;
        text-align: center;

        & h2 {
            color: #1E1E1E;
            margin: 0 0 1.5rem;
        }

        & .intro {
            color: #363636;
        }
    }

    /* --- filters ------------------------------------------------------- */

    & .member_filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 4rem;

        & .filter_tag {
            background: #fff;
            color: #3E908A;
            border: 1px solid #3E908A;
            border-radius: 500px;
            padding: 10px 24px;
            font-family: Manrope, sans-serif;
            font-weight: 300;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            transition: background-color .2s ease, color .2s ease;

            &:hover {
                background: #D0EBE9;
            }

            /* The active filter inverts rather than changing hue, so the control
               reads as selected without introducing a colour the site does not use. */
            &.active {
                background: #3E908A;
                color: #fff;
            }
        }
    }

    /* --- grid ---------------------------------------------------------- */

    & .member_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;

        @media (max-width: 1199px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }
    }

    /* Display rather than visibility, so a hidden card takes no grid cell and
       the remaining cards reflow instead of leaving holes when a filter runs. */
    & .member_card.is_hidden {
        display: none;
    }

    & .member_card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #D0EBE9;
        border-radius: 20px;
        padding: 40px 30px;

        /* Roboto 400 at a card scale, not Manrope 700. BRAND.md is explicit that this
           site gets its hierarchy from family and scale rather than weight - "a new
           section that reaches for font-weight: 700 will not match anything else on
           the site" - and nothing on Longevity sets a body weight above 300. */
        & .member_headline {
            color: #1E1E1E;
            font-family: Roboto, sans-serif;
            font-weight: 400;
            font-size: 20px;
            line-height: 28px;
            margin: 0 0 1.5rem;
        }

        & .member_quote {
            /* The theme fills blockquote with the primary teal and hangs a glyph off
               it. That is right for one pulled quote and wrong for nine stacked in
               cards, so every decoration is reset rather than inherited. */
            background: none;
            color: #363636;
            font-family: Manrope, sans-serif;
            font-weight: 300;
            font-size: 18px;
            line-height: 27px;
            margin: 0 0 2rem;
            padding: 0;
            border: 0;
            quotes: none;

            &::before, &::after { content: none; display: none; }

            /* Pushes the tags and the attribution to the card foot without inflating
               the box, so cards in a row end level however long the quote runs. */
            margin-bottom: auto;
            padding-bottom: 2rem;
        }

        & .member_treatments {
            display: flex;
            flex-wrap: wrap;
            gap: .6rem;
            margin: 0 0 2rem;
            padding: 0;

            /* The theme sets list-style on the LI, not the UL, so list-style:none on
               the parent never won and every tag carried a bullet. Set it where the
               theme sets it, and stop the li being a list-item at all. */
            & li {
                list-style: none;
                display: inline-block;
                margin: 0;
                padding: 0;

                &::marker { content: none; }
                &::before { content: none; }
            }

            & li a {
                display: inline-block;
                background: #F0F0F1;
                color: #194C47;
                border-radius: 500px;
                padding: 5px 14px;
                font-family: Manrope, sans-serif;
                font-weight: 300;
                font-size: 13px;
                line-height: 1.4;
                text-decoration: none;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background: #3E908A;
                    color: #fff;
                }
            }
        }

        /* --- attribution ------------------------------------------------- */

        & .member_meta {
            display: flex;
            align-items: center;
            gap: 1.6rem;
            margin-top: auto;
            padding-top: 2rem;
            border-top: 1px solid #D0EBE9;
        }

        & .member_avatar {
            flex: 0 0 auto;
            width: 88px;
            height: 88px;
            border-radius: 50%;
            overflow: hidden;
            background: #D0EBE9;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* Faces sit high in a phone portrait, so a centred square crop takes
                   the torso. 35% down holds the head across this set. */
                object-position: 50% 35%;
                display: block;
            }

            /* A member with no photo. A monogram in the card-border teal keeps the
               row level and reads as deliberate, which a missing image does not. */
            &.is_monogram {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #194C47;
                font-family: Roboto, sans-serif;
                font-weight: 400;
                font-size: 32px;
                line-height: 1;
            }
        }

        & .member_identity {
            min-width: 0;

            & .member_name {
                color: #1E1E1E;
                font-family: Roboto, sans-serif;
                font-weight: 400;
                font-size: 20px;
                line-height: 1.2;
                margin: 0;
            }

            & .member_area {
                color: #3E908A;
                font-family: Roboto, sans-serif;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: .04em;
                margin: .4rem 0 0;
            }
        }
    }

    /* --- load more ------------------------------------------------------ */

    & .member_load_more_wrap,
    & .call_to_action_buttons {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 4rem;
        flex-wrap: wrap;
    }
}