/* Self-hosted display face. */
@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   home.css
   Scoped to the homepage only. Every rule sits behind
   .HomePage (or body:has(.HomePage)) so nothing else moves.
   Loaded from Pages/Index.cshtml, not from _Layout.
   ============================================================ */

.HomePage {
    --paper-ink: #17161A;
    /* how far the hero art reaches up over the header */
    --hero-rise: 150px;
    /* all drawn from the site palette in style.css */
    --paper-violet: var(--justicePurple);
    --paper-brick: var(--tomatoRed);
    --paper-ochre: var(--justiceOrange);
    --paper-coral: var(--tomatoRed);
    --paper-rule: rgba(23,22,26,.20);
    --paper-lilac: #B7A2E0;
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

/* The paper ground now lives in style.css and applies site-wide. */

/* The shared wrapper adds 40px padding and sand rules. The
   .NoFilterZone class on the page already kills the blur and
   borders; this drops the padding so the strip can run full width. */
.InnerContent:has(.HomePage) {
    padding: 0 !important;
    gap: 0 !important;
}

/* ---------- section 1: hero ---------- */
.HomePage .hero {
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: 0 var(--sectionGap);
    /* pulls the headline up under the nav without touching the
       shared header's own 25px padding */
    margin-top: -22px;
    gap: clamp(24px, 4vw, 56px);
}

/* Keskiyon Lumisade — h1 and the "Care is collective." h2.
   Drop text-transform if its caps are too decorative, and tune
   the 5rem max to taste. */
.HomePage .hero-text h1 {
    font-family: var(--display);
    /* !important because style.css sets h1 to 700 !important, which
       would otherwise faux-bold a font that only ships Regular. */
    font-weight: 400 !important;
    font-size: clamp(3.4rem, 9.2vw, 7.2rem) !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
    color: var(--paper-ink) !important;
    text-wrap: balance;
}

.HomePage .hero-text h1 .line-a { display: block; color: var(--paper-violet); }
.HomePage .hero-text h1 .line-b { display: block; color: var(--paper-brick); }
.HomePage .hero-text h1 .line-c { display: block; color: var(--paper-ink); }


/* The art is absolutely positioned across most of the hero rather
   than sitting in its own column, so the type overlaps it. */
.HomePage .hero {
    position: relative;
    min-height: clamp(340px, 42vw, 580px);
}

/* Full-bleed art layer: breaks out of the hero's 1200px container
   so the frame spans the whole section rather than being tied to
   the width of the text beside it. */
.HomePage .hero-image {
    position: absolute;
    /* rises past the top of the hero so the art overlaps the header
       instead of being cut off by it */
    top: calc(-1 * var(--hero-rise));
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    background-image: url('../images/General/FloralFrameBottomRight.png');
    /* portrait art in a landscape box: height drives the scale, and
       the box is now taller by --hero-rise, so this is the 20%+ */
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.HomePage .hero-text {
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 100%;
}

/* the headline gets the full section width; only the running copy
   is held back so it does not collide with the art */
.HomePage .hero-text h1 {
    max-width: 100%;
}

.HomePage .hero-text p {
    max-width: 70%;
    line-height: var(--leading-body);
}

.HomePage .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Same .button element, squared off to match the printed look */
.HomePage .hero-actions .button {
    border-radius: 0;
    padding: 13px 26px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background-color: var(--paper-violet);
    border: 2px solid var(--paper-violet);
}

.HomePage .hero-actions .button:hover {
    background-color: var(--paper-brick);
    border-color: var(--paper-brick);
}

.HomePage .hero-actions .button.outline {
    background-color: transparent;
    color: var(--paper-ink) !important;
    border-color: var(--paper-ink);
}

.HomePage .hero-actions .button.outline:hover {
    background-color: var(--paper-ink);
    color: #fff !important;
    border-color: var(--paper-ink);
}

/* ---------- section 2: values strip ---------- */
.HomePage .values-strip {
    border-top: 1.5px solid var(--paper-rule);
    border-bottom: 1.5px solid var(--paper-rule);
    background: rgba(23,22,26,.035);
}

.HomePage .values-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: clamp(26px, 3.5vw, 40px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.HomePage .value {
    padding-inline: clamp(12px, 2vw, 28px);
    border-right: 1.5px dashed var(--paper-rule);
}

.HomePage .value:first-child { padding-left: 0; }
.HomePage .value:last-child { border-right: 0; padding-right: 0; }

/* Icons are black PNGs — masked so they take a brand color
   instead of being recolored by filter guesswork. */
.HomePage .value-icon {
    width: 68px;
    height: 68px;
    margin-bottom: var(--space-md);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.HomePage .value-icon.i-heart {
    background-color: var(--paper-coral);
    -webkit-mask-image: url('../images/Icons/heart.png');
    mask-image: url('../images/Icons/heart.png');
}

.HomePage .value-icon.i-rainbow {
    background-color: var(--happyYellow);
    -webkit-mask-image: url('../images/Icons/rainbow.png');
    mask-image: url('../images/Icons/rainbow.png');
}

.HomePage .value-icon.i-star {
    background-color: var(--paper-violet);
    -webkit-mask-image: url('../images/Icons/star.png');
    mask-image: url('../images/Icons/star.png');
}

.HomePage .value-icon.i-eye {
    background-color: var(--paper-brick);
    -webkit-mask-image: url('../images/Icons/look.png');
    mask-image: url('../images/Icons/look.png');
}

.HomePage .value p {
    margin: 0;
    font-family: var(--label);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--paper-ink);
}

/* ---------- section 3: care is collective ---------- */
/* Same 1200px track and side padding as the hero and the values
   grid, so all three sections line up on the same edges. */
.HomePage .collective {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: clamp(18px, 2.5vw, 32px);
    display: grid;
    /* max-content: the lilac column sizes itself to the longest line
       plus its own padding, so "Care is collective." can never crop.
       Everything left over goes to the photo. */
    grid-template-columns: max-content 1fr;
    align-items: stretch;
    min-height: 144px;
}

/* Same paper, same .7 veil weight as the page ground — just a
   purple hue instead of peach, so it reads as a second sheet
   laid on top rather than a flat block of color. */
.HomePage .col-lilac {
    background-image:
        linear-gradient(rgba(165, 142, 216, .7), rgba(158, 136, 211, .7)),
        url('../images/General/Backgrounds/Paperbackground.jpg');
    background-color: var(--paper-lilac);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: clamp(20px, 2.4vw, 32px);
}

.HomePage .col-lilac h2 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    color: var(--paper-ink) !important;
}

.HomePage .col-lilac .underline {
    display: block;
    width: 88px;
    height: 3px;
    margin-top: var(--space-sm);
    background: var(--paper-ink);
    border-radius: 2px;
}

/* The photo fills the whole 80% track; the torn strip is absolutely
   positioned over it, so the two genuinely overlap instead of
   sitting in separate columns. */
.HomePage .col-photo {
    position: relative;
    overflow: hidden;
    min-height: 144px;
    background: var(--paper-ink);
}

.HomePage .col-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.HomePage .col-affirm {
    position: absolute;
    right: 0;
    /* top and bottom pinned so the strip is the full height of the
       row, matching the lilac panel instead of floating short */
    top: 0;
    bottom: 0;
    width: min(46%, 330px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* the torn top edge comes from the PNG, so the box needs
       headroom for it before the first line of text */
    padding: clamp(46px, 7%, 78px) clamp(18px, 2.4vw, 30px) clamp(28px, 4vw, 48px);
    background-image: url('../images/General/RippedPaper.png');
    /* cover crops the scrap to fill the box; 100% 100% stretched it
       and distorted the torn edge. Anchored top so the torn edge is
       always the part that survives the crop. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}

.HomePage .col-affirm p {
    margin: 0 0 9px;
    font-family: var(--label);
    font-size: clamp(15px, 1.9vw, 23px);
    font-weight: 500;
    line-height: 1.3;
    width: fit-content;
    color: var(--paper-ink);
    border-bottom: 2.5px solid var(--paper-brick);
    padding-bottom: 3px;
}

.HomePage .col-affirm .heart-mark {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    background-color: var(--paper-ink);
    -webkit-mask: url('../images/Icons/heart.png') no-repeat center / contain;
    mask: url('../images/Icons/heart.png') no-repeat center / contain;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .HomePage .hero {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    /* stop overlapping once it stacks, or the art sits under the text */
    .HomePage .hero-image {
        position: static;
        left: auto;
        width: 100%;
        transform: none;
        min-height: clamp(220px, 52vw, 340px);
    }

    .HomePage .hero-text {
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .HomePage .collective { grid-template-columns: 1fr; }

    .HomePage .col-lilac { min-height: 130px; }

    .HomePage .col-photo { min-height: 320px; }

    .HomePage .col-affirm {
        width: min(70%, 320px);
        right: 0;
    }
}

@media (max-width: 760px) {
    .HomePage .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 0;
    }

    .HomePage .value:nth-child(2n) { border-right: 0; padding-right: 0; }
    .HomePage .value:nth-child(3) { padding-left: 0; }
}

@media (max-width: 560px) {
    .HomePage .col-affirm {
        width: 100%;
        right: 0;
    }
}

/* The 100vw art layer would otherwise widen the page. Clipping at
   the body keeps it contained; the hero itself must stay unclipped
   so the art can rise over the header. */
body:has(.HomePage) {
    overflow-x: hidden;
}