/* ══════════════════════════════════════════════════════════════
   Notespark — Home card grid (Step 3, Craft "All Docs" look)
   Isolated file. Load AFTER app.css / nota-layout.css / nota-shell.css.

   Cards use a rotating 8-colour pastel palette (Craft-style mosaic)
   applied by position via nth-child. Literal hex values — no
   color-mix(), so it renders everywhere.
   ══════════════════════════════════════════════════════════════ */

/* Warm the content area — kill the cool-grey home-animated-bg layer
   that sat on top of the warm .nota-main. */
.nota.theme-light .home-animated-bg {
    background: var(--n-main) !important;
    background-image: none !important;
}

/* ── Responsive masonry-ish grid ── */
.home-cards {
    columns: 260px;
    column-gap: 16px;
    padding: 4px 2px 8px;
}

    .home-cards .note-card {
        display: block;
        width: 100%;
        break-inside: avoid;
        margin: 0 0 16px;
        padding: 0;
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        border: 1px solid rgba(70,55,30,0.10);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 14px rgba(70,55,30,0.07);
        transition: transform 0.16s ease, box-shadow 0.16s ease;
    }

        .home-cards .note-card:hover {
            transform: translateY(-3px);
        }

    .home-cards .note-card-strip {
        height: 7px;
    }

    .home-cards .note-card-body {
        padding: 15px 17px 14px;
    }

    .home-cards .note-card-title {
        font-size: 15.5px;
        font-weight: 750;
        color: #2c2822;
        line-height: 1.3;
        padding-bottom: 9px;
        margin-bottom: 9px;
        border-bottom: 1px solid rgba(70,55,30,0.10);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .home-cards .note-card-preview {
        font-size: 13px;
        line-height: 1.55;
        color: #5f5a50;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 20px;
    }

    .home-cards .note-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 14px;
    }

    .home-cards .note-card-crumb {
        font-size: 11px;
        font-weight: 700;
        color: #6d675b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .home-cards .note-card-date {
        font-size: 11px;
        font-weight: 600;
        color: #9c9585;
        flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════════════
   Rotating pastel palette — 8 colours cycling by card position.
   Each: filled body, tinted border, deeper strip.
   ══════════════════════════════════════════════════════════════ */

    /* 1 — rose */
    .home-cards .note-card:nth-child(8n+1) {
        background: #fdeaea;
        border-color: #f3c6c6;
    }

        .home-cards .note-card:nth-child(8n+1) .note-card-strip {
            background: #e57373;
        }

        .home-cards .note-card:nth-child(8n+1) .note-card-title {
            border-bottom-color: #f0c2c2;
        }

    /* 2 — sky */
    .home-cards .note-card:nth-child(8n+2) {
        background: #e6f2fb;
        border-color: #bcd9ef;
    }

        .home-cards .note-card:nth-child(8n+2) .note-card-strip {
            background: #5ba3d9;
        }

        .home-cards .note-card:nth-child(8n+2) .note-card-title {
            border-bottom-color: #bcd9ef;
        }

    /* 3 — butter */
    .home-cards .note-card:nth-child(8n+3) {
        background: #fdf6dd;
        border-color: #eedfa6;
    }

        .home-cards .note-card:nth-child(8n+3) .note-card-strip {
            background: #e3c14f;
        }

        .home-cards .note-card:nth-child(8n+3) .note-card-title {
            border-bottom-color: #eedfa6;
        }

    /* 4 — sage */
    .home-cards .note-card:nth-child(8n+4) {
        background: #e7f4ea;
        border-color: #bcdcc4;
    }

        .home-cards .note-card:nth-child(8n+4) .note-card-strip {
            background: #63ab77;
        }

        .home-cards .note-card:nth-child(8n+4) .note-card-title {
            border-bottom-color: #bcdcc4;
        }

    /* 5 — lavender */
    .home-cards .note-card:nth-child(8n+5) {
        background: #eeeafb;
        border-color: #cfc4ef;
    }

        .home-cards .note-card:nth-child(8n+5) .note-card-strip {
            background: #8b74d8;
        }

        .home-cards .note-card:nth-child(8n+5) .note-card-title {
            border-bottom-color: #cfc4ef;
        }

    /* 6 — peach */
    .home-cards .note-card:nth-child(8n+6) {
        background: #fdeee2;
        border-color: #f2d3b8;
    }

        .home-cards .note-card:nth-child(8n+6) .note-card-strip {
            background: #e69355;
        }

        .home-cards .note-card:nth-child(8n+6) .note-card-title {
            border-bottom-color: #f2d3b8;
        }

    /* 7 — mint */
    .home-cards .note-card:nth-child(8n+7) {
        background: #e4f4f1;
        border-color: #b6dcd5;
    }

        .home-cards .note-card:nth-child(8n+7) .note-card-strip {
            background: #4fac9d;
        }

        .home-cards .note-card:nth-child(8n+7) .note-card-title {
            border-bottom-color: #b6dcd5;
        }

    /* 8 — blush pink */
    .home-cards .note-card:nth-child(8n+8) {
        background: #fbeaf3;
        border-color: #eec4dc;
    }

        .home-cards .note-card:nth-child(8n+8) .note-card-strip {
            background: #d76fa8;
        }

        .home-cards .note-card:nth-child(8n+8) .note-card-title {
            border-bottom-color: #eec4dc;
        }

    /* ══════════════════════════════════════════════════════════════
   Coloured glow — each card casts a soft halo in its own hue.
   Rest state is subtle; hover blooms it.
   ══════════════════════════════════════════════════════════════ */
    .home-cards .note-card:nth-child(8n+1) {
        box-shadow: 0 4px 18px rgba(229,115,115,0.22);
    }

        .home-cards .note-card:nth-child(8n+1):hover {
            box-shadow: 0 10px 30px rgba(229,115,115,0.38);
        }

    .home-cards .note-card:nth-child(8n+2) {
        box-shadow: 0 4px 18px rgba(91,163,217,0.22);
    }

        .home-cards .note-card:nth-child(8n+2):hover {
            box-shadow: 0 10px 30px rgba(91,163,217,0.38);
        }

    .home-cards .note-card:nth-child(8n+3) {
        box-shadow: 0 4px 18px rgba(227,193,79,0.24);
    }

        .home-cards .note-card:nth-child(8n+3):hover {
            box-shadow: 0 10px 30px rgba(227,193,79,0.40);
        }

    .home-cards .note-card:nth-child(8n+4) {
        box-shadow: 0 4px 18px rgba(99,171,119,0.22);
    }

        .home-cards .note-card:nth-child(8n+4):hover {
            box-shadow: 0 10px 30px rgba(99,171,119,0.38);
        }

    .home-cards .note-card:nth-child(8n+5) {
        box-shadow: 0 4px 18px rgba(139,116,216,0.22);
    }

        .home-cards .note-card:nth-child(8n+5):hover {
            box-shadow: 0 10px 30px rgba(139,116,216,0.38);
        }

    .home-cards .note-card:nth-child(8n+6) {
        box-shadow: 0 4px 18px rgba(230,147,85,0.22);
    }

        .home-cards .note-card:nth-child(8n+6):hover {
            box-shadow: 0 10px 30px rgba(230,147,85,0.38);
        }

    .home-cards .note-card:nth-child(8n+7) {
        box-shadow: 0 4px 18px rgba(79,172,157,0.22);
    }

        .home-cards .note-card:nth-child(8n+7):hover {
            box-shadow: 0 10px 30px rgba(79,172,157,0.38);
        }

    .home-cards .note-card:nth-child(8n+8) {
        box-shadow: 0 4px 18px rgba(215,111,168,0.22);
    }

        .home-cards .note-card:nth-child(8n+8):hover {
            box-shadow: 0 10px 30px rgba(215,111,168,0.38);
        }