/**
 * SMM trial form block.
 *
 * Values mirror the Tilda original (bebestschool.es/smm/valentina, record
 * rec2013151523): a 740 px #f26699 band on a 1200 px grid, a cut-out photo
 * about 368 px wide standing on the band's bottom edge at the grid's left,
 * and a 758 px #ff5c00 card with a 15 px radius 40 px from the top, its right
 * edge 31 px in from the grid's.
 *
 * Inside the card: a 30 px/1.2 heading (900), a 20 px/1.2 line, two ticked
 * points and a 515 px form. The card's contents are the Trial class block's
 * own markup and styles (inc/blocks/trial-class); the rules below only resize
 * them, and are written one class deeper so they win whichever stylesheet
 * loads first.
 *
 *   960  the card, 768 px, is centred and hides the photo; form 360 px
 *   640  the card fills the screen with a 26 px radius; form 380 px
 *   480  points stacked, fields 40 px tall and 10 px apart; form 440 px
 *   320  heading 26 px, line 14 px, points 16 px; form 305 px
 */

.bbs-smm-trial {
    --bbs-smm-trial-bg: #f26699;
    --bbs-smm-trial-card-bg: #ff5c00;
    --bbs-smm-trial-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --bbs-smm-trial-grid: 1200px;
    --bbs-smm-trial-gutter: 20px;
    --bbs-smm-trial-height: 740px;
    --bbs-smm-trial-card: 758px;
    --bbs-smm-trial-card-right: 31px;
    --bbs-smm-trial-radius: 15px;
    --bbs-smm-trial-photo: 368px;

    background: var(--bbs-smm-trial-bg);
    font-family: var(--bbs-smm-trial-font);
}

.bbs-smm-trial *,
.bbs-smm-trial *::before,
.bbs-smm-trial *::after {
    box-sizing: border-box;
}

.bbs-smm-trial--purple { --bbs-smm-trial-bg: #a40acf; }
.bbs-smm-trial--white  { --bbs-smm-trial-bg: #ffffff; }

/* In the trial class popup the section floats over the blurred page. */
.bbs-smm-trial--none   { --bbs-smm-trial-bg: transparent; }

.bbs-smm-trial__inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: min(100% - var(--bbs-smm-trial-gutter) * 2, var(--bbs-smm-trial-grid));
    min-height: var(--bbs-smm-trial-height);
    margin: 0 auto;
    padding: 40px 0 24px;
}

/* ── Photo ── */

.bbs-smm-trial__photo {
    position: absolute;
    left: 10px;
    bottom: 0;
    z-index: 0;
    display: block;
    width: var(--bbs-smm-trial-photo);
    max-width: none;
    height: auto;
    pointer-events: none;
}

/* An upload with transparent margins: the frame is the figure's size and the
 * image sits inside it, shifted and scaled so the margins fall outside
 * (the offsets are set inline, from the measured figure). */
.bbs-smm-trial__photo--cropped {
    overflow: hidden;
}

.bbs-smm-trial__photo-img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
}

/* ── Card ── */

.bbs-smm-trial__card {
    position: relative;
    z-index: 1;
    width: min(100%, var(--bbs-smm-trial-card));
    margin-right: var(--bbs-smm-trial-card-right);
    overflow: hidden;
    border-radius: var(--bbs-smm-trial-radius);
    background: var(--bbs-smm-trial-card-bg);
}

/* ── The Trial class contents, resized to this record ── */

.bbs-smm-trial .bbs-trial-class {
    --bbs-trial-class-form: 515px;

    padding: 10px 24px 23px;
    background: transparent;
}

.bbs-smm-trial .bbs-trial-class__inner {
    max-width: none;
    padding: 0;
}

.bbs-smm-trial .bbs-trial-class__title {
    font-size: 30px;
    font-weight: 900;
}

.bbs-smm-trial .bbs-trial-class__subtitle {
    max-width: 503px;
    margin: 11px auto 0;
    font-size: 20px;
}

.bbs-smm-trial .bbs-trial-class__points {
    column-gap: 120px;
    margin-top: 6px;
}

/* On the 1200 grid the original breaks the second point over two lines. */
@media (min-width: 1200px) {
    .bbs-smm-trial .bbs-trial-class__point-text {
        max-width: 316px;
    }
}

.bbs-smm-trial .bbs-trial-class__form {
    margin-top: 10px;
}

/* ── 960 grid: the card is centred over the photo ── */

@media (max-width: 1199px) {
    .bbs-smm-trial {
        --bbs-smm-trial-grid: 960px;
        --bbs-smm-trial-height: 760px;
        --bbs-smm-trial-card: 768px;
        --bbs-smm-trial-card-right: 0px;
    }

    .bbs-smm-trial__inner {
        justify-content: center;
        padding: 33px 0 35px;
    }

    .bbs-smm-trial__photo {
        display: none;
    }

    .bbs-smm-trial .bbs-trial-class {
        --bbs-trial-class-form: 360px;

        padding-top: 17px;
    }
}

/* ── The card fills the screen ── */

@media (max-width: 959px) {
    .bbs-smm-trial {
        --bbs-smm-trial-grid: 640px;
        --bbs-smm-trial-gutter: 3px;
        --bbs-smm-trial-height: 0px;
        --bbs-smm-trial-card: 100%;
        --bbs-smm-trial-radius: 26px;
    }

    .bbs-smm-trial__inner {
        padding: 24px 0 28px;
    }

    .bbs-smm-trial .bbs-trial-class {
        --bbs-trial-class-form: 380px;

        padding: 17px 20px 30px;
    }

    .bbs-smm-trial .bbs-trial-class__title {
        font-size: 26px;
    }

    .bbs-smm-trial .bbs-trial-class__subtitle {
        max-width: 561px;
        font-size: 22px;
    }

    .bbs-smm-trial .bbs-trial-class__points {
        column-gap: 40px;
    }
}

/* ── Phones: points stacked, tighter fields ── */

@media (max-width: 639px) {
    .bbs-smm-trial {
        --bbs-smm-trial-gutter: 10px;
    }

    .bbs-smm-trial__inner {
        padding: 29px 0 35px;
    }

    .bbs-smm-trial .bbs-trial-class {
        --bbs-trial-class-form: 440px;

        padding: 14px 10px 26px;
    }

    .bbs-smm-trial .bbs-trial-class__subtitle {
        max-width: 400px;
        font-size: 20px;
    }

    .bbs-smm-trial .bbs-trial-class__points {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .bbs-smm-trial .bbs-trial-class__point {
        font-size: 20px;
    }

    .bbs-smm-trial .bbs-trial-class__form input[type="text"],
    .bbs-smm-trial .bbs-trial-class__form input[type="email"],
    .bbs-smm-trial .bbs-trial-class__form input[type="tel"],
    .bbs-smm-trial .bbs-trial-class__form input[type="url"],
    .bbs-smm-trial .bbs-trial-class__form input[type="number"],
    .bbs-smm-trial .bbs-trial-class__form input[type="date"],
    .bbs-smm-trial .bbs-trial-class__form select {
        height: 40px;
        margin-bottom: 10px;
    }

    .bbs-smm-trial .bbs-trial-class__form .wpcf7-form .bbs-form-note {
        margin-bottom: 8px;
    }

    .bbs-smm-trial .bbs-trial-class__form .wpcf7-acceptance .wpcf7-list-item,
    .bbs-smm-trial .bbs-trial-class__form .wpcf7-checkbox .wpcf7-list-item {
        margin-bottom: 10px;
    }
}

@media (max-width: 479px) {
    .bbs-smm-trial {
        --bbs-smm-trial-gutter: 0px;
    }

    .bbs-smm-trial__inner {
        padding: 13px 0 40px;
    }

    .bbs-smm-trial .bbs-trial-class {
        --bbs-trial-class-form: 305px;

        padding: 25px 8px 24px;
    }

    .bbs-smm-trial .bbs-trial-class__title {
        font-size: 26px;
    }

    .bbs-smm-trial .bbs-trial-class__subtitle {
        max-width: 262px;
        font-size: 14px;
    }

    .bbs-smm-trial .bbs-trial-class__point {
        font-size: 16px;
    }
}