/* ==========================================================================
   MMBBM-611 — Fall 2026 Campaign Landing
   --------------------------------------------------------------------------
   Loaded by Views/FallCampaignLanding.cshtml *after* campaign-v2.css.

   The Fall comp is the Campaign V2 layout re-skinned in MMBB purple, so this
   file is a delta over campaign-v2.css rather than a fork of it: a handful of
   token values plus the rules where the Fall design genuinely differs from V2
   (type scale, service-column treatment, testimonial voice). Forking the
   900-line stylesheet would have to be kept in step by hand every time V2
   changes.

   .campaign-fall-page sits on the same wrapper element as .campaign-v2-page
   (see FallCampaignLanding.cshtml), so everything here is scoped to the Fall
   page's subtree and is invisible on every existing V2 campaign page.

   Values are read from the Figma source of truth:
   https://www.figma.com/design/aicodj3aR6ba5vpSqIHaX1/MMBB--Public-?node-id=6-109
   Figma lays the page out on a fixed 1440px frame; px values below are
   expressed as clamps so they land on the comp's number at desktop without
   breaking the responsive behaviour V2 already has.
   ========================================================================== */

/* ==========================================================================
   Tokens
   --------------------------------------------------------------------------
   campaign-v2.css declares these on :root and resolves them at use time, so
   redefining them on the wrapper re-colours .gold-banner-text, .form-section,
   .mission-headline, .btn-submit, .testimonial-author, .newsletter-strip and
   .footer without touching a single component rule.

   Gold is deliberately NOT overridden: the Fall comp uses the same #FFAF00
   the navy pages use. Only the blue becomes purple.
   ========================================================================== */
.campaign-fall-page {
    --mmbb-blue: #890c58;

    /* The service columns use a second, lighter purple that appears nowhere
       else in the design. Local to this file — not a V2 token. */
    --fall-purple-alt: #983070;

    /* V2's quote marks are navy PNGs and would read as a foreign colour on the
       Fall band. These are the comp's own #890C58 vectors. */
    --mmbb-quote-open: url('/assets/images/campaign-fall/quote-open.svg');
    --mmbb-quote-close: url('/assets/images/campaign-fall/quote-close.svg');

    /* Warm scrim from the comp: transparent through the top third so the faces
       stay lit, deepening to a brown at the base so the headline holds. */
    --mmbb-hero-scrim:
        linear-gradient(180deg, rgba(45, 32, 24, 0) 35.003%, rgb(49, 25, 9) 100%),
        linear-gradient(90deg, rgba(50, 40, 33, 0.3) 0%, rgba(50, 40, 33, 0.3) 100%);
}

/* ==========================================================================
   Responsive contract
   --------------------------------------------------------------------------
   The Figma comp is a single fixed 1440px frame, so every pixel value it
   specifies is a DESKTOP value. Rules that reproduce those numbers literally
   live in the `min-width: 768px` block near the bottom of this file; anything
   outside that block must hold at 320px too.

   Two guards below exist because the comp's own assets are desktop-shaped:
   the MMBB lockup is 1474x109 (13.5:1), so a height-only rule makes it 433px
   wide and overflows a phone.
   ========================================================================== */

/* ==========================================================================
   Section backgrounds the colour pickers cannot express
   --------------------------------------------------------------------------
   formCampaignV2 and testimonialsPanel each write `background-color` as an
   INLINE style from a per-block colour picker (defaulting to #003070 and
   #FFAF00). The picker behind both is the "Campaign V2 Color Picker" data
   type, whose palette is exactly three fixed swatches — 003070 Blue,
   FFAF00 Gold, ffffff White. The Fall purple is not among them, so no editor
   choice can produce the comp.

   These two bands are design, not editorial, so the stylesheet owns them.
   `!important` is required and sufficient: an important declaration in a
   stylesheet outranks a non-important inline style. This also removes two
   manual backoffice steps that would otherwise have to be repeated, and
   remembered, in every environment.
   ========================================================================== */
.campaign-fall-page .form-section {
    background-color: #890c58 !important;
}

.campaign-fall-page .testimonial-section {
    background-color: #ffaf00 !important;
}

/* ==========================================================================
   Rich-text paragraphs
   --------------------------------------------------------------------------
   TinyMCE wraps every field it stores in <p>, and the site's global stylesheet
   (loaded by _BaseLayout before this file) sets an explicit font-size on `p`.
   That declaration applies directly to the paragraph, so it outranks the size
   these containers merely pass down by inheritance — the mission headline
   rendered at 17px instead of 72px. Re-inherit so the container stays the
   single source of truth for its own typography.

   Only reachable with real editor content on the full page: a static harness
   loading just the campaign stylesheets has no global `p` rule to collide with.
   ========================================================================== */
.campaign-fall-page .mission-headline p,
.campaign-fall-page .mission-body-text p,
.campaign-fall-page .testimonial-text p,
.campaign-fall-page .form-header p,
.campaign-fall-page .hero-title p {
    font-size: inherit;
    line-height: inherit;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* The hero band is far wider than the photo's 3:2, so `cover` overflows it
   vertically and V2's `background-position: center` splits that overflow evenly
   — at 1641px wide that cuts 187px off the top, straight through the faces.
   The comp doesn't centre it: Figma positions the image at height 122.51% with
   top -4.39%, cropping ~3.6% off the top and the rest off the bottom. A
   background-position percentage resolves against the overflow rather than the
   image, so 10% reproduces that framing and keeps the faces intact at any
   viewport width. */
.campaign-fall-page .hero-section {
    background-position: center 10%;
}

.campaign-fall-page .hero-content {
    max-width: 59.75rem; /* 956px container */
}

.campaign-fall-page .hero-title {
    font-weight: 400; /* Playfair Regular, not V2's SemiBold */
    font-size: clamp(2rem, 5.6vw, 5rem); /* -> 80px at 1440 */
    line-height: 1.1;
    margin-bottom: clamp(1.5rem, 4vw, 3rem); /* 48px section gap at desktop */
}

.campaign-fall-page .hero-subtitle {
    font-weight: 600;
    font-size: clamp(1.0625rem, 2.2vw, 2rem); /* -> 32px at 1440 */
    line-height: 1.35;
    letter-spacing: 0.6px;
    max-width: 45.875rem; /* 734px */
    margin-inline: auto;
}

/* The lockup is 13.5:1, so constrain by width and let height follow. */
.campaign-fall-page .hero-logo-img,
.campaign-fall-page .footer__logo {
    max-width: 100%;
    height: auto;
}

.campaign-fall-page .hero-logo-img {
    width: clamp(11rem, 45vw, 20.25rem); /* 324px at 2rem tall on desktop */
}

.campaign-fall-page .footer__logo {
    width: clamp(11rem, 55vw, 27rem); /* 433px at 2rem tall on desktop */
}

/* ==========================================================================
   Gold Banner
   ========================================================================== */
.campaign-fall-page .gold-banner-text {
    /* Both runs are Playfair in the comp — V2 only serifs the italic span. */
    font-family: var(--font-serif);
    line-height: 1.25; /* relaxed: this wraps to 3 lines on a phone */
}

.campaign-fall-page .gold-banner-text span {
    font-weight: 500; /* Medium Italic, not V2's Bold Italic */
}

/* ==========================================================================
   Form Section
   ========================================================================== */
.campaign-fall-page .form-section {
    padding: 5rem 1rem; /* 80px */
}

.campaign-fall-page .form-container {
    max-width: 72rem; /* 1152px */
}

.campaign-fall-page .form-header {
    font-size: 1.0625rem; /* 17px */
    letter-spacing: 1.6px;
    line-height: 1.5882; /* 27px */
    max-width: 59.25rem; /* 948px */
    margin-inline: auto;
}

.campaign-fall-page .form-subheader {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6875; /* 27px */
}

.campaign-fall-page .form-grid {
    gap: 1.875rem; /* 30px */
}

/* An <input> carries `min-width: auto`, so without this it refuses to shrink
   below its intrinsic size and blows the row out on a phone. */
.campaign-fall-page .glass-input {
    min-width: 0;
}

/* Phone: City on its own line, State and ZIP sharing the next. */
.campaign-fall-page .form-inline-group {
    flex-wrap: wrap;
    gap: 1.875rem;
}

.campaign-fall-page .input-city {
    flex: 1 1 100%;
    width: auto;
}

.campaign-fall-page .input-state,
.campaign-fall-page .input-zip {
    flex: 1 1 calc(50% - 0.9375rem);
    width: auto;
}

.campaign-fall-page .btn-submit {
    padding: 0.625rem 1.875rem 0.75rem; /* 10px / 30px / 12px */
}

/* ==========================================================================
   Mission & Services
   --------------------------------------------------------------------------
   The mission headline, cross divider and container widths already match the
   comp exactly at V2's values — only the body copy and the service columns
   differ.
   ========================================================================== */
.campaign-fall-page .mission-highlight {
    font-weight: 400; /* italic but not bold in the comp */
}

/* Italicising the second headline line in the RTE stores <em>, not
   .mission-highlight, so size whichever one the content uses. */
.campaign-fall-page .mission-highlight,
.campaign-fall-page .mission-headline em {
    font-size: calc(1em - 2pt); /* client asked for this line 2pt under the headline */
}

.campaign-fall-page .mission-body-text {
    font-size: calc(clamp(1rem, 1.25vw, 1.125rem) + 1pt); /* client asked for 1pt over the comp's 18px at 1440 */
    line-height: 1.5; /* 27px */
    max-width: 71.875rem; /* 1150px — the comp runs the intro full width */
}

/* The eyebrow is Open Sans Bold in the comp, where V2 sets it in the display
   serif with a Pinyon Script drop-cap. missionBlocksPanel.cshtml always emits
   the .service-title__initial span, so neutralise it rather than fork the
   partial. */
.campaign-fall-page .service-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.0625rem; /* 17px */
    letter-spacing: 1.6px;
    line-height: 1.5882; /* 27px */
    color: var(--fall-purple-alt);
    white-space: normal; /* V2 sets nowrap, which overflows a phone */
    padding-top: 1.5rem;
}

.campaign-fall-page .service-title__initial {
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: inherit;
    margin-right: 0;
}

.campaign-fall-page .service-title__subtitle {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem; /* 24px */
    line-height: normal;
    color: var(--fall-purple-alt);
    margin-top: 1.5rem; /* 24px element gap */
}

.campaign-fall-page .service-desc {
    font-size: 1rem;
    line-height: 1.6875; /* 27px */
}

/* ==========================================================================
   Testimonials
   --------------------------------------------------------------------------
   V2 sets the quote as italic navy display copy. The Fall comp reads it as
   plain black body copy, and drops the white ring around the portrait.
   ========================================================================== */
.campaign-fall-page .testimonial-img {
    width: clamp(8rem, 40vw, 12.5rem); /* 200px at desktop */
    height: clamp(8rem, 40vw, 12.5rem);
    border: 0;
    box-shadow: none;
}

.campaign-fall-page .testimonial-text {
    color: #000;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;    /* 27px */
}

/* V2 treats a bare <span> in the quote as an emphasis wrapper
   (.testimonial-text span { font-weight: 700 }). One of the Fall quotes is
   pasted with a <span> around the whole thing, which turned the entire
   testimonial bold. Setting font-weight on .testimonial-text cannot undo it —
   a rule that targets the span directly always beats inherited weight — so
   neutralise the span itself. Scoped to the Fall page; V2's emphasis
   convention is untouched. */
.campaign-fall-page .testimonial-text span {
    font-weight: inherit;
}

/* V2 renders the quote's paragraphs inline so the quote marks hug the first
   and last characters. That collapses a multi-paragraph testimonial into one
   run of text. Let every paragraph but the last be a block with space under
   it, and keep the last inline so the closing quote mark still sits against
   the final word. */
.campaign-fall-page .testimonial-text__body p {
    display: block;
    margin: 0 0 1rem 0;
}

.campaign-fall-page .testimonial-text__body p:last-of-type {
    display: inline;
    margin-bottom: 0;
}

.campaign-fall-page .testimonial-author {
    font-size: 1rem;
    line-height: 1.5; /* 24px */
}

/* ==========================================================================
   Newsletter Strip
   ========================================================================== */
.campaign-fall-page .newsletter-strip {
    /* The comp runs purple straight from the testimonial band into the footer;
       V2's gold rule would cut it in half. */
    border-top: 0;
    padding: 3.125rem 1rem; /* 50px */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.campaign-fall-page .footer {
    padding: 1.875rem 1rem; /* 30px */
    font-size: 1rem;
}

/* ==========================================================================
   Desktop — the comp's literal 1440px values
   --------------------------------------------------------------------------
   768px is V2's own breakpoint: .form-grid becomes three columns and
   .services-grid becomes three columns at exactly this width, so the comp's
   column arithmetic only holds from here up.
   ========================================================================== */
@media (min-width: 768px) {
    .campaign-fall-page .hero-section {
        height: 720px;      /* the comp's hero band */
        min-height: 400px;
        max-height: 100vh;
    }

    .campaign-fall-page .gold-banner-text {
        line-height: 1.0385; /* 27px on 26px — the comp sets it this tight */
    }

    .campaign-fall-page .services-grid {
        gap: 1.5rem; /* 24px */
    }

    .campaign-fall-page .footer p {
        gap: 1.875rem; /* 30px */
    }

    /* The comp lays the second row out as Church/Org | City | State+ZIP, with
       State and ZIP reading as one field split by a hairline at 237.5 of
       358px. The partial emits City, State and ZIP as a single flex row
       spanning two grid columns, so rebalance it here instead of forking
       formCampaignV2.cshtml. City takes exactly one column; State and ZIP
       share the other 2:1, and the negative margin cancels the row gap so the
       pair reads as one control. */
    .campaign-fall-page .form-inline-group {
        flex-wrap: nowrap;
    }

    .campaign-fall-page .input-city {
        flex: 0 0 calc(50% - 0.9375rem);
    }

    .campaign-fall-page .input-state {
        flex: 2 1 0;
        margin-right: -1.875rem;
        border-radius: 4px 0 0 4px;
    }

    .campaign-fall-page .input-zip {
        flex: 1 1 0;
        border-left: 0;
        border-radius: 0 4px 4px 0;
    }
}

@media (min-width: 1024px) {
    .campaign-fall-page .radio-group {
        gap: 3.75rem; /* 60px */
    }
}