/* Batch 4 compatibility for the protected RC70 Reader Magnet presets.
 * Preserve documented legacy design variables and keep card / inline / minimal
 * behavior distinct while still allowing the new Last name field to participate.
 *
 * This layer intentionally loads after reader-growth-public-experience.css. The
 * Batch 4 visual defaults may modernize untouched sites, but any existing site
 * override of RC70's documented --irg-* variables must remain authoritative.
 */

.irg-signup-form {
    --irg-public-accent: var(--irg-reader-growth-accent, var(--irg-accent, #242424));
    --irg-public-border: var(--irg-reader-growth-border, var(--irg-border, rgba(127, 127, 127, .24)));
    --irg-public-surface: var(--irg-reader-growth-surface, var(--irg-form-bg, #fff));
    --irg-public-input-bg: var(--irg-reader-growth-input-bg, var(--irg-input-bg, #fff));
    --irg-public-button-text: var(--irg-reader-growth-button-text, var(--irg-button-color, #fff));
    --irg-public-shadow: var(--irg-reader-growth-shadow, var(--irg-form-shadow, 0 14px 38px rgba(15, 23, 42, .08)));

    width: var(--irg-form-width, 100%);
    max-width: var(--irg-form-max-width, 560px);
    margin: var(--irg-form-margin, 0);
    padding: var(--irg-form-padding, clamp(20px, 4vw, 32px));
    border-width: var(--irg-form-border-width, 1px);
    border-style: var(--irg-form-border-style, solid);
    border-color: var(--irg-form-border-color, var(--irg-public-border));
    border-radius: var(--irg-form-radius, 18px);
    background: var(--irg-form-bg, var(--irg-public-surface));
    color: var(--irg-form-text, inherit);
    box-shadow: var(--irg-form-shadow, var(--irg-public-shadow));
    text-align: var(--irg-form-text-align, left);
    font-family: var(--irg-body-font-family, inherit);
    font-size: var(--irg-body-font-size, inherit);
    font-weight: var(--irg-body-font-weight, 400);
    line-height: var(--irg-body-line-height, 1.5);
}

.irg-signup-form .irg-signup-heading {
    margin: var(--irg-heading-margin, 0 0 8px);
    color: var(--irg-heading-color, var(--irg-form-text, inherit));
    font-family: var(--irg-heading-font-family, inherit);
    font-size: var(--irg-heading-font-size, clamp(1.35rem, 2.4vw, 1.8rem));
    font-weight: var(--irg-heading-font-weight, 700);
    line-height: var(--irg-heading-line-height, 1.15);
    letter-spacing: var(--irg-heading-letter-spacing, normal);
    text-transform: var(--irg-heading-text-transform, none);
}

.irg-signup-form .irg-signup-description {
    margin: var(--irg-description-margin, 0 0 16px);
    color: var(--irg-description-color, var(--irg-form-muted, inherit));
    font-family: var(--irg-description-font-family, inherit);
    font-size: var(--irg-description-font-size, inherit);
    font-weight: var(--irg-description-font-weight, 400);
    line-height: var(--irg-description-line-height, 1.5);
    opacity: 1;
}

.irg-signup-form .irg-signup-field {
    margin: var(--irg-field-gap, 14px) 0 0;
}

.irg-signup-form .irg-signup-label {
    margin: var(--irg-label-margin, 0 0 7px);
    color: var(--irg-label-color, var(--irg-form-text, inherit));
    font-family: var(--irg-label-font-family, inherit);
    font-size: var(--irg-label-font-size, inherit);
    font-weight: var(--irg-label-font-weight, 700);
    line-height: var(--irg-label-line-height, 1.35);
}

.irg-signup-form .irg-signup-input[type="text"],
.irg-signup-form .irg-signup-input[type="email"] {
    width: 100%;
    min-height: var(--irg-input-min-height, 44px);
    padding: var(--irg-input-padding, 12px 14px);
    border-width: var(--irg-input-border-width, 1px);
    border-style: var(--irg-input-border-style, solid);
    border-color: var(--irg-input-border-color, var(--irg-form-border-color, var(--irg-public-border)));
    border-radius: var(--irg-input-radius, 12px);
    background: var(--irg-input-bg, var(--irg-public-input-bg));
    color: var(--irg-input-text, var(--irg-form-text, inherit));
    font-family: var(--irg-input-font-family, inherit);
    font-size: var(--irg-input-font-size, 16px);
    font-weight: var(--irg-input-font-weight, 400);
    line-height: var(--irg-input-line-height, 1.4);
    box-shadow: var(--irg-input-shadow, none);
}

.irg-signup-form .irg-signup-input[type="text"]:focus,
.irg-signup-form .irg-signup-input[type="email"]:focus {
    outline: 0;
    border-color: var(--irg-input-focus-color, var(--irg-public-accent));
    box-shadow: var(--irg-input-focus-shadow, 0 0 0 2px color-mix(in srgb, var(--irg-public-accent) 25%, transparent));
}

.irg-signup-form .irg-signup-consent {
    margin: var(--irg-consent-margin, 14px 0 0);
    color: var(--irg-consent-color, var(--irg-form-muted, inherit));
    font-family: var(--irg-consent-font-family, inherit);
    font-size: var(--irg-consent-font-size, inherit);
    font-weight: var(--irg-consent-font-weight, 700);
    line-height: var(--irg-consent-line-height, 1.45);
    opacity: 1;
}

.irg-signup-form .irg-signup-consent-label {
    color: var(--irg-consent-color, var(--irg-form-muted, inherit));
    font-family: var(--irg-consent-font-family, inherit);
    font-size: var(--irg-consent-font-size, inherit);
    font-weight: var(--irg-consent-font-weight, 700);
    line-height: var(--irg-consent-line-height, 1.45);
}

.irg-signup-form .irg-signup-consent input[type="checkbox"] {
    width: var(--irg-checkbox-size, 16px);
    height: var(--irg-checkbox-size, 16px);
    accent-color: var(--irg-checkbox-accent, var(--irg-public-accent));
}

.irg-signup-form .irg-signup-button {
    width: var(--irg-button-width, fit-content);
    min-height: var(--irg-button-min-height, 44px);
    margin: var(--irg-button-margin, 12px 0 0);
    padding: var(--irg-button-padding, 13px 22px);
    border-width: var(--irg-button-border-width, 0);
    border-style: var(--irg-button-border-style, solid);
    border-color: var(--irg-button-border-color, transparent);
    border-radius: var(--irg-button-radius, 999px);
    background: var(--irg-button-bg, var(--irg-public-accent));
    color: var(--irg-button-color, var(--irg-public-button-text));
    font-family: var(--irg-button-font-family, inherit);
    font-size: var(--irg-button-font-size, inherit);
    font-weight: var(--irg-button-font-weight, 800);
    line-height: var(--irg-button-line-height, 1.2);
    letter-spacing: var(--irg-button-letter-spacing, normal);
    text-transform: var(--irg-button-text-transform, none);
    box-shadow: var(--irg-button-shadow, none);
}

.irg-signup-form .irg-signup-button:hover,
.irg-signup-form .irg-signup-button:focus-visible {
    background: var(--irg-button-hover-bg, var(--irg-button-bg, var(--irg-public-accent)));
    color: var(--irg-button-hover-color, var(--irg-button-color, var(--irg-public-button-text)));
    box-shadow: var(--irg-button-hover-shadow, var(--irg-button-shadow, none));
    transform: var(--irg-button-hover-transform, none);
    filter: var(--irg-button-hover-filter, brightness(.96));
}

/* Card is the default RC70 preset. Repeat its container properties at the same
 * specificity as Batch 4's mobile rules so site-level --irg-form-* overrides
 * remain authoritative at every breakpoint, including <=899px and <=520px. */
.irg-signup-form.irg-layout-card {
    width: var(--irg-form-width);
    max-width: var(--irg-form-max-width);
    margin: var(--irg-form-margin);
    padding: var(--irg-form-padding);
    border: var(--irg-form-border-width) var(--irg-form-border-style) var(--irg-form-border-color);
    border-radius: var(--irg-form-radius);
    background: var(--irg-form-bg);
    color: var(--irg-form-text);
    box-shadow: var(--irg-form-shadow);
    text-align: var(--irg-form-text-align);
}

/* Minimal is intentionally borderless/flat in RC70. The main Batch 4 public
 * layer must not silently turn this stable preset back into a card. */
.irg-signup-form.irg-layout-minimal {
    width: var(--irg-form-width);
    max-width: var(--irg-form-max-width);
    margin: var(--irg-form-margin);
    padding: var(--irg-form-padding);
    border: var(--irg-form-border-width) var(--irg-form-border-style) var(--irg-form-border-color);
    border-radius: var(--irg-form-radius);
    background: var(--irg-form-bg);
    color: var(--irg-form-text);
    box-shadow: var(--irg-form-shadow);
    text-align: var(--irg-form-text-align);
}

/* Inline remains an inline preset rather than becoming the same five-column
 * card grid as every other Reader Magnet layout. RC70 stacks inline only at
 * 720px and below; preserve that breakpoint while adding the Last Name column. */
.irg-signup-form.irg-layout-inline {
    width: var(--irg-form-width);
    max-width: var(--irg-form-max-width);
    margin: var(--irg-form-margin);
    padding: var(--irg-form-padding);
    border: var(--irg-form-border-width) var(--irg-form-border-style) var(--irg-form-border-color);
    border-radius: var(--irg-form-radius);
    background: var(--irg-form-bg);
    color: var(--irg-form-text);
    box-shadow: var(--irg-form-shadow);
    text-align: var(--irg-form-text-align);
}

@media (min-width: 721px) {
    .irg-signup-form.irg-layout-inline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: 10px;
        align-items: end;
    }

    .irg-signup-form.irg-layout-inline > .irg-notice,
    .irg-signup-form.irg-layout-inline > .irg-signup-heading,
    .irg-signup-form.irg-layout-inline > .irg-signup-description,
    .irg-signup-form.irg-layout-inline > .irg-signup-consent {
        grid-column: 1 / -1;
    }

    .irg-signup-form.irg-layout-inline > .irg-signup-field-first-name {
        grid-column: 1;
    }

    .irg-signup-form.irg-layout-inline > .irg-signup-field-last-name {
        grid-column: 2;
    }

    .irg-signup-form.irg-layout-inline > .irg-signup-field-email {
        grid-column: 3;
    }

    .irg-signup-form.irg-layout-inline > .irg-signup-button {
        grid-column: 4;
        width: var(--irg-button-width, fit-content);
        margin: var(--irg-button-margin, 0);
        justify-self: start;
    }

    .irg-signup-form.irg-layout-inline > .irg-signup-field {
        margin: 0;
    }
}

@media (max-width: 720px) {
    .irg-signup-form .irg-signup-button {
        width: var(--irg-button-width, 100%);
    }
}