/*
 * paragraph--webform
 *
 * Wraps a referenced Drupal Webform with optional heading and intro copy.
 * Form controls themselves are themed by css/components/webform.css
 * (already in the global library).
 */

.doghouse-webform {
  --dh-webform-accent: var(--dh-accent, var(--site-color-amber));
  padding-block: var(--site-space-section, 4rem);
}

.doghouse-webform .webform-submission-form {
  padding: 0;
}

/* Drive both component-local and shared accent (--dh-accent powers
   .dh-section-eyebrow) so the badge tints with the chosen color. */
.doghouse-webform--accent-amber { --dh-accent: var(--site-color-amber);   --dh-webform-accent: var(--site-color-amber); }
.doghouse-webform--accent-coral { --dh-accent: var(--site-color-coral);   --dh-webform-accent: var(--site-color-coral); }
.doghouse-webform--accent-pink  { --dh-accent: var(--site-color-pink);    --dh-webform-accent: var(--site-color-pink); }
.doghouse-webform--accent-teal  { --dh-accent: var(--site-color-primary); --dh-webform-accent: var(--site-color-primary); }

.doghouse-webform__inner {
  max-width: var(--site-container-narrow, 48rem);
  margin-inline: auto;
  padding-inline: var(--site-space-container, 1.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-space-xl, 2.5rem);
  align-items: start;
}

.doghouse-webform__header {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-sm);
  margin-bottom: var(--site-space-lg, 2rem);
}

.doghouse-webform__eyebrow {
  display: block;
}

.doghouse-webform__heading {
  margin: 0;
}

.doghouse-webform__intro {
  margin-bottom: var(--site-space-md, 1.5rem);
  color: var(--site-color-text-muted, inherit);
}

.doghouse-webform__form {
  margin-top: var(--site-space-md, 1.5rem);
}

/* ============================================
   LAYOUT VARIANTS
   default — text stacked above form (current behaviour)
   text_left — text column left, form column right
   text_right — text column right, form column left
   ============================================ */

.doghouse-webform--text_left .doghouse-webform__inner,
.doghouse-webform--text_right .doghouse-webform__inner {
  max-width: var(--site-container-max-width);
}

@media (min-width: 768px) {
  .doghouse-webform--text_left .doghouse-webform__inner,
  .doghouse-webform--text_right .doghouse-webform__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--site-space-xl), 5vw, var(--site-space-3xl));
  }
}

/* In two-column variants the form sits beside the text, so the top margin
   that adds breathing room in the stacked variant is not needed. */
.doghouse-webform--text_left .doghouse-webform__form,
.doghouse-webform--text_right .doghouse-webform__form {
  margin-top: 0;
}

/* text_right: text appears on the right, form on the left.
   DOM order is text-then-form (default), so reorder visually on >=768px. */
@media (min-width: 768px) {
  .doghouse-webform--text_right .doghouse-webform__text {
    order: 2;
  }

  .doghouse-webform--text_right .doghouse-webform__form {
    order: 1;
  }
}