/* Share campaign/P2P primitives through theme tokens, with fallback values. */

/* Define tokens on body where campaign overrides live, and on the editor canvas separately. */

body,
.editor-styles-wrapper,
.gratora-p2p-layout,
.gratora-p2p-thermo,
.gratora-p2p-grid-section,
.gratora-p2p-fundraiser,
.gratora-p2p-team,
.gratora-p2p-leaderboard,
.gratora-p2p-donors,
.gratora-p2p-sponsors,
.gratora-p2p-welcome,
.dp-layout{
    --dp-measure: 1200px;

    --dp-accent:      var(--gratora-accent, #211d3f);
    --dp-accent-dark: color-mix(in srgb, var(--dp-accent) 78%, #000);
    /* Derive accent-soft unless explicitly paired by the preset. */
    --dp-accent-soft: var(--gratora-accent-soft, color-mix(in srgb, var(--dp-accent) 12%, #fff));
    /* Measured on that tint: the darkened accent where it reads, dark or white ink where it does not. */
    --dp-on-accent-soft: var(--gratora-on-page-tint, var(--dp-accent-dark));

    /* Use server-resolved contrast ink from AccentInk. */
    --dp-cover-image:     var(--gratora-cover-image, none);

    --dp-on-accent:       var(--gratora-on-accent, #ffffff);
    --dp-on-accent-muted: var(--gratora-on-accent-muted, rgba(255, 255, 255, .72));
    --dp-on-accent-line:  var(--gratora-on-accent-line, rgba(255, 255, 255, .26));
    --dp-on-accent-ring:  var(--gratora-on-accent-ring, var(--dp-on-accent));

    /* White over a scrim on a photo; a cover without one names the accent's ink. */
    --dp-cover-ink:       var(--gratora-cover-ink, #fff);
    --dp-cover-ink-muted: var(--gratora-cover-ink-muted, rgba(255, 255, 255, .76));
    --dp-cover-line:      var(--gratora-cover-line, rgba(255, 255, 255, .28));
    --dp-cover-scrim:     var(--gratora-cover-scrim, linear-gradient(180deg, rgba(6, 10, 20, .10) 0%, rgba(6, 10, 20, .55) 58%, rgba(6, 10, 20, .84) 100%));
    --dp-cover-ring:      var(--gratora-cover-ring, var(--dp-cover-ink));

    --dp-text:        var(--gratora-text, #141821);
    /* Mix body and muted tokens for intermediate text contrast. */
    --dp-text-2:      color-mix(in srgb, var(--dp-text) 70%, var(--dp-muted) 30%);
    --dp-muted:       var(--gratora-text-muted, #7a8398);

    --dp-border:      var(--gratora-border, #e8ebf0);
    --dp-rule:        color-mix(in srgb, var(--dp-border) 55%, var(--dp-card));
    --dp-card:        var(--gratora-bg, #ffffff);
    --dp-page:        var(--gratora-bg-soft, #fafbfc);
    --dp-on-page:     var(--gratora-on-soft, var(--dp-text));

    --dp-radius:      var(--gratora-radius, 14px);
    --dp-radius-sm:   var(--gratora-radius-sm, 10px);
    --dp-font:        var(--gratora-typeface, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --dp-shadow:      var(--gratora-card-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .06));

    --dp-btn-bg:             var(--gratora-button-bg, var(--dp-accent));
    /* Through the measured ink, not a literal: a pale accent takes dark. */
    --dp-btn-fg:             var(--gratora-button-fg, var(--dp-on-accent));
    /* The fill darkened, as Ink::hoverDeclarations measures the hover ink on it. */
    --dp-btn-hover-bg:       var(--gratora-button-hover-bg, color-mix(in srgb, var(--dp-btn-bg) 78%, #000));
    --dp-btn-hover-fg:       var(--gratora-on-button-hover, var(--dp-btn-fg));
    --dp-btn-radius:         var(--gratora-button-radius, var(--dp-radius-sm));
    --dp-btn-border:         var(--gratora-button-border, 0);
    --dp-btn-shadow:         var(--gratora-button-shadow, none);
    --dp-btn-padding-block:  12px;
    --dp-btn-padding-inline: 24px;
    --dp-btn-font-size:      15px;
    --dp-btn-font-weight:    var(--gratora-button-weight, 500);
}

/* WordPress columns own display and stacking; override only measure and sticky positioning. */

.gratora-p2p-layout,
.dp-layout{
    box-sizing: border-box;
    max-width: var(--dp-measure, 1200px);
    margin-inline: auto;
    /* Apply gutters at the layout level so nested bands align. */
    padding-inline: 24px;
}

.gratora-p2p-layout .dp-band,
.gratora-p2p-layout .dp-rail,
.dp-layout .dp-band,
.dp-layout .dp-rail{ padding-inline: 0; }

/* Allow shrinking below intrinsic content width. */

.gratora-p2p-layout > .wp-block-column,
.dp-layout > .wp-block-column{
    min-width: 0;
}

.gratora-p2p-layout__side,
.dp-layout__side{
    position: sticky;
    top: 32px;
    align-self: flex-start;
}

.dp-figures{
    gap: 20px;
    margin-block: 22px;
}

@media (max-width: 600px) {
    .dp-figures{
        flex-wrap: wrap;
        gap: 14px;
    }
}

/* Disable sticky positioning at WordPress’s column breakpoint. */
@media (max-width: 781px) {
    .dp-layout__side,
    .gratora-p2p-layout__side {
        position: static;
    }
}

#gratora-form {
    scroll-margin-top: 24px;
}


.dp-page {
    color: var(--dp-text);
    background: var(--dp-card);
    font-family: var(--dp-font);
    font-size: calc(var(--gratora-type-size, 15px) + 1px);
    font-weight: var(--gratora-body-weight, 400);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    /* Keep these after section rules to win equal-specificity ties. */
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

.dp-page *,
.dp-page *::before,
.dp-page *::after { box-sizing: border-box; }

/* These paint the card, so text on them reads the ink measured on it, including a heading that only inherits its colour. */
.dp-page,
.dp-profile,
.dp-card,
.dp-hero-card,
.dp-sharesheet {
    --gratora-text: var(--gratora-on-bg, #141821);
    --gratora-text-muted: var(--gratora-on-bg-muted, #7a8398);
    --gratora-text-accent: var(--gratora-on-bg-accent, var(--dp-accent));
    --gratora-text-ring: var(--gratora-on-bg-ring, var(--gratora-text-accent));
    --dp-text: var(--gratora-text);
    --dp-muted: var(--gratora-text-muted);
    --dp-text-2: color-mix(in srgb, var(--dp-text) 70%, var(--dp-muted) 30%);
    color: var(--dp-text);
}


.dp-band{ max-width: var(--dp-measure, 1200px); margin: 0 auto; padding: 0 24px 72px; }

.dp-band--wide { max-width: 1060px; }

.dp-band--tight { padding-bottom: 40px; }

.dp-top { padding-top: 64px; }

.dp-display { margin: 0; font-size: 44px; line-height: 1.08; font-weight: var(--gratora-heading-weight, 650); letter-spacing: -.022em; text-wrap: balance; }

.dp-h2 { margin: 0 0 18px; font-size: 26px; line-height: 1.25; font-weight: var(--gratora-heading-weight, 650); letter-spacing: -.015em; }

.dp-h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; font-weight: var(--gratora-heading-weight, 650); }

.dp-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--dp-text-2); }

.dp-body { margin: 0 0 14px; color: var(--dp-text-2); }

/* Declare after typography margin shorthands; these elements sit outside the page reset. */

.dp-rail {
    box-sizing: border-box;
    max-width: var(--dp-measure, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Hide empty bound sections only on the frontend so editors can still select them.
   Some classic themes wrap a group's content in an inner container. */

.dp-band--tight:has(> p.dp-body:empty),
.dp-band--tight:has(> .wp-block-group__inner-container > p.dp-body:empty) { display: none; }

.editor-styles-wrapper .dp-band--tight:has(> p.dp-body:empty) { display: revert; }

/* Opt in by class to preserve authored button styles. */

.dp-cta .wp-block-button__link,
.wp-block-button.dp-cta .wp-block-button__link {
    background: var(--dp-btn-bg);
    color: var(--dp-btn-fg);
    border: var(--dp-btn-border);
    border-radius: var(--dp-btn-radius);
    box-shadow: var(--dp-btn-shadow);
    padding: var(--dp-btn-padding-block) var(--dp-btn-padding-inline);
    font-size: var(--dp-btn-font-size);
    font-weight: var(--dp-btn-font-weight);
    text-decoration: none;
}

.dp-cta .wp-block-button__link:hover,
.wp-block-button.dp-cta .wp-block-button__link:hover { background: var(--dp-btn-hover-bg); color: var(--dp-btn-hover-fg); }

.dp-cta--quiet .wp-block-button__link,
.wp-block-button.dp-cta--quiet .wp-block-button__link {
    background: transparent;
    color: var(--dp-text-2);
    padding-inline: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dp-cta--quiet .wp-block-button__link:hover,
.wp-block-button.dp-cta--quiet .wp-block-button__link:hover { background: transparent; color: var(--dp-text); }


.dp-display.dp-rail { margin-block-end: 40px; }

.dp-meta { font-size: 13px; line-height: 1.45; color: var(--dp-muted); }

.dp-lede,
.dp-body,
.dp-prose,
.dp-band > .dp-meta { max-width: 68ch; }

.dp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--dp-muted); }

.dp-figure {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    border-radius: var(--dp-radius); background: var(--dp-rule); margin-bottom: 22px;
}

.dp-avatar {
    width: 64px; height: 64px; border-radius: 999px; flex: none;
    background: var(--dp-accent-soft); color: var(--dp-on-accent-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px;
}

.dp-avatar--sm { width: 34px; height: 34px; font-size: 12.5px; }

.dp-avatar--photo { object-fit: cover; background: var(--dp-rule); }

.dp-profile {
    max-width: var(--dp-measure, 1200px);
    margin-inline: auto;
    background: var(--dp-card);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow);
    overflow: hidden;
}

.dp-profile__cover {
    height: 104px;
    background: var(--dp-accent-soft);
    border-bottom: 1px solid var(--dp-border);
}

.dp-profile__body {
    padding: 0 clamp(20px, 4vw, 48px) clamp(24px, 3.5vw, 36px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

/* Use shadows to keep the full photo circle. */

.dp-profile__avatar {
    width: clamp(88px, 11vw, 112px);
    height: clamp(88px, 11vw, 112px);
    margin-top: calc(clamp(88px, 11vw, 112px) / -2);
    border-radius: 999px;
    background: var(--dp-accent-soft);
    color: var(--dp-on-accent-soft);
    box-shadow: 0 0 0 5px var(--dp-card), 0 0 0 6px var(--dp-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
    object-fit: cover;
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 700;
}

.dp-profile .dp-label { margin: 18px 0 0; }

.dp-profile .dp-display { margin: 8px 0 0; }

.dp-profile__meta { margin: 10px 0 0; max-width: 46ch; color: var(--dp-muted); }

.dp-profile__meta--sub { margin-top: 6px; font-size: 13px; }

.dp-profile__actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
}

.dp-profile__actions .dp-btn--ghost {
    background: var(--dp-card);
    color: var(--dp-text);
    border: 1px solid var(--dp-border);
}

.dp-profile__actions .dp-btn--ghost:hover {
    background: var(--dp-card);
    border-color: var(--dp-accent-dark);
    color: var(--dp-text);
}

.dp-profile__money {
    width: 100%;
    max-width: 460px;
    margin: clamp(20px, 2.4vw, 26px) auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--dp-border);
}

.dp-profile__amount {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: var(--gratora-heading-weight, 650);
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--dp-text);
}

.dp-profile__word {
    font-size: .46em;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dp-muted);
    margin-left: .45em;
    vertical-align: .2em;
}

.dp-profile__goal { margin: 5px 0 0; font-size: 13px; color: var(--dp-muted); font-variant-numeric: tabular-nums; }

.dp-profile__track {
    margin-top: 12px;
    height: 7px;
    border-radius: 999px;
    background: var(--dp-page);
    border: 1px solid var(--dp-border);
    overflow: hidden;
}

.dp-profile__track i { display: block; height: 100%; background: var(--dp-accent); border-radius: 999px 0 0 999px; }

.dp-profile__stats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-page);
    overflow: hidden;
    --dp-text: var(--gratora-on-soft, #141821);
    --dp-muted: var(--gratora-on-soft-muted, #7a8398);
}

.dp-profile__stat { margin: 0; padding: 9px 10px; min-width: 0; }

.dp-profile__stat + .dp-profile__stat { border-left: 1px solid var(--dp-border); }

.dp-profile__stat b {
    display: block;
    font-size: 15px;
    font-weight: var(--gratora-heading-weight, 650);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--dp-text);
}

.dp-profile__stat span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

@media (max-width: 520px) {
    .dp-profile__cover { height: 84px; }
    .dp-profile__actions { flex-direction: column; align-items: stretch; }
    .dp-profile__actions .dp-btn,
.dp-profile__actions .dp-link { width: 100%; }
}

.dp-money { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 28px; font-variant-numeric: tabular-nums; }

.dp-raised { font-size: 36px; font-weight: var(--gratora-heading-weight, 650); letter-spacing: -.022em; color: var(--gratora-text-accent, var(--dp-accent)); }

.dp-goal { font-size: 15px; color: var(--dp-muted); }

.dp-bar { height: 8px; border-radius: 999px; background: var(--dp-rule); overflow: hidden; margin-top: 14px; }

.dp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--dp-accent); }

.dp-stats { display: flex; flex-wrap: wrap; margin-top: 26px; border-top: 1px solid var(--dp-border); }

.dp-stat { flex: 1 1 120px; padding: 16px 18px 0 0; }

.dp-stat + .dp-stat { border-left: 1px solid var(--dp-border); padding-left: 18px; }

.dp-stat b { display: block; font-size: 22px; font-weight: var(--gratora-heading-weight, 650); letter-spacing: -.018em; font-variant-numeric: tabular-nums; }

.dp-stat span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--dp-muted); }

.dp-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }

.dp-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
    border: var(--dp-btn-border); border-radius: var(--dp-btn-radius);
    background: var(--dp-btn-bg); color: var(--dp-btn-fg); box-shadow: var(--dp-btn-shadow);
    font: inherit; font-size: 15px; font-weight: var(--gratora-button-weight, 650); cursor: pointer; text-decoration: none;
}

.dp-btn:hover { background: var(--dp-btn-hover-bg); color: var(--dp-btn-hover-fg); }

.dp-link {
    font-size: 14.5px; font-weight: 600; color: var(--dp-text); text-decoration: underline;
    text-decoration-color: var(--dp-border); text-underline-offset: 4px;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}

.dp-link:hover { text-decoration-color: currentColor; }

.dp-link--quiet { color: var(--dp-muted); font-weight: 500; }

/* Drawn outside the control, on the ground around it, in the ring measured there. */
.dp-btn:focus-visible,
.dp-link:focus-visible,
.dp-inline-link:focus-visible,
.dp-sharesheet__item:focus-visible,
.dp-cta .wp-block-button__link:focus-visible {
    outline: 2px solid var(--gratora-text-ring, var(--gratora-text-accent, var(--dp-accent)));
    outline-offset: 2px;
}

.dp-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--dp-rule); }

.dp-row:last-of-type { border-bottom: 0; }

.dp-row-main { flex: 1; min-width: 0; display: block; }

.dp-row-name { display: block; font-weight: 600; font-size: 15px; }

.dp-row-sub { display: block; font-size: 13px; color: var(--dp-muted); margin-top: 1px; }


.dp-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dp-tag {
    display: inline-block; margin-left: 7px; padding: 1px 7px; vertical-align: 1px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--dp-on-accent-soft); background: var(--dp-accent-soft); border-radius: 999px;
}

.dp-row-msg { display: block; font-size: 15px; line-height: 1.5; color: var(--dp-text-2); margin: 4px 0 2px; }

.dp-row-amt { font-weight: 650; font-variant-numeric: tabular-nums; flex: none; }

.dp-rank { width: 26px; font-size: 13px; font-weight: 700; color: var(--dp-muted); font-variant-numeric: tabular-nums; flex: none; }

.dp-card { border: 1px solid var(--dp-border); border-radius: var(--dp-radius); padding: 22px 24px; background: var(--dp-card); }

.dp-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--dp-border); }

.dp-rule { height: 1px; border: 0; background: var(--dp-border); margin: 0 0 34px; }

/* Keep prose-link affordances without underlining whole rows. */

.dp-inline-link { color: inherit; text-decoration: underline; text-decoration-color: var(--dp-border); text-underline-offset: 3px; }

.dp-inline-link:hover { text-decoration-color: currentColor; }

.dp-row.dp-inline-link { text-decoration: none; }

.dp-row.dp-inline-link:hover .dp-row-name { text-decoration: underline; text-underline-offset: 3px; }

/* Constrain authored images without cropping portrait uploads. */

.dp-prose img { display: block; width: 100%; height: auto; border-radius: var(--dp-radius); margin: 26px 0; }

.dp-figure--story { aspect-ratio: auto; min-height: 190px; margin: 26px 0; }


.dp-hero {
    position: relative; margin-top: 26px;
    /* Query the card container; viewport width does not reflect narrow columns. */
    container-type: inline-size;
}

.dp-hero .dp-figure { margin-bottom: 0; }

/* Cap desktop photo height to keep the readout above the fold. */
@media (min-width: 782px) {
    .dp-hero .dp-figure { max-height: 46vh; }
}

.dp-hero-media { position: relative; }

.dp-hero-card {
    position: relative; margin: -38px 88px 0; padding: 12px 15px;
    background: var(--dp-card); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm); box-shadow: var(--dp-shadow);
}

.dp-hero-top { position: absolute; top: 14px; right: 14px; }


.dp-hero-top .dp-btn { background: #fff; color: var(--dp-text); font-size: 13.5px; padding: 9px 16px; box-shadow: 0 2px 12px rgba(15, 23, 42, .2); }

.dp-hero-top .dp-btn:hover { background: var(--dp-page); color: var(--dp-on-page); }

/* Nothing measures a photo, so the white button rings inside itself, in its own ink. */
.dp-hero:not(.dp-hero--flat) .dp-hero-top .dp-btn:focus-visible { outline-color: currentColor; outline-offset: -4px; }

.dp-hero-card .dp-money { margin-top: 0; gap: 7px; flex-wrap: nowrap; }

.dp-hero-card .dp-money .dp-goal { flex: 1; min-width: 0; }

.dp-hero-card .dp-money .dp-btn { margin-left: auto; flex: none; font-size: 13.5px; padding: 9px 17px; }

.dp-hero-card .dp-raised { font-size: 19px; letter-spacing: -.015em; }

.dp-hero-card .dp-goal { font-size: 11.5px; }

.dp-hero-card .dp-bar { height: 4px; margin-top: 8px; }

.dp-hero-card .dp-stats { margin-top: 9px; padding-top: 8px; }

.dp-hero-card .dp-stat { flex: 1 1 68px; padding: 0 12px 0 0; }

.dp-hero-card .dp-stat + .dp-stat { padding-left: 12px; }

.dp-hero-card .dp-stat b { font-size: 12.5px; letter-spacing: -.008em; }

.dp-hero-card .dp-stat span { margin-top: 1px; font-size: 9px; letter-spacing: .07em; }

.dp-hero--flat .dp-figure { display: none; }

.dp-hero--flat .dp-hero-card { margin: 0; box-shadow: none; border: 0; padding: 0; }

.dp-hero--flat .dp-hero-top { position: static; margin-bottom: 18px; }

.dp-hero--flat .dp-hero-top .dp-btn { background: var(--dp-btn-bg); color: var(--dp-btn-fg); box-shadow: none; }

.dp-hero--flat .dp-hero-top .dp-btn:hover { background: var(--dp-btn-hover-bg); color: var(--dp-btn-hover-fg); }

@container (max-width: 900px) {
    .dp-hero-card { margin: -38px 36px 0; }
}

@container (max-width: 560px) {
    .dp-hero-card { margin: -28px 12px 0; padding: 11px 13px; }
    .dp-hero-card .dp-money { flex-wrap: wrap; }
    .dp-hero-card .dp-money .dp-btn { margin-left: 0; width: 100%; justify-content: center; margin-top: 9px; }
    .dp-hero-top { top: 10px; right: 10px; }
}

@media (max-width: 560px) {
    .dp-display { font-size: 34px; }
}

.dp-sharesheet {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    min-width: 170px; padding: 6px;
    display: flex; flex-direction: column;
    background: var(--dp-card); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm); box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}

.dp-sharesheet__item {
    font: inherit; font-size: 14px; text-align: left; color: var(--dp-text);
    background: none; border: 0; border-radius: var(--dp-radius-sm);
    padding: 9px 12px; cursor: pointer; text-decoration: none;
}

.dp-sharesheet__item:hover { background: var(--dp-accent-soft); color: var(--dp-on-accent-soft); }

/* The form’s own Frame/Plain setting controls its card. */

.gratora-p2p-form-band,
.gratora-form-band{
    max-width: var(--dp-measure, 1200px);
    margin: 0 auto;
    padding: 0 24px 72px;
}


.gratora-p2p-layout__side .gratora-p2p-form-band,
.gratora-p2p-layout__side .gratora-form-band,
.dp-layout__side .gratora-p2p-form-band,
.dp-layout__side .gratora-form-band{ padding: 0; max-width: none; }
/* Match campaign width inside the editor canvas only. */
.editor-styles-wrapper .alignwide.dp-wide,
.editor-styles-wrapper .alignwide.dp-panel,
.editor-styles-wrapper .alignwide.dp-layout,
.editor-styles-wrapper .alignwide.dp-cover,
.editor-styles-wrapper .alignwide.dp-band {
    max-width: var(--dp-measure, 1200px);
}

/* Carry alignwide without adding spacing or surfaces; child blocks own them. */
.dp-wide {
    padding: 0;
    background: none;
    border: 0;
}

/* Use className for panels; handcrafted inline styles can invalidate static Gutenberg blocks. */
.dp-panel {
    padding: 28px;
    border-radius: var(--dp-radius);
}

.dp-panel--accent {
    background: var(--dp-accent);
    color: var(--dp-on-accent);
}

/*
 * Panel ink, leaving --gratora-accent alone since it paints the panel. A guest
 * block's wrapper states its campaign's tokens inline, so its children restate
 * the panel's from the --dp- aliases the wrapper does not touch, at zero extra
 * specificity so a card inside still reads its own ground.
 */
.dp-panel--accent,
.dp-panel--accent :where(.gratora-block > *) {
    --gratora-text:          var(--dp-on-accent);
    --gratora-text-muted:    var(--dp-on-accent-muted);
    --gratora-text-accent:   var(--dp-on-accent);
    --gratora-text-ring:     var(--dp-on-accent-ring);
    --gratora-bg-soft:       var(--dp-on-accent-line);
    --gratora-border:        var(--dp-on-accent-line);
    --gratora-on-soft:       var(--dp-on-accent);
    --gratora-on-soft-muted: var(--dp-on-accent-muted);
    --gratora-on-soft-accent: var(--dp-on-accent);
}
.dp-panel--accent .dp-money,
.dp-panel--accent .dp-raised,
.dp-panel--accent .dp-stat,
.dp-panel--accent h1,
.dp-panel--accent h2,
.dp-panel--accent p { color: var(--dp-on-accent); }
.dp-panel--accent .dp-bar { background: var(--dp-on-accent-line); }
.dp-panel--accent .dp-bar > * { background: var(--dp-on-accent); }

/* Outrank block selectors so accent-colored text contrasts with the accent panel. */
.dp-panel--accent .gratora-block--progress .gratora-progress__value {
    color: var(--dp-on-accent);
}
.dp-panel--accent .gratora-block--progress .gratora-progress__bar-fill {
    background: var(--dp-on-accent);
}

/* Set color directly because editor previews carry higher-priority inline text tokens. */
.dp-panel--accent .gratora-stat__label,
.dp-panel--accent .gratora-progress__caption,
.dp-panel--accent .gratora-progress__target { color: var(--dp-on-accent-muted); }
.dp-panel--accent .gratora-stat__value { color: var(--dp-on-accent); }
.dp-panel--accent .gratora-progress__bar { background: var(--dp-on-accent-line); }

/* Use a background image to avoid editor image-wrapper layout differences. */
.dp-cover {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(340px, 42vw, 520px);
    padding: 40px 32px 32px;

    background-color: var(--dp-accent);
    background-image: var(--dp-cover-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--dp-cover-ink);
}
.dp-cover,
.dp-cover :where(.gratora-block > *) {
    --gratora-text:          var(--dp-cover-ink);
    --gratora-text-muted:    var(--dp-cover-ink-muted);
    --gratora-text-accent:   var(--dp-cover-ink);
    --gratora-text-ring:     var(--dp-cover-ring);
    --gratora-bg-soft:       var(--dp-cover-line);
    --gratora-border:        var(--dp-cover-line);
    --gratora-on-soft:       var(--dp-cover-ink);
    --gratora-on-soft-muted: var(--dp-cover-ink-muted);
    --gratora-on-soft-accent: var(--dp-cover-ink);
}
.dp-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--dp-cover-scrim);
}
.dp-cover__body { position: relative; z-index: 2; }
.dp-cover__body h1 {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.08;
    letter-spacing: -.02em;
}
/* Set color directly to override editor preview tokens. */
.dp-cover .gratora-block--progress .gratora-progress__value { color: var(--dp-cover-ink); }
.dp-cover .gratora-block--progress .gratora-progress__bar-fill { background: var(--dp-cover-ink); }
.dp-cover .gratora-stat__value { color: var(--dp-cover-ink); }
.dp-cover .gratora-stat__label,
.dp-cover .gratora-progress__caption,
.dp-cover .gratora-progress__target { color: var(--dp-cover-ink-muted); }
.dp-cover .gratora-progress__bar { background: var(--dp-cover-line); }

.dp-panel--soft { background: var(--dp-accent-soft); }

.dp-panel--lead { padding: 44px 28px; }

.dp-panel--card { padding: 20px; background: var(--dp-accent-soft); border-radius: var(--dp-radius-sm); }