/* Reward listing — unified compact cards (replaces the old 400px-min-height
   masonry). One component at every width: 3-col on desktop via the existing
   #body-emulate grid, 1-col on mobile. A fixed 64px thumb shows the image, or
   a turquoise initial-tile when there is none — so imaged and imageless rewards
   sit together uniformly (no ragged heights, no empty thumbnail gaps).

   All rules are scoped under #container.reward-compact so the other pages that
   also use .productcard / .masonry-brick are untouched.

   Design tokens (mesenaatti.me): accent-500 #E48348, dark #282828,
   gray-200 #E8E7E3, gray-600 #6B6A66, primary-50 #E8F6F8, primary-600 #1BA3B0. */

/* Reward listing — design 8C ("Vastikelista — 8C", hyväksytty).

   One column at EVERY width. The old 1020px/689px multi-column grid produced
   rows of differing height, which left the price and the Rahoita button at a
   different vertical position in every card; in a single column the rows are
   even and every price reads down one edge.

   The listing is one white box: #container itself carries the background and
   the border, and each reward is a row inside it separated by a border-top —
   not a card of its own. style.css:568 sets "#container.masonry {display:
   contents}" so that cards become grid items of #body-emulate; 8C needs the
   opposite, so display is restored to block and the box spans the full row.

   Scoped under #container.reward-compact, which exists only in
   campaign_page_rewards.html.twig — the campaign page's own inline reward
   list (#vastikkeet) is a different component and is untouched.

   Tokens are the design system's own (colors_and_type.css) and all resolve
   against public_html/css/tokens.css unchanged. */

#container.masonry.reward-compact {
    display: block;
    grid-column: 1 / -1;
    box-sizing: border-box;
    background: var(--ms-paper);
    border: 1px solid var(--border);
}

/* Each reward is a row, not a card: no own background, border or margin. */
#container.reward-compact .productcard.masonry-brick {
    min-height: 0;
    height: auto;
    margin: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    overflow: visible;
}

#container.reward-compact .productcard.masonry-brick:first-child {
    border-top: 0;
}

/* ---- Wide (component >= 500px) ------------------------------------------ */
#container.reward-compact .reward-card-inner {
    display: grid;
    grid-template-columns: 64px 1fr 190px;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

#container.reward-compact .reward-thumb {
    width: 64px;
    height: 64px;
    border-radius: 0;
    overflow: hidden;
}

#container.reward-compact .reward-thumb-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
}

/* Imageless rewards keep the deterministic decorative tile. */
#container.reward-compact .reward-thumb--empty {
    background: var(--ms-cyan-50);
}

#container.reward-compact .reward-body {
    min-width: 0;
}

#container.reward-compact .reward-titlelink {
    text-decoration: none;
}

#container.reward-compact .reward-title {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ms-ink-1000);
    text-transform: none;
}

/* Always two lines, however long the creator's text is — this is what keeps
   the row heights even, which is the whole point of 8C. */
#container.reward-compact .reward-desc {
    margin: 4px 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ms-ink-600);
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hidden until reward-clamp.js finds the description actually overflowing.
   It is a <button> (it expands the row rather than navigating), so the UA
   button chrome has to be stripped back to link-like text. */
#container.reward-compact .reward-more {
    display: none;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--link);
    text-align: left;
    cursor: pointer;
}

#container.reward-compact .reward-more:hover {
    color: var(--link-hover);
}

#container.reward-compact .is-clamped .reward-more,
#container.reward-compact .is-expanded .reward-more {
    display: block;
}

/* Expanded: drop the clamp and show the description in full, in place.
   -webkit-line-clamp is only honoured on a -webkit-box, and leaving that
   display with the clamp removed is unreliable across engines, so the box
   reverts to a plain block. */
#container.reward-compact .is-expanded .reward-desc {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

#container.reward-compact .reward-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
}

#container.reward-compact .reward-price {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ms-ink-1000);
    white-space: nowrap;
}

#container.reward-compact .reward-cta.button.mesenoi {
    background: var(--brand);
    color: var(--fg-on-brand, #fff);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 8px 16px;
    margin: 0;
    width: auto;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

/* No lift on hover — the design system's buttons stay flat. */
#container.reward-compact .reward-cta.button.mesenoi:hover {
    background: var(--brand-hover);
    color: var(--fg-on-brand, #fff);
    transform: none;
}

#container.reward-compact .reward-soldout {
    font-size: 12px;
    color: var(--ms-ink-500);
    font-weight: 600;
}

/* ---- Narrow (component < 500px) -----------------------------------------
   The spec's 500px is the component's width, not the viewport's. This listing
   always spans the full grid row, and the frame costs 40px (8px body margin
   + 12px wrapper padding, both sides), so component < 500px is viewport
   < 540px. Below that the price and button drop to their own full-width row
   under the text and the thumbnail shrinks to 56px. */
@media (max-width: 539px) {
    #container.reward-compact .reward-card-inner {
        grid-template-columns: 56px 1fr;
        gap: 14px;
        padding: 14px 14px 12px;
        align-items: start;
    }

    #container.reward-compact .reward-thumb,
    #container.reward-compact .reward-thumb-img {
        width: 56px;
        height: 56px;
    }

    #container.reward-compact .reward-title {
        font-size: 15px;
    }

    #container.reward-compact .reward-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
        margin-top: 10px;
    }

    /* Taller tap target now that the button is the row's own action. */
    #container.reward-compact .reward-cta.button.mesenoi {
        padding: 9px 18px;
    }
}

/* -------------------------------------------------------------------------
   Pledges list view (/pledges/, campaign_page_rewards.html.twig).
   The site chrome (logo tile, main menu, category submenu) is dropped there;
   this compact header takes its place so the reward list keeps its campaign
   context: a smaller preview image, the campaign name, and the ingress.
   It spans the full grid width above the reward masonry.
   ------------------------------------------------------------------------- */
#body-emulate .pledges-header {
    grid-column: 1 / -1;
    display: flex;
    gap: 20px;
    align-items: center;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #E8E7E3;
    padding: 16px;
    /* No margin-bottom: #body-emulate's 16px grid row-gap already spaces the
       header from the first reward row. The two together read as a doubled
       (32px) gap between the ingress and the rewards. */
    margin-bottom: 0;
}

#body-emulate .pledges-header__media img {
    display: block;
    width: 400px;
    height: auto;
}

#body-emulate .pledges-header__title {
    margin: 0 0 8px;
    font-family: "adelle", Georgia, serif;
    font-size: 28px;
    line-height: 1.15;
    color: #282828;
}

#body-emulate .pledges-header__title a {
    color: inherit;
    text-decoration: none;
}

#body-emulate .pledges-header__title a:hover {
    color: var(--ms-orange-500);
}

#body-emulate .pledges-header__ingress {
    margin: 0;
    padding: 0;
    font-family: "adelle-sans", sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: #282828;
}

@media (max-width: 687px) {
    #body-emulate .pledges-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    #body-emulate .pledges-header__media img {
        width: 100%;
        max-width: 320px;
    }
}

/* -------------------------------------------------------------------------
   #vastikkeet (campaign_page.html.twig's own inline reward list) — the same
   compact row design as .reward-compact above (parts/reward_masonry.html.twig
   markup), but scoped separately rather than reusing that class, for one
   reason: .reward-compact's rules assume the component spans the full
   #body-emulate grid row (grid-column: 1/-1, and its 500px/539px breakpoint
   is written in terms of VIEWPORT width because the component's own width
   tracks the viewport). #vastikkeet is NOT a fixed 316px column at every
   viewport — responsive.css:626-630 grows it to a 2-track (~648px) cell at
   688-1019px — but it's always under the 3-page-column threshold this list
   style targets, so it always wants the same single-column "narrow" layout
   .reward-compact uses below 500px, unconditionally, regardless of its own
   width tier.

   THIS SECTION MUST OUTRANK responsive.css:593-838's older card-grid system
   (built for parts/reward.html.twig, which this campaign page no longer
   uses for its reward loop): that system's container query
   (@container (min-width:640px) { #vastikkeet > div { columns: 2 } },
   responsive.css:681) fires exactly in the 688-1019px range where #vastikkeet
   is ~648px wide, splitting these compact rows into two CSS columns, and its
   #vastikkeet.col1.stretch.rewards_container background:transparent
   (responsive.css:767, 1 id + 3 classes) beats a plain #vastikkeet.rewards_container
   selector (1 id + 1 class) on specificity regardless of load order. Matching
   its selector exactly (id + all 3 classes) is what makes these rules win. */
#vastikkeet.col1.stretch.rewards_container {
    background: var(--ms-paper, #fff);
    border: 1px solid var(--border, #E8E7E3);
    box-sizing: border-box;
}

/* Two views of the same rewards, one shown at a time (campaign_page.html.twig
   renders both — see the comment there for why). Below 1020px #vastikkeet is
   wide enough (a 2-track ~648px cell from 688px, a full-width single track
   below that) for this compact list to hold every reward without the sidebar
   outgrowing .leftside as often as the old cards did. At 1020px+ #vastikkeet
   narrows back to a single ~316px track (never more — campaign pages aren't
   layout_wide, capped at 3 grid tracks total), which is what the original
   big-image .reward.html.twig card was sized for; that container query at
   responsive.css:681 never actually fired there anyway (640px threshold,
   #vastikkeet's own width never reaches it at this tier), so switching back
   to it loses nothing that was visible before.

   #vastikkeet-prefixed, not bare .rewards-view--*: these divs sit exactly
   two levels under #vastikkeet (#vastikkeet > div > div), the same depth
   responsive.css:742's #vastikkeet > div > div targets (1 id + 2 type
   selectors, specificity 1-0-2) — a bare class selector (0-1-0) loses that
   fight and both views rendered at once, verified. #vastikkeet .rewards-view
   (1 id + 1 class, 1-1-0) outranks it. */
#vastikkeet .rewards-view--wide {
    display: none;
}

@media (min-width: 1020px) {
    #vastikkeet .rewards-view--wide {
        display: block;
    }

    #vastikkeet .rewards-view--narrow {
        display: none;
    }
}

/* Cancels responsive.css:681's 2-up container query for this markup — that
   rule only makes sense for the old transparent card grid it was written
   for; this list is always single-column, regardless of #vastikkeet's own
   width. Higher specificity (id + 3 classes + child combinator) than its
   #vastikkeet > div (id only) wins outright, no container query needed. */
#vastikkeet.col1.stretch.rewards_container > div {
    columns: 1;
}

/* display/padding/box-shadow/break-inside explicitly overridden, not left
   to inherit: responsive.css:742's #vastikkeet > div > div (1 id + 2 type
   selectors, specificity 1-0-2) still matches this same element and sets
   all of these for the OLD transparent-card-grid design (flex column,
   16px padding, drop shadow, avoid column-break). This selector
   (1 id + 2 classes, 1-2-0) outranks it, but only for properties actually
   declared here — anything left unset here still falls through to theirs. */
#vastikkeet .productcard.masonry-brick {
    display: block;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border, #E8E7E3);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#vastikkeet .productcard.masonry-brick:first-child {
    border-top: 0;
}

/* Narrow by default (56px thumb, price+button drop to their own row via
   .reward-actions below) — correct at true mobile widths, but #vastikkeet
   is NOT always narrow: responsive.css:626-630 grows it to a ~648px 2-track
   cell at 688-1019px, comfortably past the point where the wide 3-column
   layout (thumb | text | price+button, same row) fits and reads better —
   verified against .reward-compact's own wide layout above, which #vastikkeet
   was cramped into the narrow version of unconditionally at that width.
   #vastikkeet already has container-type: inline-size set (responsive.css:775,
   for the OLD 2-up card grid's own container query) — reusing it here with
   the SAME 500px threshold .reward-compact uses keeps this consistent with
   that design rather than inventing a new number. */
#vastikkeet .reward-card-inner {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 14px 12px;
}

@container (min-width: 500px) {
    #vastikkeet .reward-card-inner {
        grid-template-columns: 64px 1fr 190px;
        gap: 18px;
        align-items: center;
        padding: 16px 18px;
    }
}

#vastikkeet .reward-thumb,
#vastikkeet .reward-thumb-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    overflow: hidden;
}

/* Placed after the base rule above (not grouped into the @container block
   before it) for the same same-specificity/source-order reason as
   .reward-actions below — a container-query override positioned BEFORE its
   unconditional counterpart loses the cascade tie, verified (thumb stayed
   56px inside the 500px+ container until this was reordered). */
@container (min-width: 500px) {
    #vastikkeet .reward-thumb,
    #vastikkeet .reward-thumb-img {
        width: 64px;
        height: 64px;
    }
}

#vastikkeet .reward-thumb--empty {
    background: var(--ms-cyan-50);
}

#vastikkeet .reward-body {
    min-width: 0;
}

#vastikkeet .reward-titlelink {
    text-decoration: none;
}

#vastikkeet .reward-title {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ms-ink-1000);
    text-transform: none;
}

#vastikkeet .reward-desc {
    margin: 4px 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ms-ink-600);
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#vastikkeet .reward-more {
    display: none;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--link);
    text-align: left;
    cursor: pointer;
}

#vastikkeet .reward-more:hover {
    color: var(--link-hover);
}

#vastikkeet .is-clamped .reward-more,
#vastikkeet .is-expanded .reward-more {
    display: block;
}

#vastikkeet .is-expanded .reward-desc {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

#vastikkeet .reward-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

/* Wide: price+button rejoin the row (3rd grid column) instead of dropping
   below it. Placed after the base rule above, not inside the earlier
   @container block, so it wins the tie — same selector, same specificity,
   and CSS breaks same-specificity ties by source order. */
@container (min-width: 500px) {
    #vastikkeet .reward-actions {
        grid-column: auto;
        justify-content: flex-end;
        margin-top: 0;
    }
}

#vastikkeet .reward-price {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ms-ink-1000);
    white-space: nowrap;
}

/* height explicitly reset: style.css:1686's a.button.mesenoi sets a fixed
   height: 20px, and this rule never used to override it (only padding,
   which is a different property — cascade applies per-property, not per-
   rule, so a lower-specificity rule's height still wins whatever this rule
   doesn't touch). With border-box sizing that 20px is the FULL box
   including padding, and this rule's 9px vertical padding alone exceeds
   it — clipped the button text down to its top few pixels, verified. */
#vastikkeet .reward-cta.button.mesenoi {
    background: var(--brand);
    color: var(--fg-on-brand, #fff);
    font-family: var(--font-display);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    height: auto;
    padding: 9px 18px;
    margin: 0;
    width: auto;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

#vastikkeet .reward-cta.button.mesenoi:hover {
    background: var(--brand-hover);
    color: var(--fg-on-brand, #fff);
    transform: none;
}

#vastikkeet .reward-soldout {
    font-size: 12px;
    color: var(--ms-ink-500);
    font-weight: 600;
}