.center-1 {
    margin: 0px;
}

.titleBannerImage {
    max-width: 1400px;
    width: 100%;
    height: 160px;
    text-align: center;
    background: url("/Themes/Cokesbury/Content/images/headers/Checkout.jpg") no-repeat left top;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


/* CATEGORY BANNER STYLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* SECTION HEADER */
.BannerSectionHeaderSmall {width: 100%;height: auto;min-height: 75px;position: relative;justify-content: space-around;}
.BannerSectionHeaderSmallText {
    position: absolute;
    z-index: 40;
    width: 100%;
    text-align: center;
    top:50%;
    transform: translateY(-50%)}
.BannerSectionHeaderSmall img {
    position: relative;
    max-width: 1400px;
    max-height: 160px;
    width: 100%;
    height: 100%;
    min-height: 75px;
    border: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display:block;
}

/* SECONDARY BANNERS */
.BannerSecondaryPromoWrapper {width: 100%;height: auto;display: flex;position: relative;margin-top: 40px;}
.SecondaryPromoImageWrapper {width: 50%;position: relative;flex: 1 1 0;}
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper { display: block; position: absolute; z-index: 100; margin: 20px auto; width: 100%; text-align: center; top: 50%; transform: translateY(-50%) }
        .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper img {position: relative; border: 4px solid white; margin: 20px auto; max-height: 300px; width: auto; height: auto; }
    .SecondaryPromoImageWrapper img {position: relative;max-width: 700px;max-height: 500px;width: 100%;height: 100%;border: none;top: 0;bottom: 0;left: 0;right: 0;}
.SecondaryPromoTextWrapper {width: 50%;background-color:var(--main-color);flex: 1 1 0;display: flex;align-items: center;max-height: 500px;}
.SecondaryPromoTextAlign {display: inline-block;vertical-align: middle;padding:50px;}
.SecondaryPromoTextCategory, .SecondaryPromoTextContent, .SecondaryPromoButton {text-align: left;}
.BannerSecondaryPromoWrapper input[type='button'],
.BannerSecondaryPromoWrapper input[type='submit'],
.BannerSecondaryPromoWrapper a.button,
.BannerSecondaryPromoWrapper button {
    background-color: var(--surface-color) !important;
    border-color: var(--surface-color) !important;
    min-width: 24rem;
    color: var(--btn-color);
}


/* TERTIARY BANNERS */
.TertiaryPromoWrapper { width: 100%; height: auto; display: flex; position: relative; justify-content: space-around; margin-top: 40px; pointer-events: all; }
.TertiaryBanner { width: 44%; max-width: 600px; position: relative; }
    .TertiaryBanner .TertiaryBannerContentWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; }
    .TertiaryBanner .TertiaryPhotoWrapper { z-index: 100; width: 40%; padding-left: 15px; }
        .TertiaryBanner .TertiaryPhotoWrapper img { display: block; max-height: 240px; max-width: 100%; margin: 20px auto; border: 4px solid white;}

        .TertiaryBanner .TertiaryPhotoWrapper.NoBorder img {border: none !important;}

    .TertiaryBanner .TertiaryPromoTextWrapper { z-index: 100; pointer-events: none; padding: 0 15px;}
        .TertiaryBanner .TertiaryPromoTextWrapper span { display: block; text-align: center; pointer-events: none; }
        .TertiaryBanner .TertiaryPromoTextWrapper .TertiaryPromoIcon { display: block; text-align: center; margin: auto; }
    .TertiaryBanner .BackgroundImage { position: relative; max-width: 600px; max-height: 340px; width: 100%; height: 100%; border: none; top: 0; bottom: 0; left: 0; right: 0 }


/* HEADER ADJUSTABLE BANNERS */

.HeaderAdjustable {position: relative;}
    .HeaderAdjustable .HeaderAdjustableTextWrapper {position: absolute;z-index: 40;width: 100%;text-align: center;top: 50%; padding: 0 2rem;transform: translateY(-50%)}
        .HeaderAdjustable .HeaderAdjustableTextWrapper :is(h1, h2, h4) {position: relative;width: 100%;z-index: 40;text-align: center;color: var(--light-text-color);}
        .HeaderAdjustable .HeaderAdjustableTextWrapper .s4 {position: relative;width: 100%;text-align: center;color: var(--light-text-color);}
    .HeaderAdjustable img {position: relative;max-width: 1400px;width: 100%;height: 100%;min-height: 125px;border: none;top: 0;bottom: 0;left: 0;right: 0;}
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink {position: relative;width: 100%;text-align: center;margin: auto;margin-top: 20px;color:var(--main-color) !important;line-height: 30px;}

/* HEADER ADJUSTABLE BANNERS IN SLIDER */
.slick-slide {display: none;float: left;height: 100%;min-height: 1px;}
    .slick-slide > .row {
        position: relative;
        max-height:600px;
    }
    /* Equal-height slider panels: flex the track so every slide stretches to the
       tallest one. Slides become flex columns and the row grows to fill (NOT
       height:100% - that resolves circularly during flex intrinsic sizing and
       compressed tall slides on the first attempt). The banner background images
       inside a stretched row fill it with object-fit: cover so they crop instead
       of distort. max-height is lifted inside the slider so the tallest slide's
       real content sets the track. Scoped to #categoryBanners; single banners
       and non-slider pages are untouched. */
    #categoryBanners .slick-track { display: flex; }
    #categoryBanners .slick-slide { height: auto; display: flex; flex-direction: column; }
    #categoryBanners .slick-slide > .row { flex: 1 1 auto; max-height: none; }
    #categoryBanners .slick-slide .DynamicContentHeaderWithVideoBackgroundImage,
    #categoryBanners .slick-slide .HeaderAdjustable > img,
    #categoryBanners .slick-slide .HeaderBannerRow > img,
    #categoryBanners .slick-slide .AuthorBannerRow > img.AuthorBannerRowBackground { width: 100%; height: 100%; object-fit: cover; }
    /* Adjustable banners in sliders convert to the content-driven model: text in
       flow defines the slide height, the image covers behind it. The absolute-
       centered overlay clipped top/bottom whenever it outgrew the image
       (advent2025 "Save Big", vbs "VBS 2026" - 2026-09-16). Mirrors the <=767
       tier, which has always run this pattern (ported from production mobile
       CSS). Standalone full-width Adjustable heroes keep their natural
       image-driven height. */
    #categoryBanners .slick-slide .HeaderAdjustable {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        min-height: 125px;
        padding: 40px 0;
    }
    #categoryBanners .slick-slide .HeaderAdjustable > img {
        position: absolute;
        top: 0;
        left: 0;
        max-width: none;
        min-height: 0;
    }
    #categoryBanners .slick-slide .HeaderAdjustable .HeaderAdjustableTextWrapper {
        position: relative;
        top: unset;
        transform: none;
    }
    /* an Adjustable slide with NO text (empty h4 and s4) is a full-bleed designed
       image whose copy is baked into the artwork (e.g. the VBS logo banner) -
       cover-cropping cuts that copy mid-word, so fit the whole image instead;
       such art is authored on solid grounds, so the letterbox reads as background */
    #categoryBanners .slick-slide .HeaderAdjustable:has(.HeaderAdjustableTextWrapper :is(h1, h2, h4):empty):has(.HeaderAdjustableTextWrapper .s4:empty) > img {
        object-fit: contain;
    }
/*.slick-dotted.slick-slider {margin-bottom: 120px;}*/
.slick-prev, .slick-next {display: none !important;}
.slick-dots {display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;background-color:var(--main-color);}
    .slick-dots li {position: relative;display: inline-block;height: 40px;margin: 10px 0px;padding: 5px 30px;cursor: pointer;font-size: 2rem;text-transform: uppercase;color: rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.5);font-weight: 600;}
        .slick-dots li:last-child {border-right: none;}
        .slick-dots li.slick-active {color: var(--light-text-color);}

/* FAVORITE AUTHOR HEART */
.favorite-link {
    cursor: pointer;
}

.favorite-link::before {
    content: url('/Themes/Cokesbury/Content/images/favorite_author_heart_default_removed.svg');
}

.favorite-link.isFavorited::before {
    content: url('/Themes/Cokesbury/Content/images/favorite_author_heart_added.svg');
}

.favoriteAuthorsWrapper .favorite-link {
    width: 3.5rem;
    vertical-align: middle;
}

/* AUTHOR BANNERS */
.html-category-page .center-2 #categoryBanners,
.html-category-page .center-2 .categoryBanner {
    max-width: none;
    width: 100%;
}

.AuthorBannerRow {
    background-repeat: no-repeat;
    position: relative;
}

/* Product-feature variant, content-driven (same model as the WithVideo banner,
   ruled 2026-09-16): the overlay sits in normal flow and defines the banner
   height while the background image is absolute and covers. The old absolute-
   centered overlay clipped the book cover and the button whenever it was taller
   than the background image's scaled height (/incarnation slider). The cover
   caps at 360px and scales down instead of pinning to 400px wide. */
.AuthorBannerProductBanner {
    display: flex;
    align-items: center;
}
    .AuthorBannerProductBanner > .AuthorBannerRowBackground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .AuthorBannerProductBanner .SlideAuthorBioWrapper {
        position: relative;
        top: unset;
        transform: none;
        align-items: center;
    }
    .AuthorBannerProductBanner .SlideFeaturePhoto {
        min-width: 0;
    }
        /* .AuthorBannerRow. prefix is load-bearing: the base
           .AuthorBannerRow .SlideFeaturePhoto img rule above pins width: 100% at equal
           specificity, so without the bump this override would win only on source order.
           Effective cover size = max-width: 400px (base rule) x max-height: 360px here. */
        .AuthorBannerRow.AuthorBannerProductBanner .SlideFeaturePhoto img {
            max-height: 360px;
            width: auto;
            /* never wider than the photo column: the base 400px cap is absolute, and a
               squeezed flex column (e.g. FaithWeaver NOW's wide logo in a two-column
               page) let the image overflow onto the text */
            max-width: min(100%, 400px);
        }
.AuthorRowDefault {
    position: relative;
}


.SlideAuthorBioWrapper {
    position: absolute;
    display: flex;
    z-index: 50;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right:0;
    padding: 5%;
}

.AuthorRowDefault .SlideAuthorBioWrapper {
    position: relative;
    top: 0;
    transform: none;
}
    .AuthorBannerRow .SlideAuthorPhoto img,
    .AuthorBannerRow .SlideFeaturePhoto img {
        display: block;
        width: 100%;
        max-width: 400px;
    }

.AuthorBannerRow .SlideAuthorFeatureWrapper,
.AuthorBannerRow .SildeAuthorBioText {
    margin: auto 0 auto 5%;
    max-width: 63%;
}

    .AuthorBannerRow .SildeAuthorBioText .favorite-link {
        vertical-align:middle;

    }


.SildeAuthorBio,
.SlideFeatureAbout {
    margin-bottom: 2rem;
    font-size: 2.0rem;
    line-height: 1.8;
}


.AuthorBannerRowBackground {
    max-width: 1400px;
    width: 100%;
    height: 100%;
    min-height: 125px;
    border: none;
}


.singleBanner .AuthorBannerRow {
background-repeat: no-repeat;
position: relative;
overflow-y: hidden;
height: auto;

}
.singleBanner .AuthorBannerRow .SlideAuthorBioWrapper {
    position: relative;
    display: flex;
    z-index: 50;
    width: 100%;
    top: auto;
    transform: none;
    left: auto;
    right: auto;
    padding: 5%;
}


.singleBanner .AuthorBannerRow .AuthorBannerRowBackground {
    position: absolute;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    min-height: 125px;
    border: none;
    top: 0;
}


.SlideAuthorFeatureWrapper input[type='button'],
.SlideAuthorFeatureWrapper input[type='submit'],
.SlideAuthorFeatureWrapper a.button,
.SlideAuthorFeatureWrapper button {
    background-color: var(--surface-color) !important;
    border-color:var(--main-color) !important;
    color:var(--main-color);
}


    .placeholderforcontentGrid {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }


    .BannerSectionHeaderLarge {
        width: 100%;
        height: 600px;
        position: relative;
        justify-content: space-around;
    }


        .BannerSectionHeaderLargeTextWrapper:before {
            /* legacy 42.8% aspect spacer, retired: the banner is content-driven now
               (div.BannerSectionHeaderLarge below keeps the hero height as a min-height)
               - the spacer only added dead space above the stacked text */
            display: none;
        }

    :is(h1, h2, h4).BannerSectionHeaderLarge {
        position: absolute;
        top: 35%;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: var(--light-text-color);
    }


    .BannerSectionHeaderLargeText {
        position: absolute;
        top: 45%;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: var(--light-text-color) !important;
        padding: 0 2rem;
    }

    /* HeaderLarge is CONTENT-DRIVEN (2026-09-21, same model as the <=991 tier and the
       #categoryBanners Adjustable slides): headline and subtext stack in flow inside the
       wrapper, vertically centered; the old absolute top:35%/45% pins overlapped as soon
       as the headline wrapped (prod-parity bug, e.g. learning-to-study-the-bible).
       Container rules are div-qualified because .BannerSectionHeaderLarge doubles as the
       WithVideo templates' HEADING class. */
    .BannerSectionHeaderLargeTextWrapper {
        position: relative;
        z-index: 100;
        width: 100%;
        padding: 2rem;
    }

    .BannerSectionHeaderLargeTextWrapper .BannerSectionHeaderLargeText {
        position: relative;
        top: auto;
        padding: 0;
    }

    .BannerSectionHeaderLarge img {
        position: absolute;
        max-width: 1600px;
        max-height: 600px;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    div.BannerSectionHeaderLarge {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 600px; /* the old fixed height, now a floor - long text grows the banner */
    }

    div.BannerSectionHeaderLarge > img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover; /* cover-crop instead of stretch when the text grows the banner */
    }


    .BannerVideoWrapper {
        width: 100%;
        display: flex;
    }

    .VideoHeaderLargeTextWrapper {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }

    .SlideVideoWrapper {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }

        .SlideVideoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .SlideVideoText {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        background-color:var(--main-color);
        color: var(--light-text-color);
        text-align: center;
    }

        .SlideVideoText .BannerTitle {
            text-transform: uppercase;
            font-size: 2.4rem;
            font-weight: 700;
        }

        .SlideVideoText .BannerContent {
            font-family: var(--secondary-font);
            color: var(--light-text-color);
            font-size: 3.6Rem;
        }


    /* VIDEO BANNER STYLES */

    .primaryPromoVideoWrapper {
        width: 100%;
        max-width: 1400px;
        height: 600px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
    }

        .primaryPromoVideoWrapper .primaryVideoHeadline {
            position: absolute;
            width: 100%;
            bottom: 50%;
            text-align: center;
            color: var(--light-text-color);
            font-size: 3.4rem;
            z-index: 3;
        }

        .primaryPromoVideoWrapper .primaryVideoSubline {
            position: absolute;
            width: 100%;
            top: 50%;
            text-align: center;
            color: var(--light-text-color);
            font-size: 3.4rem;
            z-index: 3;
        }

        .primaryPromoVideoWrapper .BannerOverlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            background-color: rgba(0,0,0,.5);
            z-index: 2;
        }

        .primaryPromoVideoWrapper .VideoContainer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            min-width: 100%;
            height: auto;
            min-height: 100%;
            transform: translateX(-50%) translateY(-50%);
            z-index: -1;
        }


/* Content-driven banner (ruled 2026-09-15): the text and video sit in normal flow
   and define the banner height; the background image is absolutely positioned and
   covers whatever height results. The old model (image in flow, text absolute)
   clipped long copy at any width where the scaled image was shorter than the text.
   Phones restore the stacked image-then-text flow in the max-width:767 block. */
.DynamicContentHeaderWithVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 50px;
}

    .DynamicContentHeaderWithVideo .DynamicContentHeaderWithVideoBackgroundImage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

        .DynamicContentHeaderWithVideo :is(h1, h2, h4).BannerSectionHeaderLarge {
            position: relative;
            top: auto;
            z-index: 400;
            width: 100%;
            text-align: left;
            color: var(--light-text-color);
        }


        .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper {
            /* flex child in flow: takes the space the video leaves. width/height/
               padding neutralize the base .VideoHeaderLargeTextWrapper rule, which
               is a 16:9 padding-bottom aspect hack (height: 0; padding-bottom:
               56.25%) - in the content-driven model that synthetic height is just
               dead space above/below the text */
            position: relative;
            flex: 1 1 auto;
            width: auto;
            height: auto;
            padding: 0;
            z-index: 100;
        }


            .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .BannerSectionHeaderLarge {
                color: var(--light-text-color) !important;
                height: auto !important;
                /* the class doubles as the HeaderLarge banner CONTAINER, whose <=991
                   tier sets min-height: 220px - on this h4 that renders as a 180px
                   void under a one-line headline */
                min-height: 0;
            }

            .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .BannerSectionHeaderLargeText {
                position: relative;
                text-align: left;
                top: 0px;
            }


        .DynamicContentHeaderWithVideo .VideoWrapper {
            /* flex child in flow; width (not flex-basis) so the two-column
               33% override in mediaqueries.css still wins. Capped at the
               embed's native 560px so wide one-column pages don't upscale
               the video (and drag the banner taller with it) */
            position: relative;
            flex: 0 0 auto;
            width: 45%;
            max-width: 560px;
            z-index: 100;
        }

        /* the embed arrives from admin ShareHTML with fixed width/height attributes;
           clamp it to its wrapper at 16:9 so it scales with the banner */
        .DynamicContentHeaderWithVideo .VideoWrapper iframe {
            max-width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }


    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        width: 100%; /* You can set this width to whatever suits your needs */
        margin: 0 auto;
    }

        .videoWrapper video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    /* VIDEO BANNER STYLES */


    /* NOP 4.0 BANNER STYLES **************************************************************************************************************************************** */

.HeaderBannerRow {
    width: 100%;
    height: 400px;
}
    .HeaderBannerRow .HeaderBannerBackgroundWrapper {
        justify-content: space-around;
        position: absolute;
        max-width: 1600px;
        max-height: 600px;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
        .HeaderBannerRow .HeaderBannerBackgroundWrapper img {
            position: absolute;
            max-width: 1600px;
            max-height: 600px;
            width: 100%;
            height: 100%;
            border: none;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    .HeaderBannerRow .HeaderBannerImageWrapper {
        position: absolute;
        width: 25%;
        height: 100%;
        border: none;
        top: 0;
        left: 0;
        
    }
        .HeaderBannerRow .HeaderBannerImageWrapper img {
            position:absolute;
            top: 50%;
            left: 50%;
            max-width: 300px;
            max-height: 300px;;
            transform: translateX(-50%) translateY(-50%);
        }
    .HeaderBannerRow .HeaderBannerTextWrapper {
        position: absolute;
        width: 75%;
        border: none;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerText {position: relative;
        }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerText li {list-style: disc; margin: 20px;
            position: relative;
        }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerButtonWrapper {position: relative; text-align: center;
        }


.HeaderBannerTextWrapper input[type='button'],
.HeaderBannerTextWrapper input[type='submit'],
.HeaderBannerTextWrapper a.button,
.HeaderBannerTextWrapper button {
    background-color: var(--surface-color) !important;
    border-color: var(--main-color) !important;
    color: var(--main-color);
}

.HeaderBannerModalWrapper h4 {
    font-size: 5REM;
}

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader {
        display: flex;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper {
        display: flex;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .labelWrapper {
        flex-basis: 33%
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .labelWrapper {
        flex-basis: 33%;
        text-align: center;
        margin: 5px;
    }


    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .mTextWrapper {
        text-align: right;
    }


    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .mPriceQtyWrapper .qty-input {
        margin: 0px auto;
        display: block;
        text-align: center;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .mPriceQtyWrapper label {
        margin: 0px auto;
        display: block;
        text-align: center;
    }
    
    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .mPriceQtyWrapper .qty-input {
        margin: 0px auto;
        display: block;
        text-align: center;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalText li {
        list-style: disc;
        margin: 20px;
    }


.SecondaryPromoTextWrapper .s4 {
    text-transform: uppercase;
    text-shadow: none;
}

.SecondaryPromoTextWrapper h4 {
    text-shadow: none;
}

/* AMPLIFY VIDEO LIST (CategoryBanners template) */
.divVideoListWrapper {
    border-top: 1px solid var(--tertiary-color-2);
    padding: 20px;
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 360px 1fr auto;
    column-gap: 20px;
    grid-template-areas: "image text button";
}
.divVideoListWrapper .divVideoImageWrapper { grid-area: image; }
.divVideoListWrapper .divVideoImageWrapper .imgVideoIcon {
    width: 100%;
    height: 100%;
    max-width: 360px;
    max-height: 240px;
    border: 1px solid var(--tertiary-color-2);
    border-radius: 5px;
}
.divVideoListWrapper .divVideoListTextWrapper { grid-area: text; }
.divVideoListTextWrapper .divSliderMainTitle { float: none; }
.divVideoListTextWrapper .divVideoSecondLine { margin-top: 2rem; }
.divVideoListWrapper .divVideoListButtonWrapper { grid-area: button; }
.divVideoListWrapper .divVideoListButtonWrapper .linkStyling { white-space: nowrap; }

    
/* Banner headlines keep their DISPLAY sizes: the global heading scale was reduced
   (h1 64->48, h2 64->44, h3 60->36, h4 54->32, h5 44->28) but full-width banner and
   hero text is meant to be big, so the banner selectors pin the old inherited sizes.
   (Moved from SubPages.css in the banner-CSS consolidation - Banners.css owns banner styling.)
   The headline tag is now semantic (h1 for the page-title banner, h2 for the other
   slides, h4 in legacy authored content), so the FULL h4 typography is pinned here -
   the heading level must never change the rendering. The tag-qualified selectors also
   outrank/out-order the .category-page h1 group (Cokesbury.css - loads before this file;
   its font-size arm was retired 2026-09-21, but it still sets letter-spacing/line-height). */
.HeaderAdjustable .HeaderAdjustableTextWrapper :is(h1, h2, h4),
:is(h1, h2, h4).BannerSectionHeaderLarge,
.BannerSectionHeaderLargeTextWrapper :is(h1, h2, h4),
.SecondaryPromoTextWrapper h4,
:is(h1, h2, h4).BannerSectionHeaderSmallText,
.BannerSectionHeaderSmallText {
    font-size: 5.4rem;
    letter-spacing: -.08rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    font-style: normal; /* the global h2 is the italic "Company Quote" style - demoted
                           banner headlines must match the h1's upright rendering */
}

/* Promo/author banner headlines (book title / author name / video headline) render as
   <h1> only when they own the page title, otherwise <h2> - pin the 3.2rem these headings
   rendered at historically (via the since-retired .category-page h1 font-size) so the
   heading level never changes the rendering. Home-template pages override to 4.8rem
   (SubPages.css hero rule). */
.SlideAuthorFeatureWrapper h1,
.SlideAuthorFeatureWrapper h2,
.SildeAuthorBioText h2,
.primaryVideoHeadline h1,
.primaryVideoHeadline h2 {
    font-size: 3.2rem;
    letter-spacing: -.05rem;
    line-height: 1.2;   /* matches the h1 scale and .SildeAuthorBioText h1 */
    margin: 0;
    font-style: normal; /* the global h2 is italic (Company Quote) - demoted promo
                           headlines must render exactly like the h1 slide's */
}

/* The AuthorBio banner's author name as the page-title <h1> matches the standard
   category band title size (ruled 2026-09-21: both author page types - default band
   and bio banner - show the name at the same size; phones drop it in mediaqueries) */
.SildeAuthorBioText h1 {
    font-size: 5.4rem;
    letter-spacing: -.08rem;
    line-height: 1.2;
    margin: 0;
}

/* SEO/a11y fallback title (PublicInfo renders it when banners exist but none carries
   the page headline, e.g. authored-HTML/CF-only pages): present for crawlers and
   screen readers, visually hidden */
.bannerHiddenTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}