/* two_column_desktop — layout only; JS adds .donation-template--ab-two-column
   and wraps .donation-options + .donation-form in .donation-ab-form-column.
   Form column keeps a real min-width so amount grid / donor fields / wallets
   are not clipped; text column is the one that shrinks.
   Active at ≥1024px only (stacked layout below that). */

@media (min-width: 1024px) {
    body.ab-test-two_column_desktop .navless-logo {
        max-width: 1200px;
        width: calc(100% - 2rem);
        box-sizing: border-box;
    }

    .donation-template.donation-template--ab-two-column {
        display: grid;
        /* ~55/45 with a hard floor on the form column so controls fit. */
        grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
        column-gap: 2.25rem;
        row-gap: 1.75rem;
        align-items: start;
        max-width: 1200px;
        width: calc(100% - 2rem);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0.5rem 0 1rem;
        overflow: visible;
    }

    .donation-template.donation-template--ab-two-column > .donation-header {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
        margin-bottom: 0;
        padding: 0.25rem 0.25rem 0 0;
        min-width: 0;
    }

    .donation-template.donation-template--ab-two-column > .donation-ab-form-column {
        grid-column: 2;
        grid-row: 1;
        background: #fff;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
        padding: 1.35rem 1.5rem 1.55rem;
        /* Prefer growing over clipping; text column yields first. */
        min-width: 420px;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    /* Unwrapped fallback: stack frequency toggle + form in the right column. */
    .donation-template.donation-template--ab-two-column > .donation-options,
    .donation-template.donation-template--ab-two-column > .donation-form {
        grid-column: 2;
        min-width: 420px;
        margin: 0;
        background: #fff;
        border: 1px solid #e1e8ed;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
        overflow: visible;
        box-sizing: border-box;
    }

    .donation-template.donation-template--ab-two-column > .donation-options {
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        box-shadow: none;
        padding: 1.35rem 1.5rem 0;
    }

    .donation-template.donation-template--ab-two-column > .donation-form {
        border-radius: 8px;
        padding: 1.35rem 1.5rem 1.55rem;
    }

    .donation-template.donation-template--ab-two-column > .donation-options + .donation-form {
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding-top: 0;
    }

    .donation-template.donation-template--ab-two-column > .other-options {
        grid-column: 1 / -1;
        margin-top: 0.25rem;
    }

    .donation-template.donation-template--ab-two-column .donation-header h1 {
        text-align: left;
        font-size: 2.35rem;
        line-height: 1.2;
        margin: 0 0 0.35rem;
        color: #1a2a3a;
    }

    .donation-template.donation-template--ab-two-column .donation-header h1::after {
        content: "";
        display: block;
        width: 3.25rem;
        height: 4px;
        margin-top: 0.85rem;
        background: #dd230f;
        border-radius: 1px;
    }

    .donation-template.donation-template--ab-two-column .donation-headline {
        text-align: left;
        margin-bottom: 0.75rem;
    }

    .donation-template.donation-template--ab-two-column .donation-intro {
        text-align: left;
        padding: 0;
        margin-top: 1.25rem;
    }

    .donation-template.donation-template--ab-two-column .donation-intro p {
        font-size: 1.12rem;
        line-height: 1.7;
        margin-bottom: 1.15rem;
    }

    .donation-template.donation-template--ab-two-column .donation-ab-form-column .donation-options {
        margin: 0 0 1rem;
        text-align: left;
    }

    /* Frequency toggle must fit the form card width. */
    .donation-template.donation-template--ab-two-column .donation-frequency-toggle {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .donation-template.donation-template--ab-two-column .toggle-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .donation-template.donation-template--ab-two-column .toggle-label {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.75rem 0.75rem;
    }

    /*
     * Monthly-gift prompt arrow: PNG tips up/left. Toggle order is
     * Monthly | Today, so keep the prompt under the left half (no mirror)
     * so the tip points into DONATE MONTHLY.
     */
    .donation-template.donation-template--ab-two-column .donation-ab-form-column .monthly-prompt,
    .donation-template.donation-template--ab-two-column > .donation-options .monthly-prompt {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-top: 0.65rem;
        padding-left: 0.5rem;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .donation-template.donation-template--ab-two-column .prompt-arrow {
        transform: none;
        margin: -10px 0.35rem 0 0.45rem;
    }

    .donation-template.donation-template--ab-two-column .donation-ab-form-column .form-grid,
    .donation-template.donation-template--ab-two-column > .donation-form .form-grid {
        max-width: none;
        width: 100%;
        margin: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Global .form-control max-width:325px forces overflow in a ~420px card. */
    .donation-template.donation-template--ab-two-column .donation-ab-form-column .form-control,
    .donation-template.donation-template--ab-two-column > .donation-form .form-control,
    .donation-template.donation-template--ab-two-column .donation-ab-form-column .form-group-feedback,
    .donation-template.donation-template--ab-two-column > .donation-form .form-group-feedback {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .donation-template.donation-template--ab-two-column .donation-ab-form-column .form-group,
    .donation-template.donation-template--ab-two-column > .donation-form .form-group {
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Amount grid: 6 tracks so we can do 3 equal presets on row 1, then a
     * 50/50 second preset row when there are exactly 5 presets + Other
     * (typical once amounts: $25/$50/$75 then $100/$200, then Other).
     */
    .donation-template.donation-template--ab-two-column .amount-grid {
        gap: 0.65rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .donation-template.donation-template--ab-two-column .amount-option {
        min-width: 0;
        grid-column: span 2;
    }

    /* 5 presets + Other: items 4 and 5 each take half the row. */
    .donation-template.donation-template--ab-two-column .amount-option:nth-child(4):nth-last-child(3),
    .donation-template.donation-template--ab-two-column .amount-option:nth-child(5):nth-last-child(2) {
        grid-column: span 3;
    }

    /* Other + custom input needs a full row; 1/3 grid cell was clipping it. */
    .donation-template.donation-template--ab-two-column .amount-option.custom-amount {
        grid-column: 1 / -1;
    }

    .donation-template.donation-template--ab-two-column .custom-amount input[type="number"] {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Wallet / PayPal row: stay fully visible inside the form card. */
    .donation-template.donation-template--ab-two-column .express-payment-buttons,
    .donation-template.donation-template--ab-two-column .wallet-row-buttons,
    .donation-template.donation-template--ab-two-column .paypal-button-container,
    .donation-template.donation-template--ab-two-column .express-checkout-container,
    .donation-template.donation-template--ab-two-column .paypal-top,
    .donation-template.donation-template--ab-two-column .stripe-card-fields,
    .donation-template.donation-template--ab-two-column .stripe-card-fields__expiry-cvc {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .donation-template.donation-template--ab-two-column .paypal-button-container,
    .donation-template.donation-template--ab-two-column .paypal-top .paypal-button-container {
        width: 100%;
        overflow: visible;
    }

    /* Keep inline video / featured image inside the text column. */
    .donation-template.donation-template--ab-two-column .content-video-wrapper--right,
    .donation-template.donation-template--ab-two-column .content-video-wrapper--left {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem;
    }

    .donation-template.donation-template--ab-two-column .donation-featured-image {
        float: none;
        display: block;
        max-width: min(100%, var(--ctf-featured-image-max-width, 350px));
        margin: 0 0 1.25rem;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .donation-template.donation-template--ab-two-column {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 1.05fr);
        column-gap: 1.5rem;
        max-width: 100%;
    }

    body.ab-test-two_column_desktop .navless-logo {
        max-width: 100%;
    }

    .donation-template.donation-template--ab-two-column > .donation-ab-form-column,
    .donation-template.donation-template--ab-two-column > .donation-options,
    .donation-template.donation-template--ab-two-column > .donation-form {
        min-width: 400px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .donation-template.donation-template--ab-two-column .donation-header h1 {
        font-size: 2.05rem;
    }

    .donation-template.donation-template--ab-two-column .amount-display {
        font-size: 1rem;
        padding: 0.65rem 0.4rem;
    }
}