/************************/
/*  START :: Carousel  */
/************************/

/* deactivate accordion outlines */
.fl-accordion .fl-accordion-button-label {
    outline: none;
}
.fl-accordion .fl-accordion-button-icon {
    outline: none;
}
/****************************/
/*  START :: All Carousels  */
/****************************/
:root {
    --carousel-arrow-left: url(/wp-content/uploads/carousel-arrow-left.svg);
    --carousel-arrow-right: url(/wp-content/uploads/carousel-arrow-right.svg);
}
.slick-initialized .slick-slide {
    display: flex!important;
    height: auto;
    flex-direction: column;
}
.slick-initialized .slick-slide>div{
    height:100%;
}
.slick-initialized .post .postBox {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.slick-arrow, .slick-arrow:hover, .slick-arrow:focus{
    background-color:transparent!important;
    border-radius: 100%;
    border:none!important;
    padding:0;
    transition: box-shadow 0.5s ease-in-out;
}
body:not(.fl-builder-edit) .slick-arrow:hover,
body:not(.fl-builder-edit) .slick-arrow:focus:hover /* enables hover even when button is clicked / focused */ {
    box-shadow: 0 0 44px 0 var(--glow-color) !important;
}
.slider-ctl{
    display:flex;
    gap:11px;
    justify-content:flex-end;
    margin-bottom:16px;
}
.slider-header{
    display: flex;
    justify-content: flex-end;
    gap: 22px;
}
.slick-dots{
    margin-bottom:0!important;
}
.slick-dots li.slick-active {
    display: block;
}
.slick-dots li {
    display: none;
    line-height: 1;
}
.slick-active button:not(.home-page-tab), 
.slick-active button:not(.home-page-tab):hover, 
.slick-active button:not(.home-page-tab):focus {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-weight:bold;
    border: 1px solid transparent;
    pointer-events: none;
}
.slider-dot{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
/****************************/
/*  END   :: All Carousels  */
/****************************/

/*****************************************************/
/*  START :: Action Carousel / Expandable Image Card */
/*****************************************************/
/*action carousel*/
.noarrow.fl-module-button:not(.arrowlink) a.fl-button,
footer div.wpforms-container-full .wpforms-form button.wpforms-submit {
    padding: 12px 25px;
    border-radius: 100px;
    font-size: 1rem;
}
.fl-module-button.noarrow a.fl-button::after{
    display: none!important;
}
.action-carousel-slider > .fl-col-content .fl-col-content{
    overflow: hidden;
    width: 375px;
    height:100%;
    display: flex;
    flex-direction: column;
}
.action-carousel-slider > .fl-col-content .fl-col-content .btn-round{
    margin-top:auto;
}
body:not(.fl-builder-edit) .action-carousel-slider > .fl-col-content .fl-col{
    width:375px;
    height:100%;
}
body.fl-builder-edit .action-carousel-slider > .fl-col-content .fl-col{
    width:100%!important;
}
.action-carousel-row .slider-header {
    --glow-color: var(--ocean);
}
.action-carousel-row .slick-active button, .slick-active button:hover, 
.action-carousel-row .slick-active button:focus{
    color:white;
}
.action-carousel-row .slick-dots {
    padding-inline-start: 0;
}



.noarrow.fl-module-button:not(.arrowlink) a.fl-button,
footer div.wpforms-container-full .wpforms-form button.wpforms-submit {
    padding: 12px 25px;
    border-radius: 20px;
    font-size: 1rem;
}
/* .fl-module-button.noarrow a.fl-button::after{
    display: none!important;
} */
.action-carousel-slider .column--action-carousel .fl-col-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    width: 394px;
}
/**************************************/
/*  Start :: box shadow clipping fix  */
/**************************************/
.action-carousel-slider .column--action-carousel .fl-col-content {
    height: calc(100% - 30px); /* 100% minus margin, so box-shadow doesn't get clipped */
    margin: 15px 9px 15px 11px; /* left needs more than right, so box-shadow doesn't get clipped on left edge of carousel */
}
/* removes box-shadow from slide to the left of active slide, so it's box-shadow doesn't bleed into active view */
.action-carousel-slider .slick-slide:has(+ .slick-active) .column--action-carousel > div {
    box-shadow: none !important; 
}
.action-carousel-slider {
    margin: -15px;
}
/**************************************/
/*  End   :: box shadow clipping fix  */
/**************************************/

/* allows cards to be editable in bb, not overlapping */
body.fl-builder-edit .action-carousel-slider .slick-slide .fl-col {
    width:100%!important; 
}

/* In this case, turn off flex inside BB editor on equalized height columns, so they're easier to edit */
body.fl-builder-edit .action-carousel-row .fl-col-group-equal-height,
body.fl-builder-edit .action-carousel-row .fl-col-group-equal-height .fl-col {
    display: unset;
}

body:not(.fl-builder-edit) .action-carousel-slider .slick-slide .fl-col {
    height: 100%;
}

.action-carousel-slider > .fl-col-content .fl-module-box {
    height:100%;
    overflow: hidden;
    width: 394px;
}

/* Best of both worlds! button has consistent margin-top and parent container is auto so button is always aligned to bottom of card */
/* as if margin-top-min: 26px; margin-top-max: auto; */
.action-carousel-slider > .fl-col-content .fl-module-button {
    margin-top:auto;
}
.action-carousel-slider > .fl-col-content .fl-module-button a {
    margin-top: 26px;
}

body:not(.fl-builder-edit) .action-carousel-slider > .fl-col-content .fl-col{
    width: 394px;
    height:100%;
}
/* body.fl-builder-edit .action-carousel-slider > .fl-col-content .fl-col{
    width:100%!important;
} */

body:not(.fl-builder-edit) .action-carousel-row .slick-track{
    display: flex;
}
.action-carousel-row .slick-slide img{
    height: 260px;
    object-fit: cover;
}

/* Action Carousel - controls */
.action-carousel-row .slick-active button, .slick-active button:hover, 
.action-carousel-row .slick-active button:focus{
    color:white;
}
.action-carousel-row .slick-dots {
    padding-inline-start: 0;
}
/* sets margin default for html modules in carousels, can be overridden individually in BB */
/* html modules = where the slider arrows are injected */
.action-carousel-row .fl-module-html > div {
    margin-top: 36px;
}
.action-carousel-row .slider-header {
    justify-content: flex-start;
    gap: 12px;
    /* padding-right: 72px; */
    /* margin-right:auto;
    margin-left:0;
    padding-left:0; */
    /* max-width: 675px; */
}
/* .action-carousel-row .slick-dots{
    
    left: 0px;
    position: relative;
    text-align: center;
} */
/* .action-carousel-row .slider-dot{
    margin-bottom:0;
} */
/* .action-carousel-row .slick-dots button{
    font-size: 0.85rem;
} */

/* .action-carousel-row .slick-prev img {
    transform: rotate(180deg);
} */
.action-carousel-row .slick-active button, .slick-active button:hover, 
.action-carousel-row .slick-active button:focus{
    color:white;
}

.action-carousel-row .slick-dots li.slick-active {
    display: block;
    /* min-width: 65px; */
    min-width: auto;
}
.action-carousel-row .slick-dots li {
    display: none;
    line-height: 1;
}
.action-carousel-row .slick-active button, 
.action-carousel-row .slick-active button:hover, 
.action-carousel-row .slick-active button:focus {
    background-color: transparent;
    color: var(--ocean);
    /* padding: 0; */
    /* font-weight:bold;
    border: 1px solid transparent; */
    pointer-events: none;
}
.action-carousel-row .slider-dot{
    align-items: center;
    display: flex;
    margin-bottom: 0;
    order: 3;
}

/*  BB "EXTRA LARGE" DESKTOP, only  */
@media screen and (min-width: 1366px) {
    .action-carousel-row .fl-row-content-wrap {
        /* padding-left: calc(50vw - 623px); */
        padding-left: calc(50vw - 612px);
    }
    .number-carousel-row .fl-row-content-wrap {
        padding-left: calc(50vw - 612px);
    }

}

/*  BB "LARGE" DESKTOP, only   */
@media only screen and (min-width: 992px) and (max-width: 1366px) {
    .action-carousel-row .fl-row-content-wrap {
        padding-left: 72px;
    }
}

/*  TABLET, and down  */
@media only screen and (max-width: 992px) {
    .action-carousel-row .fl-row-content-wrap {
        padding-left: 36px;
    }
    .action-carousel-row .slider-header {
        /* justify-content: flex-start; */
        justify-content: flex-end;
        padding-right: 0;
    }
    .action-carousel-row .slick-track {
        justify-content: right;
        gap: 20px;
    }
    .action-carousel-row .slick-initialized .slick-slide {
        max-width: 394px;
    }
    /**************************************/
    /*  Start :: box shadow clipping fix  */
    /**************************************/
    .fl-builder-content .action-carousel-slider {
        margin-left: -9px;
        width: calc(100% + 9px) !important;
    }
    /**************************************/
    /*  End   :: box shadow clipping fix  */
    /**************************************/
}

/*  MOBILE, only  */
@media only screen and (max-width: 768px) {
    /* sets margin default for html modules in carousels, can be overridden individually in BB */
    /* html modules = where the slider arrows are injected */
    .testimonial-carousel-row .fl-module-html > div,
    .number-carousel-row .fl-module-html > div {
        margin-top: 16px;
    }

    .action-carousel-slider > .fl-col-content .fl-col-content{
        overflow: hidden;
        width: 280px;
    }
    body:not(.fl-builder-edit) .action-carousel-slider > .fl-col-content .fl-col{
        width:280px;
    }
    .action-carousel-row .fl-row-content-wrap {
        padding-left: 18px;
    }
    .action-carousel-row .slider-header {
        /* justify-content: flex-end; */
        padding-right: 0;
    }
    .action-carousel-row .slick-slide .fl-photo-content,
    .action-carousel-row .slick-slide img{
        /* BugHerd 509 - a fixed 240px height squared the photos off as the
           viewport narrowed; lock a ratio instead.
           BugHerd #502 - Brie: "Can we keep the original framing ratio for images if
           possible? Getting a lot of letterboxing." Loop pointed at the mobile artboard
           (Figma 5887:20113), where the card is 339 wide and its image slot 339x240.
           394/260 (1.515) cropped harder than any source photo; 339/240 (1.413) is the
           designed framing and takes ~17px less off the top and bottom at 390px. */
        aspect-ratio: 339 / 240;
        height: auto;
        width: 100%;
    }
    body:not(.fl-builder-edit) .action-carousel-slider > .fl-col-content .fl-col{
        /* height: auto;
        width:280px; */
    }
    body:not(.fl-builder-edit) .action-carousel-row .slick-initialized .slick-slide {
        max-width: calc(100vw - 36px);
    }
    .action-carousel-slider > .fl-col-content .fl-module-box,
    .action-carousel-slider > .fl-col-content .fl-col-content {
        width: auto;
    }
    /* these together: removes weird spacing at top of slide */
    .action-carousel-row .slick-slide > div {
        display: flex; 
        /* height: auto; */
    }
    /* these together: removes weird spacing at top of slide */
    .action-carousel-row .slick-slide .fl-col {
        align-self: flex-start; 
    }
    /* In this case, limit the width of the cards only in BB editor so they're easier to edit in BB editor's responsive small */
    body.fl-builder-edit .action-carousel-slider > .fl-col-content .fl-col.column--action-carousel {
        display: inline-block;
        max-width: 394px;
    }
    /**************************************/
    /*  Start :: box shadow clipping fix  */
    /**************************************/
    .fl-builder-content .action-carousel-slider {
        margin: 0;
    }
    .action-carousel-slider .slick-list {
        overflow: visible;
    }
    .action-carousel-slider .column--action-carousel .fl-col-content {
        height: 100%;
        margin: 0;
    }
    /**************************************/
    /*  End   :: box shadow clipping fix  */
    /**************************************/

}
/*****************************************************/
/*  END   :: Action Carousel / Expandable Image Card */
/*****************************************************/

/***************************/
/*  START :: Card Carousel */
/***************************/
.row--card-carousel .column--card-carousel {
    padding-left: var(--content-padding);
    position: relative;
    z-index: 3;
}

.row--card-carousel .column--card-carousel.fixed-width {
    padding-right: var(--content-padding);
}
.row--card-carousel .slider-header {
    --glow-color: var(--white);
    gap: 12px;
}
.row--card-carousel .slider-dot {
    margin: 0;
    order: -1;
}
body:not(.fl-builder-edit) .card-carousel-slider .slick-track {
    display: flex;
}
.card-carousel-slider > .fl-col-content .fl-module-box {
    height:100%;
}
@keyframes highlight-card {
    from {
        opacity: 0.2;
    }
}
.card-carousel-slider .slick-slide.slick-current .card {
    animation: highlight-card 900ms ease-in forwards;
    opacity: 1;
}
body:not(.fl-builder-edit) .card-carousel-slider .card {
    opacity: 0.2;
    padding-right: 26px;
}
.card-carousel-slider .card .fl-photo-content{
    height: 100%;
    display: flex;
    align-items: center;
}
.card-carousel-slider .card .fl-photo-content {
    height: 400px;
    width: 414px;
}
.card-carousel-slider .card img{
    height: 400px;
    width: 414px;
    object-fit: cover;
}
.card-carousel-slider .card .tag p {
    background-color: var(--sweet-water);
    border-radius: 8px;
    color: var(--ocean);
    display: inline-block;
    font-size: 14px;
    font-size: 0.88rem;
    line-height: 1em;
    padding: 8px 16px;
}

/* bugfix :: allows scaled button on hover to be fully visible  */
body:not(.fl-builder-edit) .card-carousel-slider .card .border-radius-img {
    overflow: unset;
}


/*  BB "EXTRA LARGE" DESKTOP, only  */
@media screen and (min-width: 1366px) {
    .row--card-carousel .column--card-carousel {
        /* padding-left: calc(50vw - 623px); */
        padding-left: calc(50vw - 618px);

        &.fixed-width {
            padding-right: calc(50vw - 618px);
        }
    }
}
/***************************/
/*  END   :: Card Carousel */
/***************************/

/*****************************/
/*  START :: Number Carousel */
/*****************************/
.number-carousel-img-col{
    align-items: flex-end;
}

.number-carousel-box .slick-track{
    display: flex;
    align-items: stretch;
}
.number-carousel-img-box .slick-track{
    flex-direction: column;
    gap: 20px;
    /* background-color: currentColor; */
}
.number-carousel-img-box .slick-list,
.number-carousel-img-box .slick-list div,
.number-carousel-img-box .slick-list div img{
    width:100%; 
}
.number-carousel-left-col-box > .fl-col-content{
    height:100%;
    justify-content: center!important;
    position: relative;
}
.number-carousel-img-box .slick-slide {
    /* padding-top: 21px; */
    padding-top: 0;
    /* border: none; */
}

/* Removes strange space below image, so elements are aligned at bottom */
.number-carousel-row .slick-vertical .slick-slide {
    line-height: 0;
}

body:not(.fl-builder-edit) .number-carousel-left-col .fl-col-group,
body:not(.fl-builder-edit) .number-carousel-left-col-box{
    height:100%;
}
body:not(.fl-builder-edit) .number-carousel-left-col-box-img{
    position: absolute;
    bottom: -66px;
    width: calc(100% - 138px);
}
.carousel-card {
    width: 422px !important;
    max-width: 422px;
    padding: 26px 28px 36px;
    border-radius: 40px;
    margin-right: 25px;
}
.slick-slide .fl-module-callout,
.carousel-card .fl-module-content,
.carousel-card .fl-callout,
.carousel-card .fl-callout-content{
    height: 100%;
}
.carousel-card .fl-callout-content{
    display: flex;
    flex-direction: column;
}


.number-carousel-img-box {
    overflow: hidden;
    border-radius: 24px;
}

.number-carousel-row .carousel-card {
    background-color: var(--white);
    border-radius: 24px;
    max-width: 390px;
    margin-left: 0px;
    margin-right: 19px;
    min-height: 410px;
    padding: 16px 26px 36px;
    width: 390px !important;
}
.number-carousel-box .carousel-card .fl-callout-text p {
    color: var(--patch-reef-blue);
    padding-bottom: 0!important;
}
/* BugHerd #77 / #440: the cards are equal-height, so `space-between` pushed the
   title and body copy to different vertical positions in every card - on Treks the
   title top ranged 93-153px and the title-to-body gap 77-137px across seven cards.
   Top-aligning the content stacks every card identically (title top 32px, gap 16px)
   without changing any type, colour or card size. This block only covers
   min-width 1366px; the phone breakpoint is handled by the matching rule at the
   end of this file, which overrides the centring in css/style.css. */
.number-carousel-box .carousel-card .fl-callout-content {
    align-items: flex-start;
    gap: 16px;
    justify-content: flex-start;
}
.number-carousel-box .carousel-card .fl-callout-title {
    padding-bottom: 0;
}
.number-carousel-box .carousel-card .fl-callout-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.number-carousel-box.slick-initialized .slick-list { 
    padding-bottom: 2px;
}

.carousel-card a.fl-button, 
.carousel-card a.fl-button:visited,
.carousel-card a.fl-button:hover{
    background-color: transparent;
    border: 0;
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(var(--teal-deep2), var(--teal-deep2));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 2px;
    transition: all .2s ease, underline .5s ease-in-out;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.carousel-card a.fl-button:visited,
.carousel-card a.fl-button:hover
{
    transform: none !important;
    animation: 0.25s underline2px ease-in-out;
}

.number-carousel-box .carousel-card a:hover {
    text-decoration: none;
}
.carousel-card a.fl-button span {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 18px;
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
    line-height: 1.75rem; /* 155.556% */
}
.carousel-card a.fl-button:after{
    
}

.fl-callout-number {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-family: var(--font-primary);
    font-size: 26px;
    font-size: 1.63rem;
    font-style: normal;
    font-weight: 700;
    line-height: 34px; /* 130.769% */
    line-height: 2.13rem; /* 130.769% */
    height: 60px;
    justify-content: center;
    margin-bottom: auto;
    width: 60px;
}
.largeheight img {
    height: 600px;
    object-fit: cover;
    object-position: center;
}
.number-carousel-img-box .largeheight,
.number-carousel-img-box .largeheight .fl-module-content,
.number-carousel-img-box .largeheight .fl-photo,
.number-carousel-img-box .largeheight .fl-photo-content,
.number-carousel-img-box .largeheight img{
    min-height: 600px;
    height:100%!important;
}
/* The day photos are square (2000x2000) in a slot pinned to 600px tall, so `cover` crops them
   vertically and the crop DEEPENS as the viewport widens - 27px off the top at 1440, 87px at
   1920. Centre-anchoring takes it off the top and bottom equally, which cut the subject's head
   off on Day 6 and clipped Day 2's hat and Day 3's raised arm. Anchoring to the top spends the
   whole crop on the ground instead, where there is nothing to lose. Below a 600px-wide slot the
   image crops horizontally rather than vertically, so this has no effect on phones. */
.number-carousel-img-box .largeheight img {
    object-position: center top;
}
.number-carousel-col .fl-col-content{
    flex-direction: column;
    display: flex;
    justify-content: space-between!important;
}
.number-carousel-row .slider-header {
    padding-right: 72px;
}
.number-carousel-row .light .slider-header {
    color: var(--white) !important;
}
.number-carousel-row .dark .slider-header {
    color: var(--patch-reef-blue) !important;
}

@media only screen and (min-width: 992px) {
    .number-carousel-box .slick-list {
        margin-bottom: 1px;
        padding-left: 35px;
        left: -35px;
        width: calc(100% + 35px);
    }
    .number-carousel-left-col,
    .number-carousel-img-box {
        z-index:2
    }
}
@media only screen and (min-width: 992px) and (max-width: 1366px) {

    .number-carousel-row .slider-header {
        padding-right: 60px;
    }
    
}
@media only screen and (max-width: 992px) {
    .number-carousel-col .slick-arrow img {
        width: 68px;
        height: 68px;
    }
     body:not(.fl-builder-edit) .number-carousel-left-col-box-img{
        position: static;
        bottom: 0;
        margin-top: 16px;
        width: 100%;
    }
    body:not(.fl-builder-edit) .number-carousel-left-col-box-img .fl-photo-content{
        max-width: 175px;
        float: right;
    }
    .number-carousel-row{
        overflow: hidden;
    }
    .fl-post .largeheight img{
        height:424px;
    }
    .number-carousel-img-box .largeheight,
    .number-carousel-img-box .largeheight .fl-module-content,
    .number-carousel-img-box .largeheight .fl-photo,
    .number-carousel-img-box .largeheight .fl-photo-content,
    .fl-post .number-carousel-img-box .largeheight img{
        min-height: 300px!important;
        max-height: 300px!important;
        height:100%;
    }
    .number-carousel-row .slider-header {
        padding-right: 36px;
    }
    .number-carousel-row .slider-dot,
    .number-carousel-row .slider-ctl{
        margin-bottom: 26px;
    }
    .number-carousel-img-box .slick-list, 
    .number-carousel-img-box .slick-list div, 
    .number-carousel-img-box .slick-list div img{
        max-width: 100%;
    }
    .number-carousel-box .slick-slide {
        max-width: 409px;
    }
}
@media only screen and (max-width: 768px) {
   .number-carousel-row .fl-module-html > div {
        margin-top: 16px;
    }
    /* BugHerd 513. On a phone the prev/next arrows sat in 68px of empty space below the
       heading and 42px above the carousel, so they read as decoration rather than as the
       carousel's controls. The 26px top and bottom here come from an UNSCOPED
       `.slider-header` rule in style.css that also dresses the action and card carousels,
       so it is overridden here at .number-carousel-row specificity (0,2,0 beats 0,1,0)
       rather than edited in place. Removing just those two margins leaves 42px above the
       arrows (the h2's 26px plus the html module's 16px) and 16px below (.slider-ctl's own
       margin), so the control now sits nearer the thing it drives than the section title.
       Both remaining values are existing tokens: --Sizing-Units-XS and --Sizing-Units-2XS. */
    .number-carousel-row .slider-header {
        margin-top: 0;
        margin-bottom: 0;
    }
    .number-carousel-box .carousel-card {
        border-radius: 16px;
        min-height: 370px;
        padding: 16px 16px 26px;
        width: calc(100vw - 36px) !important;
    }
    .number-carousel-box .carousel-card > div {
        max-width: calc(100vw - 36px);
    }
    .number-carousel-box .slick-slide {
        max-width: 100vw;
    }
    .number-carousel-col .slick-arrow img {
        width: 48px;
        height: 48px;
    }
    .number-carousel-row .slider-header {
        padding-right: 0;
    }
    /* BugHerd #566 / #567 (and the same component on #568 / #569) - Loop's base
       component 127:34203 sizes this photo 339x280 inside a 375px frame, a ratio of
       339/280. The old fixed 280px height made the photo proportionally too wide at
       every phone width (352x280 = 1.257 against a spec of 1.211). Driving it from
       aspect-ratio matches the component at any width instead of only at one. */
    .number-carousel-img-box .largeheight,
    .number-carousel-img-box .largeheight .fl-module-content,
    .number-carousel-img-box .largeheight .fl-photo,
    .number-carousel-img-box .largeheight .fl-photo-content,
    .fl-post .number-carousel-img-box .largeheight img{
        border-radius: 16px;
        min-height: 0!important;
        max-height: none!important;
        height: 100%!important;
    }
    .number-carousel-img-box .largeheight {
        aspect-ratio: 339 / 280;
    }
    .number-carousel-row .slider-dot,
    .number-carousel-row .slider-ctl{
        margin-bottom: 16px;
    }
}

/* BugHerd #429 / #431 - phone layout order.
   The client's Figma puts the prev/next arrows directly under the section heading
   and ABOVE the image; the stacked phone layout rendered them between the image and
   the card instead. The arrows live in .number-carousel-col while the image is a
   sibling column, so the two columns are collapsed into one flex context first
   (display:contents) and then re-ordered. Order becomes heading > arrows > image > card.
   Everything above 768px is untouched - verified pixel-identical at 800 and 1440. */
@media only screen and (max-width: 768px) {
    .number-carousel-row .fl-col-group-nested.fl-col-group-equal-height {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        max-width: 100%;
    }
    .number-carousel-row .number-carousel-col,
    .number-carousel-row .number-carousel-col > .fl-col-content {
        display: contents;
    }
    /* display:contents drops the column's own box, so the padding and the width
       cap it used to provide are restored on the modules themselves. Without the
       width cap the slick track (20000px+) sizes the flex container. */
    .number-carousel-row .number-carousel-col > .fl-col-content > .fl-module {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 18px;
    }
    .number-carousel-row .number-carousel-col > .fl-col-content > .fl-module-html {
        order: 1;
    }
    .number-carousel-row .number-carousel-img-col {
        order: 2;
    }
    .number-carousel-row .number-carousel-col > .fl-col-content > .fl-module-box {
        order: 3;
    }
}

/********************************************/
/*  START :: Expandable Image Card Carousel */
/********************************************/

.action-carousel-row .arrow_right a.fl-button span.fl-button-text::after{
    display: none!important;
}
.action-carousel-row .fl-col-group{
    justify-content: space-between;
}

/***********************************/
/*  START :: Feature Card Carousel */
/***********************************/

/********************/
/*new carousel black*/
/********************/
/* extends glow effect */
.new-carousel-black .slick-arrow {
    --glow-color: var(--sweet-water);
}

.new_carousel_black_box .slick-track{
    display: flex;
    align-items: stretch;
}
.slick-slide .fl-module-callout.new-carousel-black-card{
    width: 1015px !important;
    max-width: 1015px;
    padding: 26px;
    border-radius: 24px;
    background-color: #fff;
    margin-right: 26px;
}
.new-carousel-black-card .fl-callout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    align-items: stretch;
}
/* give callout card background in BB mode so text is legible */
body.fl-builder-edit .new-carousel-black-card .fl-callout-content{
    background: white;
}
/* bugfix :: allows scaled button on hover to be fully visible  */
body:not(.fl-builder-edit) .fl-module-callout .fl-module-content {
    overflow: unset;
}
.new-carousel-black-card .fl-callout-content{
    width: 100%;
    flex-shrink: 1;
    flex-grow: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}
.new-carousel-black-card .fl-callout-photo{
    width: 500px;
    height: 400px;
    flex-basis: 500px;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
}
.new-carousel-black-card .fl-callout-photo .fl-photo,
.new-carousel-black-card .fl-callout-photo .fl-photo-content,
.new-carousel-black-card .fl-callout-photo a,
.new-carousel-black-card .fl-callout-photo img{
    width:100%;
    height:100%;
    object-fit: cover;
    pointer-events: none;
}
.new-carousel-black-card .fl-callout-title{
    pointer-events: none;
    padding-bottom:16px;
    padding-top:36px;
}
.new-carousel-black-card .fl-callout-text{
    padding-bottom:16px;
}
.new-carousel-black-card .fl-callout-cta-link{
    background-color: var(--GivePower-Palette-Sun-Yellow);
    border: 1px solid var(--GivePower-Palette-Sun-Yellow);
    padding: 20px 30px;
    display: inline-flex;
    align-items: flex-end;
    transition: all .25s ease;
    border-radius: 20px!important;
    color: var(--GivePower-Palette-Ocean);
    font-size: 19px;
    font-size: 1.19rem;
    font-style: normal;
    font-weight: 800;
    line-height: 23px;
    line-height: 1.44rem;
    letter-spacing: 0.57px;
}

.new-carousel-black-card .fl-callout-cta-link:hover,
.new-carousel-black-card .fl-callout-cta-link:focus{
    transform: scale(1.12);
}
.new-carousel-black-card .fl-callout-tag{
    margin-bottom: 0;
    padding: 8px 16px;
    font-size: 14px;
    font-size: .88rem;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    line-height: 1.13rem;
    border-radius: 10px;
    color: var(--GivePower-Palette-Ocean);
    background-color: var(--sweet-water);
    display: inline-block;
}
.new-carousel-black .fl-col-group:first-child{
    max-width: 1366px;
    padding:0 72px;
    margin: auto;
}
.new-carousel-black .fl-col-group:nth-child(2){
    padding-left:72px;
    margin-left: 0;
}

.new-carousel-black .slick-slide {
    opacity: .5;
    transition: opacity 600ms ease-in-out;
}

.new-carousel-black .slick-slide.slick-active {
    opacity: 1;
    transition: opacity 400ms ease-in-out;
    transition-delay: 200ms;
}

@media screen and (min-width: 1366px) {
    .new-carousel-black .fl-col-group:nth-child(2){
        margin-left: calc(50vw - 690px);
    }
}
@media only screen and (max-width: 1366px) {
    .slick-slide .fl-module-callout.new-carousel-black-card{
        width: 872px !important;
        max-width: 872px;
    }
    .new-carousel-black-card .fl-callout-content{

    }
    .new-carousel-black-card .fl-callout-photo{
        width: 360px;
        flex-basis: 360px;
    }
}
@media only screen and (max-width: 992px) {
    .slick-slide .fl-module-callout.new-carousel-black-card{
        width: calc(100vw - 72px) !important;
        max-width: calc(100vw - 72px);
        margin-left:0px;
        margin-right:36px;
    }
    .new-carousel-black .fl-col-group:nth-child(2) {
        padding-left: 36px;
        margin-left: 0;
    }
    .new-carousel-black .fl-col-group:first-child{
        padding: 0 36px;
    }
}
@media only screen and (max-width: 768px) {
    .new-carousel-black .fl-col-group:first-child {
        padding: 0 18px;
    }
    .new-carousel-black .fl-col-group:nth-child(2) {
        padding-left: 0;
        margin-left: 0;
    }
    .slick-slide .fl-module-callout.new-carousel-black-card{
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px);
        padding: 16px;
        border-radius: 16px;
        margin-left:18px;
        flex-direction: column-reverse;
    }
    .new-carousel-black-card .fl-callout{
        flex-direction: column-reverse;
        gap:0;
    }
    .new-carousel-black-card .fl-callout-content{
        padding-top: 16px;
        padding-bottom: 0;
    }
    .new-carousel-black-card .fl-callout-photo{
        /* BugHerd 497 - was 240px, which framed these photos at 1.34:1 while all
           three sources are near square (1.12 to 1.16), so each was cropped top
           and bottom. The parent .fl-callout is column-reverse at this
           breakpoint, so flex-basis is the HEIGHT here; above 768px it is a row
           and this value is a width, which is why the desktop framing is set by
           the separate rule in the max-width:1366px block and is untouched.
           322 / 1.12 = 287.5, so 288px reproduces the sources' own ratio. */
        flex-basis: 288px;
        width: 100%;
        border-radius: 16px;
        min-height: unset;
        margin-top:0;
    }
    .new-carousel-black-card .fl-callout-title{
        padding-top: 16px;
    }
    .new-carousel-black-card .fl-callout-text {
        padding-bottom: 6px;
    }
    .new-carousel-black-card .fl-callout-cta-link{
        padding: 13px 26px;
        border-radius: 18px;
    }
}

.newsletter-form button[type*=submit]{
    width:100%;
    justify-content: center;
}

/* BugHerd 77, phone breakpoint
   The top-alignment fix earlier in this file is scoped to min-width 1366px, so it
   never reached phones, and the max-width 768px rule in css/style.css centres this
   content with !important. Measured on Treks at 390px, that left the card titles at
   102px, 117px and 87px from the top of three otherwise identical cards, which is
   the inconsistency the ticket describes.

   The cards are equal height with copy of differing lengths, so centring can only
   ever place the title somewhere different in each one. Top-aligning matches what
   desktop already does and stacks every card identically.

   This file is enqueued after css/style.css, so the same selector carrying
   !important settles the conflict here rather than by editing the shared rule,
   which also styles unrelated components at this breakpoint. */
@media only screen and (max-width: 768px) {
    .number-carousel-box .carousel-card .fl-callout-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px;
    }
}

/* BugHerd 478
   The rule above shrink-wraps each card title to its text, so a title that is
   already text-align:center still sits left of the card's centre line. Undoing
   that on the cross axis lets the title fill the card and centre properly.

   justify-content stays flex-start: that is the main axis, and it carries the
   BugHerd 77 fix that keeps every card's content starting at the same height.

   Scoped to the Mission carousel by class rather than changed above, because
   .number-carousel-box is also on Solar Water Solutions, Solar Impact Projects
   and Treks. On Treks it would re-centre the "Day 1" card headings, which no
   ticket asked for. Add cards-center--mobile to another carousel in Beaver
   Builder if Loop wants the same treatment there. */
@media only screen and (max-width: 768px) {
    .cards-center--mobile .carousel-card .fl-callout-content {
        align-items: stretch !important;
    }
}