/* ------------------------------------------------------------------------------
   CBFGSProjectGrid
   Ported from the SWAT prototype CBF-landing-full.0.26, lines 41-88.
   Tokens and shared primitives (badges, progress bar, buttons) live in
   CBFGSShared/cbf-gs.css. Only grid- and card-specific rules are here.
   ------------------------------------------------------------------------------ */

/* ---- band background ----

   The spec has no background on the projects block (its `.wrap#projects` is transparent);
   the warm off-white comes from `body{background:var(--cream)}`, spec 27. Every other
   section of the microsite paints its own background edge to edge, so this is the only
   one that depended on the body. The CB skin sets `body{background-color:#FFF}`
   (skin.css 51-53), so on DNN the section rendered on plain white instead of cream.
   Painting it on the module root reproduces the spec without touching the site-wide body,
   which is shared with every other page.

   Compound .cbf-gs.cbf-gs-grid - see the note in CBFGSTrustStrip/module.css about load order. */
.cbf-gs.cbf-gs-grid { background: var(--cream); }

/* ---- filter chips, spec 41-43 ---- */
.cbf-gs-grid .filters {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    padding: 26px 0 30px;
}
.cbf-gs-grid .filters button {
    border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
    padding: 8px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 500; transition: .15s; text-transform: none;
}
.cbf-gs-grid .filters button[aria-pressed="true"] {
    background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 700;
}

/* ---- grid, spec 45-46 ---- */
.cbf-gs-grid .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 330px));
    justify-content: center;
    gap: 24px;
    padding-bottom: 150px;
}
@media (max-width: 620px) {
    .cbf-gs-grid .grid { grid-template-columns: 1fr; }
}

/* ---- card, spec 47-49 ---- */
.cbf-gs-grid .card {
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s;
}
.cbf-gs-grid .card:hover { box-shadow: var(--shadow); }
.cbf-gs-grid .card.added { outline: 2px solid var(--ok); outline-offset: -2px; }

/* ---- photo block, spec 51-67 ---- */
.cbf-gs-grid .photo {
    position: relative; height: 300px;
    display: flex; align-items: flex-end; overflow: hidden;
}
.cbf-gs-grid .photo .pimg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cbf-gs-grid .photo .motif { position: absolute; inset: 0; display: grid; place-items: center; }
.cbf-gs-grid .photo .motif svg {
    width: 78px; height: 78px; stroke: #fff; fill: none; stroke-width: 1.3; opacity: .5;
}
.cbf-gs-grid .card-added {
    display: none; position: absolute; top: 12px; right: 12px; z-index: 2;
    align-items: center; gap: 5px;
    background: var(--ok); color: #fff; font-size: 11px; font-weight: 800;
    padding: 5px 11px; border-radius: 999px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.cbf-gs-grid .card.added .card-added { display: inline-flex; }
.cbf-gs-grid .photo .who { padding: 14px 16px; color: #fff; position: relative; z-index: 1; }
.cbf-gs-grid .photo .who .nm {
    font-family: "Montserrat"; font-weight: 700; font-size: 15px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* ---- card body, spec 69-88 ---- */
.cbf-gs-grid .body {
    padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.cbf-gs-grid .body h3 {
    font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important;
    margin: 0; min-height: 70px;
}
.cbf-gs-grid .blurb { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/*  Card descriptions vary a lot in length, which left the grid ragged and pushed the Fund
    button to a different height on every card. Clamped to a set number of lines, set per
    instance in module settings and applied through --gs-blurb-lines.

    Clamped AND scrollable, which CSS will not do in one declaration: -webkit-line-clamp needs
    overflow:hidden, so it cannot also scroll. Height is capped instead and the overflow scrolls,
    so nothing is lost - a reader can still get to the rest. The fade at the bottom is what
    signals there is more, doing the job the ellipsis would have done.                        */
.cbf-gs-grid .blurb[data-clamp] {
    height: 50px;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #f4d6ff #FFFFFF;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1em), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1em), transparent 100%);
}

/*  Once scrolled to the end there is nothing more to hint at, so the fade goes. Also removed
    for anyone who has asked for less motion or is printing.  */
.cbf-gs-grid .blurb[data-clamp]:hover,
.cbf-gs-grid .blurb[data-clamp]:focus-within {
    -webkit-mask-image: none;
            mask-image: none;
}

.cbf-gs-grid .blurb[data-clamp]::-webkit-scrollbar { width: 4px; }
.cbf-gs-grid .blurb[data-clamp]::-webkit-scrollbar-thumb {
    background: #f4d6ff; border-radius: 4px;
}
.cbf-gs-grid .blurb[data-clamp]::-webkit-scrollbar-track {
    background: #FFFFFF;
}

@media print {
    .cbf-gs-grid .blurb[data-clamp] { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.cbf-gs-grid .cta { margin-top: auto; }
.cbf-gs-grid .addedtag {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--lavender); border-radius: 10px; padding: 9px 12px;
    font-size: 14px; font-weight: 600;
}
.cbf-gs-grid .addedtag .edit {
    background: none; border: 0; color: var(--violet); font-weight: 700; font-size: 13px;
    text-decoration: underline; text-transform: none; padding: 0; width: auto;
}

/* ---- card flash, spec 183-184: used when the hero deep-links to a specific card ---- */
@keyframes cardflash {
    0%   { box-shadow: 0 0 0 0 rgba(152, 68, 186, 0); }
    18%  { box-shadow: 0 0 0 4px rgba(152, 68, 186, .55); }
    100% { box-shadow: 0 0 0 0 rgba(152, 68, 186, 0); }
}
.cbf-gs-grid .card.flash { animation: cardflash 1.7s ease; }

/* ---- single project: laid out like the CBFQuickDonation card (image left, details right) ---- */
@media (min-width: 992px) {
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) {
        grid-template-columns: minmax(0, 1300px);
    }
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) > .card {
        flex-direction: row; align-items: center;
        background: transparent; border: 0; border-radius: 0; overflow: visible;
    }
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) > .card:hover { box-shadow: none; }
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) > .card .photo {
        flex: 0 0 56%; height: 560px; border-radius: 22px;
    }
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) > .card .body {
        flex: 1 1 auto; min-width: 0; position: relative; z-index: 2;
        padding: 24px; margin-left: -80px;
        background: #fff; border: 1px solid var(--line); border-radius: 22px;
        box-shadow: var(--shadow);
    }
    .cbf-gs-grid .grid:has(> .card):not(:has(> .card ~ .card)) > .card .body h3 {
        min-height: auto !important;
    }
}

/* ------------------------------------------------------------------------------
   Breakout story panels (article.gstory)
   Ported verbatim from GivingSeasonMinimal.html. These are editorial cards
   interleaved through the grid by the view's render loop; --gs-span carries the
   configured column span (1, 2 or 3). Scoped to .cbf-gs-grid so every instance
   picks them up - the span itself is per-panel via the inline --gs-span variable.
   ------------------------------------------------------------------------------ */
.cbf-gs-grid .grid .gstory {
    grid-column: span var(--gs-span, 3);
    border-radius: 22px; overflow: hidden;
    background: var(--ink, #1c1526); color: #fff;
    display: grid; grid-template-columns: 1.05fr 1fr; min-height: 220px;
}
.cbf-gs-grid .grid .gstory .pic {
    position: relative; min-height: 190px;
    background: linear-gradient(140deg, #3a2260, #241242);
}
.cbf-gs-grid .grid .gstory .pic img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cbf-gs-grid .grid .gstory .txt {
    padding: 30px 34px; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
}
.cbf-gs-grid .grid .gstory .kicker {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #f2c98a; font-weight: 700;
}
.cbf-gs-grid .grid .gstory h3 {
    font-size: clamp(20px, 2.3vw, 28px); margin: 10px 0 0;
    max-width: 24ch; line-height: 1.15; font-weight: 800;
}
.cbf-gs-grid .grid .gstory p {
    color: rgba(255, 255, 255, .78); margin: 10px 0 0;
    font-size: 14.5px; line-height: 1.55; max-width: 52ch;
}
.cbf-gs-grid .grid .gstory .btn { width: auto; margin-top: 16px; padding: 10px 20px; }

.cbf-gs-grid .grid .gstory--quote { background: var(--lavender, #f3edf8); color: var(--ink, #1c1526); }
.cbf-gs-grid .grid .gstory--quote .pic { background: linear-gradient(140deg, #c9a7dd, #9844ba); }
.cbf-gs-grid .grid .gstory--quote .txt { padding: 34px 40px; }
.cbf-gs-grid .grid .gstory--quote .qmark {
    font-family: Georgia, "Times New Roman", serif; font-size: 66px; line-height: .6;
    color: var(--violet, #9844ba); opacity: .5;
}
/*  border: 0 is load-bearing - the CB skin's default.css puts a border-left on every
    blockquote, which showed as a stray rule down the left of the pull-quote. */
.cbf-gs-grid .grid .gstory--quote blockquote {
    font-family: "Kalam", cursive; font-weight: 700;
    font-size: clamp(21px, 2.5vw, 30px); line-height: 1.34; margin: 8px 0 0;
    color: var(--violet-deep, #2e1a47); max-width: 30ch;
    border: 0; padding: 0;
}
.cbf-gs-grid .grid .gstory--quote .attr {
    margin: 18px 0 0; font-size: 13px; color: var(--ink-soft, #5b5468);
    font-weight: 600; letter-spacing: .01em;
}
@media (max-width: 620px) {
    .cbf-gs-grid .grid .gstory { grid-template-columns: 1fr; }
    .cbf-gs-grid .grid .gstory .txt { padding: 22px 20px 24px; }
}