.unslider > ul > li > .div-img {
    width:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.unslider-nav {
    position: relative;
    margin-top: -40px;
    height: 40px;
}

.info-img-container {
    position: relative;
    overflow: hidden;
    height: 512px;
}

@media screen and (max-width: 767px){
	#subscribe {
        height: unset !important;
    }
} 

.info-block {
    max-height: 512px;
    height: 512px;
}

.info-img {
    height: 512px;
    background-position: center;
    background-size: auto 512px;
}

/* On wider screens, keep the image blocks at the 16:9 ratio of their
   1920x1080 backgrounds so the full image is covered instead of being
   cropped by the fixed 512px height.

   Every card in the grid follows the ratio -- the promo cards and the
   latest-post card alike -- because they sit two to a row. Ratio cards next
   to a fixed 512px card end on different lines, which is what left the white
   gap under Gospel Conversations. Matching them keeps each row flush. */
@media (min-width: 768px) {
    /* Bootstrap 3 floats these columns, so each card ends wherever its own
       content ends and the shorter of a pair leaves a white band beneath it.
       Flex the row instead: same two-up layout (the columns keep their 50%
       widths and wrap in pairs), but now both cards on a line are stretched to
       the height of the taller one. The clearfix pseudo-elements would become
       stray flex items, and .xs-divider is a mobile-only spacer, so both go. */
    .row.no-gutters.unmarg {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .row.no-gutters.unmarg::before,
    .row.no-gutters.unmarg::after,
    .row.no-gutters.unmarg > .xs-divider {
        display: none;
    }

    .info-block:has(.info-img-container) {
        height: auto;
        max-height: none;
    }

    /* The newsletter column is the tall card on its row. It was pinned to a flat
       512px, which both capped it (the form spilled out of the grey panel at
       narrow desktop widths) and stopped it stretching. Size it to the form
       instead, with 512px kept as the floor, and let stretch match the post
       card to it. */
    #subscribe.info-block {
        height: auto;
        min-height: 512px;
        max-height: none;
    }

    /* The row is a flex container (below), so each column is already stretched
       to the height of the tallest card on its line. `height: 100%` makes the
       card fill that, and the 16:9 ratio stays as the card's *natural* height:
       percentage heights resolve to auto while the browser measures the line,
       so the ratio is still what each card contributes to the row -- it only
       gets overridden once the line has a height to stretch into. */
    .info-block:has(.info-img-container) .info-img-container {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
    }

    .info-block:has(.info-img-container) .info-img {
        height: 100%;
        padding-top: 0;
    }

    /* The latest-post card sits inside .feature > a.block, so both links in the
       chain need a height for the card to reach the bottom of the column --
       otherwise the newsletter form (the taller card on that row) leaves a
       white band under the post image. The 60px bottom margin on .feature would
       reopen the same gap, so it goes too. */
    .info-block:has(.info-img-container) .feature:not(.boxed) {
        margin-bottom: 0;
        height: 100%;
    }

    .info-block:has(.info-img-container) .feature > a.block {
        height: 100%;
    }

    /* The theme centres this card's text with `top: 50%; translateY(-50%)`, and
       drops that on any viewport under 600px tall -- a rule written for
       full-height hero sections, where a short window should start content at
       the top. These cards are a fixed ratio and have nothing to do with the
       window height, so it just pins the post title to the top of the card,
       under the "Latest Post" pill.

       Centre with the box instead of with offsets: the card becomes a flex
       column and the text is centred as a flex item, which no top/transform
       rule from the theme can reach. The offsets are zeroed so the two
       mechanisms can't stack. Scoped to 768px up, so the theme's mobile
       top-align still stands. */
    .info-block:has(.info-img-container) .info-img-container.imagebg {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .info-block:has(.info-img-container) .pos-vertical-center {
        top: 0;
        transform: none;
        -webkit-transform: none;
        width: 100%;
    }
}

/* Just above the stacking breakpoint the columns are at their narrowest, the
   post title wraps to three lines, and the text outgrows a 16:9 box. A floor
   keeps the CTA inside the card. Every card in the grid takes the same floor,
   so the rows stay flush; the promo art gains a few pixels of crop. */
@media (min-width: 768px) and (max-width: 800px) {
    .info-block:has(.info-img-container) .info-img-container {
        min-height: 230px;
    }
}

/* Same squeeze, other symptom: between 768 and 991 the post card's text fills
   nearly the whole 16:9 box, so the centred title runs under the "Latest Post"
   pill (and moving the pill down only puts it on the CTA instead). Drop the
   pill for those widths -- the card's own "Read the Latest Post" button already
   says the same thing. Delete this block to keep the pill and accept the
   overlap. */
@media (min-width: 768px) and (max-width: 991px) {
    .info-block:has(.info-img-container) .label {
        display: none;
    }
}

.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}
.row.no-gutters .padded {
    padding: 30px;
}

.subscribe-combine {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-wrap {
    white-space: nowrap;
}

.unslider-nav ol li {
    width: 12px;
    height: 12px;
    border-radius: 6px;
}


/*  SM FEATURES  */
.feature.boxed {
    margin-bottom: 0px;
}



/*  HERO SLIDER  */
.home-hero-height {
    height: 90vh;
}
.slider[data-paging="true"]:not(section) {
    margin-bottom: 0;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots {
    bottom: 30px;
    pointer-events: auto;
    z-index: 10;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots .dot {
    width: 50px;
    height: 3px;
    border-radius: 3px;
    opacity: 1;
    background: rgba(255, 255, 255, .4);
    box-shadow: 0px 0px 10px rgba(46, 47, 51, .3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: white;
    border-radius: 6px;
    pointer-events: none;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected {
    background: rgba(255, 255, 255, .4);
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected::before {
    animation: loadBar 7s linear forwards;
}

@keyframes loadBar {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.card__top img {
    width: 100%;
}

.card {
    padding-bottom: 20px;
}

.buy-card {
    padding-top: 10px;
    text-align: center; 
    /* display: flex;  */
    align-content: space-between; 
    justify-content: space-around; 
    flex-wrap: wrap;
    
    .btn {
        border: white;
        border-width: 1px;
        border-style: solid;
        padding-top: 10px;
        margin-left: 0;
    }
}

.card__body {
    min-height: 260px;
}



/* ==========================================================================
   YER26 TOP BARS
   Year-end 2026 donate + report bars (components/yer26-top-bars.php).
   They sit in the page flow under the fixed navbar; the padding on
   .yer26-bars is the space the navbar covers (57px, 50px on phones).
   ========================================================================== */
.home .yer26-bars {
    display: grid;
    padding-top: 57px;
    background-color: #2e2f33;
}
/* Both bars share one grid cell; only the one named by data-active shows.
   The swap is a crossfade so the slider below never shifts. */
.home .yer26-bars > .yer26-bar {
    grid-area: 1 / 1;
    transition: opacity .4s ease, visibility .4s ease;
}
.home .yer26-bars[data-active="donate"] > .yer26-bar--report,
.home .yer26-bars[data-active="report"] > .yer26-bar--donate {
    opacity: 0;
    visibility: hidden;
}
.home .yer26-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 48px;
    min-height: 48px;
    padding: 8px 16px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-weight: 400;
    text-decoration: none;
}
.home .yer26-bar:hover,
.home .yer26-bar:focus {
    text-decoration: none;
}
.home .yer26-bar--donate {
    background-color: #b85429;
}
.home .yer26-bar--report {
    background-color: #1e2428;
}
.home .yer26-bar__message {
    font-size: 17px;
    line-height: 1.35;
    color: #fff;
}
.home .yer26-bar__message strong {
    font-weight: 700;
}
.home .yer26-bar__group {
    display: flex;
    align-items: center;
}
.home .yer26-bar__title {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 24px;
    line-height: 1.1;
    color: #f2f4f5;
}
.home .yer26-bar__eyebrow {
    margin-left: 17px;
    padding-left: 17px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #9fd3dc;
}
.home .yer26-bar__btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.home .yer26-bar--donate .yer26-bar__btn {
    min-width: 140px;
    background-color: #fff;
    color: #b85429;
}
.home .yer26-bar--donate:hover .yer26-bar__btn,
.home .yer26-bar--donate:focus .yer26-bar__btn {
    background-color: #f1f0e3;
}
.home .yer26-bar--report .yer26-bar__btn {
    min-width: 150px;
    background-color: #1f8da1;
    color: #fff;
}
.home .yer26-bar--report:hover .yer26-bar__btn,
.home .yer26-bar--report:focus .yer26-bar__btn {
    background-color: #176f7d;
}
@media (max-width: 767px) {
    .home .yer26-bars {
        padding-top: 50px;
    }
    .home .yer26-bar {
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
        padding: 8px 16px;
        text-align: left;
    }
    .home .yer26-bar__message {
        font-size: 14px;
    }
    .home .yer26-bar__group {
        flex-direction: column;
        align-items: flex-start;
    }
    .home .yer26-bar__title {
        font-size: 19px;
    }
    .home .yer26-bar__eyebrow {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 2px;
    }
    .home .yer26-bar__btn {
        height: 32px;
        padding: 0 12px;
        font-size: 11px;
        letter-spacing: 1px;
    }
    .home .yer26-bar--donate .yer26-bar__btn,
    .home .yer26-bar--report .yer26-bar__btn {
        min-width: 0;
    }
}


/* ==========================================================================
   YER26 HERO
   Year-end 2026 report + donate slides (index-hero/3-yer26-*.html).
   Text is live HTML on the paper colour; the painting fills the right half
   on tablet/desktop and the top half on phones.
   ========================================================================== */
.home .yer26-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 850px;
    overflow: hidden;
    background-color: #f1f0e3;
}
.home .yer26-hero__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
}
/* Paper-coloured fade over the painting's left edge, as in the design. */
.home .yer26-hero__art::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 23%;
    background: linear-gradient(to right, #f1f0e3, rgba(241, 240, 227, 0));
}
.home .yer26-hero__art picture {
    display: block;
    width: 100%;
    height: 100%;
}
.home .yer26-hero__art-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 50%;
}
.home .yer26-hero__container {
    position: relative;
    z-index: 2;
}
.home .yer26-hero .yer26-hero__eyebrow {
    margin: 0 0 22px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #176f7d;
}
.home .yer26-hero .yer26-hero__title {
    margin: 0 0 26px;
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(48px, 5vw, 92px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: 0;
    color: #1e2428;
}
.home .yer26-hero .yer26-hero__body {
    max-width: 480px;
    margin: 0 0 40px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 21px;
    line-height: 32px;
    color: #3a4247;
}
.home .yer26-hero .yer26-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 56px;
    margin: 0;
    padding: 0 32px;
    border: 0;
    border-radius: 4px;
    background-color: #1e2428;
    transition: background-color .2s ease, transform .2s ease;
}
.home .yer26-hero .yer26-hero__btn:hover,
.home .yer26-hero .yer26-hero__btn:focus {
    background-color: #176f7d;
}
.home .yer26-hero .yer26-hero__btn .btn__text {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}
@media (max-width: 1199px) {
    .home .yer26-hero .yer26-hero__body {
        font-size: 19px;
        line-height: 29px;
    }
}
@media (max-width: 991px) {
    .home .yer26-hero__art {
        width: 48%;
    }
    .home .yer26-hero__art::before {
        width: 40%;
    }
    .home .yer26-hero__art-img {
        object-position: 78% 50%;
    }
    .home .yer26-hero .yer26-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 14px;
        letter-spacing: 2.5px;
    }
    .home .yer26-hero .yer26-hero__body {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 32px;
    }
}
/* Phones: painting on top fading into the paper, text underneath. The 850px
   min-height matches the other home heroes so the slider stays one height. */
@media (max-width: 767px) {
    .home .yer26-hero {
        align-items: flex-end;
        padding-bottom: 80px;
    }
    .home .yer26-hero__art {
        left: 0;
        bottom: auto;
        width: 100%;
        height: 52%;
    }
    .home .yer26-hero__art::before {
        top: auto;
        right: 0;
        bottom: -1px;
        left: 0;
        width: auto;
        height: 40%;
        background: linear-gradient(to top, #f1f0e3, rgba(241, 240, 227, 0));
    }
    .home .yer26-hero__art-img {
        object-position: 62% 30%;
    }
    .home .yer26-hero__container {
        width: 100%;
        padding-right: 24px;
        padding-left: 24px;
    }
    .home .yer26-hero .yer26-hero__eyebrow {
        margin-bottom: 12px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }
    .home .yer26-hero .yer26-hero__title {
        margin-bottom: 18px;
        font-size: 52px;
    }
    .home .yer26-hero .yer26-hero__body {
        margin-bottom: 28px;
        font-size: 17px;
        line-height: 26px;
    }
    .home .yer26-hero .yer26-hero__btn {
        min-width: 220px;
        height: 52px;
    }
}


/* ==========================================================================
   YER26 HERO, PHOTO VARIANT
   Full-bleed ARISE photo donate slides (index-hero/3-yer26-3/4/5-*.html).
   Shade: #1E2428 at 92% -> 75% at 38% -> 0% at 62%, left to right.
   ========================================================================== */
.home .yer26-hero--photo {
    background-color: #1e2428;
}
.home .yer26-hero--photo .yer26-hero__art {
    left: 0;
    width: 100%;
}
.home .yer26-hero--photo .yer26-hero__art::before {
    left: 0;
    right: 0;
    width: auto;
    background: linear-gradient(to right, rgba(30, 36, 40, .92) 0%, rgba(30, 36, 40, .75) 38%, rgba(30, 36, 40, 0) 62%);
}
.home .yer26-hero--photo .yer26-hero__art-img {
    object-position: 50% 50%;
}
.home .yer26-hero--photo .yer26-hero__eyebrow {
    color: #9fd3dc;
}
.home .yer26-hero--photo .yer26-hero__title {
    color: #fff;
}
.home .yer26-hero--photo .yer26-hero__body {
    color: #e4e8ea;
}
.home .yer26-hero--photo .yer26-hero__btn {
    background-color: #b85429;
}
.home .yer26-hero--photo .yer26-hero__btn:hover,
.home .yer26-hero--photo .yer26-hero__btn:focus {
    background-color: #9c4521;
}
/* Text starts at the design's 200px-of-1848 left edge instead of the grid. */
@media (min-width: 768px) {
    .home .yer26-hero--photo .yer26-hero__container {
        width: 100%;
        padding-right: 30px;
        padding-left: max(30px, 10.8vw);
    }
}
/* Narrower screens: keep the subject in frame and darken further right so
   the copy stays readable over the photo. */
@media (max-width: 991px) {
    .home .yer26-hero--photo .yer26-hero__art {
        width: 100%;
    }
    .home .yer26-hero--photo .yer26-hero__art::before {
        width: auto;
        background: linear-gradient(to right, rgba(30, 36, 40, .92) 0%, rgba(30, 36, 40, .82) 50%, rgba(30, 36, 40, 0) 85%);
    }
    .home .yer26-hero--photo .yer26-hero__art-img {
        object-position: 68% 50%;
    }
}
/* Phones: portrait crop of the photo on top, fading into the charcoal under the text. */
@media (max-width: 767px) {
    .home .yer26-hero--photo .yer26-hero__art {
        bottom: auto;
        height: 62%;
    }
    .home .yer26-hero--photo .yer26-hero__art::before {
        top: auto;
        bottom: -1px;
        height: 45%;
        background: linear-gradient(to top, #1e2428, rgba(30, 36, 40, 0));
    }
    .home .yer26-hero--photo .yer26-hero__art-img {
        object-position: 50% 30%;
    }
}


/* ==========================================================================
   YER26 HERO, PAPER VARIANT
   Full-bleed painting with a paper-coloured shade (report slide,
   index-hero/3-yer26-1-report.html). Used together with
   .yer26-hero--photo, which supplies the full-bleed layout; this block
   puts back the paper colours and dark text.
   Shade: #F1F0E3 at 95% -> 82% at 30% -> 0% at 46%, left to right.
   ========================================================================== */
.home .yer26-hero--paper {
    background-color: #f1f0e3;
}
.home .yer26-hero--paper .yer26-hero__art::before {
    background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .82) 30%, rgba(241, 240, 227, 0) 46%);
}
.home .yer26-hero--paper .yer26-hero__eyebrow {
    color: #176f7d;
}
.home .yer26-hero--paper .yer26-hero__title {
    color: #1e2428;
}
.home .yer26-hero--paper .yer26-hero__body {
    color: #3a4247;
}
.home .yer26-hero--paper .yer26-hero__btn {
    background-color: #1e2428;
}
.home .yer26-hero--paper .yer26-hero__btn:hover,
.home .yer26-hero--paper .yer26-hero__btn:focus {
    background-color: #176f7d;
}
/* On narrower screens, slide the painting right so the woman stays clear of the copy. */
@media (max-width: 1599px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .86) 38%, rgba(241, 240, 227, 0) 58%);
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 30% 50%;
    }
}
@media (max-width: 1199px) {
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 8% 50%;
    }
}
@media (max-width: 991px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .88) 40%, rgba(241, 240, 227, 0) 68%);
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 30% 50%;
    }
    .home .yer26-hero--paper .yer26-hero__body {
        max-width: 380px;
    }
}
@media (max-width: 767px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to top, #f1f0e3, rgba(241, 240, 227, 0));
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 50% 30%;
    }
}