/* ------------------------------------------------------------------------------
   CBFGSHero - ported from the SWAT prototype, spec CSS 186-208 and 180-182.
   ------------------------------------------------------------------------------ */

/* Compound selector - see the note in CBFGSTrustStrip/module.css about load order. */
.cbf-gs.cbf-gs-hero {
    position: relative; overflow: hidden; color: #fff;
    min-height: 100vh; display: flex; align-items: center;
}

/* Taller than the section and offset upwards so the parallax translate never
   exposes an edge. Spec 194. */
.cbf-gs-hero .hero-media {
    position: absolute; left: 0; right: 0; top: -15%; height: 130%;
    background: center/cover no-repeat #2e1a47;
    will-change: transform;
}
.cbf-gs-hero .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(30, 17, 44, .95) 0%, rgba(30, 17, 44, .8) 44%, rgba(30, 17, 44, .4) 100%);
}
.cbf-gs-hero .hero-inner {
    position: relative; max-width: 1120px; margin: 0 auto; width: 100%;
    padding: 88px 20px 60px;
}

.cbf-gs-hero .hero-eyebrow {
    font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
    color: #f2c98a; font-weight: 700; margin: 0 0 14px;
}
/* !important on the type properties: the skin forces h1 font-size/weight. */
.cbf-gs-hero .hero-title {
    font-weight: 800 !important;
    font-size: clamp(38px, 7vw, 72px) !important;
    line-height: 1.02 !important;
    margin: 0; max-width: 15ch; color: #fff !important;
}
.cbf-gs-hero .hero-title .gold { color: var(--gold); }
.cbf-gs-hero .hero-story {
    max-width: 54ch; margin: 22px 0 0;
    font-size: clamp(15px, 1.5vw, 18px); color: #eadfd8; line-height: 1.6;
}
.cbf-gs-hero .hero-story b { color: #fff; font-weight: 700; }

/* !important is required here: see the note on anchors in CBFGSShared/cbf-gs.css */
.cbf-gs-hero .hero-link {
    display: inline-block; margin-top: 16px;
    color: #f0e6de !important;
    font-size: 14px; font-weight: 600;
    text-decoration: underline !important; text-underline-offset: 3px; transition: color .15s;
}
.cbf-gs-hero .hero-link:hover { color: #fff !important; }

.cbf-gs-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cbf-gs-hero .hero-urgency { margin: 16px 0 0; font-size: 13px; color: #f2c98a; font-weight: 600; }

.cbf-gs-hero .hero-stats {
    display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px;
    padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.cbf-gs-hero .hero-stat .n { font-family: "Montserrat"; font-weight: 800; font-size: 26px; color: #fff; }
.cbf-gs-hero .hero-stat .l { font-size: 12.5px; color: #d8c9e8; margin-top: 2px; }

/* ---- scroll cue, spec 187-193 ---- */
.cbf-gs-hero .scrolldown {
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: none; border: 0; cursor: pointer; padding: 8px; z-index: 5;
    opacity: .7; transition: opacity .4s ease, transform .4s ease; width: auto;
}
.cbf-gs-hero .scrolldown:hover { opacity: 1; }
.cbf-gs-hero .scrolldown.hide {
    opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px);
}
.cbf-gs-hero .scrolldown svg { display: block; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
.cbf-gs-hero .scrolldown .wheel { animation: sd-wheel 1.9s cubic-bezier(.4, 0, .2, 1) infinite; }

@keyframes sd-wheel {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    55%  { transform: translateY(12px); opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cbf-gs-hero .scrolldown .wheel { animation: none; }
}

/* ------------------------------------------------------------------------------
   Minimal variant - GivingSeasonMinimal.html #top.hero. Toggled by
   CBFGSHeroSetting.UseMinimalVersion, which adds .cbf-gs-hero--minimal to the
   section. The eyebrow, secondary CTA, stats block and scroll cue are dropped in
   the markup; the rules below carry the design differences on the shared elements
   (no forced full-height, tighter spacing and smaller type). Everything here is
   scoped to the modifier so the normal hero above is completely unaffected.
   ------------------------------------------------------------------------------ */

/* Sizes to its content instead of filling the viewport. */
.cbf-gs.cbf-gs-hero--minimal { min-height: 0; }

.cbf-gs-hero--minimal .hero-inner { padding: 72px 20px 40px; }
@media (max-width: 620px) {
    .cbf-gs-hero--minimal .hero-inner { padding: 56px 20px 34px; }
}

.cbf-gs-hero--minimal .hero-title {
    font-size: clamp(34px, 5.4vw, 56px) !important;
    line-height: 1.04 !important;
    max-width: 16ch;
}
.cbf-gs-hero--minimal .hero-story {
    max-width: 56ch; margin: 16px 0 0;
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55;
}
.cbf-gs-hero--minimal .hero-cta { gap: 12px 20px; margin-top: 24px; align-items: center; }

/* The inline link is moved into the CTA row in this variant (next to the button)
   rather than sitting on its own line above it, so it loses its top margin. */
.cbf-gs-hero--minimal .hero-cta .hero-link { margin-top: 0; }