/*****************************/
/*  START :: Featured Cards  */
/*****************************/
/******************************************/
/*  START :: Feature Card - Text & Image  */
/******************************************/
.row--feature-card--img > div {
    overflow: hidden;
}
.row--feature-card--img .fl-module-photo,
.row--feature-card--img .fl-module-content,
.row--feature-card--img .fl-photo,
.row--feature-card--img .fl-photo-content {
    border-radius: 0px;
    display: inline-flex;
    flex-grow: 1;
}
.row--feature-card--img img {
    object-fit: cover;
    height: auto;
}
.row--feature-card--img .position-center img {
    object-position: center;
}
.row--feature-card--img .position-left img {
    object-position: left;
}
.row--feature-card--img .position-right img {
    object-position: right;
}

/* =================================================
        MOBILE, only        
================================================= */
@media only screen and (max-width: 768px) {
    /* Turn off animations on mobile, so stacked columns don't animate in at different times */
    .row--feature-card .fl-animation {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        transition-property: none !important;
        opacity: 1 !important;
    }
    /* bug fix in safari / firefox on ios for height: auto not working */
    .firefox .row--feature-card--img img,
    .safari .row--feature-card--img img {
        height: 100% !important; 
    }
}
/******************************************/
/*  END   :: Feature Card - Text & Image  */
/******************************************/

/************************************************/
/*  START :: Feature Card – Horizontal Overlap  */
/************************************************/
.row--feature-card-horizontal-overlap {
    --overlap-img-height: 356px;
    --overlap-img-margin-block: 42px;
    --overlap-img-width: 393px;
    --overlap-amount: 70px;
}
.row--feature-card-horizontal-overlap .column--container  {
    position: relative;
}
body:not(.fl-builder-edit) .row--feature-card-horizontal-overlap .column--img,
body:not(.fl-builder-edit) .row--feature-card-horizontal-overlap .column--text {
    width: 100% !important;
}
.row--feature-card-horizontal-overlap .column--img {
    pointer-events: none; /* so content below is still clickable */
    z-index: 1;
}
.row--feature-card-horizontal-overlap img {
    height: var(--overlap-img-height) !important;
    object-fit: cover;
    width: var(--overlap-img-width);
}

/* =================================================
                BB "LARGE" DESKTOP, and up
================================================= */
@media only screen and (min-width: 993px) {
    .row--feature-card-horizontal-overlap .column--img {
        position: absolute;
        inset: 0;
        left: 0;
        width: 100%;
    }
    .right.row--feature-card-horizontal-overlap .column--img{
        left: unset;
        right: 0;
    }
    .row--feature-card-horizontal-overlap .column--text {
        min-height: calc(var(--overlap-img-height) + calc(var(--overlap-img-margin-block) * 2));
        margin-left: calc(var(--overlap-img-width) - var(--overlap-amount));
    }
    .right.row--feature-card-horizontal-overlap .column--text {
        min-height: calc(var(--overlap-img-height) + calc(var(--overlap-img-margin-block) * 2));
        margin-right: calc(var(--overlap-img-width) - var(--overlap-amount));
        margin-left: 0;
    }
}

/* =================================================
                TABLET, and down
================================================= */
@media only screen and (max-width: 992px) {
    .row--feature-card-horizontal-overlap {
        --overlap-amount: 36px;
        --overlap-img-height: 300px;
        --overlap-img-width: 393px;
    }
    .row--feature-card-horizontal-overlap .fl-photo {
        margin-bottom: calc(var(--overlap-amount) * -1);
        text-align: center;
    }
    /* BugHerd 537 - the image column carries z-index:1 so it should sit above
       the card it overlaps, but z-index does nothing on a statically positioned
       element, so the GoodLeap image was painted underneath and read as badly
       placed. position:relative makes the existing z-index take effect. No new
       stacking value is introduced. */
    .row--feature-card-horizontal-overlap .column--img {
        position: relative;
    }
}
/* =================================================
                MOBILE, only
================================================= */
@media only screen and (max-width: 768px) {
    .row--feature-card-horizontal-overlap {
        /* BugHerd 422 / 436 / 448 — was `--overlap-amount: 0`, which made
           .fl-photo's margin-bottom (set in the <=992px block) compute to 0.
           The two independently-rounded cards then butt-joined at exactly
           0.00px and the page background showed through as pinch notches at
           the seam. 36px is the theme's own tablet overlap, so the phone
           stack now reads the same way the 769-992px band does. */
        --overlap-amount: 36px;
        --overlap-img-height: 280px;
        --overlap-img-width: 340px;
        /* --overlap-img-width: 768px; */
    }
    /* MANDATORY companion to the overlap above. The badge card now sits 36px
       into the teal card, so the teal card must regain that much top padding
       or it eats the heading (26px padding - 36px overlap = -10px clearance,
       i.e. the first line is clipped). 36 + 30 = 66px reproduces the
       clearance the 769-992px band already renders. Four classes (0,4,0)
       beats Beaver Builder's own (0,3,0) `.fl-node-x.fl-col > .fl-col-content`
       mobile padding rule without needing !important. */
    .row--feature-card-horizontal-overlap .fl-col.column--text > .fl-col-content {
        padding-top: calc(var(--overlap-amount) + 30px);
    }
    .row--feature-card-horizontal-overlap img {
        /* max-width: 100%; */
    }
}
/************************************************/
/*  END   :: Feature Card – Horizontal Overlap  */
/************************************************/


/*****************************/
/*  END   :: Featured Cards  */
/*****************************/

/* BugHerd 543 - the transparency-badges artwork occupies a small band of a
   square SVG, so the badge marks rendered ~74px tall on phones. A taller
   cover crop enlarges the marks on the Annual Reports card only. */
.fl-builder-content-2061 .fl-node-96ra1sjl23f7 img {
    height: 440px !important;
}

/* Pre-Launch QA (Aug 10), KD: "Ratings are still too small" (Annual Reports, and the
   same note again on Give Monthly).

   "Still" is the important word - this has been raised before and two earlier passes
   (BugHerd 543 and 508, below) only ever addressed phones. On desktop nothing had moved.

   Measured: transparency-badges.svg is 843x843 with a cream ground, and the two rating
   marks occupy roughly x 201-642, y 316-500 of that - about half its width and a fifth
   of its height. The photo module is 435px wide, and because the artwork is square the
   image can only ever be 435 tall, so the marks render about 227 x 95. The
   `height: 440px` further down does nothing for size; it only adds 5px of box.

   Widening the module is not available: this is an overlap card and the image already
   sits 112px over the text column. So the artwork is scaled inside its own box, which is
   what BugHerd 508 already does for phones - the cream margins absorb it. At 1.6 the
   marks come out about 363 x 152, and the ceiling before they would touch the box edge
   is 1.92.

   Keyed to the attachment rather than to node ids, so all six pages carrying this asset
   move together. Desktop only: below 993 the two fixes below already tune this artwork,
   and nothing in this batch asks for a change there. */
@media only screen and (min-width: 993px) {
    .fl-photo-content:has(> img.wp-image-2241) {
        overflow: hidden;
        border-radius: var(--border-radius-img);
    }
    img.fl-photo-img.wp-image-2241 {
        transform: scale(1.6);
    }
}

/* BugHerd 508 - same asset on the Donate page overlap card; scale the image
   inside its rounded mask so the badges match their desktop size. Remove if
   the client ships a tighter-cropped mobile asset. */
.fl-node-6psc8jywl7mu .fl-photo-content {
    overflow: hidden;
    border-radius: var(--border-radius-img);
}
@media only screen and (max-width: 768px) {
    .fl-node-6psc8jywl7mu img {
        transform: scale(1.3);
    }
}