/* Reward view / pledge page — single-column funnel.

   At this step of the funnel only one column is needed, so the reward header
   and the pledge form both span the full content width and stack. The reward
   image now lives inside the header, just before the description, and is
   omitted entirely when the reward has none (template v-if). The separate
   image side-column is dropped in view mode (kept only for edit-mode upload).

   Loaded only on this page, so the selectors below are safe. */

/* One column: header + form span all #body-emulate columns and stack.
   .col2 is normally `grid-column: span 2`; 1 / -1 makes it full width. */
#body-emulate .col2.mesenoi,
#body-emulate .login.col2 {
    grid-column: 1 / -1;
}

/* Even vertical rhythm in the header — title, price and description had
   uneven gaps. Equal spacing top to bottom. */
#title {
    margin: 0 0 8px;
    padding-top: 0;
}

.col2.mesenoi .price {
    margin: 0 0 16px;
}

.col2.mesenoi .ingress {
    display: none; /* empty spacer paragraph that added an uneven gap */
}

.col2.mesenoi .campaignData.pre-wrap {
    margin: 0;
}

/* Reward image folded into the header like the /pledges/ campaign header:
   image on the left (200px), text (title/price/description) on the right,
   stacking on mobile. */
.reward-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.reward-hero__media {
    flex: 0 0 200px;
}

.reward-hero__media img {
    display: block;
    width: 200px;
    height: auto;
    border-radius: 4px;
}

.reward-hero__text {
    flex: 1 1 auto;
    min-width: 0;
}

.reward-hero__text #title {
    margin-top: 0;
}

.reward-hero__text .campaignData.pre-wrap {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Conversion pass (2026-08): the reward header and the pledge form are the two
   steps of the checkout funnel. Present each as a white card (matching the
   /pledges/ list), make the price the clear value anchor, tidy the many form
   fields, and turn the submit into one prominent full-width orange CTA — orange
   is the design system's action colour, and this is THE action on the page.
   Tokens: accent-500 #E48348 / accent-600 #CC812C, dark #282828,
   gray-200 #E8E7E3, gray-400 #C0C0C0, gray-600 #6B6A66, primary-50 #E8F6F8.
   --------------------------------------------------------------------------- */

/* Both funnel blocks as cards, constrained to a comfortable, centred checkout
   width. The .col2 span-1/-1 stretched them to the full 980px grid, giving
   ~930px-wide form fields (far past the ~50-char line length good form UX wants
   and reading as an unfinished, sprawling page). A single ~560px column centres
   the funnel and keeps attention on one thing: completing the pledge. */
#body-emulate .col2.mesenoi,
#body-emulate .login.col2 {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    justify-self: center;
    background: #fff;
    border: 1px solid #E8E7E3;
    border-radius: 8px;
    padding: 24px;
}

#body-emulate .login.col2 {
    margin-top: 16px;
}

/* Reward header: title + price as the value anchor. */
#body-emulate .col2.mesenoi #title {
    font-family: Adelle, 'Roboto Slab', Georgia, serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    color: #282828;
    border-bottom: 0;
    padding-bottom: 0;
}

/* View mode leaves an empty <form id="checkoutform"> (a stray turquoise
   border + 25px margin) and two literal <br>s meant for the edit-mode
   question section below them — hide that trailing dead space in the card. */
#body-emulate .col2.mesenoi #checkoutform,
#body-emulate .col2.mesenoi > br {
    display: none;
}

#body-emulate .col2.mesenoi .price {
    font-family: Adelle, 'Roboto Slab', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: #282828;
    margin: 0 0 16px;
}

#body-emulate .col2.mesenoi .campaignData.pre-wrap {
    font-family: adelle-sans, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #282828;
}

/* Pledge form heading ("Tilaus"). */
#body-emulate .login.col2 > h1 {
    font-family: Adelle, 'Roboto Slab', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #282828;
    margin: 0 0 16px;
    padding: 0;
}

/* Form fields: full width, 16px (no iOS zoom), clear labels, even rhythm. */
#pledgeform fieldset {
    border: 0;
    margin: 0 0 14px;
    padding: 0;
    min-width: 0;
}

#pledgeform label {
    display: block;
    font-family: adelle-sans, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #282828;
    margin: 0 0 4px;
    text-transform: none;
}

#pledgeform .pledge-field {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 16px;
    font-family: adelle-sans, sans-serif;
    color: #282828;
    background: #fff;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

#pledgeform select.pledge-field {
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6A66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

#pledgeform .pledge-field:focus {
    outline: none;
    border-color: #1BA3B0;
    box-shadow: 0 0 0 2px #E8F6F8;
}

#pledgeform .pledge-field.error {
    border-color: #cc3333;
}

#pledgeform label.error {
    color: #cc3333;
    font-size: 12px;
    font-weight: 400;
    margin: 4px 0 0;
}

/* The template puts an empty <p class="helpertext"> after every field; collapse
   it so it doesn't add a stray gap on top of the fieldset margin. */
#pledgeform .helpertext:empty {
    display: none;
}

#pledgeform .helpertext {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6B6A66;
}

/* The submit — one prominent, full-width orange CTA (the funnel's whole point).
   Overrides the shared .mesenoi orange button's cramped inline width/margin. */
#pledgeform .pledgeNow.mesenoi {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 8px 0 0;
    padding: 15px 20px;
    background: #E48348;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: adelle-sans, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    cursor: pointer;
}

#pledgeform .pledgeNow.mesenoi:hover {
    background: #CC812C;
}

/* Mobile: compact the header so the pledge form's first fields reach screen 1. */
@media (max-width: 687px) {
    #title {
        font-size: 24px;
        line-height: 1.15;
        margin: 0 0 6px;
    }

    .col2.mesenoi .price {
        margin: 0 0 12px;
    }

    /* Stack the hero: image on top, text below. */
    .reward-hero {
        flex-direction: column;
        gap: 12px;
    }

    .reward-hero__media {
        flex-basis: auto;
    }

    .reward-hero__media img {
        width: 100%;
        max-width: 320px;
    }
}