/* Hosted donation campaign landing page (/donate/{slug}).
   Theme comes from CSS custom properties set inline by the Blade view:
   --donation-accent, --donation-page-bg, --donation-hero-overlay. */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--donation-page-bg, #f8f8f8);
    color: #222;
    line-height: 1.6;
}

.dp-hero { position: relative; background-size: cover; background-position: center; }
.dp-hero--solid { background: var(--donation-accent, #1e87f0); }
.dp-hero__overlay {
    padding: 64px 24px;
    text-align: center;
    color: #fff;
}
.dp-hero--image .dp-hero__overlay { background: rgba(0, 0, 0, var(--donation-hero-overlay, 0.4)); }
.dp-hero__title { margin: 0 0 8px; font-size: 2.2rem; line-height: 1.2; }
.dp-hero__subtitle { margin: 0 auto; max-width: 640px; font-size: 1.15rem; opacity: 0.92; }

.dp-share {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
    padding: 12px 16px; background: #fff; border-bottom: 1px solid #eee;
}
.dp-share__label { font-size: 0.85rem; color: #777; margin-right: 4px; }
.dp-share__btn {
    display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem;
    border: 1px solid var(--donation-accent, #1e87f0); color: var(--donation-accent, #1e87f0);
    background: #fff; text-decoration: none; cursor: pointer;
}
.dp-share__btn:hover { background: var(--donation-accent, #1e87f0); color: #fff; }

.dp-main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; }
.dp-columns { display: flex; gap: 32px; align-items: flex-start; }
.dp-content { flex: 1.6; min-width: 0; }
.dp-form-col { flex: 1; min-width: 320px; }
.dp-form-sticky { position: sticky; top: 16px; }
.dp-form-sticky iframe { width: 100%; min-height: 500px; border: none; display: block; }

.dp-story { background: #fff; border-radius: 8px; padding: 24px; }
.dp-story img { max-width: 100%; height: auto; }
.dp-faq { margin-top: 24px; }
.dp-faq h2 { font-size: 1.3rem; }
.dp-faq__item {
    background: #fff; border-radius: 6px; padding: 12px 16px; margin-bottom: 8px;
    border: 1px solid #eee;
}
.dp-faq__item summary { cursor: pointer; font-weight: 600; }
.dp-faq__answer { padding-top: 8px; color: #444; }

.dp-footer { text-align: center; padding: 24px; color: #999; font-size: 0.85rem; }

/* Mobile: single column, form directly under the hero (source order handles
   story-after-form via flex order). */
@media (max-width: 860px) {
    .dp-columns { flex-direction: column; }
    .dp-form-col { order: -1; width: 100%; min-width: 0; }
    .dp-form-sticky { position: static; }
}