/* =========================================================
   PACKAGES PAGE
   Loads AFTER homepage.css
========================================================= */


/* =========================================================
   HERO
========================================================= */

#homepage-wrapper.packages-page .packages-hero {
    position: relative;
    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-color: #171d20;

    background-image:
        linear-gradient(
            rgba(15, 16, 19, .24),
            rgba(15, 16, 19, .52)
        ),
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/packages-hero-scaled.webp');

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: #fff;
}

#homepage-wrapper.packages-page .packages-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12, 14, 16, .10),
            rgba(12, 14, 16, .42)
        );

    pointer-events: none;
}

#homepage-wrapper.packages-page .packages-hero-inner {
    position: relative;
    z-index: 2;

    text-align: center;
}

#homepage-wrapper.packages-page .packages-hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(36px, 4vw, 68px);
    font-weight: 400;

    line-height: .95;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page .packages-hero h1 span,
#homepage-wrapper.packages-page .packages-hero h1 strong {
    display: block;
}

#homepage-wrapper.packages-page .packages-hero h1 strong {
    color: var(--orange);
    font-size: 1.08em;
}

#homepage-wrapper.packages-page .packages-hero p {
    margin: 25px 0 0;

    color: #fff;
    font-size: 14px;
}

#homepage-wrapper.packages-page .packages-hero p small {
    font-size: inherit;
}


/* =========================================================
   MAIN PACKAGE AREA
========================================================= */

#homepage-wrapper.packages-page .packages-main {
    position: relative;

    padding: 65px 0 55px;

    background: #203238;

    overflow: hidden;
}


/* =========================================================
   INTRO
   Pattern appears once and fades into package section
========================================================= */

#homepage-wrapper.packages-page .packages-intro {
    position: relative;
    z-index: 1;

    width: min(900px, 100%);

    margin: -65px auto 0;

    padding:
        65px
        20px
        70px;

    color: #fff;
    text-align: center;
}

#homepage-wrapper.packages-page .packages-intro::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    z-index: -1;

    width: 100vw;

    transform: translateX(-50%);

    background-image:
        /* Keep the original gradient */
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.18) 38%,
            rgba(32, 50, 56, 0.72) 78%,
            rgba(32, 50, 56, 1) 100%
        ),

        /* Darken only the image underneath */
        linear-gradient(
            rgba(0, 0, 0, 0.88),
            rgba(0, 0, 0, 0.88)
        ),

        url("https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/packages-pattern.webp");

    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center top, center top, center top;
    background-size: 100% 100%, 100% 100%, cover;

    filter: none;
}

#homepage-wrapper.packages-page .packages-intro h2 {
    margin: 0 0 30px;

    color: #fff;

    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 900;

    line-height: .98;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page .packages-intro h2 span {
    color: var(--orange);
}

#homepage-wrapper.packages-page .packages-intro p {
    max-width: 850px;

    margin: 16px auto;

    color: rgba(255,255,255,.94);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   PACKAGE GRID
========================================================= */

#homepage-wrapper.packages-page .packages-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 28px;

    width: min(1250px, 100%);

    margin: 0 auto;
}


/* =========================================================
   CARD BASE
========================================================= */

#homepage-wrapper.packages-page .packages-card {
    grid-column: span 2;

    position: relative;

    width: 100%;
    min-height: 485px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 28px 28px 25px;

    border-radius: 12px;

    background-color: transparent;

    color: #fff;
}

#homepage-wrapper.packages-page .packages-card > * {
    position: relative;
    z-index: 3;
}


/* =========================================================
   IMAGE LAYER
========================================================= */

#homepage-wrapper.packages-page
.packages-card:not(.packages-card-addons)::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        var(--package-card-image);

    background-repeat:
        no-repeat;

    background-position:
        var(
            --package-card-position,
            left center
        );

    background-size:
        var(
            --package-card-size,
            100% 100%
        );

    pointer-events: none;
}


/* =========================================================
   LIGHT TINT
========================================================= */

#homepage-wrapper.packages-page
.packages-card:not(.packages-card-addons)::before {
    content: "";

    position: absolute;
    inset: 8px;

    z-index: 1;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.01) 0%,
            rgba(0,0,0,.02) 42%,
            rgba(0,0,0,.12) 100%
        );

    pointer-events: none;
}


/* =========================================================
   FIRST 3 CARDS
   Source images already include their border/frame
========================================================= */

#homepage-wrapper.packages-page .packages-card-quick,
#homepage-wrapper.packages-page .packages-card-hat,
#homepage-wrapper.packages-page .packages-card-touch {
    border: 0;

    background: transparent;

    box-shadow: none;
}

#homepage-wrapper.packages-page .packages-card-quick::after,
#homepage-wrapper.packages-page .packages-card-hat::after,
#homepage-wrapper.packages-page .packages-card-touch::after {
    inset: 0;

    border-radius: 12px;

    background-position: left center;
    background-size: 100% 100%;
}


/* QUICK FIX */

#homepage-wrapper.packages-page .packages-card-quick {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/08/quick-fix.png');

    --package-card-position: left center;
    --package-card-size: 100% 100%;
}


/* HAT TRICK */

#homepage-wrapper.packages-page .packages-card-hat {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/08/hat-trick.png');

    --package-card-position: left center;
    --package-card-size: 100% 100%;
}


/* TOUCHDOWN */

#homepage-wrapper.packages-page .packages-card-touch {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/08/touch-down.png');

    --package-card-position: left center;
    --package-card-size: 100% 100%;
}


/* =========================================================
   FIRST 3 BUTTON SPACING
========================================================= */

#homepage-wrapper.packages-page .packages-card-quick .packages-book,
#homepage-wrapper.packages-page .packages-card-hat .packages-book,
#homepage-wrapper.packages-page .packages-card-touch .packages-book {
    margin-top: 18px;
    margin-bottom: 14px;
}


/* =========================================================
   SECOND GROUP
   These images need CSS frames
========================================================= */

#homepage-wrapper.packages-page .packages-card-minor,
#homepage-wrapper.packages-page .packages-card-hole,
#homepage-wrapper.packages-page .packages-card-pistols,
#homepage-wrapper.packages-page .packages-card-machine {
    border:
        2px solid
        #707475;

    border-radius: 12px;

    background: #151515;

    box-shadow:
        inset
        0 0 0 2px
        rgba(255,255,255,.03);
}


/* =========================================================
   SECOND GROUP IMAGE FIT
   Large subject on LEFT like reference
========================================================= */

#homepage-wrapper.packages-page .packages-card-minor::after,
#homepage-wrapper.packages-page .packages-card-hole::after,
#homepage-wrapper.packages-page .packages-card-pistols::after,
#homepage-wrapper.packages-page .packages-card-machine::after {
    inset: 4px;

    border-radius: 8px;

    background-repeat: no-repeat;
    /*
    Scale by HEIGHT, not by width.
    This keeps the subjects large and allows
    horizontal cropping like the reference.
    */
    background-size: auto 100%;
}


/* =========================================================
   MINOR LEAGUES
========================================================= */

#homepage-wrapper.packages-page .packages-card-minor {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/minor-leagues.webp');
}

#homepage-wrapper.packages-page .packages-card-minor::after {
    background-position:
        -100px center !important;
}


/* =========================================================
   HOLE IN ONE
========================================================= */

#homepage-wrapper.packages-page .packages-card-hole {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/hole-in-one.webp');
}

#homepage-wrapper.packages-page .packages-card-hole::after {
    background-position:
        -100px center !important;
}


/* =========================================================
   PISTOLS
========================================================= */

#homepage-wrapper.packages-page .packages-card-pistols {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/pistols.webp');
}

#homepage-wrapper.packages-page .packages-card-pistols::after {
    background-position:
        -100px center !important;
}


/* =========================================================
   MACHINE GUNS
========================================================= */

#homepage-wrapper.packages-page .packages-card-machine {
    --package-card-image:
        url('https://lasvegasshootingcenter.com/wp-content/uploads/2026/09/machine-guns.webp');

    grid-column:
        2 / span 2;
}

#homepage-wrapper.packages-page .packages-card-machine::after {
    /*
    Position source from the right,
    then flip it so the gun appears on the LEFT.
    */
    background-position:
        50px center !important;

    background-size:
        auto 100%;

    transform:
        scaleX(-1);

    transform-origin:
        center;
}


/* =========================================================
   SECOND GROUP CONTENT POSITION
========================================================= */

#homepage-wrapper.packages-page .packages-card-minor .packages-card-title,
#homepage-wrapper.packages-page .packages-card-hole .packages-card-title,
#homepage-wrapper.packages-page .packages-card-pistols .packages-card-title,
#homepage-wrapper.packages-page .packages-card-machine .packages-card-title {
    padding-left: 32%;
}

#homepage-wrapper.packages-page .packages-card-minor .packages-card-price,
#homepage-wrapper.packages-page .packages-card-hole .packages-card-price,
#homepage-wrapper.packages-page .packages-card-pistols .packages-card-price,
#homepage-wrapper.packages-page .packages-card-machine .packages-card-price {
    padding-left: 38%;
}

#homepage-wrapper.packages-page .packages-card-minor .packages-card-meta,
#homepage-wrapper.packages-page .packages-card-hole .packages-card-meta,
#homepage-wrapper.packages-page .packages-card-pistols .packages-card-meta,
#homepage-wrapper.packages-page .packages-card-machine .packages-card-meta {
    padding-left: 36%;
}


/* Machine Gun title needs slightly less offset */

#homepage-wrapper.packages-page .packages-card-machine .packages-card-title {
    padding-left: 20%;
}


/* =========================================================
   PACKAGE TITLE
========================================================= */

#homepage-wrapper.packages-page .packages-card-title {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    width: 100%;

    margin: 0;

    color: #fff;

    text-align: right;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page .packages-card-title strong {
    display: block;

    max-width: 95%;

    color: #fff;

    font-family:
        "Gotham Ultra",
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            35px,
            3vw,
            52px
        );

    font-weight: 900;
    font-style: italic;

    line-height: .86;

    letter-spacing: -.025em;
}

#homepage-wrapper.packages-page .packages-card-title > span {
    display: block;

    color: #fff;

    font-size:
        clamp(
            27px,
            2.4vw,
            41px
        );

    font-weight: 300;

    line-height: 1;

    text-align: right;
}

#homepage-wrapper.packages-page .packages-card-title-single strong {
    font-size:
        clamp(
            36px,
            3vw,
            51px
        );
}

#homepage-wrapper.packages-page
.packages-card-title-single
strong span {
    font-weight: 300;
    font-style: normal;
}


/* =========================================================
   PRICE
========================================================= */

#homepage-wrapper.packages-page .packages-card-price {
    display: flex;

    justify-content: flex-end;
    align-items: flex-start;

    width: 100%;

    gap: 3px;

    margin-top: 25px;

    color: #fff;
}

#homepage-wrapper.packages-page .packages-card-price .currency {
    position: relative;

    top: 7px;

    color: var(--orange);

    font-size: 30px;
    font-weight: 800;
}

#homepage-wrapper.packages-page .packages-card-price strong {
    color: #fff;

    font-size:
        clamp(
            50px,
            4vw,
            70px
        );

    font-weight: 800;

    line-height: .9;
}


/* =========================================================
   META
========================================================= */

#homepage-wrapper.packages-page .packages-card-meta {
    width: 100%;

    margin-top: auto;
    margin-bottom: 20px;
}

#homepage-wrapper.packages-page .packages-card-meta > div {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 8px;

    margin: 6px 0;

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: .07em;

    text-align: right;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page .packages-card-meta > div > img {
    width: 23px;
    height: auto;
}

#homepage-wrapper.packages-page .packages-bullets {
    display: inline-flex;

    align-items: center;

    gap: 2px;
}

#homepage-wrapper.packages-page .packages-bullets img {
    width: 8px;
    height: auto;
}


/* =========================================================
   BOOK BUTTON
========================================================= */

#homepage-wrapper.packages-page .packages-book {
    width: 100%;

    min-height: 48px;

    margin-bottom: 2px;
}


/* Keep second group buttons full width */

#homepage-wrapper.packages-page .packages-card-minor .packages-book,
#homepage-wrapper.packages-page .packages-card-hole .packages-book,
#homepage-wrapper.packages-page .packages-card-pistols .packages-book,
#homepage-wrapper.packages-page .packages-card-machine .packages-book {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   ADD ONS CARD
========================================================= */

#homepage-wrapper.packages-page .packages-card-addons {
    grid-column:
        4 / span 2;

    min-height: 485px;

    display: flex;
    flex-direction: column;

    padding:
        32px
        34px
        32px;

    border:
        2px solid
        #707475;

    border-radius: 12px;

    background: #151b1e;

    box-shadow:
        inset
        0 0 0 2px
        rgba(255,255,255,.03);
}


/* =========================================================
   ADD ONS TITLE
========================================================= */

#homepage-wrapper.packages-page
.packages-card-addons
.packages-card-title {
    align-items: flex-start;

    text-align: left;
}

#homepage-wrapper.packages-page
.packages-card-addons
.packages-card-title-single
strong {
    display: flex;

    align-items: baseline;

    max-width: 100%;

    color: #fff;

    font-family:
        "Gotham Ultra",
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            36px,
            3vw,
            52px
        );

    font-weight: 900;
    font-style: italic;

    line-height: .9;

    white-space: nowrap;
}

#homepage-wrapper.packages-page
.packages-card-addons
.packages-card-title-single
strong span {
    margin-left: 5px;

    font-family:
        Arial,
        sans-serif;

    font-size: .78em;

    font-weight: 300;
    font-style: normal;
}


/* =========================================================
   ADD ONS LIST
   Fills full card height
========================================================= */

#homepage-wrapper.packages-page .packages-addons-list {
    flex: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    gap: 10px;

    margin:
        18px
        0
        0;
}

#homepage-wrapper.packages-page
.packages-addons-list > div {
    position: relative;

    width: 100%;

    margin: 0;

    padding-left: 28px;
}

#homepage-wrapper.packages-page
.packages-addons-list > div::before {
    content: "+";

    position: absolute;

    left: 0;
    top: 2px;

    width: 18px;
    height: 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--orange);

    color: #fff;

    font-size: 13px;
    font-weight: 900;

    line-height: 1;
}

#homepage-wrapper.packages-page
.packages-addons-list strong,
#homepage-wrapper.packages-page
.packages-addons-list span {
    display: block;
}

#homepage-wrapper.packages-page
.packages-addons-list strong {
    margin: 0 0 5px;

    color: var(--orange);

    font-size:
        clamp(
            14px,
            1.3vw,
            19px
        );

    font-weight: 600;

    letter-spacing: .08em;

    line-height: 1.2;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page
.packages-addons-list span {
    color: #fff;

    font-size:
        clamp(
            13px,
            1.2vw,
            18px
        );

    font-weight: 500;

    letter-spacing: .08em;

    line-height: 1.2;

    text-transform: uppercase;
}


/* =========================================================
   REVIEW LINE
========================================================= */

#homepage-wrapper.packages-page .packages-review-line {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    width:
        min(
            1250px,
            100%
        );

    margin:
        55px auto
        0;

    padding-top:
        25px;

    border-top:
        1px solid
        var(--orange);

    color: #fff;

    font-size: 18px;
}

#homepage-wrapper.packages-page
.packages-review-line strong {
    color: #fff;

    font-weight: 800;

    text-transform: uppercase;
}

#homepage-wrapper.packages-page
.packages-review-line
> span:nth-of-type(1),

#homepage-wrapper.packages-page
.packages-review-line
> span:nth-of-type(3) {
    color: var(--orange);
}


/* =========================================================
   SHARED HOMEPAGE CTA
========================================================= */

#homepage-wrapper.packages-page .cta-band {
    width: 100%;
}


/* =========================================================
   SHARED TESTIMONIAL SECTION
========================================================= */

#homepage-wrapper.packages-page .testimonials {
    margin: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    #homepage-wrapper.packages-page .packages-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    #homepage-wrapper.packages-page .packages-card,
    #homepage-wrapper.packages-page .packages-card-machine,
    #homepage-wrapper.packages-page .packages-card-addons {
        grid-column: auto;
    }

    #homepage-wrapper.packages-page .packages-card {
        min-height: 500px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    #homepage-wrapper.packages-page .packages-hero {
        min-height: 280px;
    }

    #homepage-wrapper.packages-page .packages-main {
        padding:
            50px 0
            40px;
    }

    #homepage-wrapper.packages-page .packages-intro {
        margin-top: -50px;

        padding:
            50px
            15px
            45px;
    }

    #homepage-wrapper.packages-page .packages-intro h2 {
        font-size:
            clamp(
                27px,
                8vw,
                38px
            );
    }

    #homepage-wrapper.packages-page .packages-intro p {
        font-size: 13px;
    }

    #homepage-wrapper.packages-page .packages-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 0;
    }

    #homepage-wrapper.packages-page .packages-card {
        min-height: 470px;
    }

    #homepage-wrapper.packages-page .packages-card-addons {
        min-height: 470px;

        padding:
            30px
            30px
            28px;
    }

    #homepage-wrapper.packages-page .packages-addons-list {
        margin-top: 15px;

        justify-content: space-evenly;
    }

    #homepage-wrapper.packages-page .packages-review-line {
        margin-top: 40px;

        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    #homepage-wrapper.packages-page .packages-card {
        min-height: 450px;

        padding:
            24px
            22px
            22px;
    }

    #homepage-wrapper.packages-page
    .packages-card-title strong {
        font-size: 38px;
    }

    #homepage-wrapper.packages-page
    .packages-card-title > span {
        font-size: 30px;
    }

    #homepage-wrapper.packages-page
    .packages-card-price strong {
        font-size: 56px;
    }

    #homepage-wrapper.packages-page
    .packages-card-price .currency {
        font-size: 26px;
    }

    #homepage-wrapper.packages-page
    .packages-card-meta > div {
        font-size: 13px;
    }

    #homepage-wrapper.packages-page
    .packages-card-addons {
        min-height: 450px;

        padding:
            26px
            24px;
    }

    #homepage-wrapper.packages-page
    .packages-card-addons
    .packages-card-title-single
    strong {
        font-size: 37px;
    }

    #homepage-wrapper.packages-page
    .packages-addons-list strong {
        font-size: 14px;
    }

    #homepage-wrapper.packages-page
    .packages-addons-list span {
        font-size: 13px;
    }

}