.hl-public-form {
    min-width: 0;
}

.hl-public-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hl-public-space-lg) var(--hl-public-space-xl);
}

.hl-public-field {
    width: 100%;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--hl-public-space-sm);
}

/* Existing public contact forms use label as the field container. */
.hl-public-form > label,
.hl-public-form .hl-public-field {
    width: 100%;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--hl-public-space-sm);
}

.hl-public-field--compact { max-width: var(--hl-public-field-width-compact); }
.hl-public-field--small { max-width: var(--hl-public-field-width-small); }
.hl-public-field--medium { max-width: var(--hl-public-field-width-medium); }
.hl-public-field--large { max-width: var(--hl-public-field-width-large); }
.hl-public-field--full,
.hl-public-form > .full { grid-column: 1 / -1; }

.hl-public-field > label,
label.hl-public-field {
    color: var(--hl-public-text);
    font-weight: 500;
}

.hl-public-field input:not([type="checkbox"]):not([type="radio"]),
.hl-public-field select,
.hl-public-field textarea,
.hl-public-form > label input:not([type="checkbox"]):not([type="radio"]),
.hl-public-form > label select,
.hl-public-form > label textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--hl-public-border);
    border-radius: var(--hl-public-radius);
    background: var(--hl-public-surface);
    color: var(--hl-public-text);
    font: inherit;
    outline: 0;
}

.hl-public-field input:not([type="checkbox"]):not([type="radio"]),
.hl-public-field select,
.hl-public-form > label input:not([type="checkbox"]):not([type="radio"]),
.hl-public-form > label select {
    min-height: var(--hl-public-control-height);
    padding: 0 var(--hl-public-space-md);
}

.hl-public-field textarea,
.hl-public-form > label textarea {
    min-height: 112px;
    padding: var(--hl-public-space-md);
    line-height: 1.65;
    resize: vertical;
}

.hl-public-field input:focus,
.hl-public-field select:focus,
.hl-public-field textarea:focus,
.hl-public-form > label input:focus,
.hl-public-form > label select:focus,
.hl-public-form > label textarea:focus {
    border-color: var(--hl-public-brand);
    box-shadow: 0 0 0 2px rgba(207, 23, 45, 0.12);
}

.hl-public-field__help { color: var(--hl-public-text-secondary); font-size: 12px; }
.hl-public-field__error { color: var(--hl-public-error); font-size: 12px; }

@media (max-width: 767px) {
    .hl-public-form-grid { grid-template-columns: minmax(0, 1fr); }
    .hl-public-field--compact,
    .hl-public-field--small,
    .hl-public-field--medium,
    .hl-public-field--large,
    .hl-public-field--full,
    .hl-public-form > .full { grid-column: 1; }

    .hl-public-field--compact,
    .hl-public-field--small,
    .hl-public-field--medium,
    .hl-public-field--large { max-width: none; }
}