/* Shared by campaign flash reminders and spring-subscribe.
   Klaviyo may render separate mobile rows even when desktop uses one row.
   Adapt only the simple email/button layout; never size the anonymous host divs
   (which also include the 1px live announcer) or constrain a form's height. */
.campaign-email-signup {
  width: 100%;
  min-width: 0;
}

.campaign-email-signup
  form
  > div:has(> [data-testid='form-row'] input[type='email']):has(
    > [data-testid='form-row'] button
  ):not(:has(input:not([type='email'], [type='submit'], [type='hidden']), select, textarea)) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) fit-content(45%);
  align-items: start;
  gap: 0 var(--campaign-signup-gap, 8px);
  min-width: 0 !important;
  min-height: 0 !important;

  /* Text/consent rows stay intact and take the full width. */
  > [data-testid='form-row'] {
    grid-column: 1 / -1;
    min-width: 0;
  }

  > [data-testid='form-row']:has(input[type='email'], button) {
    display: contents !important;
  }

  > [data-testid='form-row'] > [data-testid='form-component']:has(input[type='email']) {
    grid-column: 1;
    grid-row: 1;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  > [data-testid='form-row'] > [data-testid='form-component']:has(button) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  input[type='email'] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--campaign-signup-control-min-height, 50px);
    padding-block: 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}