/* ==========================================================
   FUNDRAISING
   The pages that used to be fundraise.zindagitrust.org.

   They share this site's theme — the old project used the very same
   stylesheet and scripts — so this file only adds what is specific to a
   fundraiser card, its progress bar and the detail page.
   ========================================================== */


/* ----------------------------------------------------------
   PROGRESS
   ---------------------------------------------------------- */
.fr-bar {
    height: 8px;
    border-radius: 999px;
    background: #eeeef2;
    overflow: hidden;
    margin-bottom: 10px;
}

.fr-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a4c, #ff6015);
    /* a fundraiser on 0% should still show that the bar is a bar */
    min-width: 3px;
    transition: width .6s ease;
}

.fr-figures {
    font-size: 14.5px;
    color: #6c757d;
    margin-bottom: 2px;
}

.fr-figures strong {
    color: #302c51;
    font-size: 17px;
}

.fr-meta {
    font-size: 13px;
    color: #9a9aa5;
    margin-bottom: 14px;
}

/* ----------------------------------------------------------
   THE FILTER
   ---------------------------------------------------------- */
.fr-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 26px;
}

.fr-filter .form-control,
.fr-filter .form-select {
    height: 46px;
    width: auto;
    min-width: 210px;
    flex: 1 1 210px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
}

.fr-filter .form-control:focus,
.fr-filter .form-select:focus {
    border-color: #ff6015;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .15);
}

.fr-filter .common-btn {
    flex: 0 0 auto;
}

/* Clear the filter. The Search button beside it is the solid orange pill of
   the theme, so this is the same pill hollowed out: the two read as a pair,
   and the one that undoes something does not compete with the one that does
   it. Same 46px as the fields it sits beside, so the row lines up. */
.fr-clear {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #e0e0e6;
    border-radius: 30px;
    background-color: #fff;
    color: #302c51;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: .3s all ease;
}

.fr-clear:hover,
.fr-clear:focus {
    border-color: #302c51;
    background-color: #302c51;
    color: #fff;
}

/* The × in front of the word. Drawn here rather than typed into the page so
   the link still reads as "Clear" to a screen reader. */
.fr-clear::before {
    content: '\00d7';
    font-size: 19px;
    line-height: 1;
}

.fr-count {
    color: #9a9aa5;
    font-size: 14px;
    margin-bottom: 14px;
}

@media only screen and (max-width: 575px) {
    .fr-filter .form-control,
    .fr-filter .form-select,
    .fr-filter .common-btn,
    .fr-filter .fr-clear {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    /* Full width, so the label goes to the middle with its × beside it. */
    .fr-filter .fr-clear {
        justify-content: center;
    }
}


/* ----------------------------------------------------------
   ONE FUNDRAISER
   ---------------------------------------------------------- */
/* The cover photo, at the size it actually is.
   It used to be width: 100% with object-fit: cover, which stretched the
   uploads that are narrower than this column — most of them — up to 730px
   and cropped the rest. Blowing up a 600px photo does not add detail, it
   only softens it. So: never wider than the column, never larger than the
   file, and centred when it is smaller. */
.fr-hero {
    text-align: center;
}

.fr-hero img {
    width: auto;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
}

.fr-panel {
    border: 1px solid #e9eae4;
    border-radius: 6px;
    padding: 22px;
    background: #fff;
}

.fr-panel .fr-bar {
    height: 12px;
    margin-bottom: 14px;
}

/* Stays in view while the story and the donation form scroll past it. The
   offset clears the sticky header above. Only where there is a second column
   to sit beside — on a phone the panel is just another block in the stack. */
@media only screen and (min-width: 992px) {
    .fr-panel-sticky {
        position: sticky;
        top: 110px;
    }
}

.fr-raised {
    font-size: 28px;
    font-weight: 700;
    color: #ff6015;
    line-height: 1.2;
    margin: 0;
}

.fr-goal {
    color: #6c757d;
    font-size: 14.5px;
    margin-bottom: 16px;
}

.fr-story {
    line-height: 1.8;
}

/* The description is pasted from a rich-text editor, so it arrives with its
   own tags and occasionally a huge inline image. */
.fr-story img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.fr-story ul,
.fr-story ol {
    padding-left: 22px;
    margin-bottom: 1rem;
}

.fr-story li {
    list-style: inherit;
}


/* ----------------------------------------------------------
   WHO HAS GIVEN
   ---------------------------------------------------------- */
.fr-donors {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fr-donors li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f4;
    font-size: 14.5px;
}

.fr-donors li:last-child {
    border-bottom: 0;
}

.fr-donors .fr-donor-name {
    color: #302c51;
}

.fr-donors .fr-donor-amount {
    color: #ff6015;
    font-weight: 600;
    white-space: nowrap;
}

.fr-donors .fr-donor-when {
    color: #9a9aa5;
    font-size: 12.5px;
}


/* ----------------------------------------------------------
   SHARING
   ---------------------------------------------------------- */
.fr-share {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.fr-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e6;
    border-radius: 50%;
    color: #302c51;
    transition: .3s all ease;
}

.fr-share a:hover {
    background: #ff6015;
    border-color: #ff6015;
    color: #fff;
}

.fr-share a svg {
    flex: none;
}


/* ==========================================================
   THE LANDING PAGE
   fundraisers/index.blade.php — the fundraiser project's index.php.
   ========================================================== */

/* ----------------------------------------------------------
   HERO

   The theme's .banner-area-two expects the owl carousel to size it. There
   is only one slide here and no carousel, so the height is set directly —
   otherwise the section collapses to the height of its text.
   ---------------------------------------------------------- */
.fr-banner {
    margin-top: 85px;
}

.fr-banner .banner-slider-item {
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fr-banner .banner-content h1 {
    font-size: 30px;
    line-height: 1.3;
}

/* Two buttons side by side, wrapping rather than overflowing on a phone. */
.fr-banner .banner-btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fr-banner .banner-btn-area .common-btn {
    margin-right: 0;
}

/* The theme sets .common-btn:hover { color: #fff !important }, while a
   more specific rule — .banner-area-two .banner-content .banner-btn-area
   .banner-btn:hover — gives this button a WHITE background on hover. The
   !important wins the colour, so the label went white on white and simply
   vanished. Matching that !important is the only way to win it back. */
.fr-banner .banner-btn-area .banner-btn:hover {
    color: #302c51 !important;
    background-color: #fff;
}

@media only screen and (max-width: 767px) {
    .fr-banner .banner-slider-item {
        min-height: 420px;
    }

    .fr-banner .banner-content h1 {
        font-size: 23px;
    }
}


/* ----------------------------------------------------------
   THREE WAYS TO HELP

   Equal blocks: .equal-cards stretches the column, so the card fills it
   less the row gap. Without this the three sit at three different heights,
   because their copy is three different lengths.
   ---------------------------------------------------------- */
/* The source gives these the theme's signature shape — three rounded
   corners and one square — and squares them off on hover as the card
   lifts. That radius was stripped out of the theme's own .feature-item
   during an earlier port, and paid-to-learn now relies on the square
   version, so it is restored here rather than in style.css. */
.fr-features .feature-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border-radius: 30px 30px 0 30px;
}

/* The theme's .feature-item:hover already squares the corners and lifts
   the block; it simply had no radius to square. */
.fr-features .feature-item:hover {
    border-radius: 0;
}

/* The theme centres a font glyph in its round badge with line-height, which
   does nothing for a picture. Two of these three are pictures. */
.fr-features .feature-item > img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    /* Left, to sit over the heading and copy beneath rather than
       floating in the middle of a left-aligned block. The glyph in the
       third card lines up with these. */
    margin: 0 0 14px;
}

.fr-features .feature-item > i {
    display: block;
    margin-bottom: 14px;
}

/* The theme only whitens the heading when it is wrapped in a link —
   .feature-item h3 a { color: #fff }. The source did wrap all three in
   <a href="#">, which goes nowhere; rather than reproduce a dead link,
   the colour is set on the heading itself. Without this the third block's
   title is navy text on the navy panel and simply cannot be read. */
.fr-features .feature-item h3 {
    color: #fff;
}


/* ----------------------------------------------------------
   THE PROGRAMMES

   Six cards of equal height with the photograph cropped to one band, so the
   row lines up however long a description runs.
   ---------------------------------------------------------- */
.fr-programmes .blog-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.fr-programmes .blog-item .top img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.fr-programmes .blog-item .bottom {
    flex: 1 1 auto;
    padding: 20px;
}

.fr-programmes .blog-item h3 {
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-transform: none !important;
}


/* ----------------------------------------------------------
   EXISTING FUNDRAISERS

   The theme's .donation-item, levelled. The uploads are every shape there
   is, so the photo is cropped to a band and the body is a column with the
   figures pinned to its floor.
   ---------------------------------------------------------- */
.fr-donation {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.fr-donation .img {
    position: relative;
}

.fr-donation .img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.fr-donation .inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.fr-donation .inner .top {
    flex: 1 1 auto;
}

.fr-donation .inner .top h3 {
    font-size: 18px;
    line-height: 1.4;
    text-transform: none !important;
}

/* keeps a long title from pushing the bar and figures out of line with the
   cards beside it */
.fr-donation .inner .top h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fr-donation .inner .bottom {
    margin-top: auto;
}

/* The theme animates the bar in from zero with WOW; these are rendered at
   their width directly, so the animation is not wanted. */
.fr-donation .skill-bar {
    animation: none;
    min-width: 2px;
}


/* ----------------------------------------------------------
   ABOUT US AND THE TWO SCHOOLS
   ---------------------------------------------------------- */
.fr-about .fr-about-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding-top: 20px;
}

.fr-about .fr-about-text h3 {
    margin-bottom: 14px;
}

.fr-about .fr-about-text p {
    margin-bottom: 14px;
}

.fr-school {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* The two school photographs are different shapes; cropping them to one
   band is what makes the row read as a row. */
.fr-school .about-img {
    position: relative;
}

.fr-school .about-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.fr-school .bottom {
    flex: 1 1 auto;
    padding: 10px 15px 20px;
}

.fr-school .bottom h3 {
    font-size: 18px;
    line-height: 1.5;
    margin: 10px 0 6px;
    text-transform: none !important;
}


/* ----------------------------------------------------------
   THE ORANGE BAND
   ---------------------------------------------------------- */
.fr-cta {
    background-color: #ff6015;
    padding: 26px 0;
}

.fr-cta .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fr-cta h4 {
    margin: 0;
    font-size: 21px;
    line-height: 1.4;
}

.fr-cta .banner-btn-area {
    margin: 0;
}

/* A white button on orange would vanish; the source uses a translucent
   white, which reads as a button without fighting the band. */
.fr-cta .common-btn {
    background-color: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
}

/* Same trap as the hero button: the theme forces the hover colour to white
   with !important, and this hover turns the background white too. */
.fr-cta .common-btn:hover {
    background-color: #fff;
    color: #ff6015 !important;
}

@media only screen and (max-width: 767px) {
    .fr-cta .container {
        justify-content: center;
        text-align: center;
    }

    .fr-cta h4 {
        font-size: 18px;
    }
}


/* ==========================================================
   GIVING THROUGH A FUNDRAISER'S PAGE
   ==========================================================
   The form itself is the payment page's, and wears donate.css. Only the
   few things that page has no equivalent for are here.
   ========================================================== */

/* The theme sets strong { display: block } inside the donation areas, which
   dropped "Zakat" onto a line of its own mid-sentence. */
.fr-donate .form-check-label strong,
.fr-donate .fr-amount-echo strong {
    display: inline;
}

/* What the donation reads back as it is typed, under the box it came from. */
.fr-donate .fr-amount-echo {
    margin: 8px 0 0;
    line-height: 1.4;
}

.fr-donate .fr-amount-echo strong {
    color: #ff6015;
    font-size: 18px;
}

/* The Zakat line sits beside the amount box rather than under the heading,
   so it lines up with the field it belongs to. */
.fr-donate .fr-zakat-check {
    padding-top: 12px;
}

/* The currency sits inside the amount box rather than beside it, as on the
   giving page. */
.fr-donate .amount-entry .form-select {
    max-width: 110px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The theme sets label { display: flex } for its own radio styling. A flex
   container makes every child its own item, so the space between "as" and
   <strong>Zakat</strong> was dropped and the two words ran together — and
   the blockified item is why the rule above alone did not help. This label
   has a real checkbox beside it and wants none of that. */
.fr-donate .form-check-label {
    display: inline;
    overflow: visible;
    font-size: 14px;
    color: #302c51;
}

/* The theme draws its own radio circle in front of every label > span; the
   checkbox here has a real one already. */
.fr-donate .form-check-label span::before {
    display: none;
}


/* ==========================================================
   PAGINATION
   ==========================================================
   The same pager as the news listing, in the same colours — see the
   matching block in news.css. It is written out again rather than shared
   so that each page carries only the stylesheet it needs.
   ========================================================== */

.fr-pagination {
    margin-top: 20px;
}

/* Laravel's Bootstrap 5 view puts the "Showing x to y" line and the pager
   side by side. Stacked and centred reads better under a three-column grid. */
.fr-pagination nav > div:last-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fr-pagination nav > div:first-child {
    text-align: center;
}

.fr-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0;
}

.fr-pagination .page-link {
    min-width: 44px;
    text-align: center;
    color: #302c51;
    background-color: #fff;
    border: 1px solid #e5e6ff;
    border-radius: 4px;
    padding: 9px 14px;
    transition: .3s all ease;
}

.fr-pagination .page-link:hover {
    background-color: #e5e6ff;
    color: #302c51;
}

.fr-pagination .page-link:focus {
    box-shadow: none;
}

.fr-pagination .page-item.active .page-link {
    background-color: #ff6015;
    border-color: #ff6015;
    color: #fff;
}

.fr-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f7f7f9;
}


/* ==========================================================
   THEMED PAGES ONLY
   ----------------------------------------------------------
   Scoped to body.home-premium, set by the @section in the two
   Blade files, so removing those lines returns both pages to
   how they were.
   ========================================================== */


/* ----------------------------------------------------------
   THE WHITE COPY STAYS WHITE
   ----------------------------------------------------------
   The lead under the hero heading is written on a photograph,
   and the three "ways to help" cards are written on a teal, an
   orange and a navy fill. All four were white. The theme
   recolours every main p to --ink-soft, which is right in a
   column of body text and leaves pale grey on strong colour
   here -- the hero lead in particular all but disappeared.

   main is in the selector to carry the weight: the theme's
   rule is "main p:not([class*=btn])", three elements deep, and
   without it these lose on specificity.
   ---------------------------------------------------------- */
body.home-premium main .banner-slider-item p,
body.home-premium main .feature-item p {
    color: #fff;
}


/* ----------------------------------------------------------
   THE HEADINGS, UNCAPPED
   ----------------------------------------------------------
   The theme measures a .section-title at 760px, which suits a
   lead paragraph under a heading. "You can help raise funds
   for our following programs" broke to two lines inside that
   measure and holds one line without it.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE HERO BUTTONS, UNDER THE HEADING
   ----------------------------------------------------------
   The eyebrow, the heading and the lead are all centred in the
   hero, and the two buttons were not: .banner-btn-area is a
   flex row with nothing said about justification, so both sat
   against the left edge of a 520px content block whose text is
   centred above them. They also wrap to two rows at this
   width, which made the ragged left edge plainer still.
   Centring the row puts them under the words, and centres each
   row once they wrap.
   ---------------------------------------------------------- */
body.home-premium .fr-banner .banner-btn-area {
    justify-content: center;
}


/* ----------------------------------------------------------
   THE HERO, CLOSER TO THE HEADER
   ----------------------------------------------------------
   .fr-banner carries margin-top: 85px to clear the fixed
   header, which is more than the header needs and left a
   broad white strip above the photograph. 45px clears it and
   starts the page sooner.
   ---------------------------------------------------------- */
body.home-premium .fr-banner {
    margin-top: 45px;
}


/* ----------------------------------------------------------
   THE HERO PHOTOGRAPH, AT ITS OWN BRIGHTNESS
   ----------------------------------------------------------
   The theme treats any .banner-slider-item as a hero and lays
   a dark scrim over it -- 86 per cent at the left edge -- plus
   a fade up from the bottom, so that white hero text reads
   against it. This hero does not need either: its words sit
   on the orange shape, which gives them all the ground they
   need, and the scrim only drained the photograph. Measured
   against the page with the theme off, this is how it looked
   before.
   ---------------------------------------------------------- */
/* :not(.page-hero) is there for weight, not for what it excludes: the
   theme's rule is
   .banner-slider-item:not([style*="background:none"]):not(.page-hero)
   -- four classes deep once both :not() arguments are counted -- and
   without matching that, this loses and the scrim stays. */
body.home-premium .fr-banner .banner-slider-item:not(.page-hero)::before,
body.home-premium .fr-banner .banner-slider-item:not(.page-hero)::after {
    content: none;
}


/* ----------------------------------------------------------
   THE HERO BLOB: WIDER, AND NOT SO TALL
   ----------------------------------------------------------
   The orange shape is .banner-content::before -- it is the
   content box itself, so its proportions are whatever the
   words inside make them.

   The theme takes the hero heading to 66px and holds the box
   at 680px. At that size the heading ran to five lines, which
   stretched the shape from 740x501 to 680x827: a tall narrow
   blob where a broad one had been. It also left the two
   buttons only 520px to sit in, against the 535px they need
   side by side, so they wrapped onto two rows.

   820px of box and a 44px heading bring it back to two lines.
   That is wider than the 740px it was before and shorter than
   either, while staying near the proportions the shape had --
   940px made it a flat wide ellipse rather than the rounder
   blob it is meant to be. The buttons have 660px to sit in
   against the 535px they need, so both stay on one row. The
   vertical padding comes down from 100px to 70px for the same
   reason.
   ---------------------------------------------------------- */
body.home-premium .fr-banner .banner-content {
    max-width: 820px;
    padding: 70px 80px;

    /* .banner-content carries margin-top: 50px, and the cell it sits
       in centres it, so that margin pushed the shape 50px below the
       middle of the band -- 250px of photograph above it against
       200px beneath. Cleared, it sits level in the band. */
    margin-top: 0;
}

body.home-premium .fr-banner .banner-content h1 {
    font-size: 44px;
}


/* ----------------------------------------------------------
   ROOM AROUND THE PROGRAMMES BAND
   ----------------------------------------------------------
   This section is tinted, so where it begins and ends is
   visible. It began 30px below the three "ways to help" cards,
   which read as the band crowding them rather than as a new
   section starting. 50px of white above sets it apart from
   them.

   Nothing below. The section that follows is tinted too -- the
   two fills differ by three or four values per channel -- so
   any white between them read as a strip of page showing
   through a join rather than as space between two sections.
   They run together as one tinted field now, and the headings
   inside each keep their own padding apart.
   ---------------------------------------------------------- */
body.home-premium .fr-programmes {
    margin-top: 50px;
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   ROOM BETWEEN THE TWO ROWS OF PROGRAMME CARDS
   ----------------------------------------------------------
   The six programme cards sit in two rows of three, and the
   bottom of General Education, Breakfast & Health and Arts &
   Sports met the top of Teacher Development, LSBE and
   Infrastructure exactly: a 0px gap, measured.

   .blog-item carries margin-bottom: 30px of its own, but the
   theme also gives it height: 100% so a row of cards comes out
   level. Filling the column leaves the margin outside the box
   the row measures, so it buys no space at all and the rows
   close up. Putting it on the column instead is space the row
   can see. 30px, the same gap the fundraiser cards further
   down the page already keep.
   ---------------------------------------------------------- */
body.home-premium .fr-programmes .equal-cards > [class*="col-"] {
    margin-bottom: 30px;
}


/* ----------------------------------------------------------
   THE FUNDRAISER CARDS
   ----------------------------------------------------------
   style.css gives .donation-item a grey 20px blur, an
   asymmetric 30px 30px 0 30px radius and a hover that drops
   the radius to 0 while lifting 10px. Next to the programme
   cards above -- which are .blog-item and so already wear the
   theme's card -- the two rows looked like different sites.

   They take the same card now: the hairline, the 26px radius
   on all four corners, the theme's resting shadow, and a 6px
   lift into --shadow-md on hover. overflow: hidden is what
   makes the photograph take the top corners with it, and the
   radius is restated on :hover so it no longer snaps square.
   ---------------------------------------------------------- */
body.home-premium .donation-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;

    /* background-color is in the list because the card turns navy on
       hover: left out, the fill switched in one frame while the text
       inside it faded over half a second, so the card appeared to
       snap and then catch up. */
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease),
                border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}

/* The fill on hover has to be said here, and this is why.
   style.css turns a hovered card navy with
   .donation-item:hover { background-color: #302c51 }, two
   classes deep, and recolours every piece of text inside it to
   white to suit. The rule above sets the card's resting fill
   with body.home-premium .donation-item -- two classes and an
   element, which outranks that hover. On the home page it did
   not show, because .donations-area.two .donation-item:hover is
   three classes deep and wins there; the listing has no such
   wrapper, so the card kept its white fill while its text still
   went white, and every word vanished on hover.

   --ink-2 is #302c51, the same navy, so both pages now flip
   identically. */
body.home-premium .donation-item:hover {
    transform: translateY(-6px);
    border-radius: var(--radius-lg);
    border-color: transparent;
    background-color: var(--ink-2);
    box-shadow: var(--shadow-md);
}


/* ----------------------------------------------------------
   THE DONATE NOW BUTTON OVER THE PHOTOGRAPH
   ----------------------------------------------------------
   It is hidden until the card is hovered, and style.css brings
   it in by changing opacity, visibility and bottom together.
   The theme's own button rule replaces the transition list with
   background-position, transform and box-shadow -- none of the
   three it actually moves -- so the button blinked into place.
   The three are added back and it rises as it fades.
   ---------------------------------------------------------- */
body.home-premium .donation-item .img .common-btn {
    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease),
        opacity 0.45s var(--ease),
        visibility 0.45s var(--ease),
        bottom 0.45s var(--ease);
}


/* ----------------------------------------------------------
   THE BUTTON ON THE ORANGE BAND
   ----------------------------------------------------------
   The rule further up this file gives this button a
   translucent white fill so it reads against the band. The
   theme paints every .common-btn with the brand gradient as a
   background-IMAGE, which sits over any background-colour --
   so the button came out orange on orange and all but
   disappeared.

   Clearing the image lets a fill show again, and on a band
   this strong the fill is solid white with the label in the
   accent: the one combination that cannot be lost against it.
   The glow the theme hangs under a button is orange, which is
   invisible here, so it becomes a soft dark one.
   ---------------------------------------------------------- */
body.home-premium .fr-cta .common-btn {
    background-image: none;
    background-color: #fff;
    border: 0;
    color: var(--accent);
    box-shadow: 0 10px 26px -12px rgba(22, 19, 46, 0.45);
}

/* background-color needs !important of its own: the theme clears a
   hovered button's fill with
   .common-btn:hover { background-color: transparent !important }
   because its own fill is a gradient image. Without matching that,
   this button lost its white the moment it was hovered and the
   orange band showed straight through it. */
body.home-premium .fr-cta .common-btn:hover {
    background-color: #fff !important;
    background-image: none;
    color: var(--accent-deep) !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(22, 19, 46, 0.55);
}


/* ----------------------------------------------------------
   NO FADE WHERE THERE IS NO PHOTOGRAPH
   ----------------------------------------------------------
   The theme fades the bottom 30% of a card's .top so a
   photograph has an edge to end on. On the two school cards
   the .top box is 280px tall and the photograph inside it is
   250px, so 84px of fade fell across 30px of empty box and
   read as a grey strip under each picture. Off here; the
   programme and fundraiser cards keep it, their pictures
   filling the box.
   ---------------------------------------------------------- */
body.home-premium .fr-school .top::after {
    content: none;
}


/* ----------------------------------------------------------
   THE LISTING ON THE SAME BAND AS THE HOME PAGE'S
   ----------------------------------------------------------
   The cards themselves are already identical: both pages
   build them from fundraisers/_donation-item and both load
   this file, so the hairline, the 26px radius, the shadow and
   the hover are the same on each -- measured side by side.

   What differed was the ground they stood on. "Support
   Existing Fundraisers" sits in .donations-area.two, which
   style.css tints #f4f8f7, while the listing sat on plain
   white, so the same card read as two different treatments.
   The listing takes that tint now and the two match.
   ---------------------------------------------------------- */
body.home-premium .fr-list {
    background-color: #f4f8f7;
}