/* =========================================================
   HOME.CSS
   Homepage-specific styles - loaded ONLY by default.asp via
   extraHead (shared components moved to components.css).
   ========================================================= */


/* =========================================================
   HERO SECTION
   ========================================================= */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 0 60px 120px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000;
}

    /* background video */
    .hero video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -2;
    }

    /* Dark overlay with radial colour glows.
       THE SCRIM WAS THINNEST WHERE THE WORDS ARE. .hero aligns its
       content to flex-end, so the text sits in the bottom third - and
       the old ramp went 0.75 at the top down to 0.2 at 70%, which is
       exactly where the tagline and paragraph land. On a dark video
       scene it read fine; on a bright one it washed out, which is why
       it was "difficult to read at times depending on the scene".
       The top stays dark for the nav, the middle stays light so the
       footage is still visible, and the bottom is taken back up so the
       text has a floor to sit on whatever is playing behind it. */
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(900px 380px at 18% 18%, rgba(47,125,255,0.18), transparent 62%),
            radial-gradient(760px 360px at 82% 22%, rgba(214,0,0,0.16), transparent 62%),
            linear-gradient(to bottom,
                rgba(0,0,0,0.75),
                rgba(0,0,0,0.42) 34%,
                rgba(0,0,0,0.48) 52%,
                rgba(0,0,0,0.74) 74%,
                rgba(0,0,0,0.88) 90%,
                var(--bg) 100%);
        z-index: -1;
    }

/* hero text block */
.hero-content {
    max-width: 880px;
    padding-top: 120px;
    position: relative;
    z-index: 1;
}

    /* The small uppercase line above the tagline. #aaa is a mid grey at
       12px over moving footage - the least readable thing in the hero.
       Still quieter than the tagline, because it is an eyebrow, but it
       is quieter by size and letter-spacing now rather than by being
       half dissolved into the video. */
    .hero-content h1 {
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #e6eaf0;
        font-weight: 900;
        margin-bottom: 14px;
        text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    }

/* PLAIN WHITE. This used to be a #fff -> #cfcfcf gradient poured through
   background-clip:text, which greys the bottom two thirds of every
   letterform - at 64px and weight 950 that reads as grimy rather than as
   a gradient, and it was fighting the video behind it for the same mid
   tones. A drop-shadow filter on top made it worse: it shadows the
   rendered gradient, so the smudge got its own smudge.
   Solid white and a real text-shadow. Two shadows: a tight dark one for
   the edge of each stroke, and a wide soft one to separate the block
   from whatever is playing behind it. */
.hero .hero-tagline {
    font-size: 64px;
    font-weight: 950;
    letter-spacing: -1px;
    line-height: 1.05;
    margin-bottom: 18px;
    color: #fff;
    text-shadow:
        0 2px 6px rgba(0,0,0,0.55),
        0 6px 28px rgba(0,0,0,0.45);
}

/* Was var(--muted2) - a mid grey, chosen for body copy on a solid dark
   panel, and the weakest thing on the page when it is sitting over
   moving footage instead. */
.hero p {
    font-size: 19px;
    line-height: 1.75;
    color: #f4f6f9;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 3px 16px rgba(0,0,0,0.45);
    max-width: 780px;
    margin-bottom: 22px;
}

/* hero buttons */
.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}


/* The STATS BLOCK moved to components.css. about.asp ships the same
   .home-stats / .stats-card / .stat-number markup but only loads
   about.css, and layout_top.asp gates home.css on default.asp - so the
   whole stats block was completely unstyled on the About page. It is
   shared markup and belongs in the shared stylesheet.

   The .digit-column / .digit-strip / .digit rules were deleted rather
   than moved: they existed only for home.js's slot-machine counter,
   which was a duplicate of site-core.js's and has been removed. */


/* =========================================================
   DONATION CTA
   ========================================================= */

.donation-cta {
    max-width: var(--max);
    margin: 30px auto 0;
    padding: 0 60px;
}

.donation-cta-card {
    border-radius: 26px;
    padding: 50px;
    background: linear-gradient(135deg, rgba(214,0,0,0.15), rgba(47,125,255,0.15)), rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .donation-cta-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

.donation-cta h3 {
    font-size: 30px;
    font-weight: 950;
    margin-bottom: 14px;
}

.donation-cta p {
    max-width: 620px;
    color: #bdbdbd;
    line-height: 1.8;
}

.donation-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .hero {
        padding: 0 20px 70px;
        min-height: 78vh;
    }

        .hero h1 {
            font-size: 42px;
        }

    .donation-cta {
        padding: 0 20px;
    }

    .donation-cta-card {
        padding: 40px 30px;
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 34px;
    }
}