/*
 * SmartSuli idea intake
 *
 * Form-specific presentation only.
 * Shared controls remain owned by canonical-webform.css.
 * SmartSuli Domain presentation remains owned by css/domains/smartsuli.css.
 */

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form > * {
  grid-column: 1 / -1;
  margin-block: 0;
}

/* Intro: one clear invitation before the questionnaire. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .foundation-webform-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: clamp(1.1rem, 2vw, 1.7rem);
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--foundation-color-text) 3%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--foundation-smartsuli-color-backdrop) 1%,
        transparent
      )
    );
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .foundation-webform-intro > :last-child {
  margin-block-end: 0;
}

/* Contact details form one compact opening row. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-full-name,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-email,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-telephone {
  grid-column: span 4;
}

/* Challenge / idea is the first meaningful choice. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
.form-item-contribution-type,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
fieldset:has(#edit-contribution-type) {
  grid-column: 1 / -1;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
#edit-contribution-type .fieldset-wrapper,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
#edit-contribution-type .form-radios,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
#edit-contribution-type.webform-radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  inline-size: 100%;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
#edit-contribution-type .form-check {
  min-block-size: 3.6rem;
  inline-size: 100%;
  margin: 0;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
#edit-contribution-type .form-check:has(.form-check-input:checked) {
  border-color: color-mix(
    in srgb,
    var(--foundation-smartsuli-color-backdrop) 68%,
    currentColor
  );
  background: color-mix(
    in srgb,
    var(--foundation-smartsuli-color-backdrop) 14%,
    transparent
  );
}

/* Let the short title read like the name of the challenge/idea. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-submission-title {
  grid-column: 1 / -1;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form
.form-item-submission-title input {
  min-block-size: 3.8rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
}

/* Main narrative questions sit together but remain generous writing spaces. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-description,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-affected {
  grid-column: span 6;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-description textarea,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-affected textarea {
  min-block-size: 9rem;
}

/* Optional finishing details are visually lighter and compact. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-location,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-note {
  grid-column: span 6;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-item-note textarea {
  min-block-size: 6rem;
}

/* Keep CAPTCHA and submit action as a deliberate final step. */
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .captcha,
html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-actions {
  grid-column: 1 / -1;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .form-actions {
  padding-block-start: 0.4rem;
}

html.foundation-domain--smartsuli body.path-webform
.webform-submission-smartsuli-idea-form .webform-button--submit {
  min-inline-size: min(100%, 20rem);
}

/* Tablet and narrow layouts collapse naturally into one column. */
@media (max-width: 62rem) {
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-full-name,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-email,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-telephone {
    grid-column: span 6;
  }

  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-telephone {
    grid-column: 1 / -1;
  }
}

@media (max-width: 44rem) {
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-full-name,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-email,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-telephone,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-description,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-affected,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-location,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form .form-item-note {
    grid-column: 1 / -1;
  }

  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form
  #edit-contribution-type .fieldset-wrapper,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form
  #edit-contribution-type .form-radios,
  html.foundation-domain--smartsuli body.path-webform
  .webform-submission-smartsuli-idea-form
  #edit-contribution-type.webform-radios {
    grid-template-columns: 1fr;
  }
}