/**
 * Elder Teachings 2026 — page styles
 * Scoped under #content-elder-teachings-2026 to avoid leaking into
 * impact / donate / pow-wow.
 *
 * Sections: #teepee-teachings, #medicinal-plants, #grandfather-teachings.
 * Brand red: #EC2024 (canonical). Heading/body ink: #222221.
 */
#content-elder-teachings-2026 {

    /* Mobile/tablet: centre all copy. Desktop layout is left-aligned. */
    @media (max-width: 991.98px) {
        text-align: center;
    }

    h1, h2, h3 {
        font-family: 'AksharBold', sans-serif;
        line-height: 1.05;
        color: #222221;
    }

    p {
        font-family: 'MontserratRegular', sans-serif;
        line-height: 1.5;
        color: #222221;
    }

    /* Tighter container at the md breakpoint, matching the other 2025/26 pages. */
    @media (min-width: 768px) and (max-width: 991px) {
        .container-md, .container-sm, .container {
            max-width: 720px;
        }
    }

    /* Shared section heading + intro copy.
       On desktop, indent by the teaching number column (44px min-width +
       12px gap) so every section heading aligns with the teaching body
       text rather than with the red number. */
    .section-intro {
        @media (min-width: 992px) {
            padding-left: 85px;
        }

        h1, h2 {
            font-size: 32px;
            text-transform: uppercase;
            margin-bottom: 12px;

            @media (min-width: 768px) {
                font-size: 40px;
            }
            @media (min-width: 992px) {
                font-size: 48px;
            }
        }

        p {
            font-family: 'AksharSemiBold', sans-serif;
            font-size: 20px;
            max-width: 540px;
            margin: 0 auto;
            line-height: 1.2;

            @media (min-width: 992px) {
                font-size: 22px;
                max-width: 590px;
                margin: 0;
            }
        }
    }
}


/* ============================================================
 * Teepee Teachings
 * Heading + intro, the three-teepee illustration, and the
 * fifteen-pole teachings list (two columns on desktop).
 * ============================================================ */
#teepee-teachings {
    padding-top: 40px;
    padding-bottom: 50px;

    @media (min-width: 992px) {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .teepee-image {

        margin: 28px auto 40px;

        @media (min-width: 992px) {
            margin: 45px auto 60px;
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .teachings-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Desktop: one list flowed into two balanced columns. break-inside:
       avoid on each item keeps a single teaching from splitting across the
       column gap. */
    .teachings-columns {
        @media (min-width: 992px) {
            column-count: 2;
            column-gap: 60px;
        }
    }

    .teaching-item {
        display: flex;
        gap: 12px;
        text-align: left;
        margin-bottom: 24px;
        break-inside: avoid;

        &:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 992px) {
            margin-bottom: 36px;
        }
    }

    .teaching-num {
        flex-shrink: 0;
        min-width: 38px;
        font-family: 'AksharBold', sans-serif;
        font-size: 26px;
        line-height: 1;
        color: #EC2024;
        text-align:end;

        @media (min-width: 992px) {
            min-width: 73px;
            font-size: 54px;
            padding-right: 10px;
        }
    }

    .teaching-title {
        font-size: 22px;
        line-height: 1.1;
        margin-bottom: 0;

        @media (min-width: 992px) {
            font-size: 26px;
        }
    }

    .teaching-body p {
        font-size: 18px;
        line-height: 1.45;
        margin: 0;
    }
}


/* ============================================================
 * Sacred Medicinal Plants
 * Four plant cards arced around a dreamcatcher ring that bleeds
 * off the left edge of the screen.
 * ============================================================ */
#medicinal-plants {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 50px;

    @media (min-width: 992px) {
        padding-top: 60px;
        padding-bottom: 90px;
    }

    .container {
        position: relative;
        z-index: 1;
    }

    .plants-list {
        margin-top: 35px;

        @media (min-width: 992px) {
            position: relative;
            margin-top: 55px;
        }
    }

    /* Dreamcatcher ring — a thick pale circle, vertically centred behind
       the plant cards. Its negative left offset runs the ring off the left
       edge of the screen (clipped by the section's overflow: hidden).
       Desktop only. */
    .dreamcatcher-circle {
        display: none;

        @media (min-width: 992px) {
            display: block;
            position: absolute;
            z-index: 0;
            top: 50%;
            left: -240px;
            width: 420px;
            height: 420px;
            border: 40px solid #EDEDED;
            border-radius: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        @media (min-width: 1200px) {
            left: -325px;
            width: 560px;
            height: 560px;
            border-width: 52px;
        }
    }

    /* The dreamcatcher line-art — small, centred inside the ring. */
    .dreamcatcher-art {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: auto;
        transform: translate(-50%, -50%);

        @media (min-width: 1200px) {
            width: 195px;
        }
    }

    .plant-item {
        position: relative;
        z-index: 1;
        margin-bottom: 40px;

        &:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 992px) {
            display: flex;
            align-items: center;
            margin-bottom: 28px;
            gap: 20px;
        }
    }

    .plant-image {
        margin-bottom: 14px;

        @media (min-width: 992px) {
            flex-shrink: 0;
            width: var(--plant-w, 240px);
            margin-bottom: 0;
        }

        img {
            width: 190px;
            height: auto;
            display: inline-block;

            @media (min-width: 992px) {
                width: 100%;
            }
        }
    }

    .plant-body {
        @media (min-width: 992px) {
            max-width: 430px;
            hyphens: auto;
        }

        h3 {
            font-size: 22px;
            text-transform: uppercase;
            margin-bottom: 0;

            @media (min-width: 992px) {
                font-size: 24px;
            }
        }

        p {
            font-size: 18px;
            margin: 0;
        }
    }

    /* Desktop: per-plant image width (--plant-w) + arc offset (margin-left).
       Sage is the smallest cut-out; tobacco/cedar/sweetgrass are larger.
       Every card clears the ring's right edge (no overlap); the middle two
       sit a touch further right than the sage and sweetgrass at the ends. */
    @media (min-width: 992px) {
        .plant-item--sage       { --plant-w: 180px; margin-left: 100px; }
        .plant-item--tobacco    { --plant-w: 240px; margin-left: 215px; }
        .plant-item--cedar      { --plant-w: 255px; margin-left: 225px; }
        .plant-item--sweetgrass { --plant-w: 225px; margin-left: 70px; }
    }

    @media (min-width: 1200px) {
        .plant-item--sage       { --plant-w: 230px; margin-left: 110px; }
        .plant-item--tobacco    { --plant-w: 300px; margin-left: 275px; }
        .plant-item--cedar      { --plant-w: 320px; margin-left: 330px; }
        .plant-item--sweetgrass { --plant-w: 285px; margin-left: 85px; }
    }
}


/* ============================================================
 * Grandfather Teachings
 * Animal cut-out + connector line + grey teaching panel with a
 * red title.
 *
 * Desktop layout: every row is packed to the right (justify-content:
 * flex-end) and the grey panel has a fixed width, so all panels share
 * the same left edge — a single column down the right half of the page.
 * The animal cut-out and connector sit to its left; both grow row by
 * row, so the animals step from right to left and from small to large
 * (eagle -> buffalo) while the connector lines lengthen short -> long.
 * ============================================================ */
#grandfather-teachings {
    padding-top: 40px;
    padding-bottom: 60px;

    /* Clips the scrollbar-width overshoot from the right-bleeding panels
       (see .animal-body) so no horizontal scrollbar appears. */
    overflow-x: hidden;

    @media (min-width: 992px) {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .animals-list {
        margin-top: 35px;

        @media (min-width: 992px) {
            margin-top: 55px;
        }
    }

    .animal-item {
        margin-bottom: 45px;

        &:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 992px) {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 18px;
        }
    }

    /* Desktop: each cut-out is a fixed size (--animal-w) — never scaled
       down and never masked, so the image always holds the WHOLE animal.
       The row is packed to the right, so when a big animal cannot fit it
       simply overflows the LEFT of the page and runs off the screen edge
       (clipped by the section's overflow-x: hidden). A wide desktop shows
       the whole animal; a narrower one lets its tail/back run off-screen. */
    .animal-image {
        margin-bottom: 16px;

        @media (min-width: 992px) {
            flex-grow: 0;
            flex-shrink: 0;
            width: var(--animal-w, 360px);
            margin-bottom: 0;
        }

        img {
            width: 230px;
            height: auto;
            display: inline-block;

            @media (min-width: 992px) {
                width: 100%;
                display: block;
            }
        }
    }

    /* Eagle, wolf and bear face left in the source photos; flip them so
       every animal faces the copy on the right. (Buffalo already faces it.) */
    .animal-item--eagle .animal-image img,
    .animal-item--wolf  .animal-image img,
    .animal-item--bear  .animal-image img {
        transform: scaleX(-1);
    }

    .animal-connector {
        display: none;

        @media (min-width: 992px) {
            display: block;
            flex-shrink: 0;
            width: var(--connector-w, 80px);
            height: 2px;
            background-color: #222221;
            margin-right: 10px;
        }
    }

    .animal-body {
        background-color: #EDEDED;
        padding: 22px 26px;

        /* Desktop: the panel's left edge stays fixed (the aligned column)
           while the grey bleeds off the right of the centred container out
           to the browser edge. The bleed distance is "50vw - 50%" (half the
           viewport minus half the row width). width gains that bleed and the
           negative margin-right pulls the right edge out by the same amount,
           so the left edge — and the flex layout of image + connector — are
           left untouched.
           The panel is a fixed-height block with the copy vertically
           centred, so every panel matches and the top/bottom padding stays
           even regardless of how many lines the copy runs. */
        @media (min-width: 992px) {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 180px;
            width: calc(440px + 50vw - 50%);
            margin-right: calc(50% - 50vw);
            padding: 22px 32px;
        }

        @media (min-width: 1200px) {
            width: calc(520px + 50vw - 50%);
        }

        h3 {
            color: #EC2024;
            font-size: 24px;
            text-transform: uppercase;
            margin-bottom: 0;

            @media (min-width: 992px) {
                font-size: 28px;
            }
        }

        p {
            font-size: 18px;
            margin: 0;
        }

        /* Keep the copy in a column on the left of the panel even though
           the grey extends to the browser edge. */
        h3, p {
            @media (min-width: 992px) {
                max-width: 440px;
            }
        }
    }

    /* Per-animal cut-out width (--animal-w) + connector length
       (--connector-w): small/short for the eagle, large/long for the
       buffalo. The full design sizes apply from 1200px up; below that they
       step down a little. The big animals run off the left screen edge on
       narrower viewports and come fully into view on a large desktop. */
    @media (min-width: 992px) {
        .animal-item--eagle   { --animal-w: 240px; --connector-w: 65px; }
        .animal-item--wolf    { --animal-w: 300px; --connector-w: 105px; }
        .animal-item--bear    { --animal-w: 450px; --connector-w: 140px; }
        .animal-item--buffalo { --animal-w: 580px; --connector-w: 180px; }
    }

    @media (min-width: 1200px) {
        .animal-item--eagle   { --animal-w: 240px; --connector-w: 90px; }
        .animal-item--wolf    { --animal-w: 350px; --connector-w: 140px; }
        .animal-item--bear    { --animal-w: 480px; --connector-w: 185px; }
        .animal-item--buffalo { --animal-w: 700px; --connector-w: 235px; }
    }
}