/*
 * Donor: sections/home-faq-contact.php (28-faq-contact.css) - two columns,
 * dark lead-form card + content side by side. `--solo` (no bonuses) drops
 * the grid to one centered light card, the look this page used to fall
 * back to when it had no bonuses, before the two blocks merged into one.
 */

.course-offer {
    padding: 3vw 0 4.5vw;
    background: var(--color-surface-muted);
}

.course-offer__grid {
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 3.33vw;
}

.course-offer__grid--solo {
    max-width: 40vw;
    margin: 0 auto;
}

/*
 * `--solo` is the no-bonuses variant: the form stands alone as a LIGHT card,
 * so sections/course-offer.php does not put .lead-card (00-lead-card.css) on
 * it at all and the plain surface is drawn here. Everything else the form
 * needs on white already is the default of 13-lead-form.css.
 */
.course-offer__grid--solo .course-offer__lead,
.course-offer__grid--split .course-offer__lead {
    padding: 2.08vw;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.course-offer__grid--solo .course-offer__lead .lead-form,
.course-offer__grid--split .course-offer__lead .lead-form {
    max-width: none;
}

.course-offer__grid--solo .course-offer__lead .lead-form__agreement,
.course-offer__grid--split .course-offer__lead .lead-form__agreement {
    color: var(--color-text-muted);
}

.course-offer__grid--solo .course-offer__lead .lead-form__submit,
.course-offer__grid--split .course-offer__lead .lead-form__submit {
    box-shadow: 0 0.63vw 1.25vw rgba(230, 57, 70, 0.3);
}

.course-offer__bonuses-title {
    font-size: 1.25vw;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.42vw;
}

.course-offer__bonuses-lead {
    color: var(--color-text-muted);
    margin: 0 0 1.25vw;
}

.course-offer__bonuses-list {
    display: flex;
    flex-direction: column;
    gap: 1.04vw;
}

.course-offer__bonus {
    display: flex;
    gap: 0.94vw;
    padding: 1.04vw;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.course-offer__bonus-icon {
    flex: 0 0 auto;
    padding: 0.63vw;
    border-radius: 50%;
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-accent);
    box-sizing: content-box;
}

.course-offer__bonus-body {
    flex: 1 1 auto;
    min-width: 0;
}

.course-offer__bonus-title {
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.21vw;
}

.course-offer__bonus-author {
    font-size: 0.78vw;
    color: var(--color-text-muted);
    margin: 0 0 0.42vw;
}

.course-offer__bonus-text {
    color: var(--color-text-muted);
    margin: 0;
}

/* The column split is 1:1.2, which no 12-column step reproduces (5/7 shifts
   the bonuses column by ~1%). The row, gutter and mobile stack stay
   Bootstrap; only the exact desktop ratio is restored here. */
@media only screen and (min-width: 768px) {
    .course-offer__grid > .course-offer__lead {
        flex: 0 0 auto;
        width: 45.45%;
    }

    .course-offer__grid > .course-offer__bonuses {
        flex: 0 0 auto;
        width: 54.55%;
    }

    .course-offer__grid--solo > .course-offer__lead {
        width: 100%;
    }

    /* --split: plate and form are equal halves, so the 1:1.2 ratio above
       does not apply - back to the plain col-md-6 the markup carries. */
    .course-offer__grid--split > .course-offer__lead,
    .course-offer__grid--split > .course-offer__about {
        width: 50%;
    }
}

/* Plate beside the form: figures stacked one under another (the plate is half
   the container wide), and the content is centred against the taller form. */
.course-offer__about .course-about-school__plate {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-offer__about .course-about-school__stats {
    margin-bottom: 1.25vw;
}

@media only screen and (max-width: 767.98px) {
    .course-offer {
        padding: 6vw 0 9vw;
    }

    .course-offer__grid {
        --bs-gutter-x: 8vw;
        --bs-gutter-y: 8vw;
    }

    .course-offer__grid--solo {
        max-width: none;
    }

    /* Stacked: no side gutter, so the plate is as wide as the form card
       (whose padding replaces its column gutter). */
    .course-offer__grid--split {
        --bs-gutter-x: 0;
    }

    .course-offer__grid--solo .course-offer__lead,
    .course-offer__grid--split .course-offer__lead {
        padding: 6.4vw;
    }

    .course-offer__bonuses-title {
        font-size: 5.33vw;
        margin: 0 0 1.6vw;
    }

    .course-offer__bonuses-lead {
        margin: 0 0 4vw;
    }

    .course-offer__bonuses-list {
        gap: 4vw;
    }

    .course-offer__bonus {
        gap: 3.2vw;
        padding: 4vw;
    }

    .course-offer__bonus-icon {
        padding: 2.13vw;
    }

    .course-offer__bonus-author {
        font-size: 3.2vw;
    }
}