.form-lahoda-1 {
    /*
     * Wrapper stays full-width/unconstrained on purpose — .form-lahoda-1__inner is what
     * carries max-width + centering. Same wrapper/inner split as footer-lahoda-1/
     * contact-lahoda-2/table-lahoda-1/divider-lahoda-1 — keeps the door open for a future
     * full-bleed background on this element without touching the centered content.
     */
    width: 100%;
    container-type: inline-size;
}

.form-lahoda-1__inner {
    /*
     * Widened from a fixed 640px to --content-max-width (2026-08-08) — this component now
     * supports an optional side image (.form-lahoda-1__media) next to the form fields, so
     * the whole card needs the extra room even when no image is set, rather than only
     * widening conditionally.
     */
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--container-gutter);
}

@container (min-width: 768px) {
    .form-lahoda-1__inner {
        padding: var(--space-7) var(--container-gutter);
    }
}

.form-lahoda-1__card {
    background: var(--bg-cream-deep);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@container (min-width: 768px) {
    .form-lahoda-1__card {
        flex-direction: row;
        align-items: stretch;
    }
}

.form-lahoda-1__media {
    flex: 1 1 42%;
    min-height: 220px;
}

.form-lahoda-1__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-lahoda-1__content {
    flex: 1 1 58%;
    padding: var(--space-5);
}

@container (min-width: 768px) {
    .form-lahoda-1__content {
        padding: var(--space-6);
    }
}

.form-lahoda-1__heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 26px;
    margin: 0 0 var(--space-2);
}

.form-lahoda-1__intro {
    font-family: var(--font-body);
    color: var(--ink-muted);
    font-size: 14px;
    margin: 0 0 var(--space-5);
}

.form-lahoda-1__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-lahoda-1__legend {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-muted);
    margin: calc(-1 * var(--space-2)) 0 0;
}

.form-lahoda-1__required {
    color: var(--brand-red);
}

.form-lahoda-1__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
}

.form-lahoda-1__field input,
.form-lahoda-1__field textarea {
    font-family: var(--font-body);
    font-size: 14px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-cream);
    resize: vertical;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-lahoda-1__field input:focus-visible,
.form-lahoda-1__field textarea:focus-visible,
.form-lahoda-1__field input:focus,
.form-lahoda-1__field textarea:focus {
    outline: none;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px var(--brand-red-tint);
}

.form-lahoda-1__submit {
    align-self: flex-start;
    font-family: var(--font-body);
    background: var(--brand-red);
    color: var(--bg-cream);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.form-lahoda-1__submit:hover:not(:disabled) {
    background: var(--brand-red-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.form-lahoda-1__submit:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.form-lahoda-1__submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.form-lahoda-1__message {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
    background: var(--success-tint);
    border: 1px solid var(--success);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}

.form-lahoda-1__message:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.form-lahoda-1__message--error {
    color: var(--danger);
    background: var(--danger-tint);
    border-color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
    .form-lahoda-1__field input,
    .form-lahoda-1__field textarea,
    .form-lahoda-1__submit {
        transition: none;
    }
}