/* =================================================================== AC27 QUESTION section css =================================================================== */
/* Layout for the "Submit a survey question" Gravity Form (Theme Settings → survey_question).
   Base field styling: global/forms.css + sections/gf-ac.css. This file only arranges the
   form as one "composer" card. Selectors carry .gform_wrapper.gform_wrapper to outrank
   forms.css and Gravity Forms' own theme. */
.ac27-question {
    padding-block: var(--sectionGap);
    background: var(--surface-1);
    scroll-margin-top: var(--sp80);

    & .ac27-question__composer {
        max-width: 1000px;
        margin: var(--sp50) auto 0;
        padding: var(--sp40) var(--sp50);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
        scroll-margin-top: var(--sp100);
    }

    /* question: big, soft writing area (GF field CSS class: gf-ask) */
    & .gform_wrapper.gform_wrapper .gf-ask {
        & .gfield_label { font-size: var(--f18); font-weight: 700; }
        & textarea { height: 180px; padding: var(--sp20) var(--sp25) !important; background-color: var(--surface-1); border-color: transparent; font-size: var(--f20); line-height: 1.5; }
        & textarea:focus { background-color: var(--white); border-color: var(--primary); }
    }

    /* topic chips sit in their own band */
    & .gform_wrapper.gform_wrapper .gf-chips { margin-top: var(--sp10); padding-top: var(--sp30); border-top: 1px solid var(--line); }

    & .gform_wrapper.gform_wrapper .gform_footer { display: flex; justify-content: flex-end; margin-top: var(--sp30); padding-top: var(--sp30); border-top: 1px solid var(--line); }
    & .gform_wrapper.gform_wrapper .gform_footer .gform_button.gform_button { width: auto; min-width: 240px; }

    & .ac27-question__steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g30);
        max-width: 1000px;
        margin: var(--sp50) auto 0;
    }

    & .ac27-question__step {
        padding-top: var(--sp20);
        border-top: 2px solid var(--blue-100);

        & p { font-size: var(--f15); }
    }

    & .ac27-question__step-num { font-size: var(--f14); font-weight: 700; color: var(--primary); }

    & .ac27-question__step-title { margin-block: var(--sp8); font-size: var(--f18); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 767.98px) {
    .ac27-question {
        & .ac27-question__composer { padding: var(--sp25) var(--sp20); }
        & .gform_wrapper.gform_wrapper .gf-ask textarea { font-size: var(--f18); }
        & .gform_wrapper.gform_wrapper .gform_footer .gform_button.gform_button { width: 100%; }
        & .ac27-question__steps { grid-template-columns: 1fr; gap: var(--sp20); }
    }
}