/**
 * LeadHog Forms - Frontend Styles
 * Layout only - form field styling is handled by the theme
 */

/* Base form container - inherit width from parent container */
.leadhog-form-block {
    display: block;
    box-sizing: border-box;
}

/* Form grid layout - isolated from parent containers */
.leadhog-form-block .lead-hog {
    display: grid !important;
    gap: 1.5rem;
    width: 100%;
}

/* Layout variants */
.leadhog-layout-1col .lead-hog {
    grid-template-columns: 1fr !important;
}

.leadhog-layout-2col .lead-hog {
    grid-template-columns: repeat(2, 1fr) !important;
}

.leadhog-layout-3col .lead-hog {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Form field wrapper */
.leadhog-form-block .lead-hog > div {
    display: flex;
    flex-direction: column;
}

/* Full-width elements - Headings always span full width */
.leadhog-form-block .lead-hog > div:has(.leadhog-heading) {
    grid-column: 1 / -1;
}

/* Intro paragraph spans full width */
.leadhog-form-block .leadhog-p {
    grid-column: 1 / -1;
}

/* Textarea fields span full width (when enabled) */
.leadhog-textareas-full .lead-hog > div:has(textarea) {
    grid-column: 1 / -1;
}

/* Submit button container spans full width */
.leadhog-form-block .lead-hog > div:has(.leadhog-submit) {
    grid-column: 1 / -1;
}

/* Hidden fields - honeypot (must hide for layout) */
.leadhog-form-block .lead-hog > div[aria-hidden="true"] {
    grid-column: 1 / -1;
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.leadhog-form-block .lh-req-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Responsive - collapse to single column on mobile */
@media (max-width: 768px) {
    .leadhog-layout-2col .lead-hog,
    .leadhog-layout-3col .lead-hog {
        grid-template-columns: 1fr !important;
    }
    
    /* Reset full-width overrides since everything is single column */
    .leadhog-textareas-full .lead-hog > div:has(textarea),
    .leadhog-form-block .lead-hog > div:has(.leadhog-submit),
    .leadhog-form-block .lead-hog > div:has(.leadhog-heading),
    .leadhog-form-block .leadhog-p {
        grid-column: auto !important;
    }
}