/**
 * Inline / shortcode embedded forms — match template card size (max 720px), not full page width.
 */
.ysleadgen-form {
    container-type: inline-size;
    container-name: ysleadgen-embed;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
    margin: 1.5rem 0;
    isolation: isolate;
}

.ysleadgen-form *,
.ysleadgen-form *::before,
.ysleadgen-form *::after {
    box-sizing: border-box;
}

/* Theme resets — only inside the form fields column, not the outer layout wrapper */
.ysleadgen-form .grow-form form,
.ysleadgen-form .help-form form,
.ysleadgen-form .responsive-section form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.ysleadgen-form input,
.ysleadgen-form textarea,
.ysleadgen-form select,
.ysleadgen-form button {
    max-width: 100%;
    box-sizing: border-box !important;
}

.ysleadgen-form img {
    max-width: 100%;
    display: block;
}

/* Card shell — same max width as template JSON (720px desktop, 380px mobile) */
.ysleadgen-form .grow-section,
.ysleadgen-form .help-section,
.ysleadgen-form .responsive-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    margin: 0 auto 1.5rem auto !important;
    overflow: hidden;
}

.ysleadgen-form .grow-form,
.ysleadgen-form .grow-image,
.ysleadgen-form .help-form,
.ysleadgen-form .help-image,
.ysleadgen-form .responsive-section .left-column,
.ysleadgen-form .responsive-section .right-column {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    width: auto !important;
}

.ysleadgen-form .grow-image img,
.ysleadgen-form .help-image img,
.ysleadgen-form .responsive-section .right-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Narrow content column: stack like template @media (max-width: 768px) */
@container ysleadgen-embed (max-width: 719px) {
    .ysleadgen-form .grow-section,
    .ysleadgen-form .help-section,
    .ysleadgen-form .responsive-section {
        flex-direction: column !important;
        max-width: 380px !important;
    }

    .ysleadgen-form .grow-image,
    .ysleadgen-form .help-image,
    .ysleadgen-form .responsive-section .right-column {
        order: -1 !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 140px !important;
        min-height: 140px;
    }

    .ysleadgen-form .grow-form,
    .ysleadgen-form .help-form,
    .ysleadgen-form .responsive-section .left-column {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Viewport fallback when container queries are unsupported */
@supports not (container-type: inline-size) {
    @media screen and (max-width: 768px) {
        .ysleadgen-form .grow-section,
        .ysleadgen-form .help-section,
        .ysleadgen-form .responsive-section {
            flex-direction: column !important;
            max-width: 380px !important;
        }

        .ysleadgen-form .grow-image,
        .ysleadgen-form .help-image {
            order: -1 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 140px !important;
        }

        .ysleadgen-form .grow-form,
        .ysleadgen-form .help-form {
            width: 100% !important;
            max-width: 100% !important;
        }
    }
}