/* ============================================================================
   LOVE THREE | BRAND IDENTITY 2026
   Source: LoveThreeBrandGuideline_LTR_2610_v1_NAM.pdf (Oct 2026).
   PAGE-LOCAL ONLY: All selectors are descendants of main.love-page.
   This file loads from Donate.cshtml's @section styles AFTER three-redesign.css.
   No master-layout, body, header, footer, shop, checkout, or global tokens altered.
   Preserves existing data hooks, donation form, and MVC/resource integrations.
   ============================================================================ */

main.love-page {
    --love-teal: #70C8C0;
    --love-purple: #96509E;
    --love-pink: #DB84B7;
    --love-blue: #7BC2D7;
    --love-ink: #3D2947;
    --love-copy: #65546C;
    --love-paper: #FCFAFD;
    --love-lilac: #F4EDF6;
    --love-mint: #EAF8F5;
    --love-line: #E7D9EA;
    --love-gradient: linear-gradient(112deg, #70C8C0 0%, #96509E 100%);
    --brand: var(--love-purple);
    --brand-accent: var(--love-teal);
    --canvas: var(--love-paper);
    --ink: var(--love-ink);
    --muted: var(--love-copy);
    --surface: var(--love-lilac);
    --line: var(--love-line);
    isolation: isolate;
    color: var(--love-ink);
    background: var(--love-paper);
    font-family: "altform", "altform Fallback", Arial, sans-serif;
    overflow: clip;
}

main.love-page :is(h1,h2,h3) {
    font-family: "altform", "altform Fallback", Arial, sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -.038em;
    overflow-wrap: anywhere;
}
main.love-page :is(p,li,a,button,legend,span) { font-family: inherit; }
main.love-page p { text-wrap: pretty; }
main.love-page :is(a,button):focus-visible {
    outline: 3px solid var(--love-purple);
    outline-offset: 4px;
}
main.love-page .eyebrow {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #438D88;
}

/* Branded cinematic introduction: existing image and scroll behavior preserved. */
main.love-page .love-cinema {
    color: #fff;
    background: #49365D;
    min-height: 625px;
}
main.love-page .love-cinema .ambient-media { inset: -5% 0; }
main.love-page .love-cinema .ambient-media img {
    object-position: left center;
    filter: saturate(.94);
}
main.love-page .love-cinema::after {
    background:
        linear-gradient(270deg, rgba(59,34,79,.97) 0%, rgba(87,48,105,.91) 31%, rgba(94,59,115,.64) 53%, rgba(55,148,147,.12) 85%),
        linear-gradient(0deg, rgba(60,24,83,.20), transparent 55%);
}
main.love-page .love-cinema .cinematic-copy {
    margin-left: 47%;
    padding: 75px clamp(28px,5.1vw,100px) 90px 3vw;
    max-width: none;
    position: relative;
    z-index: 1;
}
main.love-page .love-hero-mark {
    display: block;
    width: clamp(155px,16vw,235px);
    height: auto;
    margin: -15px 0 21px -5px;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .97;
}
main.love-page .love-cinema .eyebrow {
    color: #B8F6EC;
    margin-bottom: 17px;
}
main.love-page .love-cinema h1 {
    color: #fff;
    font-size: clamp(49px,5vw,81px);
    line-height: 1.06;
    letter-spacing: -.047em;
    text-shadow: 0 2px 16px rgba(36,13,55,.08);
}
main.love-page .love-cinema .cinematic-copy > p:not(.eyebrow) {
    max-width: 43ch;
    color: #F6EEF9;
    font-size: clamp(14px,1.2vw,17px);
    line-height: 1.7;
}
main.love-page .love-cinema .button-primary,
main.love-page .donation-selector .button-primary {
    background: var(--love-gradient);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(87,43,107,.18);
}
main.love-page .love-cinema .button-primary:hover,
main.love-page .donation-selector .button-primary:hover {
    background: linear-gradient(112deg,#54BDB2,#87418D);
    box-shadow: 0 13px 32px rgba(80,37,96,.25);
}
main.love-page .love-cinema .button-primary:focus-visible { outline-color: #fff; }
main.love-page .love-cinema .hero-side-note {
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 100px;
    padding: 10px 16px;
    background: rgba(94,51,116,.30);
    letter-spacing: .14em;
}

/* Purpose: airy teal headlines and genuinely generous editorial whitespace. */
main.love-page .love-intro {
    position: relative;
    background: #fff;
    padding-block: clamp(68px,8vw,116px);
    gap: clamp(40px,8vw,120px);
}
main.love-page .love-intro::before {
    content: "";
    display: block;
    width: clamp(78px,12vw,160px);
    height: 4px;
    border-radius: 20px;
    background: var(--love-gradient);
    position: absolute;
    top: 35px;
    left: var(--gutter);
}
main.love-page .love-intro h2,
main.love-page .love-values .section-heading h2 {
    color: var(--love-purple);
    font-size: clamp(38px,4.15vw,63px);
    line-height: 1.11;
}
main.love-page .love-intro > div > p:not(.eyebrow) {
    color: var(--love-copy);
    font-size: clamp(14px,1.15vw,17px);
    line-height: 1.9;
}
main.love-page .love-signature {
    font-size: clamp(21px,2vw,30px);
    font-style: italic;
    color: var(--love-purple);
    border-bottom: 2px solid var(--love-teal);
    padding: 0 0 7px;
}

/* Giving panel stays connected to existing MVC item/amount selection. */
main.love-page .love-gift-scene {
    min-height: 720px;
    background: #3C2C50;
    gap: clamp(35px,6vw,95px);
    grid-template-columns: minmax(0,1fr) minmax(350px,455px);
}
main.love-page .love-gift-scene::after {
    background:
        linear-gradient(90deg, rgba(45,28,70,.96), rgba(75,46,93,.75) 52%, rgba(56,112,124,.40) 100%),
        linear-gradient(0deg, rgba(29,18,44,.36), transparent 58%);
}
main.love-page .love-gift-backdrop { object-position: center 44%; }
main.love-page .love-gift-caption h2 {
    font-size: clamp(39px,4vw,61px);
    line-height: 1.1;
    color: #fff;
}
main.love-page .love-gift-caption p {
    color: #E5FBF8;
    line-height: 1.75;
    max-width: 38ch;
}
main.love-page .donation-selector {
    background: linear-gradient(#FFFEFF,#FFFEFF) padding-box, var(--love-gradient) border-box;
    border: 2px solid transparent;
    color: var(--love-ink);
    border-radius: 24px;
    padding: clamp(25px,3vw,40px);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 27px 65px rgba(28,18,49,.25);
    scroll-margin-top: 120px;
}
main.love-page .donation-selector > svg {
    color: var(--love-purple);
    width: 29px;
    height: 29px;
    margin-bottom: 17px;
}
main.love-page .donation-selector h2 {
    color: var(--love-purple);
    font-size: clamp(27px,2.6vw,39px);
    line-height: 1.14;
}
main.love-page .donation-selector > p:not(.donation-note) {
    color: var(--love-copy);
    font-size: 13px;
    line-height: 1.75;
}
main.love-page .donation-selector legend {
    color: var(--love-ink);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .03em;
}
main.love-page .donation-amounts { gap: 9px; }
main.love-page .donation-amounts button {
    min-width: 0;
    color: var(--love-purple);
    background: #F9F3FA;
    border: 1px solid #D9C2DC;
    border-radius: 12px;
    font-size: clamp(14px,1.28vw,18px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}
main.love-page .donation-amounts button:hover:not([aria-pressed="true"]) {
    background: #EEE4F1;
    border-color: var(--love-purple);
}
main.love-page .donation-amounts button[aria-pressed="true"] {
    color: #fff;
    border-color: transparent;
    background: var(--love-gradient);
    box-shadow: 0 5px 18px rgba(150,80,158,.20);
}
main.love-page .donation-amounts button:active { transform: scale(.98); }
main.love-page .donation-selector .button-primary {
    width: 100%;
    min-width: 0;
    white-space: normal;
    min-height: 54px;
    border-radius: 1000px;
    line-height: 1.35;
}
main.love-page .donation-selector .donation-note {
    color: var(--love-copy);
    line-height: 1.6;
}
main.love-page .donation-selector [data-donation-status]:not(:empty) {
    color: var(--love-purple);
    font-weight: 600;
}

/* Three pillars: brand colors lead, photographs remain untouched. */
main.love-page .love-values {
    background: linear-gradient(180deg,#FFF 0%,#FDF9FD 100%);
    padding-block: clamp(62px,6vw,94px);
}
main.love-page .love-values .section-heading { gap: 28px; }
main.love-page .love-values .section-heading p {
    color: var(--love-copy);
    line-height: 1.75;
}
main.love-page .love-values-grid { gap: clamp(16px,2.2vw,30px); }
main.love-page .love-values-grid article {
    min-width: 0;
    overflow: hidden;
    border-radius: 19px;
    background: #fff;
    border: 1px solid var(--love-line);
    box-shadow: 0 8px 25px rgba(89,45,109,.045);
    transition: transform .22s ease, box-shadow .22s ease;
}
@media (hover:hover) and (pointer:fine) {
    main.love-page .love-values-grid article:hover {
        transform: translateY(-4px);
        box-shadow: 0 17px 35px rgba(89,45,109,.11);
    }
}
main.love-page .love-value-image { border-radius: 0; height: clamp(210px,21vw,290px); }
main.love-page .love-values-grid article > div:last-child { padding: 26px 24px 32px; }
main.love-page .love-values-grid article:nth-child(1) { border-top: 4px solid var(--love-teal); }
main.love-page .love-values-grid article:nth-child(2) { border-top: 4px solid var(--love-purple); }
main.love-page .love-values-grid article:nth-child(3) { border-top: 4px solid var(--love-blue); }
main.love-page .love-values-grid svg {
    width: 27px;
    height: 27px;
    color: var(--love-purple);
}
main.love-page .love-values-grid article:nth-child(1) svg { color: #409A93; }
main.love-page .love-values-grid article:nth-child(3) svg { color: #429AAF; }
main.love-page .love-values-grid h3 { font-size: 27px; color: var(--love-ink); }
main.love-page .love-values-grid p { font-size: 14px; color: var(--love-copy); }

/* Ways of helping: cool mint/blue with purple editorial accents. */
main.love-page .love-sharing {
    background: linear-gradient(118deg, #E9F8F5 0%, #F3F5FA 55%, #F8EDF8 100%);
    color: var(--love-ink);
}
main.love-page .love-sharing .flow-image { max-height: none; }
main.love-page .love-sharing .editorial-copy h2 {
    color: var(--love-purple);
    font-size: clamp(36px,4vw,59px);
    line-height: 1.12;
}
main.love-page .love-sharing .editorial-copy > p { color: var(--love-copy); }
main.love-page .giving-ways li { border-color: #CFC8DF; }
main.love-page .giving-ways span { color: var(--love-purple); font-weight: 600; }
main.love-page .giving-ways p { color: var(--love-copy); }
main.love-page .love-sharing .text-link {
    border-color: var(--love-purple);
    color: var(--love-purple);
    font-weight: 600;
    white-space: normal;
    text-align: left;
}
main.love-page .love-sharing .text-link:hover { color: #6F3476; }
main.love-page .love-sharing .share-love > span { color: var(--love-purple); }

/* Closing banner — approved two-color primary gradient. */
main.love-page .love-closing {
    color: #fff;
    background: var(--love-gradient);
    position: relative;
    overflow: hidden;
    padding: clamp(55px,6vw,88px) var(--gutter);
}
main.love-page .love-closing::before,
main.love-page .love-closing::after {
    content: "";
    pointer-events: none;
    position: absolute;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 50%;
    aspect-ratio: 1;
}
main.love-page .love-closing::before { width: 360px; left: -180px; top: -210px; }
main.love-page .love-closing::after { width: 470px; right: -190px; bottom: -360px; }
main.love-page .love-closing-mark {
    width: 165px;
    height: auto;
    display: block;
    margin: -23px 0 5px;
    filter: grayscale(1) brightness(0) invert(1);
}
main.love-page .love-closing > svg { display: none; } /* Replaced decoratively by brand logo. */
main.love-page .love-closing h2 {
    color: #fff;
    font-size: clamp(40px,5vw,73px);
    max-width: 24ch;
    line-height: 1.08;
    text-shadow: 0 3px 14px rgba(55,33,74,.08);
}
main.love-page .love-closing .button-light {
    background: #fff;
    color: #713C7D;
    border-radius: 1000px;
    font-weight: 600;
    box-shadow: 0 10px 27px rgba(39,19,58,.17);
}
main.love-page .love-closing .button-light:hover { background: #F1FCFA; }
main.love-page .love-closing .button-light:focus-visible { outline-color: #fff; }

/* Preserve readable layouts at tablet and phone widths, including long translations. */
@media (max-width: 1100px) {
    main.love-page .love-cinema .cinematic-copy { margin-left: 43%; padding-right: var(--gutter); }
    main.love-page .love-cinema h1 { font-size: clamp(43px,5.3vw,65px); }
    main.love-page .love-gift-scene { grid-template-columns: minmax(0,1fr) minmax(335px,410px); }
    main.love-page .love-values-grid article > div:last-child { padding: 22px 19px 28px; }
}
@media (max-width: 800px) {
    main.love-page .love-cinema .cinematic-copy { margin-left: 39%; padding-left: 4vw; }
    main.love-page .love-cinema h1 { font-size: clamp(41px,6vw,54px); }
    main.love-page .love-gift-scene { grid-template-columns: minmax(0,1fr) minmax(325px,370px); gap: 25px; }
    main.love-page .love-gift-caption h2 { font-size: 38px; }
    main.love-page .love-value-image { height: 210px; }
}
@media (max-width: 650px) {
    main.love-page .love-cinema { min-height: 730px; height: auto; max-height: none; }
    main.love-page .love-cinema .ambient-media { inset: 0 0 auto; height: 410px; }
    main.love-page .love-cinema .ambient-media img { object-position: 22% top; }
    main.love-page .love-cinema::after {
        background: linear-gradient(180deg, rgba(51,44,80,.09) 0%, rgba(58,36,78,.24) 31%, rgba(68,42,88,.94) 56%, #49315F 78%, #49315F 100%);
    }
    main.love-page .love-cinema .cinematic-copy {
        margin-left: 0;
        width: 100%;
        height: auto;
        min-height: 730px;
        padding: 335px var(--gutter) 52px;
        justify-content: flex-end;
    }
    main.love-page .love-hero-mark { width: 155px; margin: 0 0 7px -4px; }
    main.love-page .love-cinema .eyebrow { font-size: 9px; margin-bottom: 11px; }
    main.love-page .love-cinema h1 { font-size: clamp(37px,9.8vw,50px); }
    main.love-page .love-cinema .cinematic-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.6; margin-top: 14px; }
    main.love-page .love-cinema .button { margin-top: 19px; }
    main.love-page .love-intro { gap: 25px; padding-block: 65px 52px; }
    main.love-page .love-intro::before { top: 25px; height: 3px; }
    main.love-page .love-intro h2 { font-size: clamp(36px,9vw,49px); }
    main.love-page .love-intro > div > p:not(.eyebrow) { font-size: 14px; line-height: 1.75; }
    main.love-page .love-gift-scene { grid-template-columns: 1fr; gap: 24px; padding: 230px var(--gutter) 34px; }
    main.love-page .love-gift-scene::after { background: linear-gradient(180deg, rgba(52,31,73,.12), rgba(58,37,76,.72) 41%, rgba(52,31,73,.96)); }
    main.love-page .love-gift-caption { padding: 0; }
    main.love-page .love-gift-caption h2 { font-size: 39px; }
    main.love-page .donation-selector { width: 100%; padding: 26px 22px; }
    main.love-page .donation-amounts button { padding: 15px 4px; font-size: 16px; }
    main.love-page .love-values-grid { grid-template-columns: 1fr; gap: 20px; }
    main.love-page .love-values-grid article { border-radius: 16px; }
    main.love-page .love-value-image { height: 265px; }
    main.love-page .love-values-grid article > div:last-child { padding: 20px 22px 26px; }
    main.love-page .love-values .section-heading h2 { font-size: 40px; }
    main.love-page .love-sharing .flow-image { height: 345px; }
    main.love-page .love-sharing .editorial-copy h2 { font-size: 41px; }
    main.love-page .love-closing h2 { font-size: clamp(38px,9.7vw,53px); }
    main.love-page .love-closing-mark { width: 145px; }
}
@media (max-width: 380px) {
    main.love-page .love-cinema,
    main.love-page .love-cinema .cinematic-copy { min-height: 760px; }
    main.love-page .love-cinema .cinematic-copy { padding-top: 320px; }
    main.love-page .love-cinema h1 { font-size: 36px; }
    main.love-page .donation-selector { padding: 24px 16px; }
    main.love-page .donation-amounts { gap: 5px; }
    main.love-page .donation-amounts button { font-size: 14px; padding: 14px 2px; }
}
@media (prefers-reduced-motion: reduce) {
    main.love-page .love-values-grid article,
    main.love-page .donation-amounts button { transition: none; transform: none !important; }
}

/* ============================================================================
   LOVE THREE | PAGE-ONLY SHARED-CHROME ACCENTS
   The shared announcement strip and floating cart sit OUTSIDE main.love-page.
   :has(main.love-page) matches the Donate view only, so no layout changes or
   changes to the other pages' THREE warm-theme styles are necessary.
   IMPORTANT: three-redesign.css gives the floating cart !important colors;
   retain !important here to override only that existing color treatment.
   The shared control's geometry, visibility, click handling and count logic
   are deliberately NOT changed.
   ============================================================================ */

/* Teal-to-purple brand gradient, darkened slightly for readable white copy. */
body.three-reference-page:has(main.love-page) > .announcement {
    background: linear-gradient(110deg, rgba(16, 48, 56, .48), rgba(38, 20, 56, .40)),
                linear-gradient(112deg, #70C8C0 0%, #96509E 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
body.three-reference-page:has(main.love-page) > .announcement a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .8);
    text-decoration-color: rgba(255, 255, 255, .8);
}
body.three-reference-page:has(main.love-page) > .announcement a:hover {
    border-bottom-color: #fff;
}
body.three-reference-page:has(main.love-page) > .announcement a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Match the page's donation buttons without changing the floating-cart logic. */
body.three-reference-page:has(main.love-page) .three-floating-cart {
    background: linear-gradient(140deg, rgba(43, 30, 67, .28), rgba(43, 30, 67, .12)),
                linear-gradient(135deg, #70C8C0 0%, #96509E 100%) !important;
    border-color: #E6FAF6 !important;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(112, 200, 192, .18),
                0 12px 34px rgba(75, 34, 91, .30) !important;
}
body.three-reference-page:has(main.love-page) .three-floating-cart:hover {
    background: linear-gradient(140deg, rgba(43, 30, 67, .15), rgba(43, 30, 67, .04)),
                linear-gradient(135deg, #70C8C0 0%, #96509E 100%) !important;
    box-shadow: 0 0 0 5px rgba(112, 200, 192, .24),
                0 14px 36px rgba(75, 34, 91, .37) !important;
}
body.three-reference-page:has(main.love-page) .three-floating-cart:active {
    background: linear-gradient(140deg, #438D8A, #70367B) !important;
}
body.three-reference-page:has(main.love-page) .three-floating-cart:focus-visible {
    outline-color: #96509E !important;
}
body.three-reference-page:has(main.love-page) .three-floating-cart-count {
    background: #FCF4FF !important;
    color: #563063 !important;
    border-color: #fff !important;
    box-shadow: 0 2px 9px rgba(75, 34, 91, .23) !important;
}

/* ============================================================================
   LOVE THREE | Wide-screen gift photograph focal correction (Oct 2026)
   The new launch photograph contains faces near its upper edge. The generic
   cinematic image rule (height:110%, top:-5%, object-fit:cover) clips those
   faces as the browser gets wider. Anchor the source photograph at its top,
   and prevent this ONE photo from being translated upward by scroll parallax.
   Retains the phone/tablet treatment and all other parallax photographs.
   ============================================================================ */
@media (min-width: 1101px) {
    main.love-page .love-gift-scene {
        /* More vertical room on wide displays reduces the amount cropped. */
        min-height: clamp(720px, 46vw, 960px);
    }

    main.love-page .love-gift-scene > img.love-gift-backdrop {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        /* Overrides the inline scroll transform on this photo only. */
        transform: none !important;
    }
}