/**
 * Pow Wow 2026 — page styles
 * Scoped under #content-pow-wow-2026 to avoid leaking into impact / donate.
 */
#content-pow-wow-2026 {

    /* Mobile/tablet: centre all text. Hero-stage keeps its own alignment
       (badges already have text-align: left and beat this via specificity). */
    @media (max-width: 991.98px) {
        text-align: center;
    }

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

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

    /* Tighter container at the md breakpoint to match impact / donate */
    @media (min-width: 768px) and (max-width: 991px) {
        .container-md, .container-sm, .container {
            max-width: 720px;
        }
    }
}


/* ============================================================
 * Hero
 * Cyan-gradient stage with title lockup, dancer, star + date badges,
 * page heading, intro copy, and key event details. The dancer flows
 * in normal layout and drives the stage height; title lockup, badges
 * and date-badge absolute-overlay on top. Intro copy sits below the
 * stage on the same gradient background. Event-details paragraph
 * shows on desktop only — mobile uses the duplicate in #pow-wow-rsvp.
 * ============================================================ */
#pow-wow-hero {
    background: linear-gradient(to bottom, rgba(0, 255, 255, 1) 0%, rgba(0, 255, 255, 0.15) 100%);
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 35px;

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

    p{
        color: #000000;
    }

    .hero-stage {
        position: relative;
        text-align: center;
    }

    .hero-title-lockup {
        position: absolute;
        top: -3%;
        left: 0;
        width: 100%;
        max-width: unset;
        height: auto;
        display: block;
        z-index: 1;

        @media (min-width: 992px) {
            top: 4%;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .hero-dancer {
        position: relative;
        z-index: 2;
        max-width: 75%;
        height: auto;
        display: block;
        margin: 50px 0 0;

        @media (min-width: 992px) {
            width: min(60%, 660px);
            max-width: none;
            margin: 0 auto;
            left: -6%;
        }
    }

    .hero-badges {
        position: absolute;
        top: 19%;
        right: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        @media (min-width: 768px) {
            gap: 30px;
        }

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

    .hero-badge {
        display: flex;
        align-items: center;
        gap: 5px;
        @media (min-width: 768px) {
            gap: 10px;
        }
    }

    .hero-badge--star .star-burst {
        width: 20px;
        height: 20px;
        flex-shrink: 0;

        @media (min-width: 768px) {
            width: 36px;
            height: 36px;
        }

        @media (min-width: 992px) {
            width: 48px;
            height: 48px;
        }
    }

    .hero-badge__text {
        font-family: 'AksharBold', sans-serif;
        font-size: clamp(16px, 5vw, 22px);
        line-height: 1;
        color: #000;
        text-transform: uppercase;
        text-align: left;
        letter-spacing: -0.05em;

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

    .hero-badge--date {
        justify-content: center;
        margin-top: 25px;
        padding-bottom: 30px;

        @media (min-width: 992px) {
            position: absolute;
            top: 61%;
            right: 0;
            width: 280px;
            margin: 0;
            padding: 0;
            z-index: 4;
            rotate: 15deg;
        }

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

    .hero-badge--date .date-badge-img {
        display: block;
        width: 60%;
        height: auto;

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

    .hero-text {
        padding-top: 35px;

        @media (min-width: 992px) {
            padding-top: 50px;
        }

        h1 {
            font-size: 34px;
            line-height: 1.05;
            margin-bottom: 25px;
            text-transform: uppercase;


            @media (min-width: 768px) {
                font-size: 48px;
            }
            @media (min-width: 992px) {
                font-size: 60px;
                text-transform: unset;
                br{
                    display: none;
                }
            }
            @media (min-width: 1200px) {
                font-size: 66px;
            }
        }

        .intro-lead {
            font-family: 'AksharBold', sans-serif;
            font-size: 24px;
            line-height: 1.1;
            max-width: 250px;
            margin: 0 auto;

            @media (min-width: 768px) {
                font-size: 32px;
                max-width: 310px;
            }
            @media (min-width: 992px) {
                font-size: 40px;
                margin: 0;
                max-width: none;
            }
        }

        p {
            font-size: 18px;
            line-height: 1.2;
            max-width: 320px;
            margin: 0 auto 18px;

            @media (min-width: 768px) {
                font-size: 20px;
                max-width: 360px;
            }
            @media (min-width: 992px) {
                margin: 0;
                max-width: none;
            }
            @media (min-width: 1200px) {
                font-size: 24px;
            }
        }

        /* Hidden on mobile/tablet — duplicated in #pow-wow-rsvp .rsvp-event-details. */
        .event-details {
            display: none;
            font-family: 'AksharBold', sans-serif;
            font-size: 24px;
            line-height: 1.25;
            margin: 40px 0 0;

            @media (min-width: 992px) {
                display: block;
                font-size: 34px;
                font-weight: bold;
            }
        }
    }
}


/* ============================================================
 * RSVP
 * Pattern adapted from donate-2025.css .btn rules.
 * ============================================================ */
#pow-wow-rsvp {
    padding-top: 30px;
    padding-bottom: 35px;

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

    /* Mobile-only star-burst + event-details block (mirrors what the
       desktop hero shows). Hidden on desktop where the hero takes over. */
    .rsvp-event-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
        text-align: center;

        @media (min-width: 992px) {
            display: none;
        }

        .star-burst {
            width: 20px;
            height: auto;
            flex-shrink: 0;
            @media (min-width: 768px) {
                width: 36px;
            }
        }

        .event-details {
            font-family: 'AksharBold', sans-serif;
            font-size: 26px;
            line-height: 1.25;
            margin: 0;
            max-width: 340px;
        }
    }

    .rsvp-label {
        font-family: 'AksharBold', sans-serif;
        font-size: 26px;
        line-height: 1.25;
        max-width: 340px;
        margin: 0 auto 30px;

        @media (min-width: 992px) {
            font-size: 30px;
            font-weight: bold;
            max-width: none;
            margin: 0 0 20px;
        }
    }

    .btn-rsvp {
        display: inline-block;
        font-family: 'AksharSemiBold', sans-serif;
        color: #000;
        background-color: #EC2024;
        border: 3px solid #EC2024;
        border-radius: 6px;
        font-size: 32px;
        line-height: 1;
        padding: 15px 50px;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: all .3s ease;

        &:hover,
        &:focus {
            color: #EC2024;
            background-color: transparent;
        }
    }
}


/* ============================================================
 * Getting There
 * ============================================================ */
#pow-wow-getting-there {
    padding-top: 25px;
    padding-bottom: 40px;

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

    h2 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 14px;

        @media (min-width: 768px) {
            font-size: 32px;
        }
        @media (min-width: 992px) {
            font-size: 34px;
            line-height: 1;
        }
    }

    .getting-there-desc {
        font-size: 18px;
        line-height: 1.2;
        max-width: 340px;
        margin: 0 auto 40px;

        @media (min-width: 768px) {
            font-size: 20px;
            max-width: 380px;
        }
        @media (min-width: 992px) {
            margin: 0 0 30px;
            max-width: none;
        }

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

        a {
            color: #000;
            text-decoration: underline;
            text-underline-offset: 3px;

            &:hover { color: #EC2024; }
        }
    }

    .map-row {
        --bs-gutter-y: 25px;
    }

    .map-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
    }

    .location-callout {
        @media (min-width: 992px) {
            display: flex;
            padding-top: 100px;
        }
    }
    .location-callout__inner {
        position: relative;

        @media (min-width: 992px) {
            margin: 0 auto;
            padding-left: 55px;
        }

        .star-burst {
            display: none;

            @media (min-width: 992px) {
                display: block;
                position: absolute;
                left: 0;
                top: 4px;
                width: 38px;
                height: 38px;
            }
        }

        .callout-title {
            font-family: 'AksharBold', sans-serif;
            color: #EC2024;
            font-size: 28px;
            line-height: 1.05;
            margin-bottom: 0;
            text-transform: uppercase;

            @media (min-width: 768px) {
                font-size: 30px;
            }
        }

        .callout-address {
            font-family: 'AksharSemiBold', sans-serif;
            font-size: 24px;
            line-height: 1.2;
            margin-bottom: 0;

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


/* ============================================================
 * Follow Us / Partner Logo
 * ============================================================ */
#pow-wow-follow-us {
    padding-top: 10px;
    padding-bottom: 50px;

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

    .follow-label {
        font-family: 'AksharBold', sans-serif;
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 14px;

        @media (min-width: 992px) {
            font-size: 30px;
            font-weight: bold;
        }
    }

    .social-links {
        list-style: none;
        padding: 0;
        margin: 0 0 35px;
        display: flex;
        gap: 14px;
        justify-content: center;

        @media (min-width: 992px) {
            justify-content: flex-start;
        }

        li { margin: 0; }

        a {
            display: block;
            width: 56px;
            height: 56px;
            transition: transform .2s ease;

            &:hover { transform: scale(1.08); }

            @media (min-width: 992px) {
                width: 42px;
                height: 42px;
            }
        }

        svg {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .partner-logo {
        margin: 20px auto 0;
        max-width: 160px;

        @media (min-width: 768px) {
            max-width: 180px;
        }
        @media (min-width: 992px) {
            margin-left: 0;
            margin-right: 0;
        }

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


/* ============================================================
 * Gallery
 * Three past-event thumbnails. Container is widened ~120px past
 * the Bootstrap default on tablet+ so the row breathes more.
 * Items hold a 440:295 ratio regardless of source dimensions.
 * ============================================================ */
#pow-wow-gallery {
    padding-bottom: 50px;

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

    .container {
        @media (min-width: 768px) {
            max-width: 840px;
        }
        @media (min-width: 992px) {
            max-width: 1080px;
        }
        @media (min-width: 1200px) {
            max-width: 1260px;
        }
    }

    .gallery-row {
        --bs-gutter-y: 20px;

        @media (min-width: 768px) {
            --bs-gutter-x: 10px;
        }
        @media (min-width: 992px) {
            --bs-gutter-x: 1.75rem;
            --bs-gutter-y: 1.75rem;
        }
    }

    .pow-wow-gallery-item img {
        width: 100%;
        aspect-ratio: 440 / 295;
        object-fit: cover;
        display: block;
    }
}